/* ============================================================================
   cine.css — direction C. Loaded only by index3.html, after main.css.
   ----------------------------------------------------------------------------
   The brief for this one is different in kind from the other two. A and B are
   two compositions of the same page. C is a different page: a pinned film at
   the top, and a lower half that has to stay in the same language instead of
   collapsing into a template.

   Two rules run through everything below.

   1. NO SCREEN REPEATS THE LAST ONE. Every note declares where its text sits —
      [data-place] — and the places alternate. Text-left-car-right four times is
      the failure this file exists to avoid.

   2. NOTHING IS EMPTY BECAUSE IT RAN OUT. Dead zones in the lower half are the
      other failure. Sections here are sized by their content and set on full
      measures, never centred blocks floating in a screen of nothing.
   ========================================================================== */

/* ── TOP: the pinned film ────────────────────────────────────────────────── */

.cine .reveal__note .page { height: 100%; position: relative; }

/* Every note is a full screen with its text placed deliberately inside it. */
.cine .note__body {
  max-width: min(30rem, 42vw);
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
}

.cine [data-place="left"]  .note__body { inset-inline-start: 0; }
.cine [data-place="right"] .note__body { inset-inline-end: 0; text-align: end; }

/* low: the frame is a macro, so the text gets out of the way downward */
.cine [data-place="low"] .note__body {
  inset-block-start: auto;
  inset-block-end: var(--sp-8);
  translate: none;
  inset-inline-start: 0;
}

/* high: used once, for the shot that fills the bottom of the frame */
.cine [data-place="high"] .note__body {
  inset-block-start: var(--sp-9);
  translate: none;
  inset-inline-end: 0;
  text-align: end;
}

/* the release: the car has gone small and left, so the bridge copy takes the
   middle and reads as a section opening rather than a caption */
.cine [data-place="bridge"] .note__body {
  position: static;
  translate: none;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  padding-block-start: 44vh;
}

/* CENTRING THE BLOCK IS NOT CENTRING THE TEXT. Every child here carries its own
   max-width from main.css — a measure, set for a left-aligned column — and a
   narrower box inside a centred one still sits against that box's leading edge.
   Centre the text and leave the boxes alone and the heading and the paragraph
   end up on two different axes, which is what this rule exists to stop. */
.cine [data-place="bridge"] .note__body > * { margin-inline: auto; }

.cine .note__index { color: var(--text-muted); }

.cine .note__body .t-h2 {
  font-size: clamp(var(--fs-h3), 2.2vw + 1rem, var(--fs-h2));
  text-wrap: balance;
}

/* a hairline under the label, so a callout line has something to leave from */
.cine .note__fact {
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--sp-4);
  margin-block-start: var(--sp-5);
}

.cine [data-place="right"] .note__fact,
.cine [data-place="high"] .note__fact { justify-content: flex-end; }

/* The scrim has to work for text on either side, so it is a soft vignette
   rather than the single-sided wash the other two directions use. */
.cine .scene-mount::after {
  background:
    radial-gradient(120% 90% at 50% 45%,
      rgb(var(--graphite-900-rgb) / 0) 42%,
      rgb(var(--graphite-900-rgb) / 0.55) 78%,
      rgb(var(--graphite-900-rgb) / 0.88) 100%),
    linear-gradient(to bottom,
      rgb(var(--graphite-900-rgb) / 0.72) 0%,
      rgb(var(--graphite-900-rgb) / 0) 22%);
}

/* ── THE THREAD ──────────────────────────────────────────────────────────
   One hairline runs out of the film and reappears between sections. It is the
   only decoration in this file and it is doing a job: it is what makes the
   lower half read as the same document as the top rather than a second page
   glued underneath.                                                        */

.cine .thread {
  position: relative;
  height: var(--sp-9);
}

.cine .thread::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  width: 1px;
  background: linear-gradient(to bottom,
    rgb(var(--graphite-900-rgb) / 0) 0%,
    var(--rule) 22%,
    var(--rule) 78%,
    rgb(var(--graphite-900-rgb) / 0) 100%);
}

/* ── SECTION A · FEATURED INVENTORY ──────────────────────────────────────
   Two records, staggered, each on a full measure. Not a grid of tiles: the
   brief and the client both say two to four cars, and a row of tiles is what
   a page does when it has forty.                                           */

.cine .feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: center;
  padding-block: var(--sp-8);
  border-block-start: 1px solid var(--rule);
}

