/* =============================================================================
   Blog article pages — pages/blog/*.html (9 files, one template)

   The reading experience is the product: measure, rhythm, link treatment and
   figure handling come first; decoration second.

   Background rhythm (page-guidelines.md § Section Backgrounds):
     compact hero (dark photo)  ->  header + body (white)  ->  series nav
     (division card bg)  ->  post footer (near-white)  ->  site footer
     (primary-dark). The header and the two `.blog-post__content` blocks either
     side of the hidden `.cta-section#learntec-cta` are ONE white run, not
     three sections.

   Typography follows typography.md exactly; the article body cannot carry a
   `.body-*` class on every paragraph, so the scale is restated here against the
   frozen block classes. Values are identical to `.body-large` / `.h3` / `.h4` /
   `.h5` / `.body-small`.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   MEASURE — the article column.
   `.container--narrow` is used only by these nine pages (W1 kept it here on
   purpose) and is a frozen class name. 720px is ~70 characters at 18px Raleway,
   the readable line length; there is no measure token in the system yet.
   It is applied together with `.container`, so only the cap is overridden.
   --------------------------------------------------------------------------- */
.container--narrow {
  max-width: calc(720px + 2 * var(--content-padding));
}

/* ---------------------------------------------------------------------------
   HEADER — tags, series line and byline. The title is the `.hero--compact`
   H1 above it (hero.css § compact), so on the seven illustrated articles this
   block opens the white article run without one. The two "Coming Soon" stubs
   have no artwork and therefore no hero: their header still carries the
   `.blog-post__title` H1.
   --------------------------------------------------------------------------- */
.blog-post__header {
  /* The body that follows sets its own padding-top to 0, so the separation
     between the byline and the standfirst is this block's padding-bottom. */
  padding-block: var(--gap-section-lg) var(--gap-content-block);
  background-color: var(--color-white);
}

.blog-post__meta {
  margin-bottom: var(--gap-title-description);
}

.blog-post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* The stubs' title. typographyH2 — an article title is a page title, not a
   hero slogan. The header shares `.container--narrow` with the body, so title,
   standfirst and prose all sit on one measure. */
.blog-post__title {
  margin-bottom: var(--space-4);
  font-size: 3rem;
  line-height: 115%;
}

/* typographyBodyLarge, semibold. The series line ("Part 1 of 5: …").
   `--color-accent` is the pale EdTech teal, readable on the old dark header but
   not on white; the brand teal is the light-ground pair (colors.md). */
.blog-post__subtitle {
  margin-bottom: 0;
  font-size: 1.125rem;
  line-height: 160%;
  font-weight: 600;
  color: var(--color-division-brand);
}

/* typographyBodySmall — the byline, with the pen-nib mark. */
.blog-post__author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--gap-title-description);
  margin-bottom: 0;
  font-size: 0.875rem;
  line-height: 160%;
  color: var(--section-fg-muted, var(--color-text-gray));
}

/* Without a title or series line the byline follows the tags directly, and
   their two margins would stack into a double gap. */
.blog-post__meta + .blog-post__author {
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
   BODY — one white run. The hidden `.cta-section#learntec-cta` splits it into
   two elements; the rhythm must not restart, so the block padding is a single
   content-block gap and only the FIRST block opens with the full section gap.

   typographyBodyLarge is set once on the block and inherited by every paragraph
   and list item, so the breakpoints below move one declaration.
   --------------------------------------------------------------------------- */
.blog-post__content {
  padding-block: var(--gap-content-block);
  background-color: var(--color-white);
  font-size: 1.125rem;
  line-height: 160%;
}

/* `.blog-post__header` already opened the white run with the full section gap,
   so the body that follows it contributes only its own content-block padding. */
.blog-post__header + .blog-post__content {
  padding-top: 0;
}

/* Weight is inherited from `body` (500) so that `.blog-post__lead`'s 600 —
   one class less specific than this selector — still wins. */
.blog-post__content p,
.blog-post__content li {
  color: var(--color-primary);
}

.blog-post__content p {
  margin-bottom: var(--space-6);
}

/* The standfirst. Same size as the body — the system's scale stops at 18px —
   so it is set apart by weight and the rule beneath it, not by an off-scale
   font size. */
.blog-post__lead {
  padding-bottom: var(--gap-content-block);
  margin-bottom: var(--gap-content-block);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
}

/* Heading levels are unchanged; only their styling maps down one step, as the
   article `<h1>` already occupies the top of the page hierarchy.
   h2 -> typographyH3, h3 -> typographyH4, h4 -> typographyH5. */
.blog-post__content h2 {
  margin-top: var(--gap-section-sm);
  margin-bottom: var(--space-4);
  font-size: 2rem;
  line-height: 120%;
  color: var(--color-primary);
}

.blog-post__content h3 {
  margin-top: var(--gap-content-block);
  margin-bottom: var(--space-3);
  font-size: 1.5rem;
  line-height: 130%;
  color: var(--color-primary);
}

.blog-post__content h4 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  font-size: 1.125rem;
  line-height: 140%;
  color: var(--color-primary);
}

