/*
 * Single blog post (single.php).
 * Loaded after page-videos-and-articles.css, which already owns the eyebrow,
 * the section head, the blog card, the newsletter and the closing CTA — this
 * file only adds the article itself.
 */

/* The head, the lead image and the body all sit on one column so the article
   reads as a single block of text rather than three stacked widths.
   This measure is set by the reading size, not by the design canvas — see the
   article body below. `em` is what keeps it honest: it resolves against the
   font size of whichever of the three boxes uses it, all of which read at
   --fs-body, so the column stays ~70 characters at every width instead of
   running to 86 wherever that token is sitting on its floor. */
.post-single {
  --post-measure: 40em; /* ~70 characters */
}

/* ==========================================================================
   Article head
   ========================================================================== */
.post-hero {
  background: var(--c-white);
  padding-block: clamp(2.25rem, calc(5.5 * var(--vw)), 6.6rem) clamp(1rem, calc(2.5 * var(--vw)), 3rem);
}
.post-hero__inner {
  max-width: var(--post-measure);
  margin-inline: auto;
}
.post-hero__chip {
  display: inline-block;
  margin-top: clamp(1rem, calc(1.5 * var(--vw)), 1.75rem);
  border-radius: min(7px, calc(0.3646 * var(--vw-inset)));
  background: var(--c-ice);
  padding: clamp(0.5rem, calc(0.57 * var(--vw)), 0.6875rem) clamp(0.625rem, calc(0.83 * var(--vw)), 1rem);
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--c-blue);
}
.post-hero__title {
  margin-top: clamp(0.75rem, calc(1.25 * var(--vw)), 1.5rem);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.25;
  color: var(--c-charcoal);
}
.post-hero__deck {
  margin-top: clamp(1rem, calc(1.5 * var(--vw)), 1.75rem);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-grey);
}
.post-hero__meta {
  margin-top: clamp(1rem, calc(1.5 * var(--vw)), 1.75rem);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-charcoal);
}

.post-figure {
  max-width: var(--post-measure);
  margin: 0 auto clamp(1.5rem, calc(2.5 * var(--vw)), 3rem);
  border-radius: min(31px, calc(1.6146 * var(--vw-inset)));
  overflow: hidden;
}
.post-figure img {
  width: 100%;
}

/* This is the video's own page, so the clip plays here rather than in the
   overlay every other tile on the site opens. */
.post-video__media,
.post-video__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

/* ==========================================================================
   Article body — a ~70 character measure, the one place on the site tuned for
   reading rather than for the design canvas.
   ========================================================================== */
.post-body {
  max-width: var(--post-measure);
  margin-inline: auto;
  padding-bottom: clamp(2.5rem, calc(4 * var(--vw)), 5rem);
  /* Long-form copy is the one thing that should not shrink to 75% of the
     canvas. The canvas ramp for 21 bottoms out on a 16px floor, which left the
     column at ~630px and stranded the article in white space; reading at the
     same size as body copy everywhere else on the site is both larger and more
     consistent, and it lets the measure grow with it. Below ~1230 this token is
     on its own 16px floor, so phones and tablets are unchanged. */
  font-size: var(--fs-body); /* 25 */
  line-height: 1.85;
  color: var(--c-charcoal);
}
.post-body > * + * {
  margin-top: 1.6em;
}
.post-body h2,
.post-body h3 {
  margin-top: 2em;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-charcoal);
}
.post-body h2 {
  font-size: var(--fs-h5);
}
.post-body h3 {
  font-size: var(--fs-h6);
}
.post-body a {
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.post-body a:hover {
  color: var(--c-orange);
}
.post-body ul,
.post-body ol {
  padding-left: 1.4em;
}
.post-body li + li {
  margin-top: 0.6em;
}
.post-body blockquote {
  margin: 2em 0;
  border-left: 4px solid var(--c-orange);
  padding: 0.25em 0 0.25em 1.25em;
  font-family: var(--font-serif);
  font-size: 1.15em;
  font-style: italic;
  line-height: 1.6;
  color: var(--c-navy);
}
.post-body img {
  border-radius: min(22px, calc(1.1458 * var(--vw-inset)));
}
.post-body figcaption {
  margin-top: 0.6em;
  font-size: var(--fs-ui);
  color: var(--c-grey);
}

.post-tags {
  margin-top: 2.5em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 0.75em;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--c-blue);
}
.post-tags__tag:hover {
  color: var(--c-orange);
}

/* ==========================================================================
   Newer / older
   ========================================================================== */
.post-nav {
  background: var(--c-white);
  padding-bottom: clamp(2rem, calc(3.5 * var(--vw)), 4rem);
}
.post-nav__inner {
  max-width: var(--post-measure);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, calc(1.5 * var(--vw)), 1.8125rem);
}
.post-nav__link {
  border: 1px solid rgba(57, 57, 57, 0.5);
  border-radius: min(22px, calc(1.1458 * var(--vw-inset)));
  padding: clamp(1rem, calc(1.5 * var(--vw)), 1.75rem) clamp(1.25rem, calc(1.8 * var(--vw)), 2.1875rem);
  transition: border-color 0.2s ease;
}
.post-nav__link:hover {
  border-color: var(--c-blue);
}
/* An article at either end of the archive keeps its remaining link on its own
   side rather than sliding into the middle. */
.post-nav__link--next:only-child {
  grid-column: 2;
  text-align: right;
}
.post-nav__label {
  display: block;
  font-size: var(--fs-ui);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-orange);
}
.post-nav__title {
  display: block;
  margin-top: 0.35em;
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-charcoal);
}

/* ==========================================================================
   Keep reading
   ========================================================================== */
.post-related {
  --insights-card: #f4f4f4;
  background: var(--c-white);
  padding-block: clamp(1.5rem, calc(3.5 * var(--vw)), 4.2rem) clamp(2rem, calc(4.84 * var(--vw)), 5.808rem);
  border-top: 1px solid rgba(57, 57, 57, 0.2);
}
.post-related .insights-section__title {
  margin-top: 0;
}
/* An episode's "Keep listening" rows sit as far below the head as the
   article cards do. */
.post-related .insights-podcast__list {
  margin-top: clamp(2rem, calc(4.06 * var(--vw)), 4.875rem);
}
/* The related cards are reveal targets (see template-parts/insights/card.php),
   so the hover transition has to open with var(--reveal-transition) or it
   would replace the reveal's own — see .audience-card in front-page.css. */
.post-related .insights-card {
  transition:
    var(--reveal-transition),
    transform var(--motion) ease,
    border-color var(--motion) ease,
    box-shadow var(--motion) ease;
}
.post-related .insights-card:hover {
  transform: translateY(calc(var(--lift) * -1));
  border-color: var(--c-orange);
  box-shadow: 0 calc(var(--lift) * 2) calc(var(--lift) * 4) rgba(20, 42, 56, 0.13);
}

@media (max-width: 767px) {
  .post-nav__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .post-nav__link--next:only-child {
    grid-column: 1;
    text-align: left;
  }
  .post-figure {
    border-radius: 20px;
  }
}

/* A visitor who has asked for reduced motion still gets the border/shadow
   feedback on hover, just not the lift — see the matching block in
   front-page.css. */
@media (prefers-reduced-motion: reduce) {
  .post-related .insights-card:hover {
    transform: none;
  }
}