/* Block: split-panel */
.split-panel {
    padding: calc(30 * var(--tgc-u)) 0 calc(56 * var(--tgc-u));
}

.split-panel__inner {
    max-width: var(--tgc-container);
    margin: 0 auto;
    padding: 0 var(--tgc-gutter);
    display: grid;
    /* 690 / 930 off the tiles, on the same 1620px content width as the cards. */
    grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
    align-items: start;
}

.split-panel--no-motif .split-panel__inner {
    max-width: calc(1090 * var(--tgc-u));
    grid-template-columns: minmax(0, 1fr);
}

.split-panel__figure {
    display: flex;
    justify-content: center;
    margin: 0;
    padding-right: calc(40 * var(--tgc-u));
}

/*
 * Annotation 2: the motif holds at the top of the viewport while the copy
 * scrolls past it. scripts/tgc-scroll.js reads the data-tgc-sticky hook and
 * layers its drift on top of this.
 *
 * It holds clear of the fixed header with room for the motif's slow spin: a
 * square turning about its centre reaches (√2 − 1) / 2 of its width past its
 * own edges at 45°, so the xl motif (371.84) needs about 78 above its box, or
 * the consulting trio's circles swing up under the header. Plus a 24 gap.
 */
.split-panel__figure[data-tgc-sticky] {
    position: sticky;
    top: calc(var(--tgc-header-h) + calc(102 * var(--tgc-u)));
}

.split-panel__body > *:first-child {
    margin-top: 0;
}

.split-panel__body p {
    margin-bottom: calc(18 * var(--tgc-u));
    font-size: var(--tgc-text-body);
    line-height: 1.8;
    color: var(--tgc-ink-muted);
}

.split-panel__body p:last-child {
    margin-bottom: 0;
}

/* The ALL-CAPS subheads that break the column up. */
.split-panel__body h2,
.split-panel__body h3 {
    margin: calc(46 * var(--tgc-u)) 0 calc(20 * var(--tgc-u));
    font-size: var(--tgc-text-lead);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--tgc-ink);
}

.split-panel__body h4 {
    margin: calc(30 * var(--tgc-u)) 0 calc(12 * var(--tgc-u));
    font-size: var(--tgc-text-body);
    font-weight: 600;
    color: var(--tgc-ink);
}

.split-panel__body ul,
.split-panel__body ol {
    margin: 0 0 calc(18 * var(--tgc-u)) calc(20 * var(--tgc-u));
}

.split-panel__body li {
    margin-bottom: 8px;
    font-size: var(--tgc-text-body);
    line-height: 1.7;
    color: var(--tgc-ink-muted);
}

.split-panel__body strong {
    font-weight: 600;
    color: var(--tgc-ink);
}

/*
 * Nested blocks fill the column instead of their own page-width container.
 * The accordion carries no gutter of its own; the pill grids do, for when
 * they sit on the page, so theirs comes off here.
 */
.split-panel__body .audience-pills,
.split-panel__body .check-grid,
.split-panel__body .accordion {
    max-width: none;
    margin-right: 0;
    margin-left: 0;
}

.split-panel__body .audience-pills,
.split-panel__body .check-grid {
    padding-right: 0;
    padding-left: 0;
}

@media (max-width: 968px) {
    .split-panel__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .split-panel__figure {
        justify-content: flex-start;
        padding-right: 0;
    }

    .split-panel__figure[data-tgc-sticky] {
        position: static;
    }

    .split-panel__body h2,
    .split-panel__body h3 {
        margin-top: calc(34 * var(--tgc-u));
        font-size: var(--tgc-text-body);
    }
}

@media (max-width: 768px) {
    .split-panel {
        padding: 20px 0 40px;
    }

    .split-panel__inner {
        padding: 0 calc(20 * var(--tgc-u));
    }
}

@media (prefers-reduced-motion: reduce) {
    .split-panel__figure[data-tgc-sticky] {
        position: static;
    }
}