/* ============================================================
   public-format-guide.css
   Shared styles for long-form guide pages on fun-run.co.uk:
   the cornerstone "how to organise a sponsored event" guide
   and each format-specific page (colour run, sponsored walk,
   fun run, readathon, etc.). Body class: fr-public-format-guide.
   Layers on top of public-home and public-article. Provides the
   in-page contents list, the checklist preview card, the format
   bulleted list, the commercial-spine spacing tweak, the
   audience-note signpost, and the format-page content patterns
   (worked example, cost table, sample wording).
   ============================================================ */

/* ------------------------------------------------------------
   Hero lede on format pages — bolder than the public-home
   default so the opening sentence carries the page's weight.
   ------------------------------------------------------------ */

body.fr-public-format-guide .fr-article-hero .fr-home-section__lede {
  font-weight: var(--fr-weight-bold);
}

/* ------------------------------------------------------------
   In-page contents (TOC) — minimal styled list inside the hero.
   ------------------------------------------------------------ */

/* Margin-top only applies when the TOC sits inside the hero
   (cornerstone pattern). On format pages the TOC is its own
   section after the audience note, so the section padding
   already provides the spacing. */
body.fr-public-format-guide .fr-article-hero .fr-toc {
  margin-top: var(--fr-space-7);
}

body.fr-public-format-guide .fr-toc__eyebrow {
  font-size: var(--fr-text-xs);
  letter-spacing: var(--fr-tracking-wide);
  text-transform: uppercase;
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-primary);
  margin: 0 0 var(--fr-space-3);
}

body.fr-public-format-guide .fr-toc__list {
  list-style: disc;
  padding-left: 1.25em;
  margin: 0;
  columns: 2;
  column-gap: var(--fr-space-7);
}

@media (max-width: 720px) {
  body.fr-public-format-guide .fr-toc__list {
    columns: 1;
  }
}

body.fr-public-format-guide .fr-toc__list li {
  font-size: var(--fr-text-md);
  line-height: var(--fr-leading-relaxed);
  margin: 0 0 var(--fr-space-2);
  break-inside: avoid;
}

