/* home.css — filled in later tasks */

/* === Hero video — SPEC §4.1 ============================================ */
#hero {
  position: relative;
  height: 100vh;
  background: var(--bg-hero);
  overflow: hidden;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 119rem, not the plan's ~72 — pixel-scanned ref/Homepage1.png hero crop
     directly (circle edges at x 660.5-779.5 / y 345.5-464.5, cross-checked
     against the nav-logo badge which measured exactly to its spec'd 57px/
     x60,y19 with the same method) and the plan's 72 turned out to be
     SPEC.md's pre-asset ballpark estimate, not a fresh measurement. */
  width: 119rem;
  height: 119rem;
  border-radius: 50%;
  background: rgba(201, 201, 201, .85);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-play-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30rem 0 30rem 54rem; /* right-pointing triangle, ~54x60 — pixel-scanned to match ref */
  border-color: transparent transparent transparent #fff;
  margin-left: 6rem; /* optical centering: ref's triangle bbox center sits ~6.5px right of true circle center */
}

/* === Selected Twists — SPEC §4.3, Home G3 (koto.com "Our work" style) ==
   Header/button/row geometry pixel-scanned from ref/Homepage1.png (same
   method as Task 4's hero-play): media box measured 819×461 (16:9, exact
   match to the video/image assets' own aspect ratio) at every one of the
   4 rows, not SPEC's/the plan's "474" — that number isn't reachable at
   this width without breaking the asset's native ratio, so treat it the
   same way Task 4 treated the hero-play "~72px" guess: a pre-asset
   ballpark, superseded by direct measurement. See qa-notes.md Task 5. */
#selected {
  background: var(--white);
  padding: 64rem var(--mx) 96rem;
}

.selected-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 60rem;
}

.section-head {
  font-size: 44rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--black);
}

.rows {
  display: flex;
  flex-direction: column;
  gap: 15rem;
}

.row {
  display: grid;
  grid-template-columns: 502rem 819rem;
  align-items: start;
  color: inherit;
  text-decoration: none;
}

.row-text { max-width: 430rem; }

.row-title {
  font-size: 32rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--black);
  margin-bottom: 8rem;
}

.row-desc {
  font-size: 17rem;
  line-height: 1.35;
  color: var(--text-desc-dim);
  transition: color .4s ease;
}
.row.is-active .row-desc { color: var(--text-desc); }

.row-media {
  position: relative;
  width: 819rem;
  height: 461rem;
  border-radius: 12rem;
  overflow: hidden;
  background: #1a1a1a; /* fallback while media loads */
}
.row-media video,
.row-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Dark overlay for inactive rows — ~75% per SPEC §4.3. Painted via ::after
   (generated after .row-play in DOM/paint order) so it darkens the play
   icon along with the media when inactive, matching ref: the icon is
   visible but dimmed on rows 2-4, not fully hidden. */
.row-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .75);
  opacity: 1;
  transition: opacity .4s ease;
  pointer-events: none;
}
.row.is-active .row-media::after { opacity: 0; }

/* Play icon — present on all 4 rows per ref (not just the video item;
   verified by pixel-diffing brightened crops of rows 2-4 against
   Homepage1.png). Scaled-down copy of .hero-play/.hero-play-icon: ~93%
   (triangle measured 50×56 here vs 54×60 there), same optical-centering
   nudge ratio. */
.row-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 110rem;
  height: 110rem;
  border-radius: 50%;
  background: rgba(201, 201, 201, .85);
  display: flex;
  align-items: center;
  justify-content: center;
}
.row-play-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 28rem 0 28rem 50rem;
  border-color: transparent transparent transparent #fff;
  margin-left: 6rem;
}

@media (prefers-reduced-motion: reduce) {
  .row-media::after, .row-desc { transition: none; }
}

/* === Services accordion — SPEC §4.4, Home G4 ===========================
   Geometry pixel-scanned from ref/Homepage1.png (item 1 open, default
   state) and cross-checked against ref/Homepage2.png (all 5 open —
   content reference only, confirms sub-item text + the 24rem sub-item
   line-height + 16rem title padding-top, since that image gives 5 clean
   repeats of the divider→title and title→title rhythm to average).
   Column geometry matches SPEC §2.4 exactly: divider/title measured at
   x730-1359, sub-items at x892 (~890). */
#services {
  background: var(--white);
  padding: 96rem var(--mx) 77rem; /* bottom: ref footer-top minus button-bottom ≈ 77px */
}

