/* ============================================================
   blume-v2-longtail.css - DRAFT (Wave 2, tune with render probes)
   Extends the v2 design system to the two long-tail template
   families: .page-section (treatment pages) and .article
   (concern pages). Loads AFTER blume-v2.css so both are active;
   this file adds long-tail-scoped rules and undoes the one v2
   rule that misfires on gradient heroes.
   Only pages that link this file are affected.
   ============================================================ */

/* 0. v2's three-stop photo scrim darkens the long-tail CSS-gradient
      heroes for no reason. Restore a flat light scrim. */
body .hero::after { background: rgba(29, 29, 29, 0.22); }
body .hero__overlay { background: rgba(29, 29, 29, 0.22); }

/* 1. Section headings: 13px uppercase label -> real v2-scale heading.
      Specificity matches the inline .page-section h2 (0,1,1) and this
      file loads later, so it wins. */
body .page-section h2,
body .article__section h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.75rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
body .page-section--dark h2 { color: var(--cream); }
body .page-section h2::after {
  width: 40px; height: 1px;
  background: var(--gold);
  margin: 1rem auto 0;
}

/* 2. Prose rhythm: v2 raises body to 16px/400 globally; the inline
      .page-section p { line-height: 2.0 } survives on specificity.
      Bring it to the v2 measure. */
body .page-section p,
body .article__section p { line-height: 1.65; }
body .page-section ul li,
body .article__section ul li { line-height: 1.65; }

/* 3. Sub-headings up a step to hold hierarchy under the bigger h2 */
body .page-section h3,
body .article__section h3 { font-size: 1.1875rem; font-weight: 500; }

/* 4. Hero headline weight aligns with v2 (w300 editorial) */
body .hero h1 { font-weight: 300; }

/* 5. FAQ rows: v2 tap-target rule + breathing room */
body .faq__question { min-height: 48px; }

/* 6. S2 brand-field: image-band placeholders become a deliberate flat
      field with two tone-on-tone marks instead of a gradient with an
      invisible label. Pages that get a real photo override this by
      replacing the band markup in HTML. */
body .image-band {
  background: var(--sand);
  position: relative;
  overflow: hidden;
  min-height: 30vh;
}
body .image-band::before,
body .image-band::after {
  content: '';
  position: absolute;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0.18;
}
body .image-band::before { width: 340px; height: 340px; right: -80px; top: -120px; }
body .image-band::after  { width: 180px; height: 180px; left: 10%; bottom: -60px; }
body .image-band__placeholder { display: none; }

/* 7. Real photo variant used by Wave 2 markup swaps */
body .image-band--photo {
  background: none;
  padding: 0;
}
body .image-band--photo img {
  display: block; width: 100%; height: 30vh;
  object-fit: cover; object-position: center 30%;
}
body .image-band--photo::before,
body .image-band--photo::after { content: none; }

/* 8. Mobile */
@media (max-width: 768px) {
  body .page-section h2,
  body .article__section h2 { font-size: 1.375rem; }
  body .image-band, body .image-band--photo img { min-height: 200px; height: 200px; }
}

/* 9. 2026-09-02 screenshot-QA fixes */
/* 9a. The generic Risks block on concern pages uses .page-section markup the concern template never styled. */
body section.ahpra-block.page-section { width: 100%; padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem); }
body section.ahpra-block .page-section__inner { max-width: 640px; margin: 0 auto; }
/* 9b. Empty grid cells were painted by the grid background; keep hairlines on the cards, not the container. */
body .related-grid, body .card-grid { background: transparent; gap: 1px; }
body .related-card, body .card-grid__item { outline: 1px solid #EDE7E0; outline-offset: 0; }
/* 9c. Desktop photo bands were 30vh letterboxes cropping faces; taller band, higher focal point. */
body .image-band--photo img { height: 42vh; min-height: 320px; object-position: center 22%; }
@media (max-width: 768px) {
  body section.ahpra-block.page-section { padding: clamp(2.5rem, 4vw, 3.5rem) 1.25rem; }
  body .image-band--photo img { min-height: 200px; height: 200px; object-position: center 30%; }
}