/* ==========================================================================
   Design system v2, the guide family: /guides/ and the three long-form guides.

   Loaded after tokens.css and school.css by base.njk when a page declares
   designSheet: "guide". It owns nothing the other families own: every rule here
   either re-styles a school.css device for a reading page, or styles a plain
   element.

   WHY THERE ARE NO NEW CLASS NAMES IN THIS FILE.
   check-unstyled-classes.mjs reads only tokens.css and school.css, so any class
   invented in a per-family sheet is reported as a class the v2 sheets never
   style, and the gate fails on a page that is in fact fully styled. Rather than
   weaken the gate, this sheet hooks on data- attributes and on element
   selectors, and the report asks for the gate's SHEETS list to gain the family
   sheets. The attributes are styling hooks only: no script reads one, and no
   JS contract name is reused.

   The hooks, all on markup in src/guides/:
     [data-guide="hero"]        the guide hero, one column, held to a measure
     [data-guide="article"]     a reading section: measure, rhythm, lists
     [data-guide="road"]        a split whose columns align at the top
     [data-guide="photo"]       a photograph on an offset block inside a split
     [data-guide="stops"]       the numbered road list used as a reading route
     [data-guide="alert"]       the amber caution band (the pack's honest catch)
     [data-guide="factband"]    the green fact band, F2
     [data-guide="band"]        the closing call band, plus its pack furniture
     [data-guide="checklist"]   the paper checklist, I4, the one light surface
     [data-guide="ticks"]       a tick list, green outlined discs
     [data-guide="table"]       a real data table, the one shape a card loses
     [data-guide="fails"]       cards whose figure is a caution, so amber
     [data-guide="tips"]        learner quotes reusing the review wall
     [data-guide="note"]        a bordered aside inside a reading section
     [data-guide="authority"]   the closing colophon, not a content section

   A guide is read, not scanned, so the devices here serve the measure: nothing
   is forced into a card grid that the live page sets as prose, a list or a
   table.
   ========================================================================== */

/* ---------- 1. The guide hero ---------- */

/* One column, not the town hero's 1.5fr/0.5fr: a guide has no pricing aside to
   put in the second track, and an empty track pushes the heading off centre. */
[data-guide="hero"] .sm-hero__grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  min-height: 520px;
}

[data-guide="hero"] .sm-hero__grid > div { max-width: 46rem; }
[data-guide="hero"] .sm-crumb { padding-top: 0; margin-bottom: var(--space-12); }
[data-guide="hero"] .sm-plate { margin-bottom: var(--space-12); }

/* A guide's standfirst does more work than a town lede: it is the only copy
   above the fold, so it takes the step above body size. */
[data-guide="hero"] .sm-lede {
  max-width: 48ch;
  margin-bottom: var(--space-16);
  font-size: clamp(18px, 1.6vw, 22px);
}

[data-guide="hero"] h1 { max-width: 24ch; }

/* The hero photograph sits further right on a reading page, because the copy
   column is wider than a town hero's. */
[data-guide="hero"] .sm-hero__photo img { object-position: 78% 38%; }

/* ---------- 2. Reading rhythm ---------- */

/* The measure. 66 characters is the span the pack's body size and line height
   were set for; the shared .sm-prose ceiling of 72ch is for a column beside a
   photograph, not for a page someone reads end to end. */
[data-guide="article"] .sm-prose {
  max-width: 66ch;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
}
[data-guide="article"] .sm-prose > p { margin-bottom: var(--space-12); }
[data-guide="article"] .sm-prose > p:last-child { margin-bottom: 0; }

/* A heading stack: marker, h2, lede. The pack's 24px inside the stack and 48px
   from the stack to the content. */
[data-guide] .sm-section > .sm-wrap > h2,
[data-guide] > .sm-wrap > h2 { max-width: 28ch; }

/* Rule 20: a section intro is not flush against the heading above it. */
[data-guide] .sm-lede + * { margin-top: var(--space-24); }
[data-guide="article"] > .sm-wrap > .sm-lede { margin-bottom: var(--space-24); }

/* A subhead inside running copy. At 22px uppercase it reads as a second
   section opener and breaks the page into pieces, so inside prose it drops the
   caps and keeps the weight. */
[data-guide="article"] .sm-prose h3 {
  margin: var(--space-20) 0 var(--space-6);
  font-size: var(--fs-h3);
  text-transform: none;
  letter-spacing: -0.01em;
}
[data-guide="article"] .sm-prose h3:first-child { margin-top: 0; }

