/**
 * About — K&C.
 *
 * Same tokens and type as kc-speakers / kc-perspectives. See the house type
 * standard in CLAUDE.md: 40px/400 title, 20px/400/29px lede, and no weight 500
 * anywhere (Montserrat is loaded at 300;400;600;700 for exactly that reason).
 */

.kcs-about {
    --kcs-about-bg: #000;
    --kcs-about-panel: #1a1a1a;
    --kcs-about-panel-alt: #111;
    --kcs-about-border: #222;
    --kcs-about-border-strong: #333;

    --kcs-about-text: #fff;
    --kcs-about-text-soft: #f6f6f6;
    --kcs-about-text-muted: #aaa;

    --kcs-about-accent: #e8735a;
    --kcs-about-title: #f66b71;

    --kcs-about-page-pad: 64px;
    --kcs-about-gutter: 40px;
    --kcs-about-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    background: var(--kcs-about-bg);
    color: var(--kcs-about-text);
    font-family: var(--kcs-about-font);
    /* Explicit: Jupiter sets `body { font-weight: 500 }` and anything here
       without its own weight would inherit it. No 500 on these pages. */
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.kcs-about *,
.kcs-about *::before,
.kcs-about *::after {
    box-sizing: border-box;
}

/* Escape a block theme's constrained layout so the page goes edge to edge. */
.has-global-padding > .kcs-about {
    margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important;
    margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
    width: auto;
}

.is-layout-constrained > .kcs-about {
    max-width: none !important;
}

.kcs-about-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: var(--kcs-about-page-pad);
}

/* ---------- Type ---------- */

/* HOUSE STANDARD — mirrored from .kcs-title / .kcp-title. Keep the three in step. */
.kcs-about-title {
    font-family: var(--kcs-about-font);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--kcs-about-title);
    margin: 0;
}

/* HOUSE STANDARD — mirrored from .kcs-lede / .kcp-lede. */
.kcs-about-lede {
    font-size: 20px;
    font-weight: 400;
    line-height: 29px;
    color: var(--kcs-about-text);
    margin: 0;
}

.kcs-about-heading {
    font-family: var(--kcs-about-font);
    font-size: 34px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--kcs-about-title);
    margin: 0;
}

.kcs-about-body {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--kcs-about-text-muted);
    margin: 0;
}

/* The 60x2 coral rule used under titles across the K&C plugins. */
.kcs-about-divider {
    width: 60px;
    height: 2px;
    background: var(--kcs-about-accent);
    border: 0;
    margin: 0;
}

/* ---------- Hero ---------- */

/*
 * No fixed height and no background image. The height comes from the padding
 * alone, so the gap under the lede is exactly the next section's padding — the
 * speakers hero had a fixed height with centred content, which left dead space
 * below the lede that no amount of padding tuning could balance.
 *
 * 120px top clears Jupiter's fixed header on the live site.
 */
.kcs-about-hero {
    padding-block: 120px 0;
    text-align: center;
    background: var(--kcs-about-bg);
}

.kcs-about-hero__inner {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    gap: 20px;
    justify-items: center;
}

/* ---------- Panels ---------- */

.kcs-about-panels {
    padding-block: 56px 96px;
    background: var(--kcs-about-bg);
}

.kcs-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kcs-about-gutter);
    /* Stretch, not start: the panels the client has today are equal-height
       tiles, and letting them size to their own copy makes the pair in a row
       end at different depths. */
    align-items: stretch;
}

/*
 * One flat panel per section, matching the tiles the rest of the site uses.
 * On the current page each of these is a 400x776 JPEG with the copy rendered
 * into it; here the panel is markup and the copy is text.
 */
.kcs-about-panel {
    display: grid;
    gap: 18px;
    /* The copy sits to the top of a stretched panel rather than spreading to
       fill it, so a short section doesn't get airy line gaps. */
    align-content: start;
    justify-items: center;
    text-align: center;
    padding: 56px 44px;
    background: var(--kcs-about-panel-alt);
}

.kcs-about-panel .kcs-about-divider {
    margin-bottom: 10px;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 900px) {
    .kcs-about-wrap {
        padding-inline: 24px;
    }

    .kcs-about-hero {
        padding-block: 72px 0;
    }

    .kcs-about-panels {
        padding-block: 40px 64px;
    }

    .kcs-about-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .kcs-about-panel {
        padding: 40px 28px;
    }

    .kcs-about-heading {
        font-size: 28px;
    }
}