/* ============================================================
 * BLOG ARTICLE — page styling (design system v2)
 * Shared full-photo hero (shorter cut) · readable prose column ·
 * navy pull quote · callout card · author + share row · reading
 * progress bar · "Read more" tiles reuse the home blogcards.
 * ============================================================ */

/* ---------- reading progress bar ---------- */
.art-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 70;
  background: transparent;
  pointer-events: none;
}
.art-progress__fill {
  height: 100%;
  width: 0;
  background: var(--ge-sky, #2FB7F1);
}

/* ---------- hero: shorter article cut ---------- */
/* ARTICLE HERO — photo tile with a floating white card, matching the home
   "Your data's in safe hands" section (Rebecca, 23 Jul). Reuses the shared
   .trust2__frame/__photo/__card pattern from home-v2.css; only the card's
   article-specific type is styled here. */
.arthero { padding-top: clamp(10px, 1.4vw, 18px); }
/* full-bleed like the home hero tile — same side margins and radius */
.arthero .container { max-width: none; padding: 0 clamp(10px, 1.6vw, 22px); }
.arthero .trust2__frame {
  border-radius: clamp(20px, 2.5vw, 34px);
  /* HALF the shared hero height (Rebecca, 4 Aug: "for the individual blog pages
     lets make the heros half the height that they are"). Written as a division
     of the token, not a fresh number, so it stays exactly half if --hero-h ever
     moves — the same approach the Parent Help Centre's header uses.
     min-height, so a long headline can still push the tile taller rather than
     overflowing the card. */
  min-height: calc(var(--hero-h) / 2);
  /* capped + centred like every other hero — .arthero .container already
     supplies the gutter, so max-width does the job margin-inline: auto does
     on the .hero2/.pv3g frames. See --hero-* in home-v2.css. */
  max-width: var(--hero-cap);
  margin-inline: auto;
}
.arthero .trust2__photo { object-position: center; }
/* the card's margin comes down with the tile — at the old 24-72px it filled a
   half-height tile edge to edge and the photo stopped reading as a photo */
.arthero .trust2__card { width: min(620px, 52%); margin: clamp(18px, 2.4vw, 40px); }

/* ---------- PHONES: the card goes back to the SHARED phone layout (13 Aug 2026) ----------
   Found in the post-launch mobile sweep, confirmed live at 390px: the rule above is
   (0,2,0), so it permanently beats home-v2.css's phone override for .trust2__card
   (0,1,0) — `width:auto; margin:-44px 14px 14px` — media queries add no specificity.
   The card therefore stayed at 52% width on phones: 186px wide in a 358px frame, a
   130px content box, the headline stacking one word per line and "attendance"
   (150px at the h1's 30px floor) spilling past the card edge. All four articles.
   ⚠ These two declarations are a COPY of home-v2.css's 820px block for .trust2__card
   and must stay in step with it — the shared block still supplies everything else
   (frame display:block, photo height) since only width/margin were being beaten. */
@media (max-width: 820px) {
  .arthero .trust2__card { width: auto; margin: -44px 14px 14px; }
}
.arthero__card h1 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ge-navy, #0F1438);
}
.arthero__card .art-tag { display: inline-block; }
.arthero__card .art-meta { color: #4A5876; }
.art-tag {
  align-self: flex-start;
  margin-bottom: 16px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ge-sky, #2FB7F1);
  color: var(--ge-navy, #0F1438);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.art-meta { margin: 14px 0 0; color: rgba(255, 255, 255, 0.85); font-size: 15px; }

/* ---------- article body ---------- */
.art { background: #fff; padding: clamp(64px, 8vw, 110px) 0 clamp(24px, 3vw, 48px); }

/* two-column layout: prose left, sticky rail right */
.art__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 340px);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
.art__col { max-width: 72ch; }

/* ---------- sticky rail ---------- */
.art__rail-inner { position: sticky; top: 100px; display: flex; flex-direction: column; gap: clamp(24px, 2.5vw, 36px); }
.art__rail-label {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B7689;
}
/* rail demo card */
.art__railcta {
  background: var(--ge-navy, #0F1438);
  border-radius: 20px;
  padding: 22px;
}
.art__railcta p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }

@media (max-width: 960px) {
  .art__layout { grid-template-columns: 1fr; }
  .art__rail-inner { position: static; }
  .art__col { margin: 0 auto; }
}
.art__col p.art__lede {
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ge-navy, #0F1438);
  margin: 0 0 clamp(32px, 3.5vw, 52px);
}
.art__col h2 {
  font-size: clamp(24px, 2.2vw, 32px);
  color: var(--ge-navy, #0F1438);
  margin: clamp(36px, 4vw, 56px) 0 14px;
}
.art__col > .container p, .art__col p { font-size: 17px; line-height: 1.7; color: #2A3352; margin: 0 0 18px; }
/* ⚠ :not(.btn) — 17 Aug 2026. This rule is (0,2,0) and .btn is (0,1,0), so any
   button placed in an article body lost its own text colour to this one and came
   out as blue-on-sky: it read as a link that happened to be pill-shaped, not as a
   button. Rebecca on the Scotland post: "the 'tell us how your term is going' needs
   to be a proper button."
   Scoping the exception here rather than raising .btn's specificity keeps the fix in
   one place — every .btn variant (primary, ghost, on-dark) is covered at once, and
   nothing has to be repeated per button. */
.art__col a:not(.btn) { color: var(--ge-blue, #1B367E); }
.art__col a:not(.btn):hover { color: var(--ge-navy, #0F1438); }

/* pull quote — navy card, echoes the testimonial language */
.art__quote {
  margin: clamp(32px, 4vw, 52px) 0;
  background: var(--ge-navy, #0F1438);
  border-radius: 24px;
  padding: clamp(28px, 3vw, 44px);
}
.art__quote blockquote {
  margin: 0;
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: #fff;
}
.art__quote figcaption { margin-top: 14px; font-size: 14.5px; color: rgba(255, 255, 255, 0.72); }

/* callout card */
.art__callout {
  background: var(--ge-blue-3, #D9F4FF);
  border-radius: 24px;
  padding: clamp(24px, 2.6vw, 36px);
  margin: clamp(32px, 4vw, 52px) 0 0;
}
.art__callout h3 { margin: 0 0 10px; font-size: 19px; color: var(--ge-navy, #0F1438); }
/* ---------- body lists ----------
   This sheet had no list styling at all: the template article contains only
   paragraphs, so the gap only showed up when the first real post (Martyn's Law,
   4 Aug 2026) needed a numbered sequence and a set of bullets.
   Ordered lists keep numerals — in that post the ORDER is the content. Bullets
   follow the site rule (navy disc, white tick). */
.art__col ol,
.art__col ul { margin: 0 0 24px; padding: 0; list-style: none; }
.art__col ol { counter-reset: artstep; }
.art__col li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 14px;
  font-size: 17px;
  line-height: 1.7;
  color: #2A3352;
}
.art__col li:last-child { margin-bottom: 0; }
.art__col ol > li { counter-increment: artstep; }
.art__col ol > li::before {
  content: counter(artstep);
  position: absolute;
  left: 0;
  top: 0.16em;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ge-navy, #0F1438);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.art__col ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--ge-navy, #0F1438) center / 11px 11px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.art__col li strong { color: var(--ge-navy, #0F1438); }
.art__callout p { margin: 0; }

/* ---------- author (rail) + share ---------- */
.art__author { display: flex; align-items: center; gap: 14px; }
.art__avatar {
  width: 52px; height: 52px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  background: var(--ge-navy, #0F1438); color: #fff;
  font-size: 16px; font-weight: 800; letter-spacing: 0.02em;
}
.art__author-name { display: block; font-weight: 700; font-size: 15.5px; color: var(--ge-navy, #0F1438); }
.art__author-role { display: block; font-size: 13.5px; color: #4A5876; }

/* position:relative anchors .art__copy-done, which is a SIBLING of the buttons
   now rather than a child of the copy button — see the note in the markup. */
.art__share { display: flex; align-items: center; gap: 10px; position: relative; }
.art__share-label { display: none; } /* the rail supplies its own label */
.art__share-btn {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 1.5px solid #E6ECF4;
  background: #fff;
  color: var(--ge-navy, #0F1438);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 200ms var(--hv2-ease), color 200ms var(--hv2-ease), border-color 200ms var(--hv2-ease);
}
.art__share-btn svg { width: 20px; height: 20px; }
.art__share-btn:hover { background: var(--ge-navy, #0F1438); border-color: var(--ge-navy, #0F1438); color: #fff; }
.art__share-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 183, 241, 0.45); }

/* copy-link confirmation bubble */
.art__copy-done {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ge-navy, #0F1438);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  /* ⚠ visibility, not opacity alone — 6 Aug 2026, accessibility audit (SC 2.5.3).
     opacity:0 still RENDERS the text, so "Link copied" counted as the button's
     visible text while its accessible name was "Copy link" — a mismatch that
     breaks voice control ("click Copy link" matched nothing a user could see).
     visibility:hidden takes it out of both the render and the a11y tree until it
     is actually shown, and still animates because visibility is transitionable
     when paired with a duration. */
  visibility: hidden;
  transition: opacity 200ms var(--hv2-ease), transform 200ms var(--hv2-ease),
              visibility 0s linear 200ms;
}
.art__share.is-copied .art__copy-done {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s, 0s, 0s;
}

/* ---------- read-more band ---------- */
/* padding-bottom was clamp(200px,18vw,300px) — reserved room for the footer's
   contact-form card, which used to straddle up into this band. That form was
   removed from this page (Rebecca, 29 Jul: "we dont need the form on each
   articles page"), so this band now curves straight into the footer like
   every other contact-band-free page instead — back to a normal band bottom. */
.band--readmore { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(80px, 9vw, 140px); }
/* home-v2 gives .band--blog .bandhead a huge top padding to clear the pricing
   straddle on the home page — no straddle here, so flatten it */
.band--readmore .bandhead { padding-top: 0; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.art-all {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15.5px; font-weight: 700;
  color: var(--ge-blue, #1B367E); text-decoration: none;
}
.art-all:hover { color: var(--ge-navy, #0F1438); }
.art-all svg { width: 16px; height: 16px; transition: transform 200ms var(--hv2-ease); }
.art-all:hover svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .art__copy-done { transition: none; }
}

/* ---------- case study additions (14 Aug 2026) ----------
   Added for the first real case study, blog/cantonian-high-school-onsite.html.
   Three things the article template had no language for: a school crest, an
   "at a glance" facts card, and an inline quote that is not the big navy pull
   quote. Nothing here is case-study-specific in its naming except .cs-*, so a
   second case study needs no new CSS.

   ⚠ The blockquote rules must stay at (0,1,2) or higher: `.art__col p` sets
   17px/#2A3352 at (0,1,1) and would otherwise flatten the quote back to body
   copy. Same trap as the body-class descendant one — check the specificity,
   not just the order. */

/* school crest — a white tile, the same language as the crest strips. Sits on
   the hero card, which is itself a white card ON photography, so the tile is
   opaque rather than frosted. */
.cs-crest {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; flex: none;
  margin-bottom: 14px; padding: 7px;
  background: #fff; border: 1px solid #E6ECF4; border-radius: 14px;
}
.cs-crest img { width: 100%; height: auto; object-fit: contain; }

/* rail avatar carries the crest instead of initials on a case study */
.art__avatar--crest { background: #fff; border: 1px solid #E6ECF4; padding: 7px; }
.art__avatar--crest img { width: 100%; height: auto; object-fit: contain; }

/* "at a glance" facts card — neutral module, not a dark card: it is reference
   information, and colour on the site belongs to dark cards only. */
.cs-facts {
  background: var(--ge-bg-light, #F3F7FA);
  border-radius: 24px;
  padding: clamp(24px, 2.6vw, 36px);
  margin: clamp(28px, 3vw, 40px) 0;
}
.cs-facts .cs-facts__h { margin: 0 0 18px; font-size: 19px; color: var(--ge-navy, #0F1438); }
.cs-facts__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 32px; margin: 0;
}
.cs-facts__list > div { display: flex; flex-direction: column; gap: 3px; }
.cs-facts dt {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #4A5876;
}
.cs-facts dd { margin: 0; font-size: 17px; line-height: 1.45; color: var(--ge-navy, #0F1438); }
@media (max-width: 640px) { .cs-facts__list { grid-template-columns: 1fr; } }

/* inline quote — the interviewee's own words inside the body copy. Bigger and
   navy rather than boxed or striped: hierarchy by size and colour, and no left
   accent stripe (site rule). The navy .art__quote card is still the pull quote
   and there is one per article.

   ⚠ DIRECT CHILD (`>`), and it must stay that way. Written first as
   `.art__col blockquote`, it also matched the pull quote inside
   `<figure class="art__quote">` — and at (0,1,2) it beat
   `.art__quote blockquote { color:#fff }` at (0,1,1), so the pull quote went
   navy text on a navy card and disappeared. On the Martyn's Law article too,
   which does not otherwise touch this file. The child selector simply does not
   reach inside the figure. */
.art__col > blockquote {
  margin: clamp(24px, 2.6vw, 34px) 0;
  padding: 0;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--ge-navy, #0F1438);
}
.art__col > blockquote p {
  font-size: inherit; line-height: inherit; color: inherit;
  margin: 0 0 10px;
}
.art__col > blockquote p:last-child { margin-bottom: 0; }
.art__col > blockquote cite {
  display: block; margin-top: 12px;
  font-size: 15px; font-style: normal; color: #4A5876;
}

/* ---------- numbered sections (14 Aug 2026) ----------
   Cerys's Scottish-term article numbers its three sections 01 / 02 / 03, and the
   numeral is part of her structure rather than decoration — the piece is built as
   "here are the three things".
   ⚠ The numeral lives INSIDE the <h2> on purpose. Set as a separate absolutely
   positioned element it would drop out of the heading text, so a screen-reader
   user moving by headings would hear three unnumbered headings and lose the
   count. In the heading it reads "01 Additional support needs", which is exactly
   what the page says visually.
   Sized and coloured down so it supports the heading rather than competing: the
   site's headings are 600, and a big bold numeral beside one reads as a second
   heading. */
.art__col h2 .art__num {
  display: block;
  margin-bottom: 6px;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ge-blue, #1B367E);
}

/* ---------- the sources footnote (17 Aug 2026) ----------
   Rebecca: "i dont like how close the sources are to the blog. maybe add a divider."
   She is right, and Cerys's original artifact had a divider there too — it was the
   one piece of her layout that did not survive being rebuilt on the site template.
   ⚠ The rule is a border-top on the block ITSELF, not a separate <hr>. Two reasons:
   the line and the space above it can never drift apart, and there is no extra
   element for a screen reader to announce as a separator part-way through the
   article. The colour is the site's hairline #E6ECF4, the same one card borders use.
   ⚠ Specificity: `.art__col p` sets margin at (0,2,0), so this needs the same reach
   or the top margin is ignored — hence `.art__col .art__sources`, not `.art__sources`. */
.art__col .art__sources {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid #E6ECF4;
}

/* ---------- Scotland post: crop the hero to keep the pupils in frame ----------
   The shared rule above is `object-position: center`, which is right for the other
   articles. This photo is 4:3 dropped into a wide, short hero band, so a centre crop
   takes the middle third — the building — and slices the pupils off mid-torso at the
   bottom edge. 68% keeps the roofline and brings the whole group in.
   ⚠ Targeted by SRC, not by a page class, and deliberately: the crop belongs to this
   photograph, not to this page. Swap the photo and this rule stops applying by itself
   instead of silently mis-cropping its replacement. Same pattern as the reception
   screenshot rule in home-v2.css. */
.arthero .trust2__photo[src*="scotland-school-arrival"] { object-position: center 68%; }