/* ============================================================
   HOME  ·  page layer only
   Doc No. ICON-WEB-CSS-004 · loads after tokens.css and main.css

   Everything structural lives in main.css. This file only holds
   what is genuinely specific to the home page: the press-mark
   treatment, two composition rows, and a handful of gaps that a
   shared component cannot know about. If this file starts growing
   past about 80 rules, the page is inventing patterns that belong
   in the SYSTEM lane instead.
   ============================================================ */


/* ---------- two band budgets on this page ----------
   The standard band budget used to be overridden here, because §D1,
   §D2 and §D3 contradicted each other and the desktop register seam
   measured 120px against a 96px ceiling. That is resolved in the
   shared layer now: tokens.css §4 sizes --pad-std from --void-max
   and main.css §3 clamps every seam bonus to --seam-max, so the
   ceiling holds on every page without a local budget. The override
   is deleted.

   What stays is two genuinely local calls. The press row and the
   partner whisper carry their own internal padding and their own
   hairlines, so the band around them only has to clear them. */
.press-band { --pad: var(--s-5); }
/* The whisper is the last band before the footer, and the footer
   pays its own top padding, so this one keeps its side of the seam
   inside the mobile 56px ceiling. */
.whisper-band { --pad: var(--s-4); }


/* ---------- AR-1 composition ----------
   §AR-1 requires the subject to sit in the outer 55% of the frame
   and the type in the inner 45%. The Four Seasons plate is a
   front-on symmetric car sitting dead centre, so no crop of the
   16:9 cut clears the type without slicing the car in half: at
   1280 that cut leaves only 107px of horizontal slack against a
   735px car.

   The portrait master is used at every breakpoint instead. From
   768 up it is boxed into the right of the frame and its left edge
   is masked into the black, which lands the whole car in the outer
   half, keeps all four seasons in shot, and leaves the type on
   clean field. Verified at 390, 768, 1280 and 1600.

   Below 768 the frame is too narrow for a 45/55 split. The car is
   two thirds of a 390px viewport whichever way it is cropped, so
   the type sits over its lower body and its reflection, which is
   the darkest and quietest part of the plate. */
@media (min-width: 768px) {
  .hero-img {
    left: auto;
    right: 0;
    width: 70%;
    object-position: 50% 52%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
            mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  }
  .hero-inner > * { max-width: 42%; }
}
@media (min-width: 1024px) {
  .hero-img { width: 78%; }
  .hero-inner > * { max-width: 38%; }
  /* The button row is measured by its two buttons, not by the type
     column, and it still lands clear of the car. */
  .hero-inner .btn-row { max-width: none; }
}


/* ---------- AR-6 press marks ----------
   REVISION, Aug 20 2026. The label used to be the first flex item in
   the same row as the marks, so the marks were centred in the space
   the label left rather than in the band, and the whole row read as
   sitting to the right of centre. The label is now its own centred
   line above the marks.

   Above, not below: the marks are the evidence and the label is their
   title, so it reads first, and the house already spends the line
   under a picture on a mono caption. A caption under the marks would
   read as a caption on the last mark rather than a title for all five.

   The label sits centred rather than left because a left label over a
   centred row reproduces the same optical error one line up. */
.pressrow { flex-direction: column; gap: var(--s-4); }
.press-label { text-align: center; }
.pressmarks {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 72px);
}

/* motor-trend, mens-journal and sema-show ship as near-black
   (#262626) artwork on transparency. The old grayscale + brightness
   treatment left black as black, so three of the five marks were
   invisible on #131110. brightness(0) invert(1) flattens any mark,
   dark or light, to a single white silhouette, which is also what
   keeps the row reading as one object. Ferrari is excluded: its
   colour is the mark and whitening it would fill the horse. */
.pressrow img {
  height: 26px;
  opacity: 0.88;
  filter: brightness(0) invert(1);
}
.pressrow .press-ferrari {
  height: 38px;
  opacity: 0.96;
  filter: none;
}
/* 7.88:1 against 5.15:1 for the next widest mark, so this one is
   capped on width and allowed to sit shorter. */
.pressrow .press-autostrada {
  height: auto;
  width: min(180px, 42vw);
}


/* ---------- AR-2b tile sets ----------
   The specification set keeps the ledger's closing rule, so the foot
   clears the riser hanging under the last row of tiles. */
.tilegrid + .ledger-foot { margin-top: var(--s-4); }


/* ---------- AR-3 statement eyebrow ----------
   Client, Aug 20 2026: name the warranty above the headline so the
   reader knows what the line is about before they read it. Gold, mono,
   one line. It carries the two sanctioned terms and makes no claim
   about anybody else's coverage.

   The band's own grid gap is a section gap, which is far too much
   between a label and the line it belongs to, so the pair closes up. */
.statement-inner { gap: 12px; }
.statement-eyebrow { color: var(--gold-rich); }


/* ---------- the raised black into black seam ----------
   Client, Aug 20 2026: the band under the film plate "has a slightly
   different background colour and no head room margin ... it looks
   like the image and text are hugging the top of that section."

   Both are true and they are one fault. main.css §D2 bills a seam
   once, so the incoming band pays no top budget and takes its head
   room off the band above. That works while the surface is constant.
   Across a surface change the budget is spent on the OLD colour and
   the new section starts on its first pixel of content, which is what
   the client saw. main.css already solves this for paper into black
   by making the incoming band pay half a budget and drawing the gold
   hairline. Raised black into black is the same event and was the one
   register change the shared rule did not name, so it is billed the
   same way here.

   Same clamp as the shared rule, so this seam cannot break the void
   ceiling tokens.css §4 sets. */
