/* ==========================================================================
   Design system v2, content family sheet.

   Loaded only on the three standalone content routes, after tokens.css and
   school.css, because each page declares designSheet: "content" in its front
   matter:

     /news            an index page with nothing in the index yet
     /resources       an index page: five guide cards and a statement
     /parent-students an audience essay: timeline, rules, insurance, costs,
                      a practice checklist, test day, a rule change, an FAQ

   Nothing here is shared. Every rule adjusts a class school.css already
   defines, or styles one of the five additions this family needs and no other
   family would: a card grid whose column count comes from its item count, the
   paper checklist, the cost table, the amber caution note, and the two glyphs
   the live pages carry in their own markup.

   Tokens only, and the spacing scale is named by VALUE and skips numbers:
   --space-13 does not exist and an undefined var() drops the whole declaration
   silently. The three values below are local because only this sheet needs
   them, the same reason school.css declares its own two rhythm steps.
   ========================================================================== */

:root {
  /* Ink and hairlines for the one light surface in the system. The shared
     hairline tokens are white alpha, which is invisible on paper. */
  --sm-content-rule-ink: rgba(0, 0, 0, 0.08);
  /* Body ink on paper. Not pure black: the pack sets Road Black for the
     headings and a softer ink for the running copy under them, and at 15px
     full-strength black on chalk is harsher than the panel wants. 11.4:1. */
  --sm-content-ink-soft: #33333A;
  /* The pack's object shadow for a lifted physical thing, which the shared
     scale tops out below: --shadow-card-hover is 0 24px 50px. */
  --sm-content-shadow-paper: 0 40px 80px rgba(0, 0, 0, 0.6);
  /* The checklist's own measure, carried over from the live page, so the
     tilted panel always has slack inside the wrap at every width. */
  --sm-content-paper-w: 750px;
}

/* ---------- 1. The hero, for three short heroes ---------- */

/* school.css holds the hero grid at the pack's 640px, which is right for a
   town: a sign, a two-line H1, a lede, a search form, two buttons and an
   aside. These three heroes carry a breadcrumb, a one or two line H1, one line
   of lede and two buttons, and at 640px a quarter of the first screen is
   empty, which is the "long empty black gap" the pack lists as a fault in its
   own right. The ramp, the photograph and the closing green rule are all
   unchanged; only the floor moves. */
.sm-hero__grid { min-height: 420px; }

/* ---------- 2. Card grids, counted ---------- */

/* auto-fit picks its column count from the available width, not from the item
   count: at the 1280px container it opens four tracks, so the five guide cards
   on /resources went 4 + 1 and stranded the last one on a row of its own. A
   last row short by two or more reads as a layout fault rather than a grid,
   which is finding 17, and it is invisible to every correctness gate.
   Both lists in this family hold five cards, so the count is picked here.

   Three columns rather than five. Five tickets read as a price scale, which is
   why school.css puts five of those in one row; five of these each carry a
   title and a full sentence of description, and at 237px that sets the
   sentence one or two words to a line. 3 + 2 is short by one, which the eye
   reads as a grid.

   The selector carries both classes so it matches the specificity of
   school.css's own six-card rule, and every rule is inside a min-width query
   so the single-column phone layout is never overridden. */
