/*
 * LONG-FORM ARTICLE — case studies AND blog posts, one set of rules.
 *
 * Kay, 2026-08-21: "style the actual blog pages like the case studies, since
 * they're the same kinda layout, so same image and font settings, for
 * consistency."
 *
 * These rules were `.single-case_study …` inside case-studies.css until then.
 * They are not COPIED here — they are MOVED, and the scope is now the
 * `rfn-article` body class that refinery_article_body_class() adds to both
 * single case studies and single posts. Copying would have produced exactly
 * the drift CLAUDE.md warns about: two sets of article type, dialled by hand
 * on different days, slowly disagreeing.
 *
 * case-studies.css keeps only what the blog has no equivalent of — the
 * division switcher and the badges — which is what its own header always
 * claimed it was.
 *
 * The `cs-` prefixes on the hero classes are kept deliberately. Renaming them
 * to something neutral would be a nicer name and a worse change: the markup,
 * the inline parallax script and the 0.19.x history all say `cs-hero`, and a
 * rename buys nothing a comment cannot.
 */

/* ═══════════════════════════════════════════════════════════════════════
   Single case study — article polish (2026-08-20, Kay's pass on the first
   real one, Westfalia). Everything scoped to body.rfn-article so the
   listings above are untouched.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The hero banner ──
   Height-capped featured image, centred, floating over a full-width blurred
   copy of itself. The backdrop is translated on scroll by the template's
   inline script (transform, NOT background-attachment: fixed — Chromium
   downgrades fixed to scroll on filtered elements). */
/* ── The title column ──
   The SAME 900px centred column as .post-body, so the title, the label and the
   body copy share one left edge (2026-09-04, Michael / Claire: "titles are left
   justified, while everything else is center-justified"). The column is
   centred; the text inside it is not. */
.rfn-article-head {
  max-width: 900px;
  margin-inline: auto;
}

/* Padding and margin both came down on 2026-09-04 — "lots of empty space
   between the title and the images in the case studies, can we tighten?"
   There were three stacked gaps: the header's own 3rem bottom padding (now
   1.5rem, in the template), this element's 1.5rem top margin (now 0), and its
   2.5–4.5rem top padding (now 1.25–2.5rem). About 112–144px became about
   44–64px. The padding cannot go to zero: the ::after gradient fades the
   blurred backdrop into the page over the top and bottom 22%, and with no
   padding the artwork sits inside that fade and loses contrast. */
.rfn-article .cs-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 3vh, 2.5rem) 1.5rem;
  margin-top: 0;
}

.rfn-article .cs-hero-backdrop {
  position: absolute;
  /* Vertical bleed = travel room for the parallax translate. */
  inset: -22% 0;
  background-size: cover;
  background-position: center;
  filter: blur(26px) brightness(0.4) saturate(1.15);
  will-change: transform;
}

/* Fade the banner's soft edges into the page so it reads as a band, not a
   rectangle with blurry borders. */
.rfn-article .cs-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--dark) 0%,
    rgba(20, 20, 20, 0) 22%,
    rgba(20, 20, 20, 0) 78%,
    var(--dark) 100%
  );
  pointer-events: none;
}

.rfn-article .cs-hero-img {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  max-width: min(92%, 1100px);
  max-height: clamp(320px, 62vh, 640px);
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

/* ── Wider article on big screens ── */
.rfn-article .post-body {
  max-width: 900px;
}

/* ── Type: bigger body, display-weight section titles ── */
.rfn-article .post-body p,
.rfn-article .post-body ul {
  font-size: 1.125rem;
}

/* Section titles inside the article: uppercase Poppins Black, matching the
   site's display headings. Sentence case stays in the markup — the standing
   rule; transform does the shouting. */
.rfn-article .post-body h2,
.rfn-article .post-body h3 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  color: var(--white);
}

.rfn-article .post-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  margin: 3.25rem 0 1.25rem;
}

.rfn-article .post-body h3 {
  /* Kay's dial, 2026-08-20: h3s scale hard with the viewport (2.5vw with a
     4.5rem ceiling) — on a big screen they read as full display headings. */
  font-size: clamp(1.15rem, 2.5vw, 4.5rem);
  margin: 2.75rem 0 1rem;
}

/* First heading straight after the hero doesn't need the full launch pad. */
.rfn-article .post-body > h2:first-child,
.rfn-article .post-body > h3:first-child {
  margin-top: 0.5rem;
}

/* ── Images: lifted, not flat — and breathing room around them ── */
.rfn-article .post-body img {
  height: auto;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.rfn-article .post-body figure,
.rfn-article .post-body .wp-block-image,
.rfn-article .post-body .wp-block-gallery,
.rfn-article .post-body .wp-block-video {
  margin: 2.75rem auto;
}

/* Galleries space their tiles; each tile keeps the lift.
   ── CS-3 (2026-09-02) ────────────────────────────────────────────────────
   `--wp--style--unstable-gallery-gap` MUST be declared alongside `gap`, and
   with the same value. Core sizes each tile as
     width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * .66667)
   so setting only `gap` leaves core sizing the tiles against its 16px default
   while the real gaps are 20px. A 3-up row then measures W + 8px and a 2-up
   row W + 4px — both overflow, the last tile wraps, and `flex-grow: 1` on the
   survivors stretches them. That is Claire's "two medium side by side and one
   giant below" and "huge and stacked", and it is why the editor looked right:
   the editor sets this variable, the front end did not. */
.rfn-article .post-body .wp-block-gallery {
  gap: 1.25rem;
  --wp--style--unstable-gallery-gap: 1.25rem;
}

/* ── Captions: quieter than the copy, centred, italic ── */
.rfn-article .post-body figcaption {
  font-size: 0.8125rem;
  font-style: italic;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.85rem;
  line-height: 1.5;
}

/* ── Footer nav: centred under the article, held off by a hairline ── */
.rfn-article .cs-footer-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 900px;            /* the article's width — the line matches it */
  margin: 0 auto;
  padding-top: 2.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 640px) {
  .rfn-article .cs-hero {
    padding: 1.75rem 1rem;
    margin-top: 0.75rem;
  }

  .rfn-article .cs-hero-img {
    max-height: 48vh;
    border-radius: 8px;
  }
}