/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* ─── Design Tokens ──────────────────────────────────────────────────────── */
:root {
  /* Colours */
  --color-bg:           #ffffff;
  --color-dark:         #18280e;
  --color-accent:       #b2eb76;
  --color-border-light: #babeb7;

  /* Typography */
  --font-body: 'Gotu', sans-serif;
  --font-meta: 'DM Sans', sans-serif;

  /* Font sizes */
  --text-heading: 34px;
  --text-title:   20px;
  --text-body:    18px;
  --text-label:   16px;
  --text-meta:    12px;
  --text-tiny:    10px;

  /* Letter spacing */
  --tracking-heading: -0.68px;
  --tracking-body:    -0.36px;
  --tracking-meta:    -0.24px;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Components */
  --radius-card:   8px;
  --radius-thumb:  4px;
  --radius-logo:   100px;
  --border-default: 1px solid var(--color-dark);
  --border-accent:  1px solid var(--color-accent);
  --border-light:   0.5px solid var(--color-border-light);

  /* Search bar — 11 grid cells × 64px = 704px */
  --searchbar-width:   704px;
  --searchbar-height:  64px;
  --searchbar-padding: 24px;

  /* Result item */
  --result-item-height: 64px;
  --result-thumb-w:     32px;
  --result-thumb-h:     40px;
  --result-logo-size:   24px;

  /* Result card */
  --card-poster-w:  127px;
  --card-poster-h:  159px;
  --card-logo-size: 40px;
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
html, body {
  height: 100%;
  font-family: var(--font-body);
  color: var(--color-dark);
  background: var(--color-bg); /* white — visible in the 32px gap around landing panel */
}

/* ─── Dashed grid (shared background pattern) ───────────────────────────── */
/*
  Applied to #search-page (not body) so it only shows behind the search UI.
  The same SVG tile: top + left edges of a 64×64 cell, dashed 4,4.
*/
.grid-bg {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cline x1='0' y1='0' x2='64' y2='0' stroke='%23babeb7' stroke-width='0.5' stroke-dasharray='4%2C4'/%3E%3Cline x1='0' y1='0' x2='0' y2='64' stroke='%23babeb7' stroke-width='0.5' stroke-dasharray='4%2C4'/%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 64px 64px;
}


/* ══════════════════════════════════════════════════════════════════════════
   LANDING
══════════════════════════════════════════════════════════════════════════ */

#landing {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none; /* let scroll events pass through to the spacer */
  will-change: opacity;
  transition: opacity 0.05s linear;
  /* Clip everything (cards, text, hint) to the panel boundary so nothing
     bleeds onto the white border around the dark panel */
  clip-path: inset(32px round 8px);
}

/* ─── Load-in keyframes ──────────────────────────────────────────────────── */
@keyframes landingFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Intro text — fades in while rising from 20px below its resting position */
@keyframes introTextIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 20px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* Scroll hint — same upward drift, smaller offset */
@keyframes hintIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Dark green panel — 32px inset, 8px radius (matches Figma exactly) */
#landing-bg {
  position: absolute;
  inset: 32px;
  border-radius: var(--radius-card);
  background: var(--color-dark);

  /* 1st to appear */
  animation: landingFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

/* Hero copy — centred in the panel */
#intro-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(24px, 5vw, 48px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
  width: 872px;
  max-width: calc(100vw - 80px);
  z-index: 2;   /* behind .sc-foreground (z-index 3) */
  pointer-events: none;

  /* 2nd to appear — fades in and rises into place */
  animation: introTextIn 0.7s cubic-bezier(0.0, 0.0, 0.2, 1) 0.45s both;
}

#intro-text .accent {
  color: var(--color-accent);
}

/* "Scroll" hint — bottom-centre of the panel */
#scroll-hint {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: -0.16px;
  color: rgba(255, 255, 255, 0.6);
  z-index: 2;
  pointer-events: none;

  /* Fades in after the main text animation completes */
  animation: landingFadeIn 0.5s ease 1.15s both;
}

