/* ==========================================================================
   RSA School of Motoring: design system v2, HOME family

   One route, `/`, built from src/index.njk. Loaded after tokens.css and
   school.css by layouts/base.njk when the page declares
   `design: "v2"` and `designSheet: "home"`.

   Two rules this sheet obeys, both from the page conversion runbook:

   1. It never redefines anything school.css owns. Every module the home page
      shares with the town pilots (hero, proof bar, cards, tickets, reviews,
      FAQ, stops, call band) is used under its sm- name and is styled centrally.
      What is here is either a home-only module or an override that only this
      route needs, and each one says why.

   2. It introduces NO new class names. check-unstyled-classes.mjs reads only
      tokens.css and school.css, so a class defined in a per-family sheet reads
      to that gate as unstyled even though base.njk demonstrably loads this
      file. Rather than fail a gate or weaken it, the home-only modules are
      hooked off the route's own section ids and off `data-home` (a module) and
      `data-part` (a piece of one). Attributes are not class names, so the gate
      sees nothing new and the markup still says what each block is.

   The one class on this page that the gate cannot be satisfied about is
   `.map-placeholder`, which is a JavaScript contract: the lazy-map loader in
   base.njk queries it by that name and the homepage is its only instance, so it
   cannot be renamed into the sm- namespace. It is styled below.

   No CSS escapes anywhere in this file: literal glyphs only, per finding 22.
   ========================================================================== */

/* ---------- 1. Hero ---------- */

/* The learner cutout in the hero aside. It is 350x233 with an alpha channel,
   so school.css's 300px cover crop would upscale and slice it: this keeps its
   own aspect. Its ground comes from .sm-hero__frame picture, which the frame
   needs anyway because .sm-offset isolates and the green block would otherwise
   paint through the transparent parts of the cutout. */
[data-home="portrait"] img {
  height: auto;
  object-fit: contain;
}

/* The instructor faces. Twelve real portraits at 44px, overlapped so they read
   as a crew rather than a grid, which is what the live page does with them.
   The proof cell beside them carries the number, so this row carries no text. */
[data-home="faces"] {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-12);
  padding-left: 6px;
}
[data-home="faces"] img {
  width: 44px;
  height: 44px;
  margin-left: -6px;
  border: 2px solid var(--color-bg-deep);
  border-radius: var(--radius-round);
  object-fit: cover;
  background: var(--color-panel);
}

/* ---------- 2. Glyph panels on the pathway cards (C1) ---------- */

/* The pack's service card: a black glyph panel welded to the top of the card
   with a coloured 4px bottom rule, then the title and the copy. The negative
   margins bleed the panel to the card's edges through its 26px padding. The
   glyph itself is the page's own existing icon, set in the panel rather than
   floating above the heading in a rounded tile. */
[data-part="glyph"] {
  display: grid;
  place-items: center;
  height: 132px;
  margin: calc(var(--pad-card) * -1) calc(var(--pad-card) * -1) var(--space-10);
  background: var(--color-bg-deep);
  border-bottom: 4px solid var(--rsa-line-16);
}
[data-part="glyph"] svg {
  width: 52px;
  height: 52px;
  stroke: var(--color-accent);
}
/* Green, chalk, red, amber. The rule is the only colour difference between the
   four cards, which is the pack's instruction for this module. */
#lessons .sm-card:nth-child(1) [data-part="glyph"] { border-bottom-color: var(--color-accent); }
#lessons .sm-card:nth-child(2) [data-part="glyph"] { border-bottom-color: var(--rsa-chalk); }
#lessons .sm-card:nth-child(2) [data-part="glyph"] svg { stroke: var(--rsa-chalk); }
#lessons .sm-card:nth-child(3) [data-part="glyph"] { border-bottom-color: var(--color-action); }
#lessons .sm-card:nth-child(3) [data-part="glyph"] svg { stroke: var(--color-text-red); }
#lessons .sm-card:nth-child(4) [data-part="glyph"] { border-bottom-color: var(--color-star); }
#lessons .sm-card:nth-child(4) [data-part="glyph"] svg { stroke: var(--color-star); }