/* the second one inverts, so the eye crosses the page instead of running down
   one edge of it */
.cine .feature:nth-of-type(even) .feature__media { order: 2; }

.cine .feature__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--graphite-950);
}

.cine .feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--dur-4) var(--ease-out);
}

.cine .feature:hover .feature__media img { scale: 1.03; }

.cine .feature__index {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-start: var(--sp-4);
  z-index: 1;
}

.cine .feature__body { max-width: 34rem; }

.cine .feature__spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-6);
  margin-block: var(--sp-6);
}

.cine .feature__spec div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  border-block-end: 1px solid var(--rule);
  padding-block-end: var(--sp-3);
}

/* ── SECTION B · BUILD ───────────────────────────────────────────────────
   The one light ground on the page, and it is not a change of style:
   [data-ground] re-points the semantic aliases and changes nothing else,
   which is the entire reason the two-ground rule exists. Specification is
   read on light.                                                           */

.cine .build-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(var(--sp-7), 6vw, var(--sp-9));
  align-items: start;
}

.cine .build-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: var(--sp-5);
  align-items: baseline;
  padding-block: var(--sp-5);
  border-block-start: 1px solid var(--rule);
  transition: padding-inline-start var(--dur-2) var(--ease-out);
}

.cine .build-row:last-child { border-block-end: 1px solid var(--rule); }
.cine .build-row:hover { padding-inline-start: var(--sp-3); }

.cine .build-row__n { color: var(--text-muted); }
.cine .build-row__opts { color: var(--text-muted); text-align: end; }

/* ── SECTION C · WHO WE ARE ──────────────────────────────────────────────── */

.cine .story {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(var(--sp-7), 6vw, var(--sp-9));
  align-items: end;
}

.cine .story__figure {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--graphite-950);
}

.cine .story__figure img { width: 100%; height: 100%; object-fit: cover; }

.cine .story__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-block-start: var(--sp-8);
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--sp-6);
}

.cine .stat__n {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1;
}

/* ── SECTION D · SERVICES ────────────────────────────────────────────────
   Two panels with their own weight, not two paragraphs under a heading.    */

.cine .panels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.cine .panel {
  background: var(--ground);
  padding: clamp(var(--sp-6), 4vw, var(--sp-8));
  display: grid;
  gap: var(--sp-5);
  align-content: start;
  min-block-size: 22rem;
  transition: background var(--dur-3) var(--ease-out);
}

.cine .panel:hover { background: var(--graphite-800); }
.cine .panel__body { color: var(--text-muted); max-width: 32rem; }
.cine .panel__cta { align-self: end; }

/* ── SECTION E · CONSIGNMENT ─────────────────────────────────────────────
   A single band. Short, and it does not pretend to be a section with parts. */

.cine .band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-7);
  align-items: center;
  border-block: 1px solid var(--rule);
  padding-block: clamp(var(--sp-7), 6vw, var(--sp-9));
}

/* ── SECTION F · PROOF ───────────────────────────────────────────────────── */

.cine .proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.cine .proof__col {
  background: var(--ground);
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}

.cine .quote p { color: var(--text); }
.cine .quote figcaption { color: var(--text-muted); margin-block-start: var(--sp-3); }

.cine .event {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block-start: 1px solid var(--rule);
}

/* ── NARROW ──────────────────────────────────────────────────────────────
   The film survives on a phone; the placement does not. Every note goes to
   the same place, low, because there is no side left to put it on.         */

@media (max-width: 61.99rem) {
  .cine .feature,
  .cine .build-grid,
  .cine .story,
  .cine .panels,
  .cine .proof { grid-template-columns: 1fr; }
  .cine .feature:nth-of-type(even) .feature__media { order: 0; }
  .cine .band { grid-template-columns: 1fr; }
}

@media (max-width: 47.99rem) {
  .cine .note__body {
    max-width: none;
    inset-block-start: auto;
    inset-block-end: var(--sp-7);
    inset-inline: 0;
    translate: none;
    text-align: start;
  }
  .cine [data-place="right"] .note__body,
  .cine [data-place="high"] .note__body { text-align: start; }
  .cine [data-place="right"] .note__fact,
  .cine [data-place="high"] .note__fact { justify-content: flex-start; }
  .cine [data-place="bridge"] .note__body { padding-block-start: 0; }
  .cine .feature__spec { grid-template-columns: 1fr; }
  .cine .story__stats { grid-template-columns: 1fr; }
}