/* ==========================================================================
   JKVL Site Factory — Sprint 4A design families
   Config-driven distinct layouts. Body carries jksf-layout-*, jksf-hero-*,
   jksf-surface-*, jksf-geometry-*, jksf-motion-* classes (injected by the
   Site Factory Core plugin from each manifest's theme.design). Extended color
   tokens (--jksf-ink, --jksf-surface-2, --jksf-accent-2, --jksf-radius) also
   arrive from the manifest.
   ========================================================================== */

/* ---------- Surface depth ---------- */
.jksf-surface-flat .jksf-card,
.jksf-surface-flat .jksf-contact-panel { box-shadow: none; }
.jksf-surface-layered .jksf-hero {
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--jksf-ink) 6%, transparent) 0%, transparent 46%),
    linear-gradient(180deg, var(--jksf-surface) 0%, var(--jksf-background) 100%);
}
.jksf-surface-layered .jksf-card { box-shadow: 0 2px 6px rgb(0 0 0 / 0.05), 0 20px 44px -22px rgb(0 0 0 / 0.25); }
.jksf-surface-paper .jksf-hero,
.jksf-surface-paper .jksf-page-head {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--jksf-surface-2) 55%, transparent), transparent 52%),
    var(--jksf-background);
}
.jksf-surface-paper .jksf-card { background: var(--jksf-background); border-color: var(--jksf-border-soft); }
.jksf-surface-mineral .jksf-card { border-radius: var(--jksf-radius); border-color: color-mix(in srgb, var(--jksf-accent) 26%, transparent); }
.jksf-surface-dark { background: var(--jksf-ink); }
.jksf-surface-dark .jksf-section { color: var(--jksf-text); }
.jksf-surface-dark .jksf-alt { background: var(--jksf-surface); }
.jksf-surface-dark .jksf-card { background: var(--jksf-surface); border-color: color-mix(in srgb, var(--jksf-text) 20%, transparent); }

/* ---------- Geometry: border weight + radius consistency ---------- */
.jksf-geometry-sharp { --jksf-radius: 0px; }
.jksf-geometry-crisp { --jksf-radius: 1px; }
.jksf-geometry-architectural { --jksf-radius: 2px; }
.jksf-geometry-soft { --jksf-radius: 14px; }
.jksf-geometry-soft .jksf-card,
.jksf-geometry-soft .jksf-step,
.jksf-geometry-soft .site-contact { border-radius: var(--jksf-radius); }
.jksf-geometry-architectural .jksf-card { border: 1px solid var(--jksf-border); }
.jksf-geometry-architectural .jksf-step { border-top-width: 1px; }

/* ---------- Hero compositions ---------- */
.jksf-hero { border-radius: 0; }

/* Compact / institutional (Aegis, Sentinel, Vanguard) */
.jksf-hero-compact .jksf-hero {
  min-height: 0; padding-block: clamp(56px, 8vw, 104px) clamp(48px, 7vw, 92px);
  align-items: start; background: var(--jksf-background);
}
.jksf-hero-compact .jksf-hero__inner { max-width: 820px; border-left: 4px solid var(--jksf-accent); padding-left: clamp(22px, 3.4vw, 44px); }
.jksf-hero-compact .jksf-hero h1 { font-size: clamp(38px, 5.6vw, 74px); letter-spacing: -0.03em; }
.jksf-hero-compact .jksf-hero__rule { height: 2px; margin-top: 28px; }

/* Portfolio-led / forward motion (JKVL) */
.jksf-hero-portfolio .jksf-hero {
  min-height: min(640px, 80vh); align-items: end;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--jksf-accent) 12%, transparent) 0%, transparent 40%),
    var(--jksf-background);
}
.jksf-hero-portfolio .jksf-hero__inner { max-width: 1120px; }
.jksf-hero-portfolio .jksf-hero h1 { font-size: clamp(52px, 7.4vw, 104px); letter-spacing: -0.04em; }
.jksf-hero-portfolio .jksf-hero__rule { width: min(320px, 60vw); height: 3px; background: linear-gradient(90deg, var(--jksf-accent), transparent); }