/* Nothing opens a block with a top margin. */
.blog-post__content > .container--narrow > :first-child {
  margin-top: 0;
}

.blog-post__content ul,
.blog-post__content ol {
  margin-bottom: var(--space-6);
  padding-left: var(--space-6);
}

.blog-post__content ul {
  list-style: disc;
}

.blog-post__content ol {
  list-style: decimal;
}

.blog-post__content li {
  margin-bottom: var(--space-3);
}

.blog-post__content hr {
  margin-block: var(--gap-section-sm);
  border: none;
  border-top: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------------------
   INLINE LINKS — the regression W1 introduced.

   globals.css sets `a { color: currentColor }` per typography.md, which is
   right for nav, cards and buttons but leaves an inline reference inside a
   paragraph indistinguishable from the prose around it.

   Colour is NOT the only cue: every body link is underlined at rest, and the
   underline thickens on hover. Contrast, measured on the white body ground:

     rest    --color-link-hover    #007cb2  4.64:1  (AA normal text)
     hover   --color-link-pressed  #006590  6.43:1
     active  --color-primary       #13345e  12.50:1

   The brief asked for `--color-accent-cyan-dark` #009cde at rest, quoting
   3.6:1; the measured value is 3.08:1, which fails WCAG 1.4.3 for body text at
   this size. The next step of the same ramp is used instead. See the report.

   Buttons and the back-link also live inside `.blog-post__content` (the two
   "Coming Soon" placeholders put the back-link there), so both are excluded.
   --------------------------------------------------------------------------- */
.blog-post__content a:not(.btn, .blog-back-link) {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) var(--ease-standard),
    text-decoration-thickness var(--duration-fast) var(--ease-standard);
}

.blog-post__content a:not(.btn, .blog-back-link):hover {
  color: var(--color-link-pressed);
  text-decoration-thickness: 2px;
}

.blog-post__content a:not(.btn, .blog-back-link):active {
  color: var(--color-primary);
}

/* The global ring is now tone-aware (--focus-ring, 12.50:1 on white), so the
   local outline is gone. What stays is the pale chip, which a ring alone does
   not give a word sitting inside a paragraph. */
.blog-post__content a:not(.btn, .blog-back-link):focus-visible {
  border-radius: var(--border-radius-sm);
  background-color: var(--color-primary-pale);
  text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------------------
   IN-BODY BLOCKS
   --------------------------------------------------------------------------- */
.blog-post__figure {
  margin-block: var(--gap-content-block);
}

.blog-post__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-card);
}

/* typographyBodySmall */
.blog-post__figure figcaption {
  margin-top: var(--space-3);
  font-size: 0.875rem;
  line-height: 160%;
  text-align: center;
  color: var(--color-text-gray);
}

/* "What this series will cover" — a highlight block, one article. */
.blog-post__series-box {
  padding: var(--card-padding);
  margin-bottom: var(--gap-content-block);
  border-left: 4px solid var(--color-division-brand);
  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
  background-color: var(--color-primary-light);
}

.blog-post__series-box h3 {
  margin-top: 0;
}

.blog-post__series-box ol {
  margin-bottom: 0;
  padding-left: var(--space-5);
}

.blog-post__series-box li:last-child {
  margin-bottom: 0;
}

/* In-body CTA — the division card ground, so the teal button reads as the
   action and the block reads as EdTech without going dark. */
.blog-post__cta-box {
  padding: var(--card-padding);
  margin-block: var(--gap-section-sm);
  border-radius: var(--border-radius-lg);
  background-color: var(--color-division-card-bg);
  text-align: center;
}

.blog-post__cta-box p {
  margin-bottom: var(--space-4);
}

.blog-post__cta-box .btn {
  margin-bottom: 0;
}

/* typographyBodySmall — the note under the CTA button (was an inline style).
   Scoped to the box so it beats `.blog-post__cta-box p`'s bottom margin. */
.blog-post__cta-box .blog-post__cta-note {
  margin-top: var(--space-3);
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--color-text-gray);
}

/* References — long URLs must wrap rather than widen the column. */
.blog-post__references li {
  margin-bottom: var(--space-3);
  overflow-wrap: anywhere;
  font-size: 1rem;
  color: var(--color-text-gray);
}

/* ---------------------------------------------------------------------------
   "COMING SOON" — beyond-boundaries part 4 and part 5 have no article body.
   The shell is styled like the other seven; nothing is invented to fill it.
   --------------------------------------------------------------------------- */
.blog-post__placeholder {
  padding-block: var(--section-padding-y-compact);
  text-align: center;
}

