/* =========================================================
   Split Section — the reusable two-column content block
   (typography comes from base.css / common.css)

   One section, configured by modifier classes:

     .split-section-media-right   text left, media right   (default)
     .split-section-media-left    media left, text right
     .split-section-tinted        pale background
     .split-section-stacked       continues from the split above it

   Content order in the markup never changes — the heading always comes
   first, so the reading order and the mobile stack are the same on every
   instance. Only the visual order flips.

   THE COLUMNS ARE THE SAME WIDTH ON EVERY SPLIT, EVERYWHERE. There is no
   per-section width class and no per-section width CSS — change the two
   tokens below and every split on every page moves together.
   ========================================================= */

.split-section {
    /* The one width system. Figma draws the copy column at 540 and the
       media at 616 inside the 1204 container, with a 48 gap. Stored as a
       ratio rather than two pixel widths so both columns shrink together
       when the container narrows, instead of the media column absorbing
       the whole loss. 540 / (540 + 616) = 0.467. */
    --split-gap: 48px;
    --split-content: 0.467;

    background-color: var(--color-white);
}

.split-section .split-section-wrapper {
    gap: var(--split-gap);
    padding-block: var(--section-padding);
}

/* ---------- Columns ----------
   the gap comes out of the row before the split, so the two shares are of
   the space that is actually left to divide */

.split-section .split-section-wrapper .split-section-content {
    flex: 1 1 calc((100% - var(--split-gap)) * var(--split-content));
    min-width: 0;
}

.split-section .split-section-wrapper .split-section-media {
    flex: 1 1 calc((100% - var(--split-gap)) * (1 - var(--split-content)));
    min-width: 0;
}

/* ---------- Layout variants ---------- */

/* the default direction, stated explicitly so the class in the markup is not
   a dead end when someone greps for it */
.split-section-media-right .split-section-wrapper {
    flex-direction: row;
}

/* media first on screen, content still first in the markup */
.split-section-media-left .split-section-wrapper {
    flex-direction: row-reverse;
}

/* the lead line is teal on every split; the wrapper class in the markup
   decides its size */
.split-section .split-section-wrapper .split-section-content .split-section-lead p {
    color: var(--color-teal-700);
}

/* Figma sets a split check list one step above the component default */
.split-section .split-section-wrapper .split-section-content ul {
    --check-font-size: var(--font-size-prose-sm);
    --check-line-height: var(--line-height-prose-sm);
}

/* ---------- Surface variants ---------- */

.split-section-tinted {
    background-color: var(--color-ink-50);
}

/* the deep teal band. Compliance runs two of its splits on it, so the
   colours live with the component rather than with either section. */
.split-section-dark {
    background-color: var(--color-heading);
}

.split-section-dark .split-section-wrapper .split-section-content h2 {
    color: var(--color-white);
}

/* a stacked pair reads as one block: the first half closes tight and the
   second opens tight, so only one run of section padding wraps the two */
.split-section-pair-start .split-section-wrapper {
    padding-bottom: 18px;
}

.split-section-stacked .split-section-wrapper {
    padding-top: 0;
}

.split-section-stacked .split-section-wrapper .split-section-content {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-lg);
}

/* ---------- Content slots — every one optional ---------- */

.split-section .split-section-wrapper .split-section-content .split-section-eyebrow {
    margin-bottom: 10px;
}

.split-section .split-section-wrapper .split-section-content .accent-bar {
    margin-top: 16px;
}

.split-section .split-section-wrapper .split-section-content .split-section-lead {
    margin-top: 8px;
}

.split-section .split-section-wrapper .split-section-content .split-section-lead h3,
.split-section .split-section-wrapper .split-section-content .split-section-lead .h3 {
    color: var(--color-teal-700);
}

/* a column with a gap rather than margins on the paragraphs themselves */
.split-section .split-section-wrapper .split-section-content .split-section-text {
    display: flex;
    flex-direction: column;
    /* the text wrapper class sets the gap to one blank line of its own type */
    gap: var(--stack-gap, 14px);
    margin-top: 24px;
    margin-bottom: 24px;
}

.split-section .split-section-wrapper .split-section-content .split-section-text p {
    font-size: var(--font-size-body-md);
    line-height: var(--line-height-prose);
    color: var(--color-slate-700);
}

.split-section-dark .check-list ul li::before {
    background-color: rgba(8, 198, 173, 0.2);
    color: var(--color-signal-400);
}

.split-section .split-section-wrapper .split-section-content ul {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 0px;
}

.split-section .split-section-wrapper .split-section-content .split-section-actions {
    gap: 12px;
    margin-top: 26px;
}

.split-section .split-section-wrapper .split-section-media .split-section-media-figure {
    width: 100%;
}

.split-section .split-section-wrapper .split-section-media .split-section-media-figure figcaption {
    margin-bottom: 6px;
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-caption);
    color: var(--color-slate-500);
}

/* a dashed box standing in for artwork that has not landed yet */
.split-section .split-section-wrapper .split-section-media .split-section-media-placeholder {
    gap: 12px;
    min-height: 320px;
    padding: var(--space-md);
    background-color: var(--color-ink-50);
    border: 1px dashed var(--color-ink-200);
    border-radius: var(--radius-lg);
    text-align: center;
}

.split-section .split-section-wrapper .split-section-media .split-section-media-placeholder p {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    line-height: var(--line-height-auto);
    color: var(--color-slate-500);
}

.split-section-dark .split-section-wrapper .split-section-content .split-section-text p,
.split-section-dark .split-section-wrapper .split-section-content .split-section-lead p {
    color: var(--color-teal-100);
}