/* A panel inside the column, and the paragraph after a tick list, both need
   the heading-stack step rather than the paragraph step. */
[data-guide="article"] .sm-prose > .sm-card { margin: var(--space-12) 0; }
[data-guide="article"] .sm-prose > .sm-card p:last-child { margin-bottom: 0; }
[data-guide="ticks"] + p { margin-top: var(--space-12); }

/* Lists in running copy. A hanging indent, never a grid: a grid puts every
   inline child of an item in its own cell and sets the text one word per line.
   The marker is drawn in the gutter instead. */
[data-guide] .sm-prose ul:not([data-guide]),
[data-guide] .sm-stop ul:not([data-guide]) {
  margin: 0 0 var(--space-12);
  padding: 0;
  list-style: none;
}
[data-guide] .sm-prose ul:not([data-guide]) > li,
[data-guide] .sm-stop ul:not([data-guide]) > li {
  position: relative;
  margin-bottom: var(--space-6);
  padding-left: var(--space-14);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-body);
}
[data-guide] .sm-prose ul:not([data-guide]) > li::before,
[data-guide] .sm-stop ul:not([data-guide]) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 2px;
  background: var(--color-accent);
}
[data-guide] .sm-stop ul > li:last-child,
[data-guide] .sm-prose ul > li:last-child { margin-bottom: 0; }

/* The road line itself does not paint. school.css draws it with
   `border-left: var(--road-dash-v)`, and --road-dash-v is a
   repeating-linear-gradient: a gradient is not a valid border shorthand, so
   the whole declaration is dropped and .sm-stops has no line at all. The
   conformance gate only asks whether .sm-stops exists, so it has never
   noticed, which is finding 19 from the other direction.
   Drawn here as a background on the same pseudo-element, and centred on the
   numbered disc, whose own offset this family widens. The shared fix is in the
   report, since school.css is owned centrally. */
[data-guide="stops"]::before {
  /* Measured against the rendered disc centre, not guessed: the disc is
     content-box sized with a 5px knock-out border and a -5px margin. */
  left: 14px;
  width: 4px;
  border-left: 0;
  background: var(--road-dash-v);
}

[data-guide] .sm-prose strong,
[data-guide] .sm-stop strong { color: var(--color-text); font-weight: var(--fw-bold); }

/* ---------- 3. Splits and photographs ---------- */

/* A reading split aligns at the top. Centred columns leave the prose floating
   beside the middle of a photograph. */
[data-guide="road"] { align-items: start; }

/* A photograph on its green offset block, held to the row rather than set at
   the shared 440px, which is taller than a guide's text column. */
[data-guide="photo"] img { height: 100%; min-height: 360px; object-fit: cover; }
[data-guide="photo"] picture { display: block; height: 100%; background: var(--color-panel); }

/* ---------- 4. The reading route (sm-stops) ---------- */

/* The pack's numbered road list, used for the pages' own sequences: the test
   day timeline, the EDT process, the three guides on the hub. The shared rule
   punches the numeral out of the line with a border in the page ground, so a
   stop on a surface section needs the surface colour instead. */
