/* ============================================================
   Sector pages — shared primitives.

   Loaded by every sector page via its `extraStyles`, alongside exactly one sector theme sheet.
   Only what is genuinely identical across all five lives here; anything expressing a sector's
   design language belongs in that sector's sheet. All class names are prefixed `sct-`.

   Contrast note: `.sct-sys__more` ("View system →", 13.5px bold) used `var(--blue-600)` (#0888d1),
   which measures **3.85:1 on white** — computed via the WCAG relative-luminance formula
   (srgb_to_lin / luminance / contrast): L(#0888d1)=0.2226, L(#ffffff)=1, contrast=
   (1+.05)/(.2226+.05)=3.85:1. At 13.5px bold this text is below the "large text" threshold
   (18.66px bold / 24px regular), so it needs 4.5:1 and fails.
   `.sct-sys__more` sits on flat `#fff` on every page except Oil & Gas's dark rail, which already
   overrides this rule with its own amber (`.sct-rail--dark .sct-sys__more`, 7.70:1 on its panel —
   see sector-oilandgas.css) — and except Datacenters' `.sct-dc-tile` capacity cards, which reuse
   `.sct-sys__more` outside any `.sct-sys` (see fix-round-2 note below) but still render on the
   same flat white. `#0669a2` replaces `--blue-600` directly on the rule below: same hue/saturation
   as blue-600 (H≈202°, S≈93%), lightness lowered from 42.5% to 33%. L(#0669a2)=0.1275, contrast vs
   white = (1+.05)/(.1275+.05) = 5.92:1, comfortably clearing 4.5:1 while staying recognisably
   "blue-600, darkened" rather than introducing an unrelated hue.

   Fix-round-2 note: this was briefly a `--sct-more-ink` custom property scoped to `.sct-sys`, on
   the theory that `.sct-sys` was the only ancestor `.sct-sys__more` ever rendered inside. False —
   `src/templates/sectors/datacenters.mjs` also emits `.sct-sys__more` inside `<a class="sct-dc-tile">`
   (the CUMULUS/STRATUS POWER capacity tiles), which is not a `.sct-sys` descendant, so the variable
   was unset there and the colour silently fell back to inherited `--ink-70` (and the `currentColor`
   arrow icon with it). Set directly on `.sct-sys__more` instead of behind a custom property with
   exactly one consumer — that indirection earned nothing and only created a container-dependent
   failure mode a future reuse could hit again.
   ============================================================ */

.sct-eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 12px;
}
.sct-lede { font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.7; max-width: 68ch; }
.sct-section { padding-block: clamp(48px, 6vw, 88px); }
.sct-section--tight { padding-block: clamp(32px, 4vw, 56px); }

/* Structural defaults for every rail/section heading, so the primitives are legible without a
   sector theme sheet loaded. Per-sector stylesheets (Tasks 3–7) override colour and size on top
   of this; sector-base.css loads first, so the cascade favours them. No sector colours here. */
.sct-rail__heading, .sct-read__heading, .sct-faq__heading, .sct-rel__heading {
  font-size: clamp(24px, 2.8vw, 34px); font-weight: 700; line-height: 1.15;
  letter-spacing: -.03em; color: var(--navy); margin: 0 0 14px;
}

/* ---------- systems rail ---------- */

.sct-rail--light { background: var(--panel-fill); }

.sct-rail__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px;
  margin-top: 30px;
}
.sct-sys {
  display: flex; flex-direction: column; gap: 8px; padding: 22px;
  border-radius: var(--radius-md); border: 1px solid var(--line); background: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.sct-sys:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sct-sys__media { margin: -4px 0 6px; }
.sct-sys__media img { max-height: 132px; width: auto; margin-inline: auto; object-fit: contain; }
.sct-sys__family {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey-500); margin: 0;
}
.sct-sys__name { font-size: 18px; margin: 0; }
.sct-sys__role { font-size: 14px; line-height: 1.55; margin: 0; color: var(--ink-70); }
.sct-sys__specs { display: grid; gap: 4px; margin: 6px 0 0; }
.sct-sys__specs > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.sct-sys__specs dt { color: var(--grey-500); }
.sct-sys__specs dd { margin: 0; font-weight: 700; color: var(--navy); text-align: right; }
.sct-sys__more {
  margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: #0669a2;
}
.sct-sys__more svg { width: 15px; height: 15px; }

/* ---------- further reading ---------- */

.sct-read__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;
  margin-top: 26px;
}
.sct-read__item {
  display: block; padding: 22px; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: #fff;
}
.sct-read__item:hover { box-shadow: var(--shadow-md); }
.sct-read__title { font-size: 17px; margin: 0 0 8px; }
.sct-read__blurb { font-size: 14px; line-height: 1.6; margin: 0; color: var(--ink-70); }

/* ---------- faq ---------- */

.sct-faq__list { max-width: 76ch; margin-top: 26px; }
.sct-faq__item { border-bottom: 1px solid var(--line); }
.sct-faq__q {
  cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative;
  font-weight: 700; color: var(--navy); font-size: 16.5px;
}
.sct-faq__q::-webkit-details-marker { display: none; }
.sct-faq__q::after {
  content: '+'; position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  font-size: 22px; font-weight: 400; line-height: 1;
}
.sct-faq__item[open] .sct-faq__q::after { content: '\2013'; }
.sct-faq__a { padding: 0 34px 20px 0; font-size: 15px; line-height: 1.72; color: var(--ink-70); }

/* ---------- related sectors ---------- */

.sct-rel__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px;
  margin-top: 26px;
}
.sct-rel__item {
  display: block; padding: 20px; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: #fff;
}
.sct-rel__item:hover { box-shadow: var(--shadow-md); }
.sct-rel__label { font-size: 16px; margin: 0 0 6px; }
.sct-rel__blurb {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grey-500); margin: 0; line-height: 1.5;
}

@media (max-width: 640px) {
  .sct-rail__grid, .sct-read__grid, .sct-rel__grid { grid-template-columns: 1fr; }
}