/* A card that is itself a link keeps the card's own hover lift from
   school.css; this only stops the anchor underlining its whole contents. */
a.sm-card { text-decoration: none; }

/* ---------- 3. Callouts ---------- */

/* The free mock theory test, twice on the page: once under the pathway cards
   and once under the guides. Raised ground, opened by the pack's green dashed
   road line, with the action on the right. */
[data-home="callout"] {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-top: var(--space-16);
  padding: var(--space-16) var(--space-20);
  background: var(--color-panel-raised);
  border: 1px solid var(--rsa-line-08);
  border-radius: var(--radius-xs);
}
[data-home="callout"]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: var(--road-dash-h);
}
[data-home="callout"] > div { max-width: 62ch; }
[data-home="callout"] h3 { margin-bottom: var(--space-4); text-transform: none; }
[data-home="callout"] p { margin: 0; font-size: var(--fs-body-sm); color: var(--color-text-muted); }
[data-home="callout"] .sm-btn { flex: 0 0 auto; }

/* The small slanted chip: "Free" on the callout, "Most Popular" on a ticket.
   Same shape as the lane marker, so it belongs to the same family. */
[data-part="badge"] {
  display: inline-block;
  margin-bottom: var(--space-5);
  padding: var(--pad-badge);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* ---------- 4. The map (S3) ---------- */

/* The pack's map section: the map itself inverted and desaturated so it sits
   on a black page, in a card opened by a green dashed road line. */
[data-home="map"] {
  position: relative;
  padding: 6px;
  background: var(--color-bg);
  border: 1px solid var(--rsa-line-12);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-panel);
}
[data-home="map"]::before {
  content: "";
  display: block;
  height: 6px;
  margin: -6px -6px 6px;
  background: var(--road-dash-h);
}

/* JavaScript contract: base.njk finds this element by class and replaces it
   with the iframe once it scrolls into view. The class cannot move. */
.map-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  background: var(--color-panel);
  color: var(--color-text-muted);
  font-size: var(--fs-body-sm);
  cursor: pointer;
}
/* The loader writes the iframe's geometry as an inline style, including a 16px
   radius from the v1 design. An inline style cannot be beaten without this,
   and the system's radius is 2px everywhere. */
[data-home="map"] iframe {
  border-radius: var(--radius-xs) !important;
  display: block;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.55) brightness(0.9) contrast(1.05);
}

/* ---------- 5. Guides ---------- */

/* The quieter card action: a green label with an arrow drawn in CSS, so the
   six guide cards do not carry six buttons beside the four pathway buttons. */
[data-part="go"] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-10);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-accent);
}
[data-part="go"]::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-reveal);
}
a.sm-card:hover [data-part="go"]::after { transform: translateX(4px); }

/* Finding 6: the guides section and the prices section under it both rendered
   as a row of three equal boxes at 1440, one after the other, which is the
   adjacent-same-archetype fault even though the grounds alternate and a
   perforated ticket is not a card.
   The six guides go two-up instead, which is three rows of two with no short
   row, and the prices keep their three tickets. The break is the column count,
   and the wider cell suits a card whose paragraph runs to three lines anyway. */
@media (min-width: 1100px) {
  .sm-section .sm-cards:has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The seventh guide is the free mock test, which the live page marks out from
   the other six. It becomes a full-width card under the grid rather than a
   stranded cell in a short last row. */
[data-home="wide"] {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-12);
  padding: var(--space-16) var(--space-20);
  background: var(--color-panel);
  border: 1px solid var(--rsa-line-08);
  border-top: var(--rule-green-top);
  border-radius: var(--radius-xs);
  text-decoration: none;
}
[data-home="wide"]:hover { background: var(--color-panel-raised); }
[data-home="wide"] h3 { margin-bottom: var(--space-4); text-transform: none; }
[data-home="wide"] p { margin: 0; font-size: var(--fs-body-sm); color: var(--color-text-muted); }