[data-guide="stops"] { padding-left: var(--space-28); }
[data-guide="stops"] .sm-stop { margin-bottom: var(--space-20); }
[data-guide="stops"] .sm-stop:last-child { margin-bottom: 0; }
[data-guide="stops"] .sm-stop__num { left: calc(var(--space-28) * -1); }
[data-guide="stops"] .sm-stop h3 { margin-bottom: var(--space-5); font-size: var(--fs-h3); }
[data-guide="stops"] .sm-stop p {
  max-width: 62ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
[data-guide="stops"] .sm-stop .sm-btn { margin-top: var(--space-10); }

/* The step's own label, which the live page sets above its heading. */
[data-guide="stops"] .sm-stop > span:not(.sm-stop__num) {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow-sm);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.sm-section--surface [data-guide="stops"] .sm-stop__num { border-color: var(--color-panel); }

/* The hub's three stops carry the page's only figures, and finding 7 of the
   design review measured them at 12.5px inside the green disc while the
   watermark behind them was 400px. The other three guides reach 68 to 144px.
   The three guides ARE the hub's sequence, so the disc gives way to the pack's
   outlined step numeral: section 3.4, 64px at a 2px stroke, with the dashed
   road line running behind the open counter of the figure rather than through a
   disc. The figures are the ones already in the markup, so nothing decorative
   and nothing invented is added. Scoped to the hub, because the timelines on
   the other three guides are steps in a process and read better as discs on a
   line. */
[data-guides-index] [data-guide="stops"] { padding-left: var(--space-28); }
[data-guides-index] [data-guide="stops"] .sm-stop__num {
  top: -0.14em;
  width: auto;
  height: auto;
  margin-left: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: var(--fs-num-md);
  line-height: 1;
  color: var(--color-accent);
}
/* Outlined only where the stroke is supported. Without the guard a browser
   without it would paint transparent type on black, which is the device
   disappearing rather than degrading. school.css guards its watermark the same
   way. */
@supports (-webkit-text-stroke: 1px white) {
  [data-guides-index] [data-guide="stops"] .sm-stop__num {
    color: transparent;
    -webkit-text-stroke: 2px var(--color-accent);
  }
}

/* ---------- 5. Bands: caution, fact, closing call ---------- */

/* The honest catch. The pack gives amber to caution content and to nothing
   else, and the live page already sets this rule change on amber. .sm-band
   paints its copy in white for a red ground, so each line is re-coloured. */
[data-guide="alert"] {
  background: var(--rsa-amber);
  color: var(--rsa-road-black);
  padding: var(--space-28) 0;
  text-align: left;
}
[data-guide="alert"] p {
  max-width: 68ch;
  margin: var(--space-12) 0 var(--space-10);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--rsa-road-black);
}
[data-guide="alert"] strong { color: var(--rsa-road-black); font-weight: var(--fw-bold); }
[data-guide="alert"] .sm-eyebrow { margin-bottom: 0; color: var(--rsa-road-black); }
/* The chip inverts: black ground, amber type, which is what the live banner
   does and what keeps the slant readable on amber. */
[data-guide="alert"] .sm-eyebrow__marker {
  padding: var(--pad-badge);
  background: var(--rsa-night);
  color: var(--rsa-amber);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
[data-guide="alert"] a {
  color: var(--rsa-road-black);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* F2, the green fact band. The one section where everything inverts to black
   type, and its figure sits on a 4px black rule rather than in a box. */
[data-guide="factband"] {
  background: var(--color-accent);
  color: var(--rsa-road-black);
  padding: var(--space-section) 0;
  text-align: left;
}
[data-guide="factband"] > .sm-wrap > div {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-10);
  max-width: 44rem;
  padding-top: var(--space-10);
  border-top: 4px solid var(--rsa-road-black);
}
[data-guide="factband"] .sm-figure__value {
  font-size: clamp(96px, 10vw, 150px);
  font-weight: var(--fw-plate);
  line-height: 0.78;
  letter-spacing: -0.07em;
  color: var(--rsa-road-black);
}
[data-guide="factband"] p {
  max-width: 34ch;
  margin: 0 0 var(--space-2);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  line-height: 1.45;
  color: var(--rsa-road-black);
}
[data-guide="factband"] p + p {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: rgba(11, 11, 12, 0.66);
}

/* The closing call band's furniture, the white centre line and the 220px L
   plate, is drawn in school.css now, for every family at once. The note that
   stood here said .sm-band carried no pseudo-element rule so neither could
   collide: that is no longer true, and when it stopped being true this sheet's
   copy collided with the central one on BOTH pseudo-elements. The plate landed
   at the left edge over the heading and the centre line was clipped to 220px.
   Deleted, so there is one source. Only the measure stays: the copy is held
   clear of the plate's half of the band. */
@media (min-width: 1100px) {
  [data-guide="band"] > .sm-wrap { max-width: 62%; }
}

/* The amber caution band and the green fact band are .sm-band too, because
   they are the same full-bleed shape, and the central rules would now paint a
   white road marking and a 220px L plate on both. The pack allows exactly one
   red Book band per page and the plate belongs to it, so the two other bands
   suppress the pseudo-elements rather than inheriting furniture that is not
   theirs. content:none generates no box at all, where display:none would still
   count as a device to anything measuring it. */
[data-guide="alert"]::before,
[data-guide="alert"]::after,
[data-guide="factband"]::before,
[data-guide="factband"]::after { content: none; }

/* ---------- 6. The paper checklist (I4) ---------- */

/* The pack's only light surface, and the only tilted object on these pages. A
   red header strip opens it, each row is a hairline apart, and the box is drawn
   rather than written, so the tick glyph in the live markup is not needed in
   the text. */
[data-guide="checklist"] {
  max-width: 740px;
  margin-top: var(--space-24);
  border-radius: var(--radius-md);
  background: var(--rsa-chalk);
  color: var(--rsa-road-black);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
  /* The checklist's own tilt, from the pack. Not a token: the sign tokens are
     the sign's measurements and this is a different object. */
  transform: rotate(1.5deg);
  overflow: hidden;
}
[data-guide="checklist"] > div:first-child {
  height: 14px;
  background: var(--rsa-red);
}
[data-guide="checklist"] ul {
  margin: 0;
  padding: var(--space-9) var(--pad-card) var(--space-12);
  list-style: none;
}
[data-guide="checklist"] li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-6) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--rsa-road-black);
}
[data-guide="checklist"] li:last-child { border-bottom: 0; }
[data-guide="checklist"] li::before {
  content: "✓";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--rsa-road-black);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-black);
  line-height: 1;
  /* Ink, not green: Sign Green belongs to road signs and the N plate, and
     Go Green on a chalk ground is 1.7:1. */
  color: var(--rsa-road-black);
}
/* The one row that carries the 2026 change. Amber, because it is the catch. */
[data-guide="checklist"] li[data-item="new"] {
  margin: var(--space-4) calc(var(--space-6) * -1);
  padding: var(--space-6);
  border: 1px solid var(--rsa-amber);
  border-radius: var(--radius-sm);
  background: rgba(255, 174, 59, 0.18);
  font-weight: var(--fw-medium);
}
[data-guide="checklist"] li[data-item="new"]::before {
  border-color: var(--rsa-amber);
  background: var(--rsa-amber);
  color: var(--rsa-road-black);
}
[data-guide="checklist"] li span {
  display: inline-block;
  margin-left: var(--space-4);
  padding: 3px var(--space-5) 2px;
  background: var(--rsa-night);
  color: var(--rsa-amber);
  font-family: var(--font-display);
  font-size: var(--fs-nano);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  vertical-align: 1px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

/* ---------- 7. Tick lists ---------- */

/* The pack's reassurance line: a 24px green outlined disc, then the line. Used
   where the live page sets a tick list rather than prose. */
[data-guide="ticks"] {
  max-width: 62ch;
  margin: var(--space-12) 0 0;
  padding: 0;
  list-style: none;
}
[data-guide="ticks"] li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--rsa-line-08);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-body);
}
[data-guide="ticks"] li:last-child { border-bottom: 0; }
[data-guide="ticks"] li::before {
  content: "✓";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-round);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-accent);
}

