/**
 * Shared foundation for both speaker designs.
 * Palette and typography match the Client Showcase / Portfolio Grid plugins:
 * Montserrat on black, coral #e8735a accents, salmon #f66b71 titles.
 */

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

    /* Content */
    --kcs-text: #fff;
    --kcs-text-soft: #f6f6f6;
    --kcs-text-muted: #aaa;

    /* Accents */
    --kcs-accent: #e8735a;
    --kcs-accent-hover: #d4624b;
    --kcs-title: #f66b71;

    /* Rhythm */
    --kcs-page-pad: 64px;
    --kcs-gutter: 40px;
    --kcs-section-gap: 120px;

    --kcs-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    background: var(--kcs-bg);
    color: var(--kcs-text);
    font-family: var(--kcs-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;
}

@media (max-width: 900px) {
    .kcs {
        --kcs-page-pad: 24px;
        --kcs-gutter: 28px;
        --kcs-section-gap: 64px;
    }
}

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

.kcs img {
    max-width: 100%;
    display: block;
}

/* Escape the block theme's constrained layout so sections go edge-to-edge. */
.has-global-padding > .kcs {
    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 {
    max-width: none !important;
}

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

/* ---------- Typography ---------- */

/*
 * HOUSE STANDARD — the client's hero type for every page we build. Same values
 * mirrored on .kcp-title in kc-perspectives. Don't retune per page, and don't
 * reintroduce a per-section size override: a `.kcs-hero .kcs-title` rule
 * outranks this one and silently held the title at the wrong size once already.
 */
.kcs-title {
    font-family: var(--kcs-font);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--kcs-title);
    margin: 0;
}

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

.kcs-name {
    font-family: var(--kcs-font);
    font-size: 28px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--kcs-text);
    margin: 0;
}

.kcs-label {
    font-family: var(--kcs-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--kcs-text-soft);
    margin: 0;
}

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

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

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

/* The "twenty years" beat — the one moment of scale in the intro. */
.kcs-pullquote {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--kcs-text);
    margin: 0;
    padding-left: 24px;
    border-left: 2px solid var(--kcs-accent);
}

.kcs-pullquote span {
    display: block;
}

.kcs-pullquote span + span {
    color: var(--kcs-title);
}

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

/* One hero for both designs: a compact title card — title and one lede line —
   lit by a soft coral wash rather than a background image. */
/*
 * Flat black. The coral radial wash and the tonal panel behind it were dropped
 * at the client's request — the top of the page is now the same black as the
 * rest, with only the title, rule and lede on it.
 */
.kcs-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-block: 120px 0;
    text-align: center;
    background: var(--kcs-bg);
}

.kcs-hero .kcs-wrap {
    position: relative;
    z-index: 1;
}

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


.kcs-hero .kcs-divider {
    margin-block: 4px 8px;
}

.kcs-hero .kcs-lede {
    max-width: 700px;
}

@media (max-width: 900px) {
    .kcs-hero {
        padding-block: 64px 0;
    }
}

/* ---------- Intro band ---------- */

/* Everything the hero used to stack vertically now sits in one compact band:
   the pull-quote holds the left column, the narrative runs down the right. */
/*
 * Even top and bottom, and it stays even because the hero above no longer has a
 * fixed height. It used to: content centred inside 20rem left ~33px of empty
 * hero under the lede, which stacked on this padding and made the gap above the
 * band bigger than the one below it. With the hero sized by its own padding
 * there's no leftover, so these two numbers are the whole story.
 */
.kcs-intro {
    padding-block: 50px 60px;
    background: var(--kcs-bg);
}

.kcs-intro__inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--kcs-gutter);
    align-items: center;
}

.kcs-intro__quote {
    grid-column: 1 / span 5;
}

.kcs-intro__copy {
    grid-column: 7 / span 6;
    display: grid;
    gap: 12px;
}

/* No pull quote beside it any more, so it centres on the page instead of
   sitting in the right-hand half of a 12-column band. */