/* ---------- 6. Prices ---------- */

/* A ticket is a pale paper object, so every heading inside one has to be told
   so: h1 to h4 default to chalk and would render chalk on chalk. This is the
   fault that cost the most time on Automatic. */
#pricing .sm-ticket h3 { color: var(--rsa-road-black); }
#pricing .sm-ticket .sm-ticket__per { opacity: 1; color: var(--rsa-slate); }
#pricing .sm-ticket--best .sm-ticket__per { color: var(--rsa-road-black); opacity: 0.8; }

/* "Real numbers, big." The price is the content of this module, so it is set
   at the stat step rather than at the ticket's usual size. */
#pricing .sm-ticket__price {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--fs-stat);
  font-weight: var(--fw-plate);
}

/* Rule 4: every price card carries its own action. */
#pricing .sm-ticket .sm-btn { margin-top: var(--space-12); }

#pricing [data-part="badge"] {
  position: absolute;
  top: calc(var(--space-12) * -1);
  left: var(--pad-card);
  margin: 0;
  background: var(--color-bg-deep);
  color: var(--color-text);
}
#pricing .sm-ticket { position: relative; }

/* ---------- 7. Instructors ---------- */

[data-home="crew"] .sm-card { align-items: flex-start; }
[data-home="crew"] img {
  width: 88px;
  height: 88px;
  margin-bottom: var(--space-8);
  border-radius: var(--radius-round);
  box-shadow: var(--ring-green);
  object-fit: cover;
}
[data-home="crew"] h3 { margin-bottom: var(--space-3); }
[data-home="crew"] [data-part="area"] {
  margin-bottom: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-accent);
}
[data-home="crew"] [data-part="exp"] {
  margin-bottom: var(--space-8);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
[data-home="crew"] blockquote {
  margin: auto 0 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--rsa-line-08);
  font-size: var(--fs-body-sm);
  color: var(--color-text-body);
}

/* ---------- 8. Steps ---------- */

/* The dashed road line down the three stops does not paint from school.css:
   `.sm-stops::before { border-left: var(--road-dash-v) }` sets a border from a
   repeating-linear-gradient, which is not a valid border value, so the whole
   declaration is dropped and the pseudo-element is left 0px wide. Measured:
   borderLeftWidth 0px. The conformance gate cannot see it, because it asks
   `!!document.querySelector('.sm-stops')` and the class is present either way,
   which is finding 19 exactly.
   Scoped here so this route carries the device. The same rule belongs in
   school.css for the town pages, and that is in the report as a shared CSS
   request rather than edited into a file this family does not own.
   background-image, not background: the shorthand would reset background-size
   and position, which is finding 16. */
.sm-stops::before {
  width: 4px;
  border-left: 0;
  background-image: var(--road-dash-v);
}

/* Three stops down the left of a 1280px section leaves three quarters of the
   row empty, and the pack's own list of faults names long empty black gaps.
   The same three stops run ACROSS the section instead, on the grey dashed road
   the pack uses behind its numbered exits, with each roundel hung on the line.
   The vertical form above is still what a phone gets. */
@media (min-width: 769px) {
  [data-watermark] .sm-stops {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-24);
    padding: 0;
  }
  [data-watermark] .sm-stops::before {
    top: 19px;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 4px;
    background-image: repeating-linear-gradient(90deg, var(--rsa-line-25) 0 22px, transparent 22px 36px);
  }
  [data-watermark] .sm-stop {
    margin: 0;
    padding-top: var(--sm-space-64);
  }
  [data-watermark] .sm-stop__num { left: 0; }
}

/* The line under the three stops. The stops themselves are school.css's
   .sm-stops, punched-out numbered roundels included. */