/* ---------- 8. Tables ---------- */

/* Two of these pages carry a genuine comparison table. A table is the shape
   the content is in, and turning rows into cards loses the comparison, so it
   stays a table and gets the system's hairlines and label type instead.
   The wrapper scrolls rather than the page. */
[data-guide="table"] {
  margin-top: var(--space-20);
  overflow-x: auto;
}
[data-guide="table"] table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-panel);
  border: 1px solid var(--rsa-line-08);
}
[data-guide="table"] th {
  padding: var(--space-10) var(--space-12);
  border-bottom: 1px solid var(--rsa-line-16);
  background: var(--color-bg-deep);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: left;
  color: var(--color-text);
}
[data-guide="table"] td {
  padding: var(--space-10) var(--space-12);
  border-bottom: 1px solid var(--rsa-line-08);
  font-size: var(--fs-body-sm);
  line-height: 1.45;
  color: var(--color-text-body);
}
[data-guide="table"] tbody tr:last-child td { border-bottom: 0; }
[data-guide="table"] td:first-child { color: var(--color-text); font-weight: var(--fw-medium); }
[data-guide="table"] a { color: var(--color-accent); text-underline-offset: 3px; }

/* The column the page is arguing for. A green left rule and green type, which
   is what the live table does, and the only colour difference between the two
   columns. */
[data-guide="table"] [data-col="lead"] {
  border-left: var(--rule-green);
  background: var(--color-panel-raised);
  color: var(--color-accent);
  font-weight: var(--fw-bold);
  text-align: center;
}
[data-guide="table"] th[data-col="lead"] { color: var(--color-accent); }
[data-guide="table"] [data-col="plain"] { text-align: center; }
[data-guide="table"] th[data-col="plain"] { text-align: center; }

