/*
 * Blog index — newspaper-editorial layout.
 *
 * Loaded only on the posts index (see inc/blog-index.php).
 *
 * Scoping note: every rule carries `body.blog #primary` rather than a bare
 * class. The theme ships a family of `body.blog #primary <el>` rules in
 * style.css (ids=1, classes=1, elements=2) that silently out-specify
 * class-only selectors — the same trap that made the editorial post template
 * render 20px italic Noe headings until it was caught by screenshot. Matching
 * that shape here means these rules win on class count.
 */

body.blog #primary .blog-hero {
  --bi-ink: #142025;
  --bi-muted: #59666e;
  --bi-line: #d4dbe0;
  --bi-blue: #2353dc;
  --bi-blue-pale: #eef3ff;
  --bi-serif: "VC Garamond Condensed", Georgia, serif;
  --bi-sans: "Apercu", "Avenir Next", Avenir, "Segoe UI", sans-serif;

  /* Height of the transparent masthead the hero runs up behind. The
     notification bar (49px) sits ABOVE this and keeps its own colour, so only
     the masthead is cleared. Measured, not guessed: #masthead is 96px at every
     breakpoint on this site and is already background-transparent, which is
     why no header override is needed beyond the z-index below. */
  --bi-header: 96px;

  position: relative;
  /* Full bleed out of .site-main's container, at any container width. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: calc(-1 * var(--bi-header));
  padding-top: var(--bi-header);
  margin-bottom: 72px;

  background-color: var(--bi-ink);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

/* No featured image yet -> brand gradient, so the hero reads as intentional
   until a thumbnail exists. */
body.blog #primary .blog-hero.has-no-image {
  background-image: linear-gradient(135deg, #142025 0%, #1b3a6b 52%, #2353dc 100%);
}

/* The scrim. Darkest at the bottom where the headline sits, lighter at the
   top so the nav logo still has something to read against. */
body.blog #primary .blog-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to top,
    rgba(10, 16, 20, 0.86) 0%,
    rgba(10, 16, 20, 0.6) 42%,
    rgba(10, 16, 20, 0.42) 72%,
    rgba(10, 16, 20, 0.5) 100%
  );
}

body.blog #primary .blog-hero > * {
  position: relative;
  z-index: 1;
}

/* The masthead is already transparent; it only needs to sit above the hero's
   background and scrim. */
body.blog #masthead {
  position: relative;
  z-index: 5;
}

body.blog #primary .blog-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 56px;
  align-items: end;
  min-height: 560px;
  padding: 72px 0 64px;
}

/* ---------------------------------------------------------------- *
 * Feature copy (no longer carries the image — the section does)
 * ---------------------------------------------------------------- */

body.blog #primary .blog-hero-feature {
  display: block;
  max-width: 760px;
  padding: 0;
  text-decoration: none;
  color: #fff;
}

body.blog #primary .blog-hero-eyebrow {
  display: block;
  margin-bottom: 20px;
  font-family: var(--bi-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

body.blog #primary .blog-hero-title {
  margin: 0;
  font-family: var(--bi-serif);
  /* font-style MUST be declared. The theme ships
     `body.archive #primary h2, body.blog #primary h2, … { font-family: noe;
     font-size: 1.25rem; font-style: italic }`, and anything this rule leaves
     undeclared comes through from it — the headline rendered italic Noe until
     this line existed. Same trap as the editorial post template. */
  font-style: normal;
  font-weight: 300;
  font-size: clamp(38px, 4.6vw, 80px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

body.blog #primary .blog-hero-title em {
  font-style: normal;
  font-weight: 300;
  color: #9db8ff;
}

body.blog #primary .blog-hero-meta {
  display: block;
  margin-top: 24px;
  font-family: var(--bi-sans);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);
}

body.blog #primary .blog-hero-feature:hover .blog-hero-title {
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 1px;
}

/* ---------------------------------------------------------------- *
 * Floating rail
 *
 * A solid white panel over the darkened image. Solid rather than frosted so
 * post titles stay legible no matter what photograph sits behind them.
 * ---------------------------------------------------------------- */

body.blog #primary .blog-rail {
  align-self: end;
  background: #fff;
  padding: 10px 10px 12px;
  box-shadow: 0 18px 48px rgba(10, 16, 20, 0.28);
}

body.blog #primary .blog-rail-label {
  display: block;
  padding: 14px 18px 16px;
  font-family: var(--bi-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bi-muted);
}