body.fr-public-format-guide .fr-toc__list a {
  color: var(--fr-color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.fr-public-format-guide .fr-toc__list a:hover {
  color: var(--fr-color-primary-hover);
}

/* ------------------------------------------------------------
   Bulleted lists used in the format section and the logistics
   section. Bold lead, plain prose continuation.
   ------------------------------------------------------------ */

body.fr-public-format-guide .fr-format-list {
  list-style: disc;
  padding-left: 1.25em;
  margin: 0 0 var(--fr-space-6);
}

body.fr-public-format-guide .fr-format-list li {
  font-size: var(--fr-text-md);
  line-height: var(--fr-leading-relaxed);
  color: var(--fr-color-ink);
  margin: 0 0 var(--fr-space-3);
  padding-left: var(--fr-space-2);
}

body.fr-public-format-guide .fr-format-list li:last-child {
  margin-bottom: 0;
}

body.fr-public-format-guide .fr-format-list li strong {
  font-weight: var(--fr-weight-semibold);
}

/* Forward-link paragraph at the foot of the format/logistics
   sections, pointing readers at format-specific guides. */
body.fr-public-format-guide .fr-format-link {
  margin-top: var(--fr-space-5);
}

/* ------------------------------------------------------------
   Commercial spine — three consecutive cream sections (goal →
   entry fee → sponsorship) read as one sustained beat. Pull the
   adjacent edges together so it doesn't look like three blocks.
   ------------------------------------------------------------ */

body.fr-public-format-guide .fr-home-section--cream:has(+ .fr-home-section--cream) {
  padding-bottom: var(--fr-space-5);
}

body.fr-public-format-guide .fr-home-section--cream + .fr-home-section--cream {
  padding-top: var(--fr-space-5);
}

/* ------------------------------------------------------------
   Checklist preview card — cream tile with four sub-headings,
   each a small group of bulleted items.
   ------------------------------------------------------------ */

body.fr-public-format-guide .fr-checklist-card {
  background: var(--fr-color-bg-strong);
  border-radius: 12px;
  padding: var(--fr-space-6) var(--fr-space-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fr-space-6) var(--fr-space-7);
  margin: var(--fr-space-5) 0 var(--fr-space-4);
}

@media (max-width: 720px) {
  body.fr-public-format-guide .fr-checklist-card {
    grid-template-columns: 1fr;
    padding: var(--fr-space-5);
    gap: var(--fr-space-5);
  }
}

body.fr-public-format-guide .fr-checklist-card__group {
  min-width: 0;
}

body.fr-public-format-guide .fr-checklist-card__heading {
  font-family: inherit;
  font-size: var(--fr-text-md);
  font-weight: var(--fr-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--fr-color-ink);
  margin: 0 0 var(--fr-space-3);
}

body.fr-public-format-guide .fr-checklist-card__group ul {
  list-style: disc;
  padding-left: 1.25em;
  margin: 0;
}

body.fr-public-format-guide .fr-checklist-card__group li {
  font-size: var(--fr-text-base);
  line-height: var(--fr-leading-relaxed);
  color: var(--fr-color-ink);
  margin: 0 0 var(--fr-space-2);
}

body.fr-public-format-guide .fr-checklist-card__group li:last-child {
  margin-bottom: 0;
}

body.fr-public-format-guide .fr-checklist-card__placeholder {
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
  margin: var(--fr-space-4) 0 0;
  text-align: center;
}

body.fr-public-format-guide .fr-checklist-download {
  margin: var(--fr-space-5) 0 0;
  text-align: center;
  scroll-margin-top: 4rem;
}

/* ------------------------------------------------------------
   Audience-note signpost — small block of muted body copy
   between the hero and the TOC. Translates school-specific
   body language to other voluntary-group contexts so the
   article body can stay concrete and scannable.
   ------------------------------------------------------------ */

body.fr-public-format-guide .fr-audience-note {
  padding: var(--fr-space-5) 0 var(--fr-space-3);
}

@media (max-width: 900px) {
  body.fr-public-format-guide .fr-audience-note {
    padding-left: var(--fr-container-pad-x);
    padding-right: var(--fr-container-pad-x);
  }
}

body.fr-public-format-guide .fr-audience-note p {
  font-size: var(--fr-text-base);
  line-height: var(--fr-leading-relaxed);
  color: var(--fr-color-ink);
  margin: 0;
}

/* ------------------------------------------------------------
   Worked-example block — a cream card with calculation rows
   that lifts off a cream section. Used in the "what can it
   raise" section on format pages.
   ------------------------------------------------------------ */

body.fr-public-format-guide .fr-worked-example {
  background: var(--fr-color-surface-sunken);
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius-md);
  padding: var(--fr-space-6) var(--fr-space-7);
  margin: var(--fr-space-6) 0;
}

@media (max-width: 720px) {
  body.fr-public-format-guide .fr-worked-example {
    padding: var(--fr-space-5);
  }
}

body.fr-public-format-guide .fr-worked-example__heading {
  font-family: inherit;
  font-size: var(--fr-text-md);
  font-weight: var(--fr-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--fr-color-ink);
  margin: 0 0 var(--fr-space-4);
}

body.fr-public-format-guide .fr-worked-example p {
  font-size: var(--fr-text-md);
  line-height: var(--fr-leading-relaxed);
  color: var(--fr-color-ink);
  margin: 0 0 var(--fr-space-4);
}

body.fr-public-format-guide .fr-worked-example p:last-child {
  margin-bottom: 0;
}

body.fr-public-format-guide .fr-worked-example p strong {
  font-weight: var(--fr-weight-semibold);
}

body.fr-public-format-guide .fr-worked-example__total {
  margin-top: var(--fr-space-5);
  padding-top: var(--fr-space-4);
  border-top: 1px solid var(--fr-color-border-strong);
  font-size: var(--fr-text-lg);
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-heading);
}

/* ------------------------------------------------------------
   Cost table — simple two-column layout, hairline rows, a
   stronger separator above the total row. No fancy borders.
   ------------------------------------------------------------ */

body.fr-public-format-guide .fr-cost-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--fr-space-5) 0;
  font-size: var(--fr-text-md);
}

body.fr-public-format-guide .fr-cost-table thead th {
  text-align: left;
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-sm);
  letter-spacing: var(--fr-tracking-wide);
  text-transform: uppercase;
  padding: 0 var(--fr-space-4) var(--fr-space-3);
  border-bottom: 1px solid var(--fr-color-border-strong);
}

body.fr-public-format-guide .fr-cost-table thead th:last-child {
  text-align: right;
}

body.fr-public-format-guide .fr-cost-table tbody td {
  padding: var(--fr-space-3) var(--fr-space-4);
  border-bottom: 1px solid var(--fr-color-border);
  color: var(--fr-color-ink);
  line-height: var(--fr-leading-relaxed);
  vertical-align: top;
}

body.fr-public-format-guide .fr-cost-table tbody td:last-child {
  white-space: nowrap;
  text-align: right;
}