/* A pass rate reads as a band, not a figure, so it takes the pill. */
[data-guide="table"] .sm-pill { font-weight: var(--fw-bold); white-space: nowrap; }
[data-guide="table"] .sm-pill[data-rate="high"] {
  border-color: var(--color-accent);
  background: rgba(142, 219, 79, 0.14);
  color: var(--color-accent);
}
[data-guide="table"] .sm-pill[data-rate="mid"] {
  border-color: var(--rsa-amber);
  background: rgba(255, 174, 59, 0.14);
  color: var(--rsa-amber);
}
[data-guide="table"] .sm-pill[data-rate="low"] {
  border-color: var(--color-text-red);
  background: rgba(218, 42, 35, 0.16);
  color: var(--color-text-red);
}

/* ---------- 9. Figures inside cards ---------- */

/* The fault percentages. Real numbers, set big: the figure is the content and
   the words under it are the gloss. Amber, because each one is a caution. */
[data-guide="fails"] .sm-card { padding-top: var(--space-20); }
[data-guide="fails"] .sm-figure__value {
  margin-bottom: var(--space-5);
  color: var(--rsa-amber);
}
[data-guide="fails"] .sm-card h3 { margin-bottom: var(--space-5); }

/* The twelve EDT sessions. The lesson number is the only thing that orders
   them, so it leads the card at display size. */
[data-guide="lessons"] .sm-figure__value {
  margin-bottom: var(--space-4);
  line-height: 0.82;
}
[data-guide="lessons"] .sm-card { padding-top: var(--space-16); }

/* ---------- 10. Learner quotes ---------- */

/* The live page sets these as four small cards. They are what learners said,
   so they take the review wall and its embossed quote mark, with the label as
   the card's own heading rather than a name and an avatar: the live page
   attributes none of them, and attributing them here would be writing copy. */
[data-guide="tips"] .sm-review h3 {
  margin: var(--space-5) 0 var(--space-6);
  font-size: var(--fs-h4);
  text-transform: none;
  letter-spacing: -0.01em;
}
[data-guide="tips"] .sm-review--feature h3 { color: var(--color-on-red-muted); }
[data-guide="tips"] .sm-review blockquote { font-size: var(--fs-body-sm); line-height: var(--lh-body); }
[data-guide="tips"] .sm-review blockquote a { color: var(--color-accent); }
[data-guide="tips"] .sm-review--feature blockquote a { color: var(--color-on-red-accent); }

/* ---------- 11. Asides and the colophon ---------- */

/* A note inside a reading section: the pack's green left edge, no card
   shadow, because it is part of the column rather than an object on it. */
[data-guide="note"] {
  max-width: 66ch;
  margin-top: var(--space-24);
  padding: var(--space-12) var(--space-16);
  border-left: var(--rule-green);
  background: var(--color-panel);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-body);
}
[data-guide="note"] p:last-child { margin-bottom: 0; }
[data-guide="note"] a { color: var(--color-accent); }

/* The closing colophon. Deliberately not a .sm-section: it is a credit line
   under the page, not a section of it, so it carries no lane marker. */
[data-guide="authority"] {
  padding: var(--space-20) 0;
  border-top: 1px solid var(--rsa-line-08);
  text-align: center;
}
[data-guide="authority"] p {
  max-width: 68ch;
  margin: 0 auto;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}
[data-guide="authority"] a { color: var(--color-accent); }

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

@media (max-width: 1100px) {
  [data-guide="hero"] .sm-hero__grid { min-height: 0; }
  [data-guide="band"] > .sm-wrap { max-width: none; }
}

@media (max-width: 768px) {
  [data-guide="hero"] .sm-hero__grid > div { max-width: none; }
  [data-guide="alert"], [data-guide="factband"] { padding: var(--sm-space-64) 0; }

  /* A tilted card clips its own corners against a 20px gutter, and the paper
     surface is wide enough that the tilt would push it off the page. */
  [data-guide="checklist"] { transform: none; margin-top: var(--space-16); }
  [data-guide="checklist"] ul { padding: var(--space-8) var(--space-12) var(--space-10); }

  [data-guide="stops"] { padding-left: var(--space-20); }
  /* The disc's own centre lands in the same place at both widths, because the
     list padding and the disc offset move together, so the line above needs no
     second position here. Measured, not assumed. */
  [data-guide="stops"] .sm-stop__num { left: calc(var(--space-20) * -1); }

  [data-guide="photo"] img { height: 260px; min-height: 0; }
  [data-guide="photo"] picture { height: auto; }

  [data-guide="table"] th { padding: var(--space-6) var(--space-8); }
  [data-guide="table"] td { padding: var(--space-6) var(--space-8); font-size: var(--fs-small); }

  [data-guide="factband"] > .sm-wrap > div { gap: var(--space-6); }
}
/* ---------- 13. Hero skins ---------- */