@media (min-width: 1200px) {
  .sm-cards.sm-cards--content:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Between the tablet break and 1200px three columns leaves about 213px a card,
   which cannot hold "Top 5 Mistakes Dublin Drivers Make" without breaking the
   title over three lines. Two columns puts five cards in 2 + 2 + 1: short by
   one, same as above, and the cards are wide enough to read. */
@media (min-width: 769px) and (max-width: 1199px) {
  .sm-cards.sm-cards--content:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 3. A card that is itself a link ---------- */

/* The five guide cards on /resources are each a single anchor, as the live page
   had them, so the whole cell is the target rather than a link inside it. */
.sm-cards a.sm-card {
  text-decoration: none;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-base);
}
.sm-cards a.sm-card:hover {
  background: var(--color-panel-raised);
  transform: var(--lift-sm);
}

/* The pack's green arrow disc, on the floor of the card so the discs line up
   across a row whose cards hold different amounts of copy. Drawn in CSS and
   never written as a text node: a glyph inside the card changes what the card
   says, and the live page's own arrows are decoration the parity gate strips
   from both sides. .sm-card carries no ::after rule in school.css, so this is
   not the collision that cost the lessons row its offset block (finding 19). */
.sm-cards a.sm-card::after {
  content: "→";
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: auto;
  border-radius: var(--radius-round);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-black);
}
.sm-cards a.sm-card h3 { margin-bottom: var(--space-3); }
.sm-cards a.sm-card p { margin-bottom: var(--space-12); }

/* school.css gives every third card in a grid the green top rule
   (`.sm-cards > .sm-card:not([class*="sm-junction--"]):nth-child(3n + 1)`),
   which is right for a trio of different things and wrong for a list of five
   of the same kind: cards one and four come out green and the rest grey, which
   reads as a colour applied at random. hub.css made the same correction for
   the same reason. The :nth-child(n + 1) is there to match that rule's
   specificity rather than to select anything: this sheet loads later, so a tie
   is enough. */
.sm-cards.sm-cards--content > .sm-card:nth-child(n + 1) {
  border-top-color: var(--color-accent);
}

/* The pack's trio: three cards whose only colour difference is the top rule,
   green then chalk then red. school.css greens every third card, which already
   covers the first of the three, so this only has to colour the second and the
   third; its single-class-plus-two-pseudo specificity is enough for those and
   it agrees with school.css on the first. */
.sm-cards.sm-cards--trio > .sm-card:nth-child(1) { border-top-color: var(--color-accent); }
.sm-cards.sm-cards--trio > .sm-card:nth-child(2) { border-top-color: var(--rsa-chalk); }
.sm-cards.sm-cards--trio > .sm-card:nth-child(3) { border-top-color: var(--color-action); }

/* ---------- 4. Glyphs the live pages carry ---------- */

/* Two of these three pages put a glyph in their own markup: a pencil above
   "Coming soon" on /news, and five pictographs on the sponsoring-driver cards.
   They are content on the live page, so they are carried across rather than
   dropped, and they are hidden from assistive tech because they say nothing a
   screen reader needs. The parity gate never sees them either way: a
   single-glyph chunk is below its two-character floor.

   The pack builds its own instrument glyphs in type and never illustrates
   them, so these are given the system's own treatment instead of being left at
   3rem and 40 per cent opacity: muted at reading size, or set in the black
   glyph panel with a coloured bottom rule that C1 gives a service card. */
.sm-glyph {
  display: block;
  margin-bottom: var(--space-10);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--color-text-faint);
}

.sm-glyph--tile {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-12);
  background: var(--color-bg-deep);
  border-bottom: 3px solid var(--color-accent);
  border-radius: var(--radius-xs);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--color-text);
}

/* ---------- 5. Statement block ---------- */

/* Three of the sections on these pages are a heading and one paragraph: the
   two "coming soon" notices and the external links note. A card grid is the
   wrong archetype for one paragraph and so is a full-width column of prose, so
   they get the pack's statement shape, opened by the short green road dash
   that it uses as a horizontal spacer. The live pages centred this text; it is
   set left here, which is presentation, because a centred paragraph on a
   1280px ground has no edge to read from. */
.sm-statement { max-width: 62ch; }

.sm-statement::before {
  content: "";
  display: block;
  width: 140px;
  height: 6px;
  margin-bottom: var(--space-12);
  background-image: var(--road-dash-h);
}

/* One statement, on /news, opens with a glyph the live page already carries.
   Two marks stacked above one heading is one too many, so the glyph takes the
   opener and the dash stands down. */
.sm-statement:has(> .sm-glyph)::before { display: none; }