[data-part="steps-note"] {
  /* Rule 20: it is a line about the section, not the last line of the first
     column, so it gets room above it. */
  margin: var(--space-20) 0 0;
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
}

/* ---------- 9. Districts ---------- */

[data-home="districts"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-20) var(--space-16);
  margin-top: var(--space-24);
}
[data-home="districts"] h3 {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-6);
  font-size: var(--fs-h4);
  background: var(--heading-underline);
}

/* ---------- 10. The closing band (X3) ---------- */

/* The band's two objects, the 220px L plate and the white centre line, are
   drawn in school.css now, for every family at once. The note that stood here
   said nothing else targeted this element's pseudo-elements, which finding 19
   says to check: it was true when it was written and stopped being true, and
   the two copies then collided. Measured on this page before the deletion: the
   plate was painting at left 0, over the heading, because the central rule
   supplies the left and this sheet only supplied the right, and the centre line
   was 220px wide instead of the full band. Deleted, so there is one source.
   The extra bottom padding stays: it is what keeps the central centre line off
   the buttons. */
#book {
  padding-bottom: var(--sm-space-64);
}
/* On a red ground an outline at 25 per cent white is barely an outline, and
   the pack's closing band pairs a black button with an outlined one. */
#book .sm-btn--ghost { border-color: var(--rsa-white); }
/* FIX F4: copy on a red ground is white, never Mist. The shared rule colours
   .sm-or-call muted, which is 2.1:1 here. */
#book .sm-or-call { color: var(--color-on-red-muted); }
#book .sm-or-call a { color: var(--rsa-white); }

/* ---------- 11. Shared-module overrides this route needs ---------- */

/* The lede under a section heading carries one link on this page, to Google
   reviews. school.css colours links inside .sm-prose but not inside .sm-lede. */
.sm-lede a { color: var(--color-accent); text-underline-offset: 3px; }

/* The featured learner review sits in a split beside the photograph rather
   than in the review grid, so it has to fill its own column. */
[data-home="story"] .sm-split { align-items: stretch; }
[data-home="story"] .sm-review { height: 100%; }
[data-home="story"] .sm-review__body { display: flex; flex-direction: column; }
[data-home="story"] blockquote { margin: 0; font-size: var(--fs-lede); line-height: var(--lh-lede); }
[data-home="story"] [data-part="source"] {
  margin-top: var(--space-8);
  align-self: flex-start;
  color: var(--rsa-white);
  font-size: var(--fs-caption);
}

/* Six reviews in a 1280px wrap: auto-fit picks its column count from the
   width, not the item count, so 300px minimums gave four columns and left the
   last row short by two, which reads as a fault rather than a grid. Finding 17,
   from the other direction: school.css already does this for a six-card grid.
   Six belongs in three columns, two full rows. */
@media (min-width: 769px) {
  [data-home="wall"] .sm-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The review wall's own source links sit under the attribution. */
[data-home="wall"] .sm-review__who { margin-top: auto; }
[data-home="wall"] [data-part="source"] {
  display: inline-block;
  margin-top: var(--space-6);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
[data-part="source"]::after { content: " ↗"; }

/* ---------- 12. Responsive ---------- */

@media (max-width: 768px) {
  [data-home="districts"] { grid-template-columns: 1fr; gap: var(--space-16); }
  [data-home="wide"] { grid-template-columns: 1fr; }
  [data-home="callout"] { padding: var(--space-14) var(--space-12); }
  [data-home="callout"] .sm-btn { width: 100%; }
  [data-part="glyph"] { height: 104px; margin-bottom: var(--space-8); }
  [data-home="crew"] img { width: 72px; height: 72px; }
  #book { padding-bottom: var(--space-28); }
  #pricing .sm-ticket__price { font-size: var(--fs-num-xs); }
  /* The portrait sits under the copy at this width, so it stops being a
     column object and goes back to its natural size. */
  [data-home="portrait"] { max-width: 350px; }
}