/* ═══════════════════════════════════════════════════════════════════
   style.css — Young Women in Bloom
   Design tokens per YWIB-Technical-Spec.md §4.
   Colors, radius, font, and transition timings are a deliberate carry-
   over from the original OVC desktop app — not a fresh design.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Quicksand — self-hosted, not a third-party CDN request ────────
   Real .ttf files now present in /fonts (added after this was first
   written against non-existent .woff2 placeholders). TTF works in
   every browser, just uncompressed — fine to ship as-is; converting
   to .woff2 later is a pure file-size optimization, not a fix. */
@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/Quicksand-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/Quicksand-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/Quicksand-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/Quicksand-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/Quicksand-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Design tokens (spec §4) ─────────────────────────────────────── */
:root {
  --color-bg: #000000;
  --color-surface: #000000;
  --color-text: #fef5f5;
  --color-accent: #fef5f5;
  --color-accent-dim:   rgba(254, 245, 245, 0.5);
  --color-accent-faint: rgba(254, 245, 245, 0.08);
  --color-accent-hover: rgba(254, 245, 245, 0.15);

  --border-strong: #fef5f5;
  --border-subtle: rgba(254, 245, 245, 0.15);

  --radius: 5px;
  --font: 'Quicksand', system-ui, -apple-system, sans-serif;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  --transition:      0.2s ease;
  --transition-slow: 0.5s ease;

  --color-success: #00FF88;
  --color-error:   #FF3333;

  --header-height: 15vh;
  --gap: 16px;
  --grid-cols: 5;
  --grid-rows: 3;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-weight: var(--fw-normal);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent-hover) transparent;
}

/* All headings, sub-headings, and paragraph text stay full-brightness
   --color-text. Links and input text are exempt — they keep their own
   dimmer/interactive treatment defined further down. */
h1, h2, h3, h4, h5, h6, p {
  color: var(--color-text);
}

button {
  font-family: var(--font);
  font-weight: var(--fw-medium);
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--color-surface);
  color: var(--color-accent);
  border-radius: var(--radius);
  transition: background var(--transition), box-shadow var(--transition);
}

button:hover    { background: var(--color-accent-hover); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button:disabled:hover { background: var(--color-surface); }

input {
  font-family: var(--font);
  font-weight: var(--fw-normal);
  background: var(--color-surface);
  color: var(--color-accent);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  outline: none;
  transition: box-shadow var(--transition);
}

input:focus { box-shadow: 0 0 0 2px var(--color-accent-dim); }
input:disabled {
  border-color: var(--border-subtle);
  color: var(--color-accent-dim);
  cursor: not-allowed;
}

a { color: var(--color-accent-dim); }
a:hover { color: var(--color-accent); }

[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   AGE GATE (§7.1)
   ═══════════════════════════════════════════════════════════════════ */
#age-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
}

#age-gate.fade-out {
  animation: gateFade 0.6s ease forwards;
}

@keyframes gateFade {
  to { opacity: 0; pointer-events: none; }
}

.gate-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

.gate-wordmark {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
}

.gate-tagline {
  font-size: 16px;
  font-weight: var(--fw-medium);
}

.gate-disclaimer {
  max-width: 620px;
  font-size: 13px;
  font-weight: var(--fw-normal);
  line-height: 1.6;
}

.gate-box {
  margin-top: 12px;
  padding: 28px 40px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.gate-question {
  font-size: 22px;
  font-weight: var(--fw-bold);
}

.gate-buttons {
  display: flex;
  gap: 24px;
}

.gate-btn {
  width: 130px;
  height: 38px;
  font-size: 14px;
  font-weight: var(--fw-semi);
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════════════
   APP SHELL
   ═══════════════════════════════════════════════════════════════════ */
/* Fixed-layout / no-scroll (Stage 4): height:100vh (not min-height) plus
   overflow:hidden caps the whole app at the viewport instead of letting
   content grow it taller and trigger a page scrollbar. The outer padding
   is the "safe margin" from the fixed-layout decision — content shrinks
   to fit inside it rather than the app ever exceeding the viewport. */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  padding: 1.5vh 1.5vw;
  overflow: hidden;
}

/* ── Header (§7.2) — logo pinned left, wordmark centered ──────────
   3-column grid (1fr auto 1fr): logo auto-places into column 1 and is
   pinned start; wordmark auto-places into column 2 and is genuinely
   centered on the header (not just centered in the leftover space next
   to the logo) because column 3 mirrors column 1's flexible width. */
#header {
  min-height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 calc(32px + var(--grid-inset-x, 0px));
  flex-shrink: 0;
}