/* Editorial luxury (Aurea) */
.jksf-hero-editorial .jksf-hero {
  min-height: min(720px, 86vh); align-items: center; text-align: left;
  padding-block: clamp(96px, 14vw, 190px);
  background: var(--jksf-background); border-bottom: 1px solid var(--jksf-border);
}
.jksf-hero-editorial .jksf-hero__inner { max-width: 980px; }
.jksf-hero-editorial .jksf-hero__eyebrow { letter-spacing: 0.34em; font-size: 10px; margin-bottom: 34px; }
.jksf-hero-editorial .jksf-hero h1 { font-size: clamp(54px, 8.4vw, 128px); line-height: 0.95; letter-spacing: -0.05em; font-weight: 300; }
.jksf-hero-editorial .jksf-hero__summary { max-width: 46ch; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.8; margin-top: 44px; }
.jksf-hero-editorial .jksf-hero__rule { width: 1px; height: 88px; margin-top: 44px; }

/* Organic / restorative (Parasym) */
.jksf-hero-organic .jksf-hero {
  min-height: min(620px, 78vh); align-items: end; border-radius: 0 0 var(--jksf-radius) var(--jksf-radius);
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--jksf-accent) 18%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--jksf-surface) 0%, var(--jksf-background) 100%);
}
.jksf-hero-organic .jksf-hero__inner { max-width: 960px; }
.jksf-hero-organic .jksf-hero h1 { font-size: clamp(46px, 7vw, 96px); letter-spacing: -0.035em; }
.jksf-hero-organic .jksf-hero__rule { width: 120px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--jksf-accent), var(--jksf-accent-2)); }

/* Split / confrontational (Alt Wild) */
.jksf-hero-split .jksf-hero {
  min-height: min(680px, 82vh); align-items: center;
  background: var(--jksf-background);
  position: relative;
}
.jksf-hero-split .jksf-hero__inner {
  max-width: none; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center;
}
.jksf-hero-split .jksf-hero__eyebrow { color: var(--jksf-accent); font-weight: 900; }
.jksf-hero-split .jksf-hero h1 { font-size: clamp(52px, 9vw, 132px); line-height: 0.92; letter-spacing: -0.05em; text-transform: uppercase; }
.jksf-hero-split .jksf-hero__summary { margin-top: 28px; font-size: clamp(17px, 1.6vw, 19px); }
.jksf-hero-split .jksf-hero__rule { width: 100%; height: 6px; margin-top: 34px; background: var(--jksf-accent); }

/* Immersive / cinematic (Dreamscape) */
.jksf-hero-immersive .jksf-hero {
  min-height: min(760px, 92vh); align-items: center; text-align: center;
  background:
    radial-gradient(90% 80% at 50% 18%, color-mix(in srgb, var(--jksf-accent) 34%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, var(--jksf-ink) 0%, var(--jksf-surface-2) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--jksf-accent) 30%, transparent);
}
.jksf-hero-immersive .jksf-hero__inner { max-width: 1040px; margin-inline: auto; }
.jksf-hero-immersive .jksf-hero__eyebrow { letter-spacing: 0.4em; font-size: 11px; color: var(--jksf-accent-2); }
.jksf-hero-immersive .jksf-hero h1 { font-size: clamp(48px, 8vw, 120px); letter-spacing: -0.04em; text-shadow: 0 4px 40px rgb(0 0 0 / 0.5); }
.jksf-hero-immersive .jksf-hero__summary { margin-inline: auto; color: var(--jksf-muted); }
.jksf-hero-immersive .jksf-hero__rule { width: 140px; height: 2px; margin: 40px auto 0; background: linear-gradient(90deg, transparent, var(--jksf-accent), transparent); }

/* ---------- Layout families: section rhythm & composition ---------- */
.jksf-layout-governance .jksf-section { border-bottom: 1px solid var(--jksf-border-soft); }
.jksf-layout-governance .jksf-section-title { max-width: 720px; }
.jksf-layout-governance .jksf-card { border-left: 3px solid var(--jksf-accent); }
.jksf-layout-governance .jksf-steps { border-top: 3px solid var(--jksf-text); }

.jksf-layout-forward .jksf-section { position: relative; }
.jksf-layout-forward .jksf-section-title::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 18px; background: var(--jksf-accent); }
.jksf-layout-forward .jksf-step { border-top-color: var(--jksf-accent); }

