/* ==========================================================================
   Resources hero  —  Figma "Blog page" (1112:31140), 1920 x 1545

   Title at 182,206 (Helvetica Light 72, tracking -2.88), the FEATURED
   ARTICLES label at 348, and the grid at 407: one 910-wide card on the left,
   two 614-wide stacked on the right, 32 between the columns.

   The card block lives here because the hero is where the frame draws it;
   blog-list.css reuses it at the smaller size.
   ========================================================================== */

/* The title's offset is the section's padding, not the heading's margin. As a
   margin it collapses through the section's top edge -- the section starts
   206 down the page and the masthead, which is absolutely positioned inside
   it, goes with it and lands under the title. */
.blog-hero {
  padding-top: calc(206 * var(--s));
  padding-bottom: calc(120 * var(--s));
  background: var(--c-mono-dark);
  overflow: clip;
}

.blog-hero__h {
  margin: 0;
  padding: 0 calc(182 * var(--s));
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: calc(72 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-2.88 * var(--s));
  color: var(--c-mono-light);
}
.blog-hero__h .rv { display: block; }

.blog-hero__eyebrow {
  margin: calc(56 * var(--s)) 0 0;
  padding: 0 calc(182 * var(--s));
  letter-spacing: 0.06em;
}

/* 910 + 32 + 614 = 1556, which is the frame's own content width. */
.blog-hero__grid {
  display: grid;
  grid-template-columns: calc(910 * var(--s)) calc(614 * var(--s));
  gap: calc(40 * var(--s)) calc(32 * var(--s));
  /* The frame puts the grid 59 below the label's TOP, and the label is 19
     tall, so 40 below its box. */
  margin-top: calc(40 * var(--s));
  padding: 0 calc(182 * var(--s));
}
/* The lead card spans both of the right column's rows. */
.blog-hero__grid .blog-card--lead { grid-row: span 2; }

/* --- the card block ------------------------------------------------------
   One block at two sizes. The plate is Mono/Light-Dark, as the frame draws
   it; there is no photography for these yet, and a plate is more honest than
   stock. Give .blog-card__plate a background-image when there is a picture
   and everything else stays as it is. */

.blog-card { margin: 0; }

/* Grid rather than a column, because the two sizes order the same four parts
   differently: the small card puts the kicker and the date on one row above
   the title, and the lead card runs kicker, title, date down the page. Areas
   say that in two declarations; flex order would need the date moved out of
   the meta row and back again. */
.blog-card__link {
  display: grid;
  color: inherit;
}
.blog-card--side .blog-card__link {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "plate  plate"
    "kicker when"
    "title  title";
}
.blog-card--lead .blog-card__link {
  grid-template-columns: 1fr;
  grid-template-areas:
    "plate"
    "kicker"
    "title"
    "when";
}
.blog-card__plate  { grid-area: plate; }
.blog-card__kicker { grid-area: kicker; }
.blog-card__title  { grid-area: title; }
.blog-card__when   { grid-area: when; justify-self: end; }
.blog-card--lead .blog-card__when { justify-self: start; }

/* The plate itself never moves. It is the frame; the picture inside it is
   what zooms, through base.css's own .zoom img rule -- the same hover the
   rest of the site's photography uses. With no picture yet there is simply
   nothing to zoom, which is correct rather than a placeholder wobbling. */
.blog-card__plate {
  display: block;
  position: relative;
  width: 100%;
  background: var(--c-light-dark);
  overflow: hidden;
  /* Wipes open left to right as the section arrives. clip-path rather than
     width: it composites, where width would reflow the card on every frame. */
  clip-path: inset(0 100% 0 0);
  transition: clip-path calc(var(--rv-dur) * 1.1) var(--rv-ease);
  transition-delay: calc(var(--d, 0) * var(--rv-step));
}
.is-in .blog-card__plate { clip-path: inset(0 0 0 0); }
.blog-card__plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card--lead .blog-card__plate { height: calc(518 * var(--s)); }
.blog-card--side .blog-card__plate { height: calc(350 * var(--s)); }

