/* ============================================================
   Datacenters & Telco — "uptime console".
   Cool light ground, cyan accent, rack-column grid, mono numerals, 1px hairline tiles.
   Namespaced `.sct-dc-*`. Loaded only by /sectors/datacenters via its extraStyles.

   Contrast note: every figure below is computed (srgb_to_lin / luminance / contrast ratio against
   sRGB hex, or against the actual composited pixel where a photo is involved), not estimated.

   - Cyan `--dc-cyan` (#00b8e6) on white measures 2.33:1 and on this page's light ground
     `--dc-ground` (#f6f9fc) measures 2.21:1 — both fail 4.5:1 by a wide margin, so cyan is NEVER
     used for text on a light background here, only for rules, hairlines, borders and icon strokes.
     On the dark hero (#0a1420) cyan measures 7.94:1 flat, and 5.36:1 even at the worst point inside
     the radial glow (composited rgb(7.8,56.1,75.6) — the glow's own brightest corner) — both clear
     4.5:1, so cyan is safe for text there (hero eyebrow, badge, and the statement band's eyebrow,
     the latter checked against the actual photo below).
   - `var(--blue-600)` (#0888d1), which the initial draft used for the light-ground accent text
     (capacity/chain eyebrows, the power-chain stage numerals), measures only 3.85:1 on white and
     3.64:1 on `--dc-ground` — the same failure already documented for this token on
     sector-industrial.css's light backgrounds. A new token, `--dc-accent` (#046280), is used
     instead: 6.85:1 on white and 6.49:1 on `--dc-ground`, comfortably clearing 4.5:1.
   - Body copy: `--navy` (#1a1b60) on white is 15.33:1 and on `--dc-ground` 14.51:1; `--grey-500`
     (#5e6266) on white is 6.15:1 and on `--dc-ground` 5.82:1. Both far exceed 4.5:1.
   - The statement band's scrim (`rgba(10,20,32,.9)` -> `rgba(5,16,62,.9)` over
     datacenter-cold-aisle.jpg) was checked against that committed file's actual brightest pixel —
     rgb(255,255,255) at (168,523), a status-LED highlight, found by scanning every pixel of the
     1600x893 optimised JPEG. Composited worst case (the darker of the two gradient stops still
     lets more of that pixel through): rgb(30,39.9,81.3), L=0.0239. Against it: the #fff heading
     measures 14.22:1, the .86-alpha white body copy 10.87:1, and the cyan eyebrow 6.09:1 — all
     clear 4.5:1 under this single-brightest-pixel worst case.
   - `.sct-dc-tile`'s 3px cyan top border and `.sct-dc-stage`'s cyan connector line are decorative
     rules, not text and not the sole means of identifying either component (both are fully labelled
     with navy/grey-500 text), so the 4.5:1 text minimum does not apply to them.
   ============================================================ */

.sct-dc-hero, .sct-dc-intro, .sct-dc-cap, .sct-dc-statement, .sct-dc-chain, .sct-dc-arch {
  --dc-ground: #f6f9fc;
  --dc-dark: #0a1420;
  --dc-cyan: #00b8e6;
  --dc-accent: #046280;
  --dc-hair: rgba(10, 20, 32, .12);
}

/* ---------- hero ---------- */
.sct-dc-hero {
  background:
    radial-gradient(90% 120% at 78% 0%, rgba(0, 184, 230, .22) 0%, rgba(10, 20, 32, 0) 62%),
    var(--dc-dark);
  color: rgba(255, 255, 255, .86);
}
.sct-dc-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 56px); align-items: center; padding-block: 32px clamp(48px, 5vw, 76px);
}
/* `opacity: 1` matters, not just the color: the base `.crumbs a { opacity: .65 }` in site.css is
   inherited unless reset, and it silently multiplied with this rule's own alpha (old effective
   alpha .62 x .65 = .403, measuring 3.85:1 against dc-dark — under 4.5:1). Reset + unchanged .62
   alpha now measures 7.54:1; `[aria-current='page']` uses solid white, 18.52:1. Ground is the flat
   `--dc-dark` (#0a1420): the crumbs live in the hero's left column, outside the cyan radial glow
   which is positioned at 78% from the left and doesn't reach x=0. */