/* ─── Scroll cards ───────────────────────────────────────────────────────── */
/*
  --sc  CSS variable (set inline) drives all proportional measurements.
  Base dimensions match the XL card in Figma (415px × 72px, 16px padding).
*/
.scroll-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap:        calc(16px  * var(--sc, 1));
  padding:    calc(16px  * var(--sc, 1));
  width:      calc(415px * var(--sc, 1));
  border:     calc(0.5px * var(--sc, 1)) solid var(--color-accent);
  border-radius: calc(8px * var(--sc, 1));
  background: var(--color-dark); /* solid fill so cards cover elements beneath */
  pointer-events: none;
  will-change: transform;
  z-index: 1; /* behind intro text (z-index 2) by default */
}

/* XL card sits in front of the intro text */
.scroll-card.sc-foreground {
  z-index: 3;
}

.sc-poster {
  width:        calc(32px * var(--sc, 1));
  height:       calc(48px * var(--sc, 1));
  border-radius: calc(4px * var(--sc, 1));
  object-fit: cover;
  flex-shrink: 0;
  background: #f9f9f9;
}

.sc-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sc-title {
  font-family: var(--font-body);
  font-size:   calc(18px * var(--sc, 1));
  color: #ffffff;
  letter-spacing: calc(-0.36px * var(--sc, 1));
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-type {
  font-family: var(--font-body);
  font-size:   calc(12px * var(--sc, 1));
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: calc(-0.24px * var(--sc, 1));
  line-height: 1.2;
}

.sc-logo {
  width:         calc(24px * var(--sc, 1));
  height:        calc(24px * var(--sc, 1));
  border-radius: 100px;
  object-fit: cover;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   SEARCH PAGE
══════════════════════════════════════════════════════════════════════════ */

#search-page {
  position: fixed;
  inset: 0;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  overflow: hidden;
  background: var(--color-bg);
}

/*
  Grid is inset 32px below the navbar bottom (navbar: top 32px + height 48px = 80px)
  → grid top = 112px. Left / right / bottom inset = 32px (matching the panel gap).
  A pseudo-element lets us confine the pattern precisely without clip-path maths.
*/
#search-page::before {
  content: '';
  position: absolute;
  top: 112px;
  left: 32px;
  right: 32px;
  bottom: 72px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cline x1='0' y1='0' x2='64' y2='0' stroke='%23babeb7' stroke-width='0.5' stroke-dasharray='4%2C4'/%3E%3Cline x1='0' y1='0' x2='0' y2='64' stroke='%23babeb7' stroke-width='0.5' stroke-dasharray='4%2C4'/%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 64px 64px;
  /* Shift origin so grid lines land on the centered search bar's edges.
     Search bar is 704px (11 × 64) wide, centered → left edge at 50vw − 352px.
     Pseudo-element left is 32px, so offset = (50vw − 352) − 32 = calc(50% − 352px)
     where 50% is relative to the pseudo-element's own width. */
  background-position: calc(50% - 352px) 0;
  clip-path: inset(1px 0 0 1px);
  pointer-events: none;
  z-index: 0;
}

/* ─── Navbar ─────────────────────────────────────────────────────────────── */
/*
  The navbar is a fixed-height container.  The visual shape comes from an
  inline SVG (.navbar-svg) whose paths are redrawn by JS to match the
  container's rendered pixel width on load and every resize.
  Content (icon, logo, credit) is layered on top via absolute positioning.
*/
.navbar {
  position: absolute;
  top: 32px;
  left: 32px;
  right: 32px;
  height: 49px;         /* matches the SVG height */
  z-index: 2;
}

/* SVG fills the container; stroke colour comes from CSS */
.navbar-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;    /* rounded corners must not be clipped */
}

.nav-path-left,
.nav-path-right {
  fill: var(--color-bg);
  stroke: var(--color-dark);
}

.nav-path-center {
  fill: none;
  stroke: var(--color-dark);
}

/* Left content — broadcast icon, vertically centred in the left pill */
.nav-content-left {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

/* Centre content — logo */
.nav-content-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
}

