/* ============================================================================
   kHouse Dossier · Hero + planet stage
   ----------------------------------------------------------------------------
   Everything that's specific to the homepage hero (`#ch-01`):
     - planet stage with HUD readouts (kept for future use; the canvas
       lives on .kd-planet-stage__visual)
     - stacked hero with title + lede + CTA + horizontal facts strip
     - Gothenburg aerial backdrop layered behind the copy via pseudo-elements
     - 2x2 legacy facts grid (kept for older layouts)
   ============================================================================ */

/* ============================== PLANET STAGE ============================ */
.kd-planet-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--kd-s-9);
    align-items: center;
}
@media (max-width: 960px) {
    .kd-planet-stage { grid-template-columns: 1fr; }
    .kd-planet-stage__visual { order: -1; }
}
.kd-planet-stage__visual {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}
.kd-planet-canvas {
    width: 100%;
    height: 100%;
    display: block;
}
/* Crosshairs around the planet for that command-center reading */
.kd-planet-stage__visual::before,
.kd-planet-stage__visual::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border: 1px solid var(--kd-fg-muted);
    opacity: 0.55;
    pointer-events: none;
}
.kd-planet-stage__visual::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.kd-planet-stage__visual::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* HUD readouts overlaid on planet visual */
.kd-planet-hud {
    position: absolute;
    font-family: var(--kd-font-mono);
    font-size: 10px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
    pointer-events: none;
    line-height: 1.5;
}
.kd-planet-hud--tl { top: 16px; left: 16px; }
.kd-planet-hud--tr { top: 16px; right: 16px; text-align: right; }
.kd-planet-hud--bl { bottom: 16px; left: 16px; }
.kd-planet-hud--br { bottom: 16px; right: 16px; text-align: right; }
.kd-planet-hud strong { color: var(--kd-fg); font-weight: var(--kd-w-semibold); display:block; font-size: 12px; }

/* ============================== HERO (stacked) ========================== */
/* The hero is a chapter, but we override its big padding so the title
   carries the page and a single horizontal facts strip anchors the bottom. */
.kd-chapter--hero {
    padding-block: clamp(28px, 3vw, 48px) clamp(28px, 3vw, 44px);
    position: relative;
    overflow: hidden;
}
/* Gothenburg aerial backdrop with helicopters. The pseudo-elements use
   z-index 0 / 1 (NOT negative) and content gets z-index 2, so we can drop
   `isolation: isolate`. Older Safari (15.x) has hit-testing bugs with
   isolation + negative-z pseudos that manifest as "scroll feels stolen".
   `pointer-events: none` keeps the layers transparent to wheel/touch. */
.kd-chapter--hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../assets/hero-aerial.jpg) center / cover no-repeat;
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}
.kd-chapter--hero::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Heavier bg-tinted veil — keeps the page reading as bright/white in
       light mode while letting the photo show through as a soft watermark. */
    background: linear-gradient(180deg,
        rgba(var(--kd-bg-rgb), 0.55) 0%,
        rgba(var(--kd-bg-rgb), 0.85) 60%,
        var(--kd-bg) 100%);
    z-index: 1;
    pointer-events: none;
}
.kd-chapter--hero > .kd-container {
    position: relative;
    z-index: 2;
}
[data-theme="dark"] .kd-chapter--hero::before { opacity: 0.85; filter: saturate(0.85); }
[data-theme="gray"] .kd-chapter--hero::before { opacity: 0.55; filter: saturate(0.6); }
#ch-02 { padding-top: clamp(28px, 3vw, 48px); }
.kd-chapter--hero .kd-container > .kd-hero,
.kd-hero--stack {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3.5vw, 56px);
    padding: 0;
    border: 0;
    background: none;
}
.kd-hero__copy { display: flex; flex-direction: column; max-width: 22ch; max-width: min(22ch, 100%); }
.kd-hero__copy { max-width: none; }
.kd-hero__copy .kd-eyebrow {
    font-family: var(--kd-font-mono);
    font-size: 11px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
    margin-bottom: var(--kd-s-5);
}
.kd-hero__title {
    font-size: clamp(38px, 5.2vw, 72px);
    font-weight: var(--kd-w-semibold);
    letter-spacing: -0.028em;
    line-height: 1.0;
    margin: 0 0 var(--kd-s-6);
    max-width: 18ch;
    text-wrap: balance;
}
.kd-hero__lede {
    font-size: var(--kd-text-4);
    line-height: 1.5;
    color: var(--kd-fg-soft);
    max-width: 62ch;
    margin: 0 0 var(--kd-s-7);
    text-wrap: pretty;
}
.kd-hero__cta {
    display: flex;
    gap: var(--kd-s-3);
    flex-wrap: wrap;
}

/* The facts strip — a single row of mono labels + bold values that runs the
   full content width, separated by hairlines, anchored to the same baseline
   as the hero copy. Reads as part of the hero, not a sidebar. */
.kd-hero__facts--strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--kd-border);
    border-bottom: 1px solid var(--kd-border);
}
.kd-hero__facts--strip .kd-fact {
    background: transparent;
    padding: var(--kd-s-5) var(--kd-s-5) var(--kd-s-5) 0;
    margin: 0;
    border: 0;
    border-left: 1px solid var(--kd-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.kd-hero__facts--strip .kd-fact:first-child {
    border-left: 0;
    padding-left: 0;
}
.kd-hero__facts--strip .kd-fact:not(:first-child) {
    padding-left: var(--kd-s-5);
}
.kd-hero__facts--strip .kd-fact__label {
    font-family: var(--kd-font-mono);
    font-size: 10px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
    margin: 0;
}
.kd-hero__facts--strip .kd-fact__value {
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: var(--kd-w-semibold);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--kd-fg);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
    .kd-hero__facts--strip { grid-template-columns: repeat(2, 1fr); }
    .kd-hero__facts--strip .kd-fact:nth-child(3) { border-left: 0; padding-left: 0; }
    .kd-hero__facts--strip .kd-fact:nth-child(n+3) { border-top: 1px solid var(--kd-border); padding-top: var(--kd-s-5); margin-top: -1px; }
}

/* Legacy 2x2 variant (kept for any other usage) */
.kd-hero__facts:not(.kd-hero__facts--strip) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--kd-border);
    border: 1px solid var(--kd-border);
}
.kd-fact {
    background: var(--kd-bg);
    padding: var(--kd-s-5) var(--kd-s-5);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 110px;
    justify-content: space-between;
}
.kd-fact__label {
    font-family: var(--kd-font-mono);
    font-size: 10px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
}
.kd-fact__value {
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: var(--kd-w-semibold);
    letter-spacing: -0.02em;
    line-height: 1;
}