.band.on-black.raised + .band.on-black:not(.raised),
.band.on-black:not(.raised) + .band.on-black.raised {
  padding-top: clamp(0px, calc(var(--pad) * 0.5), calc(var(--seam-max) - var(--pad-std)));
  border-top: 1px solid var(--rule);
}


/* ---------- AR-4 text column contents ----------
   .split-text sets justify-items: start, which shrink-wraps its
   children. The accordion has to span the column. */
.split-text .acc { width: 100%; }
/* The evidence column carries a caption and then a link, so the
   link needs to clear the caption. */
.split-media .whymore { margin-top: var(--s-5); justify-self: start; }


/* ---------- run-in section heading ----------
   Sections that open with a D3 instead of an I-beam still need the
   I-beam's clearance underneath. Matches .ibeam's margin-bottom. */
.seg-head { margin-bottom: var(--s-6); }


/* ---------- AR-4 three column variant ----------
   Each column is figure, label, note, ref. The figure sits tight to
   the column rule above it. */
.seg figure { margin-bottom: 2px; }
@media (min-width: 768px) {
  /* The shared rule pads columns two and three off their hairline
     but leaves column one flush, so column one runs 32px wider and
     its 16:9 figure drops the whole column out of alignment with
     its neighbours. Closing the column gap and padding column one
     on the right makes all three content boxes identical and puts
     each hairline dead centre of a 64px trough. */
  .cols-3.seg { column-gap: 0; }
  .cols-3.seg > *:first-child { padding-right: var(--s-6); }
}


/* ---------- AR-7 film plate ----------
   860 rather than the 980 ceiling: introducing.mp4 is a 640x360
   source, so a wider plate is upscaling it. The caption is aligned
   to the plate edge, not to the wrap. */
.filmplate,
.filmcap {
  max-width: 860px;
  margin-inline: auto;
}


/* ---------- AR-9 network column ---------- */
.network-note { margin-top: var(--s-5); }
.network-map .link-arrow { margin-top: var(--s-4); justify-self: start; }
.network-soon { margin-top: var(--s-5); border-bottom: none; padding-bottom: 0; }
/* The map is inlined rather than linked, because an SVG loaded through
   <img src> cannot reach the page's font link and its labels fall back
   to Courier. main.css sizes .framed > img and .framed > video, so the
   inline drawing asks for the same box. Its viewBox is 16:9 and so is
   the frame, so it fills it exactly. */
.network-map .framed > .onmap { display: block; width: 100%; height: 100%; }
/* At 390 the frame is about 342px wide for a 1600 unit drawing, so the
   drawing's own 20 unit labels land at four rendered pixels. The city
   names are stepped up and the second rank of type is dropped, which
   also clears the only two label pairs close enough to touch at that
   size. The list directly beneath the map carries all nine names at
   full size, so nothing is lost with the refs gone. */
@media (max-width: 559px) {
  .onmap .onmap-city { font-size: 34px; }
  .onmap .onmap-ref,
  .onmap .onmap-lake,
  .onmap .onmap-meta { display: none; }
}


/* ---------- warranty panel ----------
   Three terms, three figure tiles, per the client's Aug 20 note. The
   tile set carries its own riser room, so the notice under it only
   needs the gap the table used to take. */
.warranty-tiles + .notice { margin-top: var(--s-5); }
.warranty-foot { margin-top: var(--s-4); }


/* ---------- two composition rows ----------
   British Columbia and the partner whisper are both a short block
   plus one trailing element. Same shape, same rule.

   British Columbia now closes the network section instead of standing
   as its own black band between the network and the booking plate,
   where the client read it as the top of the booking section. Inside
   the section it needs a rule of its own so it reads as a closing
   note rather than a fourth column of the list above it. */
.bc {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hair-gold);
}
.bc,
.whisper {
  display: grid;
  gap: var(--s-4);
  align-items: center;
}
.bc .b2,
.whisper .b2 { margin-top: 8px; }

@media (min-width: 768px) {
  .bc,
  .whisper {
    grid-template-columns: 1fr auto;
    gap: var(--s-6);
  }
  .whisper .link-arrow { justify-self: end; }
}


/* ---------- FIVE-UP FIGURE SET AT PHONE WIDTH ----------
   main.css lays a figure tile out in two columns below 560, figure
   left and label right, so a stacked tile does not run taller than
   the ledger row it replaced. That rule assumes a full width tile.
   The client's Aug 20 2026 change put .tilegrid--5 two up at 390,
   which leaves a 170px tile: column one is minmax(76px, auto) and the
   figure inside it is white-space: nowrap, so it takes its max content
   and the label column collapses to nothing. "Automotive warranty"
   then painted 33px past the viewport and the home render gate
   measured 403 against a 390 client width.

   A two up five set stacks its tiles below 560, exactly as a 4-up set
   already does in main.css, and the figure is allowed to drop its unit
   to a second line rather than run out of the tile. The unit itself
   still never breaks. Same markup, no page has to know.
   ============================================================ */
@media (max-width: 559px) {
  .tilegrid--5 .tile--figure { grid-template-columns: minmax(0, 1fr); }
  .tilegrid--5 .tile--figure .tile-figure,
  .tilegrid--5 .tile--figure .tile-label,
  .tilegrid--5 .tile--figure .tile-note { grid-column: 1; grid-row: auto; }
  .tilegrid--5 .tile-figure { white-space: normal; }
  .tilegrid--5 .tile-figure .unit { white-space: nowrap; }
}