.svc-grid {
  display: grid;
  grid-template-columns: 670rem 630rem; /* left x60→730, right x730→1360 */
  column-gap: 0;
}

/* 2-line variant of .section-head (WHERE THE / Twists HAPPEN) — ref
   measures 44px line-to-line (top-to-top), i.e. line-height ~= 1 at this
   font-size; .section-head itself is written single-line elsewhere
   (Selected Twists heading) so the tight leading is scoped here. */
.svc-head {
  line-height: 1.05;
}
/* Feedback: keep a real word gap between "Twists" and "HAPPEN" (the script
   font's own ~15px space-glyph). An earlier build pulled this back to -14rem
   to mimic ref/Homepage1.png, where the two words touch — but the client wants
   them spaced, so leave the natural space. Do NOT re-add a negative margin. */
.svc-head .gw { margin-right: 0; }

.svc-intro {
  font-size: 17rem;
  line-height: 1.2; /* ref: 20px line-to-line at 17px font-size, tighter than the subitem list below */
  color: var(--black);
  margin-bottom: 96rem; /* ref: intro last line → first divider ≈ 96px */
}

.svc-list { margin-bottom: 52rem; }

.svc-divider {
  height: 1px;
  background: var(--divider);
  width: 100%;
}

.svc-title {
  display: block;
  width: 100%;
  padding: 16rem 0; /* ref: divider→title-ink-top measured 16px on all 5 items, symmetric with bottom */
  font-family: var(--font-sans);
  font-size: 26rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
  color: var(--black);
  background: none;
  border: 0;
  cursor: pointer;
}
.svc-title:focus-visible { outline: 2px solid var(--black); outline-offset: 2rem; }

.svc-panel {
  height: 0;
  overflow: hidden;
}

.svc-panel-inner {
  padding-bottom: 32rem; /* ref: last subitem → next divider ≈ 28-37px across the 4 measurable gaps */
}

.svc-subitem {
  padding-left: 160rem; /* 890 − 730 = 160, indents sub-items to x~890 */
  font-size: 17rem;
  line-height: 24rem; /* ref: consistent 24px line-to-line across all 18 sub-items */
  color: var(--text-subitem);
}

.svc-cta { margin-left: 5rem; font-size: 16rem; } /* ref ring left edge ~735 vs column x730; feedback: label → size 16 */

@media (prefers-reduced-motion: reduce) {
  .svc-panel { transition: none; }
}

/* ======================================================================
   MOBILE (≤768px) — Home: hero / selected (1-col) / services (1-col).
   Phase-2 first-pass responsive. Desktop (>768px) unaffected.
   ====================================================================== */
@media (max-width: 768px) {
  /* --- Hero: full-bleed video already 100% wide; keep full-height showreel,
     shrink the play button so it isn't oversized on a phone. --- */
  #hero { height: 88vh; }
  .hero-play { width: 84rem; height: 84rem; }
  .hero-play-icon { border-width: 21rem 0 21rem 38rem; margin-left: 5rem; }

  /* --- Selected Twists: 2-col rows → single column (text above full-width
     media). Section heading + See-all pill allowed to wrap. All media shown
     bright on mobile (drop the active/dim darken so a scrolled column isn't
     mostly dark); play icons kept. --- */
  #selected { padding: 56rem var(--mx) 64rem; }
  .selected-head { flex-wrap: wrap; gap: 12rem 16rem; margin-bottom: 32rem; }
  .section-head { font-size: 30rem; }
  .rows { gap: 44rem; }
  .row { grid-template-columns: 1fr; gap: 14rem; }
  .row-text { max-width: none; }
  .row-title { font-size: 26rem; }
  .row-desc { font-size: 16rem; color: var(--text-desc); }
  .row-media { width: 100%; height: auto; aspect-ratio: 819 / 461; }
  .row-media::after { opacity: 0; } /* all rows bright on mobile */
  .row-play { width: 84rem; height: 84rem; }
  .row-play-icon { border-width: 21rem 0 21rem 38rem; }

  /* --- Services: 2-col grid → single column; sub-items lose the big desktop
     indent; titles tap-to-toggle (home.js gates click handling on mobile). --- */
  #services { padding: 64rem var(--mx) 56rem; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-head { margin-bottom: 28rem; }
  .svc-intro { margin-bottom: 40rem; font-size: 16rem; }
  .svc-title { font-size: 22rem; padding: 14rem 0; }
  .svc-subitem { padding-left: 20rem; font-size: 16rem; }
  .svc-list { margin-bottom: 36rem; }
  .svc-cta { margin-left: 0; }
}