/* Static counterpart to the canvas runtime's conditional rendering.
   The design's own CSS is pre-rendered inline; this file only covers the
   parts React used to decide at runtime. */

/* Our own state lives on data-show, not data-open: the design reads [data-open]
   as open by presence alone, so writing data-open="0" would read as open. */

/* --- Conditionals -------------------------------------------------------
   Every <sc-if> branch ships in the HTML as [data-cond]. Defaults below match
   the component's initial state, so the page is correct before site.js runs
   and stays correct if it never does. site.js overrides with data-open. */
[data-cond] { display: none; }
[data-cond="spendEmpty"] { display: contents; }

/* The comparison table picked its layout from window.innerWidth; the same
   760px threshold as a media query, so it now responds without JavaScript. */
@media (min-width: 761px) { [data-cond="compareWide"] { display: contents; } }
@media (max-width: 760px) { [data-cond="compareNarrow"] { display: contents; } }

/* The site header does the same at 900px: a full bar above, a drawer below.
   Both branches are conditionals, so without these defaults the header renders
   as a bare logo — every link in it hidden, on every page that uses it. */
@media (min-width: 900px) { [data-cond="wide"] { display: contents; } }
@media (max-width: 899px) { [data-cond="narrow"] { display: contents; } }
/* The drawer starts shut, so its closed state is the one that shows. */
[data-cond="menuClosed"] { display: contents; }

[data-cond][data-show="1"] { display: contents; }
[data-cond][data-show="0"] { display: none; }

/* --- Media slots --------------------------------------------------------
   Each slot's parent is position:relative with its own aspect-ratio, radius
   and --bg-card fill, so an unmapped slot renders as the design's empty panel
   rather than a broken image. */
.media { position: absolute; inset: 0; display: block; }
/* Absolute, not block: a video and its poster image are siblings here, and as
   block children they would stack vertically instead of overlaying. */
.media > img,
.media > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* The poster sits over the video and steps aside once there are frames. It
   needs no z-index: coming after the video in the DOM is enough to paint over
   it, and a z-index here would escape .media (which makes no stacking context)
   and cover the play badge, which is a sibling of .media rather than a child. */
.media[data-playing] > .media-poster { display: none; }

/* Append ?slots to any URL to label every empty slot with its id while
   filling src/media.json. */
html[data-slot-labels] .media[data-placeholder]::after {
  content: attr(data-placeholder) " · " attr(data-slot);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
  font: 500 11px/1.35 var(--font-mono, monospace);
  color: var(--text-tertiary);
  background: color-mix(in srgb, currentColor 6%, transparent);
}

/* --- Modal --------------------------------------------------------------
   aria-modal promises the page behind is inert; hold the scroll position
   while the dialog is up. */
body[data-modal-open] { overflow: hidden; }

[data-marquee] { scrollbar-width: none; }
[data-marquee]::-webkit-scrollbar { display: none; }

/* --- Creative reels ------------------------------------------------------
   A card with a video is a control: it opens the full ad. */
.media[data-full] { cursor: pointer; }
.media[data-full]:focus-visible {
  outline: 2px solid var(--text-primary, #fff);
  outline-offset: -2px;
  border-radius: inherit;
}

/* --- Lightbox ------------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.88);
}
.lightbox[hidden] { display: none; }

/* Portrait ads are the common case, so cap by height and let width follow;
   a 9:16 clip then fills the screen without overflowing it. */
.lightbox-video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--radius-card, 12px);
  background: #000;
  outline: none;
}

.lightbox-close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill, 999px);
  background: var(--bg-subtle, rgba(255, 255, 255, 0.1));
  color: var(--text-primary, #fff);
  font-family: var(--font-sans, sans-serif);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: var(--bg-subtle-hover, rgba(255, 255, 255, 0.16)); }

/* The hero VSL is a poster until pressed, then a player in place. */
.media[data-play-inline] { cursor: pointer; }
.media[data-play-inline]:focus-visible {
  outline: 2px solid var(--text-primary, #fff);
  outline-offset: -2px;
  border-radius: inherit;
}