/**
 * DLA — video ad breaks.
 * The overlay sits inside .dla-video-wrap, on top of the Vimeo iframe.
 */
.dla-video-wrap{position:relative;}

.dlaad{
  --acc:#b59458; --acc-2:#cdac6c; --ink:#f1ece1; --muted:#aebfb4;
  position:absolute; inset:0; z-index:30;
  display:flex; align-items:center; justify-content:center;
  background:rgba(3,9,7,.94);
  font-family:'DM Sans',sans-serif;
  animation:dlaadIn .28s cubic-bezier(.22,.61,.36,1);
}
@keyframes dlaadIn{from{opacity:0;}to{opacity:1;}}
.dlaad *{box-sizing:border-box;}

.dlaad-inner{
  width:100%; height:100%;
  display:flex; flex-direction:column;
  padding:18px 22px;
}

.dlaad-eyebrow{
  flex:0 0 auto;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--acc); margin-bottom:10px;
}

.dlaad-stage{
  flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
}

/* video spot */
.dlaad-video{
  width:100%; height:100%;
  border:0; display:block; background:#000;
  object-fit:contain;
}

/* card spot */
.dlaad-card{
  display:flex; align-items:center; gap:22px;
  width:100%; height:100%;
}
.dlaad-card img{
  max-width:46%; max-height:100%;
  object-fit:contain; border-radius:6px; display:block;
}
.dlaad-copy{flex:1 1 auto; min-width:0;}
.dlaad-copy h3{
  font-family:'Marcellus','Cormorant Garamond',serif !important;
  font-size:clamp(20px,2.6vw,30px) !important;
  font-weight:600 !important; line-height:1.15 !important;
  color:var(--ink) !important; margin:0 0 10px !important;
  text-transform:none !important;
}
.dlaad-copy p{
  font-size:15px; line-height:1.7; font-weight:300;
  color:var(--muted); margin:0 0 8px;
}

.dlaad-foot{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:14px;
}

.dlaad-cta,
.dlaad-skip{
  display:inline-flex; align-items:center; justify-content:center;
  font:500 12px 'DM Sans',sans-serif !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  padding:12px 22px !important; border-radius:6px !important;
  cursor:pointer; text-decoration:none !important;
  height:auto !important; min-width:0 !important; box-shadow:none !important;
  transition:all .25s cubic-bezier(.22,.61,.36,1);
}
.dlaad-cta{
  background:var(--acc) !important; color:#04100c !important;
  border:1px solid var(--acc) !important;
}
.dlaad-cta:hover{background:var(--acc-2) !important; transform:translateY(-1px);}
.dlaad-skip{
  background:transparent !important; color:var(--muted) !important;
  border:1px solid rgba(241,236,225,.28) !important;
  margin-left:auto;
}
.dlaad-skip:disabled{opacity:.55; cursor:default;}
.dlaad-skip:not(:disabled):hover{
  border-color:var(--acc) !important; color:var(--ink) !important;
}

/* Phones: 16px floor, and the card stacks so the copy is not squeezed. */
@media (max-width:640px){
  .dlaad-inner{padding:12px 14px;}
  .dlaad-eyebrow{font-size:16px; letter-spacing:.1em; margin-bottom:8px;}
  .dlaad-card{flex-direction:column; gap:12px; overflow-y:auto;}
  .dlaad-card img{max-width:100%; max-height:42%;}
  .dlaad-copy h3{font-size:22px !important;}
  .dlaad-copy p{font-size:16px; line-height:1.6;}
  .dlaad-foot{flex-direction:column; align-items:stretch; gap:8px;}
  .dlaad-cta, .dlaad-skip{
    font-size:16px !important; letter-spacing:.06em !important;
    padding:14px 18px !important; width:100%; margin-left:0 !important;
  }
}
/* Short players leave little room — drop the image and keep the message. */
@media (max-height:420px){
  .dlaad-card img{display:none;}
  .dlaad-copy p{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .dlaad,.dlaad *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}


/* -----------------------------------------------------------------------
   Fullscreen on our own wrapper
   The wrapper normally holds its shape with the padding-bottom ratio trick.
   In fullscreen that would leave the video letterboxed inside a 16:9 box on
   a screen of a different shape, so it becomes a plain full-size stage.
   ----------------------------------------------------------------------- */
.dla-video-wrap:fullscreen,
.dla-video-wrap:-webkit-full-screen{
  width:100vw !important; height:100vh !important;
  padding-bottom:0 !important;
  background:#000 !important;
}
.dla-video-wrap:fullscreen > iframe,
.dla-video-wrap:fullscreen > video,
.dla-video-wrap:-webkit-full-screen > iframe,
.dla-video-wrap:-webkit-full-screen > video{
  position:absolute !important;
  top:0 !important; left:0 !important;
  width:100% !important; height:100% !important;
}
/* The ad layer rides along inside the fullscreen element. */
.dla-video-wrap:fullscreen .dlaad,
.dla-video-wrap:-webkit-full-screen .dlaad{position:absolute; inset:0;}
/* More room on a full screen, so the copy can breathe. */
.dla-video-wrap:fullscreen .dlaad-inner,
.dla-video-wrap:-webkit-full-screen .dlaad-inner{
  padding:clamp(20px,4vh,48px) clamp(24px,6vw,80px);
}


/* While a spot is on screen the player chrome steps back — the viewer should
   not be able to scrub past the ad from the bar underneath it. */
.dlaad-on .dlapl{opacity:0 !important; pointer-events:none !important;}


/* -----------------------------------------------------------------------
   Full-bleed spots
   The image (or the ad clip) uses the whole player. `contain` rather than
   `cover`, so a designed banner is never cropped — it grows until it meets
   the edges of the player.
   ----------------------------------------------------------------------- */
.dlaad.is-fill .dlaad-inner{padding:0;}
.dlaad.is-fill .dlaad-stage{padding:0;}
.dlaad.is-fill .dlaad-eyebrow{
  position:absolute; top:0; left:0; right:0; z-index:2;
  margin:0; padding:12px 18px;
  background:linear-gradient(to bottom,rgba(0,0,0,.75),transparent);
}
.dlaad.is-fill .dlaad-foot{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  margin:0; padding:14px 18px;
  background:linear-gradient(to top,rgba(0,0,0,.8),transparent);
}
.dlaad-card.is-fill{display:block; width:100%; height:100%; position:relative;}
.dlaad-card.is-fill img{
  max-width:100%; max-height:100%;
  width:100%; height:100%;
  object-fit:contain; border-radius:0; display:block;
}
/* Copy sitting on a full-bleed image needs its own footing. */
.dlaad-card.is-fill .dlaad-copy{
  position:absolute; left:0; right:0; bottom:56px;
  padding:0 18px; text-shadow:0 2px 14px rgba(0,0,0,.85);
}
.dlaad-card.is-fill .dlaad-copy:empty{display:none;}

@media (max-width:640px){
  .dlaad.is-fill .dlaad-eyebrow{padding:10px 14px;}
  .dlaad.is-fill .dlaad-foot{padding:12px 14px;}
  .dlaad-card.is-fill{overflow:visible;}
  .dlaad-card.is-fill .dlaad-copy{bottom:112px; padding:0 14px;}
}