.kcs-intro__inner--single .kcs-intro__copy {
    grid-column: 1 / -1;
    /* The same measure as the hero lede above it, so the two centred blocks
       share one column rather than stepping out at different widths. */
    max-width: 700px;
    margin-inline: auto;
    text-align: center;
}

/* Set below the speaker bios and run tight — supporting narrative, not headline
   copy, and the band should stay short. */
.kcs-intro__copy .kcs-body {
    font-size: 14px;
    line-height: 1.35;
}

@media (max-width: 900px) {
    .kcs-intro {
        padding-block: 40px;
    }

    .kcs-intro__quote,
    .kcs-intro__copy {
        grid-column: 1 / -1;
    }

    .kcs-intro__inner {
        gap: 28px;
    }
}

/* ---------- Speaker parts ---------- */

.kcs-role {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--kcs-accent);
    margin: 0;
}

.kcs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* The same flat coral-on-dark tile as the buttons, one size down.
   margin: 0 because the theme sets `ul li { margin-left: 0.85em }`, which at
   11px indented every chip 9px right of the name and bio above it. */
.kcs-chip {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--kcs-accent);
    background: var(--kcs-panel);
    border: 0;
    border-radius: 0;
    padding: 9px 16px;
    white-space: nowrap;
}

.kcs-topics {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.kcs-topics li {
    margin: 0;      /* same `ul li` indent from the theme */
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--kcs-text);
}

.kcs-topics li::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kcs-accent);
    transform: translateY(-2px);
}

.kcs-topics-label {
    margin-bottom: 12px;
}

/* Design B states the topics as a sentence; .kcs-topics above is Design A's
   bulleted list, still rendered there. */
.kcs-topics-sentence {
    margin: 0;
}

/* Stand-in for a speaker with no portrait yet: initials on a tonal panel. */
.kcs-monogram {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(120% 90% at 30% 15%, rgba(232, 115, 90, 0.22), transparent 62%),
        var(--kcs-panel);
    color: var(--kcs-accent);
    font-family: var(--kcs-font);
    font-size: clamp(56px, 8vw, 92px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 2px;
}

/* ---------- Buttons ---------- */

/* Matches the K&C social tiles: a flat dark square, coral type, no rounding. */
.kcs-btn {
    display: inline-block;
    font-family: var(--kcs-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--kcs-accent);
    background: var(--kcs-panel);
    border: 0;
    border-radius: 0;
    padding: 22px 44px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.kcs-btn:hover,
.kcs-btn:focus-visible {
    background: #222;
    color: var(--kcs-title);
}

/* ---------- Enquiry form ---------- */

.kcs-form {
    display: grid;
    gap: 24px;
    max-width: 720px;
}

.kcs-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 0;
}

@media (max-width: 700px) {
    .kcs-form__row {
        grid-template-columns: 1fr;
    }
}

.kcs-field {
    display: grid;
    gap: 8px;
    margin: 0;
}

.kcs-field label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--kcs-text-muted);
}

.kcs-field input,
.kcs-field select,
.kcs-field textarea {
    width: 100%;
    background: var(--kcs-panel);
    border: 1px solid var(--kcs-border-strong);
    border-radius: 6px;
    color: var(--kcs-text);
    font-family: var(--kcs-font);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    padding: 12px 14px;
    transition: border-color 0.2s ease;
}

.kcs-field select {
    /* Native menus render on the browser's own surface, not the page's. */
    color-scheme: dark;
}

.kcs-field textarea {
    resize: vertical;
}

.kcs-field input:focus,
.kcs-field select:focus,
.kcs-field textarea:focus {
    outline: none;
    border-color: var(--kcs-accent);
}

.kcs-field--hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.kcs-form__actions {
    margin: 0;
}

.kcs-form__notice {
    margin: 0;
    padding: 14px 18px;
    border-radius: 6px;
    border-left: 3px solid var(--kcs-accent);
    background: var(--kcs-panel);
    color: var(--kcs-text);
    font-size: 16px;
}

.kcs-form__notice--bad {
    border-left-color: #f66b71;
    color: #f66b71;
}

@media (prefers-reduced-motion: reduce) {
    .kcs *,
    .kcs *::before,
    .kcs *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}