.jksf-layout-fortress .jksf-container-inner { max-width: 900px; }
.jksf-layout-fortress .jksf-section { border: 1px solid var(--jksf-border); border-top-width: 3px; margin-block: clamp(16px, 2.4vw, 30px); }
.jksf-layout-fortress .jksf-card { border: 1px solid var(--jksf-border); box-shadow: none; }

.jksf-layout-modular .jksf-section { border-top: 1px solid var(--jksf-border-soft); }
.jksf-layout-modular .jksf-card { border-radius: var(--jksf-radius); border: 1px solid var(--jksf-border-soft); box-shadow: none; }
.jksf-layout-modular .jksf-step__number { font-family: var(--jksf-body); font-weight: 800; }

.jksf-layout-editorial .jksf-section { padding-block: clamp(56px, 8vw, 120px); }
.jksf-layout-editorial .jksf-section-title { font-size: clamp(34px, 4.6vw, 62px); font-weight: 300; letter-spacing: -0.03em; }
.jksf-layout-editorial .jksf-card { background: transparent; border: 0; box-shadow: none; padding-inline: 0; border-top: 1px solid var(--jksf-border); }

.jksf-layout-organic .jksf-section { padding-block: clamp(44px, 6.6vw, 100px); }
.jksf-layout-organic .jksf-card { border-radius: var(--jksf-radius); border: 0; background: var(--jksf-surface); }
.jksf-layout-organic .jksf-alt .jksf-card { background: var(--jksf-background); }

.jksf-layout-confrontational .jksf-alt { background: var(--jksf-surface); color: var(--jksf-background); }
.jksf-layout-confrontational .jksf-alt .jksf-card { background: var(--jksf-ink); border-color: color-mix(in srgb, var(--jksf-background) 18%, transparent); }
.jksf-layout-confrontational .jksf-card { border-left: 4px solid var(--jksf-accent); box-shadow: none; }
.jksf-layout-confrontational .jksf-section-title { text-transform: uppercase; letter-spacing: -0.02em; }

.jksf-layout-cinematic .jksf-section { color: var(--jksf-text); }
.jksf-layout-cinematic .jksf-alt { background: var(--jksf-surface); }
.jksf-layout-cinematic .jksf-card { background: var(--jksf-surface); border-color: color-mix(in srgb, var(--jksf-accent) 22%, transparent); }
.jksf-layout-cinematic .jksf-section-title { letter-spacing: 0.01em; }

/* ---------- Dark surface adjustments ---------- */
.jksf-surface-dark .site-header { background: var(--jksf-ink); border-bottom: 1px solid color-mix(in srgb, var(--jksf-text) 20%, transparent); }
.jksf-surface-dark .site-brand__name, .jksf-surface-dark .site-nav a { color: var(--jksf-text); }
.jksf-surface-dark .site-contact { border-color: var(--jksf-text); color: var(--jksf-text); }
.jksf-surface-dark .jksf-page-head { background: var(--jksf-surface); }

/* ---------- Motion policy ---------- */
.jksf-motion-subtle a, .jksf-motion-subtle .jksf-card, .jksf-motion-subtle .jksf-step {
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.jksf-motion-subtle .jksf-card:hover { transform: translateY(-2px); }
.jksf-motion-cinematic .jksf-hero { animation: jksf-fade 0.9s ease both; }
.jksf-motion-cinematic .jksf-card { transition: box-shadow 0.35s ease, transform 0.35s ease; }
.jksf-motion-cinematic .jksf-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -20px rgb(0 0 0 / 0.4); }
@keyframes jksf-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive distinctness (hero-split collapses) ---------- */
@media (max-width: 767px) {
  .jksf-hero-split .jksf-hero__inner { grid-template-columns: 1fr; }
  .jksf-hero-split .jksf-hero h1 { font-size: clamp(46px, 14vw, 76px); }
  .jksf-hero-compact .jksf-hero__inner { border-left-width: 3px; padding-left: 18px; }
  .jksf-layout-fortress .jksf-section { margin-block: 12px; }
  .jksf-layout-editorial .jksf-section { padding-block: 48px; }
}