/* Right content — credit link */
.nav-content-right {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.logo-img {
  height: 22px;
  width: auto;
  display: block;
}

.broadcast-icon {
  display: block;
  flex-shrink: 0;
}

/* ─── Corner elements ────────────────────────────────────────────────────── */
.corner-logo,
.corner-credit {
  position: absolute;
  bottom: 32px;
  z-index: 2;
}

.corner-logo {
  left: 32px;
}

.corner-credit {
  right: 32px;
  font-family: var(--font-meta);
  font-size: var(--text-meta);
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  letter-spacing: var(--tracking-meta);
  white-space: nowrap;
}

.corner-credit:hover,
.corner-logo:hover { opacity: 0.65; }

/* ─── Decorative card rows ───────────────────────────────────────────────── */
/*
  Three full-width rows of continuously scrolling cards.
  Rows are positioned on the grid (64px cell) relative to the grid top (112px):

    Grid top:        112px
    Search bar top:  176px  (grid top + 1 cell)
    Search bar btm:  240px  (+ 64px bar height)
    Row 1 top:       368px  (bar btm + 2 cells = 128px)
    Row 2 top:       496px  (row 1 + 1 cell gap + 64px height)
    Row 3 top:       624px  (row 2 + 1 cell gap + 64px height)

  Each row clips at its own edges; the parent clips at viewport edges.
*/
.deco-rows {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;          /* clips cards at container edges (#1) */
  transition: opacity 0.3s ease; /* fade when results open (#5) */
}

.deco-rows--faded {
  opacity: 0;
}

.deco-row {
  position: absolute;
  left: 0;
  right: 0;
  height: 65px;
  overflow: visible; /* allow hover scale to extend beyond row bounds (#1) */
}

.deco-row-1 { top: 368px; }
.deco-row-2 { top: 496px; }

/*
  Each track holds set A + set B (identical duplicates).
  Cards use margin-right instead of flex gap so that
  translateX(-50%) lands exactly on the boundary between sets:
    5 cards × (320px card + 64px margin) = 5 × 384px = 1920px per set
    Total track: 3840px   →   -50% = -1920px = exactly 5 slots ✓
  Card slot = 384px = 6 × 64px grid squares → cards step in whole grid units.
*/
.deco-track {
  display: flex;
  will-change: transform;
}

/*
  Pixel values instead of -50% to avoid sub-pixel rounding differences at the
  loop reset point.  One set = 5 cards × (320px + 64px margin) = 1920px.
*/

/* Left → Right: starts showing set B, drifts right to reveal set A, loops */
@keyframes scrollRight {
  from { transform: translateX(-1920px); }
  to   { transform: translateX(0px);     }
}

/* Right → Left: starts showing set A, drifts left to reveal set B, loops */
@keyframes scrollLeft {
  from { transform: translateX(0px);     }
  to   { transform: translateX(-1920px); }
}

.deco-track-fwd { animation: scrollRight 38s linear infinite; }
.deco-track-rev { animation: scrollLeft  42s linear infinite; }

.deco-card {
  width: 320px;  /* 5 × 64px — slot = 320 + 64 margin = 384px = 6 grid squares */
  height: 65px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: var(--border-accent);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  box-shadow: 0 1px 0 0 var(--color-bg); /* covers the grid stroke at the card's bottom edge */
  margin-right: 64px; /* spacing between cards — part of the 388px slot for -50% maths */
  pointer-events: auto;  /* override parent none so cards are clickable (#1) */
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.deco-card:hover {
  transform: scale(1.06) rotate(-3deg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.deco-card-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
  min-width: 0;
}

.deco-poster {
  width: var(--result-thumb-w);   /* 32px */
  height: var(--result-thumb-h);  /* 40px */
  border-radius: var(--radius-thumb);
  object-fit: cover;
  flex-shrink: 0;
}

.deco-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.deco-type {
  font-family: var(--font-body);
  font-size: var(--text-meta);  /* 12px */
  color: #707070;
  letter-spacing: var(--tracking-meta);
  line-height: 1;
}

.deco-title {
  font-family: var(--font-body);
  font-size: var(--text-body);  /* 18px */
  color: var(--color-dark);
  letter-spacing: var(--tracking-body);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deco-logo {
  width: var(--result-logo-size);  /* 24px */
  height: var(--result-logo-size);
  border-radius: var(--radius-logo);
  object-fit: cover;
  flex-shrink: 0;
}

/* ─── Search card wrapper ────────────────────────────────────────────────── */
/*
  .search-card wraps the input + results list.
  It provides the outer border/radius so the pair reads as one unit.
  .search-card--open (added by JS when results are present) switches the
  border to the accent colour.
  :focus-within also triggers the accent border so it activates on first keystroke.
*/
.search-card {
  border: var(--border-default);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  overflow: hidden; /* rounds corners of children; clips results scroll */
}

/* Dark border + light-green shadow on focus or when results are open (#3) */
.search-card:focus-within,
.search-card--open,
.search-card--loading {
  border-color: var(--color-dark);
  box-shadow: 0 0 0 3px rgba(178, 235, 118, 0.45);
}

/* Inside the card, the bar loses its own border — the card provides it */
.search-card .search-bar {
  border: none;
  border-radius: 0;
  box-shadow: none !important;
}

/* Accent green divider when loading or results are open */
.search-card--loading .search-bar,
.search-card--open .search-bar {
  border-bottom: 1px solid var(--color-accent);
}

/* ─── Search loading area ────────────────────────────────────────────────── */
/*
  Sits between the search bar and results list.
  Collapses to 0 when not loading; expands to one grid square (64px) when loading.
*/
.search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
}

.search-card--loading .search-loading {
  max-height: 64px;
  padding: 16px 0; /* 16 + 32px SVG + 16 = exactly 64px = one grid square */
  opacity: 1;
}

/* Loader icon — inner arcs spin CW, outer arcs spin CCW */
@keyframes spinCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spinCCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

.loader-inner {
  transform-origin: 16px 16px;
  animation: spinCW 1.2s linear infinite;
}

.loader-outer {
  transform-origin: 16px 16px;
  animation: spinCCW 1.8s linear infinite;
}

/* ─── Result item entry animation ───────────────────────────────────────── */
@keyframes resultItemIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.result-item--enter {
  animation: resultItemIn 0.22s ease both;
}

/* ─── Search bar ─────────────────────────────────────────────────────────── */
/*
  Figma: centred horizontally, top = calc(50% - 241px) — the centre of the
  64px bar sits 241px above the viewport midpoint.
  Translate adjusts for the bar's own half-height (32px):
  top = calc(50% - 241px - 32px) = calc(50% - 273px)
*/
.search-container {
  position: absolute;
  top: 176px; /* grid top (112px) + 1 grid cell (64px) */
  left: 50%;
  transform: translateX(-50%);
  /* 10 grid cells wide; shrinks with the viewport keeping inside the 32px margins */
  width: min(var(--searchbar-width), calc(100vw - 64px));
  z-index: 2;
}

.search-bar {
  width: 100%;
  height: var(--searchbar-height);  /* 64px */
  display: flex;
  align-items: center;
  padding: 0 var(--searchbar-padding);
  border: var(--border-default);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  transition: box-shadow 0.15s ease;
}

/* Green glow on focus — matches Figma active state */
.search-bar:focus-within {
  box-shadow: 0 0 0 2px rgba(178, 235, 118, 0.5);
}

.search-input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-title);  /* 20px */
  color: var(--color-dark);
  letter-spacing: var(--tracking-body);
}

.search-input::placeholder {
  color: var(--color-border-light);
}

/* Clear button — hidden until 3+ chars typed (#7) */
.search-clear {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.search-clear.visible {
  opacity: 1;
  pointer-events: auto;
}

.search-clear:hover { opacity: 0.6; }

/* ─── Search results (dropdown) ──────────────────────────────────────────── */
/*
  6 items visible at once, rest scrollable.
  Animates from 0 → max-height so the card grows smoothly on first result (#2).
  6 × 64px items + 5 × 8px gaps + 16px vertical padding = 440px.
*/
.search-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  /* Collapsed by default — no height, no padding */
  max-height: 0;
  padding: 0 var(--space-xs);
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
}

/* Expanded when results are present */
.search-card--open .search-results {
  max-height: calc(6 * 64px + 5 * 8px + 16px); /* 440px */
  padding: var(--space-xs);
  overflow-y: auto;
}

.search-results::-webkit-scrollbar        { width: 4px; }
.search-results::-webkit-scrollbar-track  { background: transparent; }
.search-results::-webkit-scrollbar-thumb  { background: var(--color-border-light); border-radius: 2px; }
.search-results { scrollbar-width: thin; scrollbar-color: var(--color-border-light) transparent; }

.result-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 12px;  /* 12px all around (#4) */
  border: var(--border-accent);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  cursor: pointer;
  transition: background 0.15s ease;
}