.split-section-dark .split-section-wrapper .split-section-content ul li {
    color: #E5F2F5;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 14px 16px 14px 46px;
    border-radius: var(--radius-sm);
    align-items: center;
}

.split-section-dark .split-section-wrapper .split-section-content ul li::before {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.split-section-dark .split-section-wrapper .split-section-content .split-section-note p {
    color: var(--color-signal-400);
}

/* ---------- Large Desktop / Laptop ---------- */
@media (max-width: 1199px) {

    /* set the token, not the gap: the column widths are calculated from it,
       so overriding `gap` alone would leave the two out of step */
    .split-section {
        --split-gap: var(--space-xl);
    }

}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {

    /* stacked: content first, whichever side the media sat on */
    .split-section .split-section-wrapper,
    .split-section-media-left .split-section-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-lg);
    }

    .split-section .split-section-wrapper .split-section-content,
    .split-section .split-section-wrapper .split-section-media {
        flex: 0 0 auto;
        width: 100%;
    }

    .split-section-pair-start .split-section-wrapper {
        padding-bottom: var(--section-padding);
    }

    .split-section-stacked .split-section-wrapper {
        padding-top: 0;
    }

}

/* ---------- Small Mobile ---------- */
@media (max-width: 767px) {
    .split-section .split-section-wrapper .split-section-content .split-section-text {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .split-section .split-section-wrapper .split-section-content .split-section-actions .button {
        width: 100%;
    }

    /* Move actions below media */
    .split-section .split-section-wrapper {
        gap: 0;
    }

    .split-section .split-section-wrapper .split-section-content {
        display: contents;
    }

    .split-section .split-section-wrapper .split-section-content>* {
        order: 1;
        width: 100%;
    }

    .split-section .split-section-wrapper .split-section-media {
        order: 2;
        margin-top: var(--space-lg);
    }

    .split-section .split-section-wrapper .split-section-content .split-section-actions {
        order: 3;
    }
}

/* ---------- DORA Metrics Grid (injected via ACF) ---------- */
.split-section-dora-metrics {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding: 20px 22px;
    background: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
}

.split-section-dora-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.split-section-dora-heading {
    font-size: 19px;
    color: var(--color-ink-900);
    line-height: 1.2105;
}

.split-section-dora-subheading {
    color: var(--color-slate-500);
    font-family: var(--font-mono);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-micro);
    line-height: 1.2727;
    text-transform: uppercase;
}

.split-section-dora-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.split-section-dora-card {
    display: flex;
    flex-direction: column;
    padding: 22px;
    border-radius: var(--radius-lg);
    color: #ffffff;
    gap: 14px;
    transition: background-color 0.2s ease;
}

.dora-card-teal {
    background-color: var(--color-teal-700);
}

.dora-card-green {
    background-color: #05A08E;
}

.dora-card-green:hover {
    background-color: #05A08E;
}

.dora-card-orange {
    background-color: var(--color-orange-500);
}

.dora-card-title {
    color: var(--color-white);
    letter-spacing: 0.405px;
    font-size: var(--font-size-blurb);
    text-transform: uppercase;
    line-height: 1.25;
    font-weight: var(--font-weight-bold);
}

.dora-card-body {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.dora-card-val {
    font-size: var(--font-size-display-title);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    line-height: 0.9;
    letter-spacing: -1.08px;
}

.dora-card-unit {
    font-family: var(--font-primary);
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.3125;
    letter-spacing: 0;
    font-size: var(--font-size-body);
}

.dora-card-band {
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--font-size-body-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 1.25px;
    text-transform: uppercase;
    line-height: 1.28;
}

.split-section .split-section-wrapper .split-section-content .split-section-inline-form {
    margin-top: var(--space-md);
}

.split-section .split-section-wrapper .split-section-content .split-section-inline-form form {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--space-xxm) !important;
}

.split-section .split-section-wrapper .split-section-content .split-section-inline-form form .hs-form-field {
    max-width: calc(100% - 147px - var(--space-xxm));
    width: 100%;
}

.split-section .split-section-wrapper .split-section-content .split-section-inline-form form .hs-form-field>label {
    display: none !important;
}

.split-section .split-section-wrapper .split-section-content .split-section-inline-form form .hs-form-field .input input {
    height: 50px !important;
}

.split-section .split-section-wrapper .split-section-content .split-section-inline-form form .hs-submit {
    min-width: 147px !important;
}

.split-section .split-section-wrapper .split-section-content .split-section-inline-form form input[type="submit"] {
    flex-shrink: 0 !important;
    width: auto !important;
    min-height: 50px !important;
    margin-top: 0 !important;
    border: 0 !important;
    padding-inline: var(--space-sl) !important;
}

.split-section .split-section-wrapper .split-section-content .split-section-inline-form form .inputs-list {
    list-style: none;
}

@media (max-width: 767px) {
    .split-section .split-section-wrapper .split-section-content .split-section-inline-form form {
        flex-direction: column !important;
    }

    .split-section .split-section-wrapper .split-section-content .split-section-inline-form form .hs-form-field {
        max-width: 100%;
    }

    .split-section .split-section-wrapper .split-section-content .split-section-inline-form form .hs-submit {
        min-width: 100% !important;
    }

    .split-section .split-section-wrapper .split-section-content .split-section-inline-form form input[type="submit"] {
        width: 100% !important;
    }
}

@media (max-width: 575px) {
    .split-section-dora-grid {
        grid-template-columns: 1fr;
    }
}