.sm-statement .sm-btn-row { margin-top: var(--space-16); }

/* ---------- 6. The timeline, on this family's grounds ---------- */

/* school.css punches the stop numeral out of the road line with a 5px border
   in the page ground (`border: 5px solid var(--color-bg)`), which is Road
   Black. The timeline section on /parent-students sits on Road Black for
   exactly that reason, and this is the guard if it ever moves: a numeral on
   Surface or Night with a Road Black ring reads as a misprint. */
.sm-section--surface .sm-stop__num { border-color: var(--color-panel); }
.sm-section--deep .sm-stop__num { border-color: var(--color-bg-deep); }

/* The six steps each carry a heading and a paragraph, so they need more air
   between them than a one-line pickup stop does. */
.sm-stops .sm-stop h3 { margin-bottom: var(--space-5); }
.sm-stops .sm-stop p { max-width: 68ch; margin-bottom: 0; }

/* Two of the steps carry a link in their copy, to /edt-driving-lessons and
   /driving-test-lessons. Those are content, so they have to look like links:
   the stops are not inside .sm-prose, which is where school.css greens them. */
.sm-stops a { color: var(--color-accent); text-underline-offset: 3px; }

/* ---------- 7. The FAQ heading column ---------- */

/* school.css closes up the held heading (`.sm-faq-grid__head h2
   { margin-bottom: 0 }`) because the town pilots put nothing under it. This
   page's FAQ carries a one-line intro, and Rule 20 is that a section intro has
   a margin-top rather than sitting flush against the heading above it. */
.sm-faq-grid__head .sm-lede { margin-top: var(--space-10); }

/* ---------- 8. The cost table ---------- */

/* The pack says every price lives on a perforated ticket and never on a table
   row. This one stays a table: its two column headings, "Item" and "Cost", are
   content on the live page, and nothing but a table has anything for them to
   head. So the ticket's device comes to the table instead. The 2px dashed rule
   down the middle IS the perforation, the same construction as
   .sm-ticket__rule, and the figures are set in display type rather than in
   body copy. */
.sm-costs {
  width: 100%;
  max-width: 700px;
  border-collapse: collapse;
  margin: var(--space-12) 0;
}

.sm-costs th {
  padding: var(--space-5) var(--space-8);
  border-bottom: 2px solid var(--rsa-line-22);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: left;
  color: var(--color-text-muted);
}

.sm-costs td {
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--rsa-line-08);
  color: var(--color-text);
}

/* The perforation. On the live page this was a plain cell boundary. */
.sm-costs td:first-child,
.sm-costs th:first-child {
  border-right: 2px dashed var(--rsa-line-16);
}

.sm-costs td:last-child,
.sm-costs th:last-child {
  text-align: right;
}

.sm-costs td:last-child {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}

/* The total is the figure the section is about, so it is the one set large. */
.sm-costs tbody tr:last-child td {
  border-bottom: 0;
  border-top: 2px solid var(--rsa-chalk);
  font-weight: var(--fw-black);
}
/* The figure wraps rather than holding one line: at a 350px wrap a nowrap
   "~€1,075 to €1,775" in display type would be real horizontal scroll. */
.sm-costs tbody tr:last-child td:last-child {
  font-size: var(--fs-h3);
  white-space: normal;
  color: var(--color-accent);
}

.sm-costs__note {
  max-width: 700px;
  font-size: var(--fs-small);
  color: var(--color-text-faint);
}

/* A table cannot collapse to one column, so below the tablet break it keeps
   its two and loses the padding instead. Nothing here is wider than a price. */
@media (max-width: 768px) {
  .sm-costs th, .sm-costs td { padding: var(--space-5) var(--space-6); }
  .sm-costs td:last-child { font-size: var(--fs-body-sm); }
}

/* ---------- 9. The practice checklist ---------- */