body.fr-public-format-guide .fr-cost-table tbody tr.fr-cost-table__total td {
  border-top: 2px solid var(--fr-color-border-strong);
  border-bottom: none;
  padding-top: var(--fr-space-4);
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-heading);
}

/* ------------------------------------------------------------
   Sample-wording block — labelled blockquote-style box used
   for parent letters, sponsorship-page blurbs, thank-you
   messages. Sits on white over either a cream or white
   section background.
   ------------------------------------------------------------ */

body.fr-public-format-guide .fr-sample-wording {
  margin: var(--fr-space-6) 0;
  padding: var(--fr-space-5) var(--fr-space-6);
  border-left: 3px solid var(--fr-color-primary);
  background: var(--fr-color-surface);
  border-radius: 0 var(--fr-radius-sm) var(--fr-radius-sm) 0;
}

body.fr-public-format-guide .fr-sample-wording__label {
  display: block;
  font-size: var(--fr-text-xs);
  letter-spacing: var(--fr-tracking-wide);
  text-transform: uppercase;
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-primary);
  margin: 0 0 var(--fr-space-3);
}

body.fr-public-format-guide .fr-sample-wording p {
  font-size: var(--fr-text-md);
  line-height: var(--fr-leading-relaxed);
  color: var(--fr-color-ink);
  margin: 0 0 var(--fr-space-3);
}

body.fr-public-format-guide .fr-sample-wording p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   H3 sub-headings inside section bodies (timeline blocks,
   on-the-day sub-sections). Direct child selector avoids
   clobbering nested H3s like .fr-worked-example__heading.
   ------------------------------------------------------------ */

body.fr-public-format-guide .fr-article-body > h3 {
  font-family: var(--fr-font-serif);
  font-size: var(--fr-text-lg);
  font-weight: var(--fr-weight-bold);
  letter-spacing: -0.01em;
  color: var(--fr-color-heading);
  margin: var(--fr-space-7) 0 var(--fr-space-5);
}

/* ------------------------------------------------------------
   FAQ accordion alignment — the base .fr-faq from components.css
   constrains to 48rem and centres, which leaves the question
   rows indented relative to the section H2 on wide viewports.
   On format guides we want full-section-width alignment so the
   FAQ matches the rest of the page rhythm.
   ------------------------------------------------------------ */

body.fr-public-format-guide .fr-faq {
  max-width: none;
  margin: 0;
}

body.fr-public-format-guide .fr-faq__answer p {
  max-width: none;
}

/* ------------------------------------------------------------
   Photo hero — format-page overrides on top of the homepage
   .fr-home-hero--photo pattern. Smaller H1 (homepage > format
   hero > section H2), and a diagonal scrim concentrated behind
   the text zone so the photo's colour stays vivid elsewhere
   instead of being flatly dulled.
   ------------------------------------------------------------ */

body.fr-public-format-guide .fr-home-hero--photo .fr-home-hero__title {
  font-size: clamp(2.5rem, 4vw + 0.75rem, 4rem);
}

/* Match the homepage hero's filter treatment (blur + brightness
   + contrast + scale to hide the blur edge), but drop the
   saturate(1.35) — already-vivid format photos like the colour
   run powder go neon with the saturation boost. */
body.fr-public-format-guide .fr-home-hero--photo .fr-home-hero__bg {
  filter: brightness(1.12) contrast(1.05) blur(3.8px);
}

/* Drop the homepage's sky-blue wash — it tints the photo and
   the hue doesn't suit the format-page images. */
body.fr-public-format-guide .fr-home-hero--photo::after {
  background: none;
}

/* Radial scrim — a true gradient localised to the text zone
   (upper-left of the inner panel), fading to transparent at
   the top, sides and bottom. Only as dark as the text needs
   for contrast; the rest of the photo reads at full vivid
   saturation. With the short two-sentence lede, the text
   block is compact and the scrim can stay light.

   Template values — reused by every format-page photo hero. */
body.fr-public-format-guide .fr-home-hero--photo::before {
  background: radial-gradient(
    ellipse 65% 55% at 25% 38%,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.25) 35%,
    rgba(0, 0, 0, 0.08) 70%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* On narrow screens the inner panel goes full-width, so widen
   the ellipse and centre it horizontally. Same opacity stops. */
@media (max-width: 900px) {
  body.fr-public-format-guide .fr-home-hero--photo::before {
    background: radial-gradient(
      ellipse 95% 50% at 50% 30%,
      rgba(0, 0, 0, 0.42) 0%,
      rgba(0, 0, 0, 0.25) 40%,
      rgba(0, 0, 0, 0.08) 75%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}