#logo-link {
  justify-self: start;
}

.header-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

.header-wordmark {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  text-align: center;
}

/* ── Toolbar (§7.3) ─────────────────────────────────────────────── */
#toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 calc(32px + var(--grid-inset-x, 0px)) 20px;
  flex-shrink: 0;
}

.search-area {
  flex: 1;
  display: flex;
  gap: 12px;
}

#search-input {
  flex: 1;
  height: 42px;
  padding: 0 16px;
  font-size: 14px;
}

#search-btn {
  height: 42px;
  padding: 0 28px;
  font-size: 14px;
  font-weight: var(--fw-semi);
}

.menu-area {
  position: relative;
  flex-shrink: 0;
}

#menu-btn {
  height: 42px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: var(--fw-semi);
  white-space: nowrap;
}

#menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  min-width: 180px;
  flex-direction: column;
  gap: 6px;
}

#menu-dropdown.open {
  display: flex;
  animation: dropDown 0.15s ease;
}

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

.menu-item {
  width: 100%;
  height: 38px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  text-align: center;
}

/* ── Main ───────────────────────────────────────────────────────── */
#main {
  flex: 1;
  min-height: 0; /* let this shrink instead of growing #app past 100vh */
  padding: 0 32px;
  display: flex;
  flex-direction: column;
}

.state-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════
   RESULTS GRID (§7.4) — 3 rows × 5 columns
   Track sizes below (1fr/auto) are just a pre-JS fallback. Grid.fitGrid()
   (grid.js) measures the available box and overwrites grid-template-
   columns/rows with an exact px size per tile — the largest 16:9 box that
   fits --grid-cols × --grid-rows tiles at the CSS `gap` without exceeding
   the container in either axis. That's what keeps the aspect ratio exact,
   the gap equal horizontally/vertically, and the tiles from ever forcing
   #results-grid to overflow (which is what brings the scrollbar back).
   justify-content/align-content center the now-not-full-width tracks.
   ═══════════════════════════════════════════════════════════════════ */
#results-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-rows: repeat(var(--grid-rows), auto);
  gap: 14px;
  justify-content: center;
  align-content: center;
}

/* YWIB Prods./Build a Collection — fixed 2x2, independent of the
   responsive 3x5 <-> 3x3 breakpoint used everywhere else. */
#results-grid.grid-compact {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
}

.scene-tile {
  display: flex;
  flex-direction: column;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  background: #080808;
  position: relative;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.scene-tile:hover {
  border-color: var(--color-accent-dim);
  box-shadow: 0 0 12px var(--color-accent-faint);
  transform: translateY(-2px);
}

.tile-thumb {
  flex: 1;
  position: relative;
  background: #111;
  overflow: hidden;
  min-height: 0;
}

.tile-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.tile-thumb img.loaded { opacity: 1; }

.thumb-loading { background: #111; }

.thumb-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--color-accent-faint) 50%, transparent 100%);
  animation: thumbPulse 1.6s ease-in-out infinite;
}

@keyframes thumbPulse {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Thumbnail failed to load (e.g. a card's PNG hasn't been added yet) —
   a plain box, not a shimmer stuck forever pretending to still be loading. */
.tile-no-thumb {
  background: #111;
}

.tile-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  background: rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile-pinned .tile-title::before {
  content: '\2605  ';
}

.no-results {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-dim);
  font-size: 14px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
}

/* Information (§6) has no dedicated CSS block — it renders through the
   same #results-grid / .scene-tile rules as every other grid state. */

/* ═══════════════════════════════════════════════════════════════════
   VIDEO PLAYER (§7.6) — custom control skin
   ═══════════════════════════════════════════════════════════════════ */
#player-view {
  align-items: center;
  justify-content: center;
}

.player-frame {
  position: relative;
  width: 100%;
  max-width: 960px;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: #000;
  overflow: hidden;
}

#video-el, .player-fallback-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

.player-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
}

.player-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-color: var(--border-subtle);
  background: transparent;
}

.player-btn:hover { background: var(--color-accent-hover); }

.scrubber-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--color-accent-faint);
  cursor: pointer;
  position: relative;
}

.scrubber-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 2px;
  background: var(--color-accent);
}

.player-time {
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER (§7.5)
   ═══════════════════════════════════════════════════════════════════ */
#footer {
  flex-shrink: 0;
  padding: 16px calc(32px + var(--grid-inset-x, 0px)) 24px;
}