/* The pack's paper surface, and the pack is explicit that it is the only light
   surface in the system and that it is a tilted object people can tick. The
   five items on /parent-students are literally that: what a sponsoring driver
   does on a practice run.

   Everything inside is given its ink colour explicitly. h1 to h4 default to
   chalk in school.css, so the moment a module turns light an unqualified
   heading renders white on white, which is the fault that cost the most time
   on the Automatic site. There is no heading inside this panel, and the strong
   and p rules below are why it cannot drift into one. */
.sm-checklist {
  max-width: var(--sm-content-paper-w);
  background: var(--rsa-chalk);
  color: var(--rsa-road-black);
  border-top: 12px solid var(--color-action);
  border-radius: var(--radius-md);
  box-shadow: var(--sm-content-shadow-paper);
}

.sm-checklist__item {
  position: relative;
  padding: var(--space-12) var(--space-16) var(--space-12) var(--space-28);
  border-bottom: 1px solid var(--sm-content-rule-ink);
}
.sm-checklist__item:last-child { border-bottom: 0; }

/* The box is a hanging indent, not a grid cell. A marker-plus-text list built
   with display:grid puts every inline child in its own cell, which sets the
   prose one word to a line; the pack's own checkbox is 26px with a 2px ink
   border at a 3px radius. The tick goes on ::after so neither rule has to
   share a pseudo-element with the other. */
.sm-checklist__item::before {
  content: "";
  position: absolute;
  left: var(--space-16);
  top: var(--space-12);
  width: 26px;
  height: 26px;
  border: 2px solid var(--rsa-road-black);
  border-radius: var(--radius-sm);
}
.sm-checklist__item::after {
  content: "✓";
  position: absolute;
  left: var(--space-16);
  top: var(--space-12);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--color-action);
}

.sm-checklist__item strong {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-black);
  letter-spacing: -0.01em;
  color: var(--rsa-road-black);
}
.sm-checklist__item p {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--sm-content-ink-soft);
}

/* The tilt is what makes it an object rather than a panel, and the pack puts
   it at one to two degrees. It is applied only above the tablet break: a
   rotated box is wider than its layout box, and at 390px the panel is as wide
   as the wrap, so the same tilt would be real horizontal scroll. */
@media (min-width: 769px) {
  .sm-checklist { transform: rotate(0.8deg); }
}

/* ---------- 10. The caution note ---------- */

/* Two notes on /parent-students carry a rule change: the March 2025 insurance
   change and the November 2026 permit renewal rules. Both were amber-edged
   panels on the live page, and amber is the colour the pack assigns to honest
   caution content. */
.sm-note {
  max-width: var(--sm-content-paper-w);
  padding: var(--pad-card);
  background: var(--color-panel);
  border: 1px solid var(--rsa-line-08);
  border-left: 4px solid var(--color-eyebrow);
  border-radius: var(--radius-xs);
}

.sm-note h3 {
  margin-bottom: var(--space-6);
  color: var(--color-eyebrow);
}
.sm-note p { color: var(--color-text-body); }
.sm-note p:last-child { margin-bottom: 0; }
.sm-note strong { color: var(--color-text); }
.sm-note a { color: var(--color-accent); text-underline-offset: 3px; }

.sm-note ul {
  margin: var(--space-6) 0 var(--space-10);
  padding-left: var(--space-10);
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
}
.sm-note li { margin-bottom: var(--space-5); }

/* The lane marker's amber variant, for the section that carries a rule change.
   The pack allows it for caution content and nothing else. */
.sm-eyebrow__marker--caution { background: var(--color-eyebrow); }

/* ---------- 11. Prose on an essay page ---------- */

/* /parent-students is an essay, not a grid: two of its sections are running
   paragraphs. The measure comes from .sm-prose; this sets the first paragraph
   after a heading apart, which is Rule 20. */
.sm-prose { margin-top: var(--space-12); }
.sm-prose p:last-child { margin-bottom: 0; }

/* A paragraph that follows the cost table or the checklist needs the same
   separation from the object above it. */
.sm-section-note { margin-top: var(--space-16); }