body.blog #primary .blog-rail-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.blog #primary .blog-rail-item {
  margin: 0;
  border-top: 1px solid var(--bi-line);
  /* flow-root establishes a block formatting context so the inset link's
     bottom margin cannot collapse out through this element. Without it the
     fill's top cleared the rule above but its bottom sat flush against the
     rule below — measured gapBelowRule: 0. */
  display: flow-root;
}

/* The whole item is the hover target: eyebrow, title and arrow fill together
   as one card rather than the title alone reacting. */
/* Inset by 6px with the padding reduced to match, so the text sits in exactly
   the same place as before but the hover fill floats clear of the divider
   rules above and below rather than butting into them. */
body.blog #primary .blog-rail-item a {
  position: relative;
  display: block;
  margin: 6px;
  padding: 12px 34px 12px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--bi-ink);
  transition: background-color 0.18s ease, color 0.18s ease;
}

body.blog #primary .blog-rail-eyebrow {
  display: block;
  margin-bottom: 8px;
  font-family: var(--bi-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bi-muted);
  transition: color 0.18s ease;
}

body.blog #primary .blog-rail-title {
  display: block;
  font-family: var(--bi-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 1.3125rem;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--bi-ink);
  transition: color 0.18s ease;
}

body.blog #primary .blog-rail-title em {
  font-style: normal;
  color: var(--bi-blue);
}

/* Arrow rests just out of sight and slides in with the fill. */
body.blog #primary .blog-rail-item a::after {
  content: "\2192";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(-6px, -50%);
  font-family: var(--bi-sans);
  font-size: 1rem;
  line-height: 1;
  color: var(--bi-blue);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

body.blog #primary .blog-rail-item a:hover,
body.blog #primary .blog-rail-item a:focus-visible {
  background-color: var(--bi-blue-pale);
}

body.blog #primary .blog-rail-item a:hover .blog-rail-eyebrow,
body.blog #primary .blog-rail-item a:focus-visible .blog-rail-eyebrow,
body.blog #primary .blog-rail-item a:hover .blog-rail-title,
body.blog #primary .blog-rail-item a:focus-visible .blog-rail-title {
  color: var(--bi-blue);
}

body.blog #primary .blog-rail-item a:hover::after,
body.blog #primary .blog-rail-item a:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

@media (prefers-reduced-motion: reduce) {
  body.blog #primary .blog-rail-item a,
  body.blog #primary .blog-rail-item a::after,
  body.blog #primary .blog-rail-eyebrow,
  body.blog #primary .blog-rail-title {
    transition: none;
  }
}

/* ---------------------------------------------------------------- *
 * Responsive
 * ---------------------------------------------------------------- */

@media (max-width: 1200px) {
  body.blog #primary .blog-hero-inner {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
  }
}

@media (max-width: 960px) {
  body.blog #primary .blog-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    align-items: start;
    min-height: 0;
    padding: 56px 0 48px;
  }

  /* Stacked, the panel is no longer floating beside anything, so it drops its
     shadow and simply sits below the headline. */
  body.blog #primary .blog-rail {
    box-shadow: 0 10px 30px rgba(10, 16, 20, 0.2);
  }

  body.blog #primary .blog-hero {
    margin-bottom: 52px;
  }
}

@media (max-width: 600px) {
  body.blog #primary .blog-hero-inner {
    padding: 40px 0 36px;
    gap: 28px;
  }

  body.blog #primary .blog-hero-eyebrow {
    margin-bottom: 14px;
  }

  body.blog #primary .blog-hero-meta {
    margin-top: 18px;
  }

  body.blog #primary .blog-rail-item a {
    margin: 5px;
    padding: 11px 31px 11px 11px;
  }

  body.blog #primary .blog-rail-title {
    font-size: 1.1875rem;
  }
}

/* ---------------------------------------------------------------- *
 * "More stories" — the three-up section heading.
 *
 * Left undeclared it inherits the theme's italic 20px Noe h2, which reads as
 * an accident next to the hero. Given a deliberate upright treatment with a
 * rule above it so the grid below reads as its own section.
 * ---------------------------------------------------------------- */

body.blog #primary #blog-post-list h2 {
  margin: 0 0 32px;
  padding-top: 26px;
  border-top: 1px solid var(--bi-ink, #142025);
  font-family: "VC Garamond Condensed", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #142025;
}