.result-item:hover { background: #f9f9f9; }

.result-thumb {
  width: var(--result-thumb-w);   /* 32px */
  height: var(--result-thumb-h);  /* 40px */
  border-radius: var(--radius-thumb);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-border-light);
}

.result-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.result-type {
  font-family: var(--font-body);
  font-size: var(--text-meta);  /* 12px — type above title per Figma */
  color: #707070;
  letter-spacing: var(--tracking-meta);
  line-height: 1;
}

.result-title {
  font-family: var(--font-body);
  font-size: var(--text-body);  /* 18px */
  color: var(--color-dark);
  letter-spacing: var(--tracking-body);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-logos {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Overlapping logo stack — each logo offsets left, bordered white ring separates them */
.result-logo {
  width: var(--result-logo-size);   /* 24px */
  height: var(--result-logo-size);
  border-radius: var(--radius-logo);
  object-fit: cover;
  border: 1.5px solid var(--color-bg);
  margin-left: -6px;
  position: relative;
}

.result-logo:first-child { margin-left: 0; }

/* ─── Result card ────────────────────────────────────────────────────────── */

/* Elements start invisible — revealed by stagger after curtain completes */
.result-card .card-close,
.result-card .card-body > * {
  opacity: 0;
}

@keyframes cardElementIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Stagger each section in top-to-bottom once .result-card--revealed is added */
.result-card--revealed .card-close {
  animation: cardElementIn 0.18s ease forwards;
  animation-delay: 0ms;
}
.result-card--revealed .card-body > *:nth-child(1) { /* card-header */
  animation: cardElementIn 0.18s ease forwards;
  animation-delay: 50ms;
}
.result-card--revealed .card-body > *:nth-child(2) { /* synopsis or section */
  animation: cardElementIn 0.18s ease forwards;
  animation-delay: 100ms;
}
.result-card--revealed .card-body > *:nth-child(3) { /* section (when synopsis present) */
  animation: cardElementIn 0.18s ease forwards;
  animation-delay: 150ms;
}
/* Fixed to 7 grid squares (448px) with a scrollable inner body (#8) */
.result-card {
  position: absolute;
  top: 176px; /* matches .search-container */
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--searchbar-width), calc(100vw - 64px));
  max-height: calc(8 * 64px); /* 512px — hugs content below this, scrolls above it */
  border: var(--border-default);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  box-shadow: 0 0 0 3px rgba(178, 235, 118, 0.45);
  overflow: hidden;
  z-index: 2;
}

