/*
 * SkyeStaq layout pattern library
 *
 * Assembly rule: adjacent sections on a page must not reuse the same pattern.
 * See /docs/build-docs/PATTERNS.md for the rule and per-page recommended sequences.
 *
 * Brand tokens (consumed from each page's :root, do not redefine here):
 *   --summit-slate, --glen-fire, --glen-fire-decorative,
 *   --highland-sand, --highland-sand-light, --off-white,
 *   --text-on-dark, --text-muted-on-dark,
 *   --border-on-light, --border-on-dark
 *
 * Naming: pattern-<name> with --modifier suffixes. Compose with the page's
 * existing .section, .section-inner, .section-eyebrow, .section-h2, .section-lede.
 */

/* ---------- Pattern 1: Split section ---------- */
.pattern-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.pattern-split--reverse .pattern-split-content{order:2}
.pattern-split--reverse .pattern-split-visual{order:1}
.pattern-split-content{min-width:0}
.pattern-split-visual{min-width:0;display:flex;align-items:center;justify-content:center}

@media (max-width:960px){
  .pattern-split{grid-template-columns:1fr;gap:40px}
  .pattern-split--reverse .pattern-split-content,
  .pattern-split--reverse .pattern-split-visual{order:initial}
  .pattern-split-content{order:1}
  .pattern-split-visual{order:2}
}

/* ---------- Pattern 2: Pinned scroll ---------- */
.pattern-pinned{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:80px;align-items:start}
.pattern-pinned-sticky{position:sticky;top:120px;align-self:start}
.pattern-pinned-stream{min-width:0;display:flex;flex-direction:column;gap:48px}

@media (max-width:960px){
  .pattern-pinned{grid-template-columns:1fr;gap:40px}
  .pattern-pinned-sticky{position:static;top:auto}
}
@media (prefers-reduced-motion:reduce){
  /* sticky is layout, not motion — leave intact */
}

/* ---------- Pattern 3: Compact grid ---------- */
.pattern-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.pattern-grid--3col{grid-template-columns:repeat(3,minmax(0,1fr))}
.pattern-grid-item{display:flex;flex-direction:column;gap:12px;padding:28px 28px 30px;background:var(--white);border:1px solid var(--border-on-light);border-radius:10px}
.pattern-grid-item-badge{flex-shrink:0;width:32px;height:32px;background:var(--glen-fire);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Montserrat Alternates',sans-serif;font-weight:600;font-size:14px;line-height:1}
.pattern-grid-item-title{font-family:'Montserrat Alternates',sans-serif;font-size:18px;font-weight:600;line-height:1.25;color:var(--summit-slate)}
.pattern-grid-item-body{font-size:15px;line-height:1.6;color:var(--summit-slate);opacity:0.82}

@media (max-width:960px){
  .pattern-grid,.pattern-grid--3col{grid-template-columns:1fr;gap:16px}
}

/* ---------- Pattern 4: Full-bleed band ---------- */
.pattern-band{padding:120px 0}
.pattern-band--dark{background:var(--summit-slate);color:var(--text-on-dark)}
.pattern-band--dark .section-eyebrow{color:var(--highland-sand)}
.pattern-band--dark .section-h2{color:var(--text-on-dark)}
.pattern-band--dark .section-lede{color:var(--text-muted-on-dark);opacity:1}
.pattern-band--sand{background:var(--highland-sand-light)}
.pattern-band--sand .section-eyebrow{color:var(--glen-fire)}

@media (max-width:960px){
  .pattern-band{padding:80px 0}
}

/* ---------- Pattern 5: Stat / statement feature ---------- */
.pattern-stat{padding:120px 0;text-align:left}
.pattern-stat-inner{max-width:1080px;margin:0 auto;padding:0 80px}
.pattern-stat-eyebrow{font-family:'Montserrat Alternates',sans-serif;font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--glen-fire-decorative);margin-bottom:32px}
.pattern-stat-number{font-family:'Montserrat Alternates',sans-serif;font-weight:600;font-size:120px;line-height:0.95;letter-spacing:-0.04em;color:var(--glen-fire);margin-bottom:24px}
.pattern-stat-caption{font-family:'Montserrat Alternates',sans-serif;font-size:24px;font-weight:500;line-height:1.35;color:var(--summit-slate);max-width:780px}
.pattern-stat--statement .pattern-stat-statement{font-family:'Montserrat Alternates',sans-serif;font-weight:600;font-size:48px;line-height:1.15;letter-spacing:-0.02em;color:var(--summit-slate);max-width:980px;margin-bottom:24px}
.pattern-stat--statement .pattern-stat-supporting{font-size:18px;line-height:1.6;color:var(--summit-slate);opacity:0.82;max-width:820px}

@media (max-width:960px){
  .pattern-stat{padding:80px 0}
  .pattern-stat-inner{padding:0 40px}
  .pattern-stat-number{font-size:84px}
  .pattern-stat-caption{font-size:20px}
  .pattern-stat--statement .pattern-stat-statement{font-size:32px}
  .pattern-stat--statement .pattern-stat-supporting{font-size:16px}
}
@media (max-width:540px){
  .pattern-stat-number{font-size:64px}
  .pattern-stat--statement .pattern-stat-statement{font-size:26px}
}

/* ---------- Diagram placeholder (pilot stub) ---------- */
.diagram-placeholder{--ratio:4/3;width:100%;aspect-ratio:var(--ratio);background:var(--highland-sand-light);border:2px dashed var(--glen-fire-decorative);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:32px;text-align:center}
.diagram-placeholder-label{font-family:'Montserrat Alternates',sans-serif;font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--glen-fire);opacity:0.85;max-width:240px;line-height:1.4}
.pattern-band--dark .diagram-placeholder{background:rgba(216,195,165,0.06);border-color:var(--highland-sand)}
.pattern-band--dark .diagram-placeholder-label{color:var(--highland-sand)}

/* ---------- Zoomable image hint (lightbox itself is JS-inlined) ---------- */
img.zoomable{cursor:zoom-in;transition:opacity 0.15s ease}
img.zoomable:hover{opacity:0.92}