/* Finding 1 of the design review: every route in this family shipped one hero
   skin, so neighbouring pages were the same page above the fold. The skin is
   now dealt deterministically per route in
   data/rsa-school/makeover/hero-skin.cjs, and these are the two skins that
   needed work before they read as different HERE.
   The town template gives route and night markup of their own: route puts the
   photograph in an aside frame and night has no backdrop. This family has one
   full-bleed <picture> and no aside, so both skins are composed from the
   element that is already in the markup rather than by adding any.

   Route, the pack's skin B: the photograph stops being a backdrop and becomes
   a framed object on the right, on a green offset block, with the copy held to
   the left half. The 8px chalk keyline and the 28px offset are the pack's own
   numbers, from sections 3.2 and 1/B. */
@media (min-width: 1100px) {
  /* One column first. school.css gives route a 1fr/0.82fr grid for the town
     template's aside, which out-specifies this family's own single-column rule
     and left the copy in a 686px track: with the 52 per cent below that came
     out at 357px and the hero grew 76px taller to wrap it. Measured, not
     assumed. */
  [data-guide="hero"].sm-hero--route .sm-hero__grid { grid-template-columns: minmax(0, 1fr); }
  [data-guide="hero"].sm-hero--route .sm-hero__grid > div { max-width: 52%; }
  [data-guide="hero"].sm-hero--route .sm-hero__photo {
    top: var(--space-28);
    right: var(--space-16);
    bottom: var(--space-28);
    left: 56%;
    z-index: 0;
    border: 8px solid var(--rsa-chalk);
  }
  /* The offset block. ::before is free on this element: school.css draws the
     foot fade on its ::after and nothing else in either sheet touches either
     one, which finding 19 says to check before drawing on a pseudo-element. */
  [data-guide="hero"].sm-hero--route .sm-hero__photo::before {
    content: "";
    position: absolute;
    inset: 28px -28px -28px 28px;
    z-index: -1;
    background: var(--color-accent);
  }
  /* A 220px ramp inside a framed photograph is a dark half rather than a weld.
     The frame has an edge of its own, so the fade only has to stop the crop
     reading as a cut. Still above the viewport gate's 150px floor. */
  [data-guide="hero"].sm-hero--route .sm-hero__photo::after { height: 160px; }
  /* The copy side goes to near-black, since there is no longer a photograph
     under it to hold down. */
  [data-guide="hero"].sm-hero--route::before { background: var(--overlay-panel); }
}

/* Night, the pack's skin C: a slanted photo panel with an 18px green leading
   edge. school.css composes that edge on .sm-hero--night::after, and
   .sm-hero::after, which paints the 6px green rule that closes every hero, is
   declared later at the same specificity. The two merge into one 18px by 6px
   stub: measured on this family and on the night towns, where the closing rule
   is 18px wide and the leading edge does not exist. Both are put back here, the
   edge on the photo wrapper's own ::before, which nothing else uses. The
   collision is in school.css and is in the report as a shared-CSS request, not
   edited here. */
[data-guide="hero"].sm-hero--night::after {
  /* display, because school.css hides this pseudo-element below 1100px: that
     was the right call while it carried the skewed leading edge, and it took
     the closing rule with it. Measured at 390px before this line: the night
     hero ended on the photograph with no green rule under it. */
  display: block;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: 6px;
  background: var(--color-accent);
  transform: none;
  z-index: 0;
}
[data-guide="hero"].sm-hero--night .sm-hero__photo::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 18px;
  z-index: 1;
  background: var(--color-accent);
}
@media (max-width: 1100px) {
  /* school.css squares the panel up and runs it full width at this size, so
     the leading edge has no edge to lead and goes with the skew. */
  [data-guide="hero"].sm-hero--night .sm-hero__photo::before { display: none; }
}

/* The copy keeps the left 48 per cent, which is where the skewed panel's
   leading edge actually lands at 1440 once the skew is counted: measured at
   x 733, not at the 56 per cent the untransformed rule implies. Without this
   the hub's 1.5fr copy track ran 280px under the photograph. */
@media (min-width: 1100px) {
  [data-guide="hero"].sm-hero--night .sm-hero__grid { grid-template-columns: minmax(0, 1fr); }
  [data-guide="hero"].sm-hero--night .sm-hero__grid > div { max-width: 48%; }
}