.footer-state {
  display: flex;
  align-items: center;
}

#footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.footer-label {
  justify-self: start;
  font-size: 15px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
}

#pagination {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-self: center;
  margin: 0;
}

.pagination-arrow {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#page-indicator {
  font-size: 13px;
  font-weight: var(--fw-semi);
  color: var(--color-accent-dim);
  min-width: 48px;
  text-align: center;
}

#footer-player {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.footer-key {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-dim);
}

.footer-value {
  font-size: 13px;
  font-weight: var(--fw-medium);
}

.footer-link { text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════
   LIGHTBOX — click-to-enlarge (Information tiles)
   ═══════════════════════════════════════════════════════════════════ */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  cursor: zoom-out;
}

#lightbox-img {
  max-width: 100%;
  max-height: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root {
    --grid-cols: 3;
    --grid-rows: 5;
  }

  /* Search + Menu don't fit one row at phone widths, so this wraps to two
     rows — fine here since portrait phones have vertical headroom to
     spare (verified: chrome + grid still fits within 100dvh at common
     portrait sizes). The landscape breakpoint below reclaims this same
     space where it's NOT spare. */
  #toolbar { flex-wrap: wrap; }
  .search-area { width: 100%; }
  #footer-grid { grid-template-columns: 1fr; gap: 8px; }
  #pagination { justify-self: center; }
  #footer-player { grid-template-columns: 1fr; gap: 12px; }
}

/* The toolbar wrap above puts the Menu button on its own second row, where
   #toolbar's flex-start alignment parks it at the LEFT edge. The base rule's
   `right: 0` then hangs the 180px-min dropdown off the right edge of an ~80px
   button, i.e. ~100px past the left of the screen — and #app's overflow:hidden
   clips it rather than letting you scroll to it. Anchor left instead so it
   opens rightward into the page.

   Scoped to portrait, NOT to max-width:900px alone: plenty of phones are
   700-900px wide in landscape and match that breakpoint too, but the landscape
   block below sets flex-wrap:nowrap and returns the button to the right edge —
   where `left: 0` would push the dropdown off the RIGHT side instead. */
@media (max-width: 900px) and (orientation: portrait) {
  #menu-dropdown { left: 0; right: auto; }
}

/* Phone landscape — short viewport, ample width. Triggers on height alone
   (not max-width:900px above) since many phones are wider than 900px once
   rotated, and the portrait breakpoint's 3-col x 5-row grid is the wrong
   shape here (narrow-tall) for a wide-short viewport.

   #header/#toolbar/#footer are all flex-shrink:0 (§9) — only the grid
   shrinks to fit. That means on a short viewport, their COMBINED fixed
   height has to shrink too, or the grid gets squeezed to a sliver (or,
   if the chrome alone exceeds the viewport, #app's overflow:hidden clips
   the footer with no scroll to reach it). The portrait breakpoint's
   two-row toolbar/footer is the biggest offender here — landscape has
   plenty of width to keep both single-row instead, so reclaim that first,
   then shrink the remaining fixed px chrome to match. */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --header-height: 11vh;
    --grid-cols: 5;
    --grid-rows: 2;
  }

  /* #header/#main share this same 20px flat base as #toolbar/#footer
     below (mirroring the default rule's shared 32px base) — #grid-inset-x
     is derived FROM #main's rendered width in fitGrid(), so #main's own
     padding must stay a flat number, never `+ var(--grid-inset-x)`, or
     the two would feed back into each other. */
  #header { padding: 0 calc(20px + var(--grid-inset-x, 0px)); }
  #main { padding: 0 20px; }

  #toolbar {
    flex-wrap: nowrap;
    padding: 0 calc(20px + var(--grid-inset-x, 0px)) 8px;
  }
  .search-area { width: auto; }
  #search-input, #search-btn, #menu-btn { height: 32px; font-size: 12px; }
  #search-btn { padding: 0 16px; }
  #menu-btn { padding: 0 14px; }
  .header-logo { width: 40px; height: 40px; }
  .header-wordmark { font-size: clamp(18px, 3.2vw, 26px); }

  #footer { padding: 8px calc(20px + var(--grid-inset-x, 0px)) 10px; }
  #footer-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; }
  .pagination-arrow { width: 24px; height: 24px; font-size: 13px; }
  #page-indicator { font-size: 11px; min-width: 36px; }
  .footer-label { font-size: 12px; }
}