/* related-blocks.css — a FALLBACK skin for per-page "Related" blocks.
 *
 * ★ Why this exists (2026-08-09). Related blocks on these pages are built from a per-page class
 * prefix (.aag-related-link, .exp-related-card, .fi-related, …) whose CSS lives in that page's own
 * inline <style>. On 28 pages the prefix and the CSS drifted apart, so the class was used and never
 * defined: 220 elements rendered as raw browser-default blue underlined links, live, indefinitely.
 * Every href resolved, every audit passed. Only looking at the page revealed it.
 *
 * It is keyed on the SUFFIX, not on 30 hardcoded prefixes, so a future page that invents
 * ".xyz-related-card" inherits a correct skin instead of shipping unstyled.
 *
 * ⚠ This is a FALLBACK LAYER, so it must LOSE to a page that styles its own block. Two things
 * keep that true, and both matter:
 *   1. every selector is a single attribute selector (0,0,1,0) — the same weight as a bare class,
 *      so a page's own rule wins on source order;
 *   2. the <link> is placed BEFORE the page's inline <style>.
 * Load it only on pages that need it; it is not a sitewide stylesheet.
 *
 * ⚠ The pages needing this do NOT define --gcx-*, so every var() carries a literal fallback.
 * An undefined custom property read through two different fallbacks renders as two colours,
 * neither of them intended (docs/DURABLE-GOTCHAS.md).
 */

[class$="-related-grid"],
[class$="-related-links"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}

[class$="-related-link"],
[class$="-related-card"] {
  display: block;
  background: #fff;
  border: 1px solid var(--gcx-line, #e6dcc8);
  border-radius: 12px;
  padding: 18px 20px;
  text-decoration: none;
  color: var(--gcx-ink-2, #40403a);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color .15s, transform .15s;
}

[class$="-related-link"]:hover,
[class$="-related-card"]:hover {
  border-color: var(--gcx-sienna, #a85a3c);
  transform: translateY(-2px);
}

/* The heading inside a card. Descendant of an attribute selector = 0,0,1,1 — still below any
   page rule that names its own class and element. */
[class$="-related-link"] h3, [class$="-related-card"] h3,
[class$="-related-link"] h4, [class$="-related-card"] h4 {
  color: var(--gcx-forest, #1a3d2e);
  font-size: 16.5px;
  font-weight: 700;
  margin: 0 0 6px;
  font-family: var(--gcx-serif, 'Fraunces', Georgia, 'Times New Roman', serif);
}

[class$="-related-link"] p, [class$="-related-card"] p {
  color: var(--gcx-ink-2, #40403a);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* The "Title <span>blurb</span>" idiom: the title is bare text, so it needs the heading treatment
   and the span needs to drop to body weight, or the card reads as one run of undifferentiated text. */
[class$="-related-link"] > span,
[class$="-related-card"] > span {
  display: block;
  margin-top: 6px;
  color: var(--gcx-ink-2, #40403a);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* A leading category chip: <span class="x-related-cat">Guide</span>Title */
[class$="-related-cat"] {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gcx-cream, #fdfaf2);
  border: 1px solid var(--gcx-line, #e6dcc8);
  color: var(--gcx-forest, #1a3d2e);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  vertical-align: middle;
}
/* …but a chip is a chip, never a block, even when it sits inside a card that blocks its spans. */
[class$="-related-link"] > span[class$="-related-cat"],
[class$="-related-card"] > span[class$="-related-cat"] {
  display: inline-block;
  margin-top: 0;
  font-size: 11.5px;
  font-weight: 600;
}

/* The section wrapper, so an unstyled block still gets breathing room. */
[class$="-related"] {
  display: block;
  margin: 32px 0;
}

/* A column/category grouping inside a related section (…-related-group). */
[class$="-related-group"] {
  display: block;
  margin-bottom: 18px;
}