.blog-post__placeholder .icon-badge {
  margin-bottom: var(--gap-title-description);
}

.blog-post__placeholder h2 {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.blog-post__placeholder p {
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: 0;
  color: var(--color-text-gray);
}

.blog-post__placeholder .blog-back-link {
  margin-top: var(--gap-content-block);
}

/* ---------------------------------------------------------------------------
   SERIES NAV — a numbered pager on the five "Beyond Boundaries" parts.
   The current item is filled (a greyscale-visible shape change) and bold, not
   only a different colour, and carries `aria-current="page"` in the markup.
   --------------------------------------------------------------------------- */
.blog-post__series-nav {
  padding-block: var(--section-padding-y-compact);
  background-color: var(--color-division-card-bg);
}

/* typographyH4 */
.blog-post__series-nav h3 {
  margin-bottom: var(--gap-title-description);
  font-size: 1.5rem;
  line-height: 130%;
  text-align: center;
  color: var(--color-primary);
}

.series-nav__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* typographyBodyMedium. The ring is an inset shadow so hover does not reflow. */
.series-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--border-radius-md);
  background-color: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-border);
  font-size: 0.9375rem;
  line-height: 160%;
  font-weight: 600;
  color: var(--color-primary);
  transition: color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.series-nav__item:hover {
  transform: var(--lift-sm);
  box-shadow: inset 0 0 0 2px var(--color-division-brand);
  color: var(--color-division-brand);
}

.series-nav__item--current {
  background-color: var(--color-division-brand);
  box-shadow: inset 0 0 0 2px var(--color-division-brand);
  font-weight: 700;
  color: var(--color-white);
}

.series-nav__item--current:hover {
  box-shadow: inset 0 0 0 2px var(--color-division-brand);
  color: var(--color-white);
}

.series-nav__number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--border-radius-pill);
  box-shadow: inset 0 0 0 1px currentColor;
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 700;
}

.series-nav__item--current .series-nav__number {
  background-color: var(--color-white);
  box-shadow: none;
  color: var(--color-division-brand);
}

/* ---------------------------------------------------------------------------
   POST FOOTER — share row + back link.
   --------------------------------------------------------------------------- */
.blog-post__footer {
  padding-block: var(--section-padding-y-compact);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-near-white);
}

.blog-post__footer .container--narrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* typographyBodySmall */
.blog-post__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.875rem;
  line-height: 160%;
  color: var(--color-text-gray);
}

/* typographyLabel — a tertiary text link, not a button. */
.blog-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--border-radius-sm);
  font-size: 0.875rem;
  line-height: 140%;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--color-primary);
  transition: color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.blog-back-link:hover {
  background-color: var(--color-primary-light);
  color: var(--color-division-brand);
}

.blog-back-link .icon {
  transition: transform var(--duration-fast) var(--ease-standard);
}

.blog-back-link:hover .icon {
  transform: translateX(calc(-1 * var(--nudge-arrow)));
}

/* ---------------------------------------------------------------------------
   Breakpoints — desktop-first, 1200 / 900 / 600 only. The spacing tokens are
   already redefined per breakpoint in variables.css, so only the type scale and
   one layout change need overrides.
   --------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .blog-post__title {
    font-size: 2.5rem;
  }

  .blog-post__subtitle {
    font-size: 1rem;
  }

  .blog-post__author,
  .blog-post__figure figcaption,
  .blog-post__share,
  .blog-back-link,
  .blog-post__cta-box .blog-post__cta-note {
    font-size: 0.8125rem;
  }

  .blog-post__content {
    font-size: 1rem;
  }

  .blog-post__references li {
    font-size: 0.9375rem;
  }

  .blog-post__content h2 {
    font-size: 1.75rem;
  }

  .blog-post__content h3,
  .blog-post__series-nav h3 {
    font-size: 1.375rem;
  }

  .series-nav__item {
    font-size: 0.875rem;
  }
}

@media (max-width: 600px) {
  .blog-post__title {
    font-size: 2rem;
  }

  .blog-post__subtitle {
    font-size: 0.9375rem;
  }

  .blog-post__author,
  .blog-post__figure figcaption,
  .blog-post__share,
  .blog-back-link,
  .blog-post__cta-box .blog-post__cta-note {
    font-size: 0.875rem;
  }

  .blog-post__content {
    font-size: 0.9375rem;
  }

  .blog-post__references li {
    font-size: 0.875rem;
  }

  .blog-post__content h2 {
    font-size: 1.375rem;
  }

  .blog-post__content h3,
  .blog-post__series-nav h3 {
    font-size: 1.125rem;
  }

  .blog-post__content h4 {
    font-size: 1rem;
  }

  .series-nav__item {
    font-size: 0.8125rem;
  }

  .blog-post__footer .container--narrow {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-back-link {
    padding-inline: 0;
  }
}