.sct-dc-hero__copy .crumbs a { color: rgba(255, 255, 255, .62); opacity: 1; }
.sct-dc-hero__copy .crumbs [aria-current='page'] { color: #fff; border-bottom-color: rgba(255, 255, 255, .7); }
.sct-dc-hero__copy .crumbs__sep { color: rgba(255, 255, 255, .5); }
.sct-dc-hero__eyebrow { color: var(--dc-cyan); }
.sct-dc-hero__title {
  font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -.035em;
  color: #fff; margin: 12px 0 16px;
}
.sct-dc-hero__intro { color: rgba(255, 255, 255, .82); }
.sct-dc-badge {
  display: inline-block; margin-top: 20px; padding: 7px 15px;
  border: 1px solid rgba(0, 184, 230, .5); border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--dc-cyan);
}
.sct-dc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.sct-dc-hero__media img { border-radius: var(--radius-lg); width: 100%; object-fit: cover; }

/* ---------- shared ---------- */
.sct-dc-h {
  font-size: clamp(25px, 2.9vw, 37px); letter-spacing: -.03em; line-height: 1.13;
  color: var(--navy); margin: 12px 0 16px;
}
.sct-dc-intro, .sct-dc-arch { background: #fff; }
.sct-dc-cap, .sct-dc-chain { background: var(--dc-ground); }
/* Light-ground eyebrows use the corrected accent token — see file header. */
.sct-dc-cap .sct-eyebrow, .sct-dc-chain .sct-eyebrow { color: var(--dc-accent); }

/* ---------- capacity band ---------- */
.sct-dc-cap__grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.sct-dc-cap__tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px;
  margin-top: 26px;
}
.sct-dc-tile {
  display: flex; flex-direction: column; gap: 14px; padding: 24px;
  background: #fff; border: 1px solid var(--dc-hair); border-radius: var(--radius-md);
  border-top: 3px solid var(--dc-cyan);
}
.sct-dc-tile:hover { box-shadow: var(--shadow-md); }
.sct-dc-tile__name { font-size: 17px; margin: 0; }
.sct-dc-tile__figure { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.sct-dc-tile__label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey-500);
}
.sct-dc-tile__figure strong {
  font-size: clamp(22px, 2.4vw, 29px); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; color: var(--navy); line-height: 1.1;
}
.sct-dc-cap__media img { border-radius: var(--radius-lg); width: 100%; object-fit: cover; }

/* ---------- statement ---------- */
.sct-dc-statement {
  background:
    linear-gradient(180deg, rgba(10, 20, 32, .9) 0%, rgba(5, 16, 62, .9) 100%),
    url('/assets/images/datacenter-cold-aisle.jpg') center/cover;
  color: rgba(255, 255, 255, .86);
}
.sct-dc-statement .sct-eyebrow { color: var(--dc-cyan); }
.sct-dc-statement__h {
  font-size: clamp(27px, 3.4vw, 42px); letter-spacing: -.03em; line-height: 1.12;
  color: #fff; max-width: 24ch; margin-bottom: 18px;
}
.sct-dc-statement__body { font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.72; max-width: 68ch; }

/* ---------- power chain ---------- */
.sct-dc-chain__row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
  margin-top: 26px;
}
.sct-dc-stage {
  background: #fff; border: 1px solid var(--dc-hair); border-radius: var(--radius-sm);
  padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; position: relative;
}
.sct-dc-stage::after {
  content: ''; position: absolute; top: 50%; right: -8px; width: 8px; height: 1px;
  background: var(--dc-cyan);
}
.sct-dc-stage:last-child::after { display: none; }
.sct-dc-stage__num {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: .06em; color: var(--dc-accent);
}
.sct-dc-stage__label { font-size: 15.5px; font-weight: 700; color: var(--navy); }

@media (max-width: 860px) {
  .sct-dc-hero__grid, .sct-dc-cap__grid { grid-template-columns: 1fr; }
  .sct-dc-stage::after { display: none; }
}