/* Scrollable inner container — auto height so the card hugs short content */
.card-body {
  max-height: calc(8 * 64px); /* triggers scroll before card hits its own max */
  overflow-y: auto;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-light) transparent;
}
.card-body::-webkit-scrollbar        { width: 4px; }
.card-body::-webkit-scrollbar-track  { background: transparent; }
.card-body::-webkit-scrollbar-thumb  { background: var(--color-border-light); border-radius: 2px; }

.card-header {
  display: flex;
  align-items: stretch; /* children stretch to poster height (#9) */
  gap: var(--space-md);
}

.card-poster {
  height: 150px;
  width: auto;                   /* derives from aspect-ratio → 100px */
  aspect-ratio: 2 / 3;          /* TMDB poster ratio */
  border-radius: var(--radius-thumb);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-border-light);
}

.card-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* type + title align to bottom of poster (#9) */
  gap: var(--space-xs);
}

.card-type {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  color: #707070;
  letter-spacing: var(--tracking-meta);
}

.card-title {
  font-family: var(--font-body);
  font-size: var(--text-heading);  /* 34px */
  color: var(--color-dark);
  letter-spacing: var(--tracking-heading);
  line-height: 1.1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Uses close-icon.svg — fixed to top-right corner of the result card, above all content */
.card-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.15s ease;
}

