/* =========================================================================
   invariants-row — LOCKED component. v1.0 base + v1.1 `variant` prop.
   Class-based port of InvariantsRow. Sources from webshield-navy.css.

   Shape: Beat 5 rhythm shift. Four wide tiles, each with a gold top rule
   and an inline SVG (FA6 Free) icon. Grid: 4 desktop → 2 tablet → 1 mobile.

   Variants:
     • .ws-invariants-row                         (bordered-paper — v1.0 default:
                                                   surface fill + 1px rule + 2px gold top)
     • .ws-invariants-row--borderless-paper       (v1.1 — no fill, no rule,
                                                   ONLY the 2px gold top as cue;
                                                   for pages where bordered tiles
                                                   compete with stacked universal-card
                                                   surfaces directly above)

   The home page uses .ws-invariants-row--borderless-paper (beat 5 sits below
   the stacked Universal cards, which are themselves surface-filled bordered
   cards — the borderless variant drops visual competition).

   Usage:
     <section class="ws-invariants-row ws-invariants-row--borderless-paper">
       <div class="ws-invariants-row__wrap">
         <div class="ws-invariants-row__eyebrow">Architectural invariants</div>
         <h2 class="ws-invariants-row__title">Four architectural invariants —
           true of every Universal above.</h2>
         <div class="ws-invariants-row__grid">
           <div class="ws-invariants-row__tile">
             <div class="ws-invariants-row__icon"><svg …><path …/></svg></div>
             <div class="ws-invariants-row__label">Enforceable in software</div>
             <div class="ws-invariants-row__desc">What the protocol enforces at runtime.</div>
           </div>
           <!-- 3 more tiles -->
         </div>
       </div>
     </section>
   ========================================================================= */

.ws-invariants-row {
  background: var(--ws-page);
}

.ws-invariants-row__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 48px 80px;         /* bordered-paper (v1.0) */
}

.ws-invariants-row--borderless-paper .ws-invariants-row__wrap {
  padding: 64px 48px 72px;         /* borderless-paper (v1.1) */
}

.ws-invariants-row__eyebrow {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-label);
  letter-spacing: var(--ws-tracking-label);
  text-transform: uppercase;
  color: var(--ws-ink-faint);
  font-weight: 500;
  margin-bottom: 14px;
}

.ws-invariants-row__title {
  font-family: var(--ws-font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ws-ink);
  margin: 0 0 36px;
  max-width: 760px;
}

/* Grid — gap changes between variants to support the borderless density */
.ws-invariants-row__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;                        /* bordered */
}

.ws-invariants-row--borderless-paper .ws-invariants-row__grid {
  gap: 28px;                        /* borderless — more breathing room */
}

/* ── Tiles ─────────────────────────────────────────────────────────── */
.ws-invariants-row__tile {
  background: var(--ws-surface);
  border: 1px solid var(--ws-rule);
  border-top: 2px solid var(--ws-accent);
  padding: 28px 28px 26px;
  display: flex;
  flex-direction: column;
  font-family: var(--ws-font-body);
}

.ws-invariants-row--borderless-paper .ws-invariants-row__tile {
  background: transparent;
  border: none;
  border-top: 2px solid var(--ws-accent);
  padding: 20px 0 4px;
}

.ws-invariants-row__icon {
  color: var(--ws-accent);
  margin-bottom: 18px;
  line-height: 0;
}

.ws-invariants-row__icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.ws-invariants-row__label {
  font-family: var(--ws-font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ws-ink);
  margin-bottom: 10px;
}

.ws-invariants-row__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ws-ink-muted);
}

/* Footnote — signposts that the four tiles above are derived properties
   of the canonical Architectural Invariants of the QPN & PNX (UE §5.7).
   Small, italic, muted; sits below the grid as a calm reference line. */
.ws-invariants-row__foot {
  margin: 32px 0 0;
  max-width: 720px;
  font-family: var(--ws-font-display);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ws-ink-muted);
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .ws-invariants-row__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .ws-invariants-row__grid {
    grid-template-columns: 1fr;
  }
}