.blog-card__kicker,
.blog-card__when {
  margin-top: calc(40 * var(--s));
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.blog-card__read { color: var(--c-accent-yellow); }

.blog-card__title {
  margin: calc(24 * var(--s)) 0 0;
  font-family: var(--f-sans);
  font-weight: 400;
  /* 32, down from the frame's 40. The tracking follows it at the same ratio
     the frame uses, -0.03em. */
  font-size: calc(32 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-0.96 * var(--s));
  color: var(--c-mono-light);
  transition: color 240ms var(--ui-ease);
}

/* Hover lights a plate behind the card's details -- the same Mono/Light-Dark
   the thumbnail above it is, so the text block reads as belonging to the
   picture rather than as a new colour arriving. It covers the rows below the
   plate and nothing else, and :hover means only the card under the pointer
   ever has it.

   It is a grid child rather than an ::after so it can span rows by name: the
   two sizes have different row counts -- the small card puts the kicker and
   date on one row, the lead card gives each its own -- and `2 / -1` is the
   details in both without either having to be counted. */
.blog-card__wash {
  grid-row: 2 / -1;
  grid-column: 1 / -1;
  /* Flush with the picture above it, left and right -- it was overhanging by
     20 either side, which read as a second, wider block. Only the vertical
     margins give it room. */
  margin: calc(-16 * var(--s)) 0 calc(-20 * var(--s));
  /* Mono/Light-Dark at 14%. At full strength it was the nav pill's own fill,
     which is far too assertive for a hover; this reads as the block lifting
     rather than as a panel arriving. */
  background: rgba(26, 36, 50, 0.14);
  /* Wiped in from the left, the same move the plate above it makes when the
     section arrives -- clip-path, not opacity, so the colour sweeps across
     the details rather than appearing on them all at once.

     860ms. 420 was a flicker -- over before the eye found it -- and 1150
     overcorrected into something you had to wait out; this is that a
     quarter quicker, which lands between the two. */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 860ms var(--ui-ease);
  pointer-events: none;
}
.blog-card:hover .blog-card__wash,
.blog-card__link:focus-visible ~ .blog-card__wash { clip-path: inset(0 0 0 0); }

/* Above the wash. Without this the plate stays put but the text sits under
   the colour. */
.blog-card__kicker,
.blog-card__title,
.blog-card__when { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .blog-card__wash { transition: none; }
  .blog-card__plate { clip-path: none; transition: none; }
}

/* The lead card: kicker 40 under the plate, title 32 under that, date 12
   under the title -- the frame's own spacing at that size. */
.blog-card--lead .blog-card__title { margin-top: calc(32 * var(--s)); }
.blog-card--lead .blog-card__when { margin-top: calc(12 * var(--s)); }

/* ==========================================================================
   Reflow
   ========================================================================== */

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .blog-hero { padding: 24px 20px 56px; }
  .blog-hero__h { margin-top: 48px; padding: 0; font-size: clamp(34px, 9vw, 56px); letter-spacing: -0.02em; }
  .blog-hero__eyebrow { margin-top: 32px; padding: 0; }
  .blog-hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 24px;
    padding: 0;
  }
  .blog-hero__grid .blog-card--lead { grid-row: auto; }
  .blog-card--lead .blog-card__plate,
  .blog-card--side .blog-card__plate { height: auto; aspect-ratio: 614 / 350; }
  .blog-card__kicker, .blog-card__when { margin-top: 20px; font-size: 12px; }
  .blog-card__title { margin-top: 12px; font-size: clamp(22px, 5.5vw, 30px); letter-spacing: -0.02em; }
  .blog-card--lead .blog-card__title { margin-top: 12px; }
  .blog-card--lead .blog-card__when { margin-top: 10px; }
}

/* Too narrow for the kicker and the date on one row; the small card takes
   the lead card's stacking instead. */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  .blog-card--side .blog-card__link {
    grid-template-columns: 1fr;
    grid-template-areas: "plate" "kicker" "title" "when";
  }
  .blog-card--side .blog-card__when { justify-self: start; margin-top: 10px; }
}