.card-close:hover { opacity: 0.6; }

.card-synopsis {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-dark);
  letter-spacing: var(--tracking-meta);
  line-height: 1.6;
}

.card-section-label {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  color: var(--color-dark);
  letter-spacing: var(--tracking-meta);
}

.card-season-note {
  font-family: var(--font-meta);
  font-size: var(--text-meta);
  color: var(--color-border-light);
  letter-spacing: var(--tracking-meta);
}

.season-select {
  height: var(--result-item-height);
  border: var(--border-accent);
  border-radius: var(--radius-card);
  padding: 0 var(--space-md);
  font-family: var(--font-meta);
  font-size: var(--text-label);
  color: var(--color-dark);
  background: var(--color-bg);
  cursor: pointer;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2318280e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
}

.provider-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.provider-row {
  height: var(--result-item-height);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0 var(--space-md);
  border: var(--border-accent);
  border-radius: var(--radius-card);
}

.provider-logo {
  width: var(--card-logo-size);   /* 40px */
  height: var(--card-logo-size);
  border-radius: var(--radius-logo);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-border-light);
}

.provider-name {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-label);
  color: var(--color-dark);
  letter-spacing: var(--tracking-meta);
}

.provider-type {
  font-family: var(--font-body);
  font-size: var(--text-meta); /* 12px */
  color: var(--color-dark);
  letter-spacing: var(--tracking-meta);
  text-align: right;
}

.empty-state {
  font-family: var(--font-body);
  font-size: var(--text-meta); /* 12px */
  color: #707070;
  letter-spacing: var(--tracking-meta);
  /* Search dropdown: fill 64px area, centred */
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inside the result card, override to left-align */
.result-card .empty-state {
  justify-content: flex-start;
  height: auto;
}

/* Empty state — same two-square height as loading, no item padding */
.search-card--empty .search-results {
  max-height: 64px;
  padding: 0;
}

/* ─── Scroll spacer ──────────────────────────────────────────────────────── */
#scroll-spacer {
  height: 250vh;        /* 150vh of scroll distance — transition locks at ~120vh */
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE  ≤ 600px
════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {

  /* Viewport padding reduced from 32px to 24px */
  #landing-bg {
    inset: 24px;
  }

  .navbar {
    top: 24px;
    left: 24px;
    right: 24px;
    /* Simple rounded rectangle — replaces the 3-part SVG shape */
    background: var(--color-bg);
    border: var(--border-default);
    border-radius: var(--radius-card);
  }

  /* Hide the complex SVG shape */
  .navbar-svg {
    display: none;
  }

  /* Logo left-aligned */
  .nav-content-center {
    left: var(--space-md);
    transform: translateY(-50%);
  }

  /* Hide the left broadcast icon — keep only the right one */
  .nav-content-left {
    display: none;
  }

  #search-page::before {
    top: 104px;
    left: 24px;
    right: 24px;
    bottom: 64px;
  }

  .corner-logo,
  .corner-credit {
    bottom: 24px;
  }

  .corner-logo  { left:  24px; }
  .corner-credit { right: 24px; }

  .search-container,
  .result-card {
    width: min(var(--searchbar-width), calc(100vw - 48px));
  }

  /* Grid top shifts from 112px to 104px on mobile — re-anchor all grid-aligned elements */
  .search-container { top: 168px; } /* 104 + 1 × 64 */
  .result-card      { top: 168px; }
  .deco-row-1       { top: 360px; } /* 104 + 4 × 64 */
  .deco-row-2       { top: 488px; } /* 104 + 6 × 64 */

  /* 1. Logo smaller */
  .logo-img {
    height: 16px;
  }

  /* 2. Smaller title text in deco cards and search results */
  .deco-title,
  .result-title {
    font-size: 14px;
  }

  /* Result card heading */
  .card-title {
    font-size: 24px;
    letter-spacing: -0.02em;
  }

  /* 3. Stack streaming service rows in result card */
  .provider-row {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px var(--space-md);
    gap: 4px;
  }

  .provider-type {
    text-align: left;
  }

}