/* ================================================================
   SHARED — cross-block utilities.

   Loaded once globally (and in the editor) rather than being concatenated into
   every block request. Keep it small: only patterns that genuinely repeat across
   several blocks belong here. Block CSS may override any of it with block-scoped
   selectors.
   ================================================================ */

/* Section scaffolding ------------------------------------------- */

.section {
  padding: var(--space-section) var(--space-gutter);
}

.section--alt {
  background: var(--bg-alt);
}

.section__inner {
  max-width: var(--container);
  margin-inline: auto;
}

/* Section headings ---------------------------------------------- */

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The design uses a grey kicker by default and a green one on service pages. */
.eyebrow--accent { color: var(--accent); }

.h-lg {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 4vw, 3rem);
}

.lede {
  margin: 0;
  font-size: 1.125rem;
  color: var(--muted);
}

/* Display headings ----------------------------------------------
   Headlines in this design are set uppercase with tight tracking. Applied as a
   modifier rather than to h1/h2 directly, because card and list headings inside
   blocks stay sentence case. */

.h-display {
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

/* Short green rule under a heading — used on all six service pages, and on the
   attribution rule in quote panels. */

.h-underline {
  position: relative;
  padding-bottom: 0.75rem;
}

.h-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  background: var(--accent);
}

/* Bracketed heading — the [ LIFE IN SPORT NEWSLETTER ] treatment. */

.h-bracket {
  margin: 0;
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.h-bracket::before,
.h-bracket::after {
  color: var(--accent);
  font-weight: 800;
}

.h-bracket::before { content: "[ "; }
.h-bracket::after  { content: " ]"; }

/* Inverse context ------------------------------------------------
   The design drops white panels into the dark page for CTAs, cards and the
   contact form. Blocks apply this to their own root (or to the panel element)
   to flip the text tokens for that subtree — the sanctioned override in §5. */

.on-light {
  --text:   var(--ink);
  --muted:  var(--ink-2);
  --border: var(--border-ink);

  background: var(--bg-invert);
  color: var(--ink);
}

.on-light .eyebrow { color: var(--ink-2); }

/* Signature block (Will Cliff, on the About and homepage intro splits).
   Replace with SVG artwork when the real signature is supplied. */

.signature {
  margin: 0 0 0.75rem;
  font-family: var(--f-script);
  font-size: 2rem;
  line-height: 1;
  color: var(--text);
}

/* Screen-reader-only, for labels the design shows only as placeholders. */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Editor-only placeholder ---------------------------------------
   Shown by blocks when an image or link field is still empty, so there is
   something to click in the editor. Never rendered on the frontend. */

.placeholder {
  display: grid;
  place-items: center;
  min-height: 6rem;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.875rem;
  text-align: center;
}

/* Alerts (components/alert.blade.php) ---------------------------- */

.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border-left: 3px solid currentColor;
  background: var(--bg-alt);
}

.alert--success { color: #1b7f4d; }
.alert--caution { color: #a8730a; }
.alert--warning { color: #b3261e; }
.alert--info    { color: var(--accent); }