/**
 * Section: Feature — Split 2 (Design Language)
 * RSD Design Language Wave 4 Primitive 1.
 * Companion to: pages/sections/feature-split-2.php
 *
 * @since 3.5.70 (RSD primitives band)
 */

[data-ssla-type="feature-split-2"]{
    padding: var(--shell-section-padding-y-standard) 48px;
    background: var(--shell-surface-cream);
}

[data-ssla-type="feature-split-2"][data-ssla-variant-surface="cream"]{ background: var(--shell-surface-cream); }
[data-ssla-type="feature-split-2"][data-ssla-variant-surface="warm"]{ background: var(--shell-surface-warm); }
[data-ssla-type="feature-split-2"][data-ssla-variant-surface="light"]{ background: var(--shell-surface-light); }
[data-ssla-type="feature-split-2"][data-ssla-variant-surface="dark"]{ background: var(--shell-surface-dark); }
[data-ssla-type="feature-split-2"][data-ssla-variant-surface="darker"]{ background: var(--shell-surface-darker); }

.ssla-feature-split-2{
    max-width: var(--shell-content-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

[data-ssla-type="feature-split-2"][data-ssla-variant-layout="image-left"] .ssla-feature-split-2-text{
    order: 2;
}

[data-ssla-type="feature-split-2"][data-ssla-variant-layout="image-left"] .ssla-feature-split-2-visual{
    order: 1;
}

.ssla-feature-split-2-text > * + *{
    margin-top: 20px;
}

.ssla-feature-split-2-text .ssla-h2{
    font-size: clamp(32px, 3.5vw, 44px);
    line-height: 1.1;
}

/* Visual */
.ssla-feature-split-2-img-wrap{
    overflow: hidden;
}

.ssla-feature-split-2-img{
    display: block;
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
}

[data-ssla-type="feature-split-2"][data-ssla-variant-image-style="lifted"] .ssla-feature-split-2-img-wrap{
    border-radius: 4px;
    border: 1px solid var(--shell-hairline-strong);
    box-shadow:
        var(--shell-shadow-lift-1),
        var(--shell-shadow-lift-2),
        var(--shell-shadow-lift-3);
}

[data-ssla-type="feature-split-2"][data-ssla-variant-image-style="bordered"] .ssla-feature-split-2-img-wrap{
    border: 1px solid var(--shell-hairline-strong);
}

.ssla-feature-split-2-img-caption{
    margin-top: 12px;
    font-size: 13px;
    color: var(--shell-text-muted);
}

[data-ssla-variant-tone="dark"] .ssla-feature-split-2-img-caption{
    color: var(--shell-text-on-dark-muted);
}

/* Stats / Pull-quote (mutually exclusive per spec) */
.ssla-feature-split-2 .ssla-stats-row{
    margin-top: 32px;
}

@media (max-width: 767px) {
    [data-ssla-type="feature-split-2"]{
        padding: 64px 24px;
    }

    .ssla-feature-split-2{
        grid-template-columns: 1fr;
        gap: 32px;
    }

    [data-ssla-type="feature-split-2"][data-ssla-variant-layout="image-left"] .ssla-feature-split-2-text{
        order: 1;
    }

    [data-ssla-type="feature-split-2"][data-ssla-variant-layout="image-left"] .ssla-feature-split-2-visual{
        order: 2;
    }
}

/* ─── v3.7.06 / Pass 4 Band 4a — manifest selector resolution ──────────
   Templates emit shorter class names (.ssla-bullets, .ssla-pull-quote-*)
   than the existing per-section CSS (.ssla-feature-split-2-quote-*). The
   manifest selectors{} declares the template's names. These rules give
   the manifest-declared classes a real CSS rule so painting and overlay
   targeting both resolve. */

.ssla-bullets{
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.ssla-bullets li{
    padding: 8px 0 8px 24px;
    position: relative;
    font-size: 16px;
    line-height: 1.6;
    color: var(--shell-text-body);
}

.ssla-bullets li::before{
    content: "—";
    position: absolute;
    left: 0;
    top: 8px;
    color: var(--shell-accent);
    font-weight: 600;
}

[data-ssla-variant-tone="dark"] .ssla-bullets li{
    color: var(--shell-text-on-dark-muted);
}

.ssla-pull-quote-text{
    font-family: var(--shell-font-family-heading);
    font-size: 19px;
    line-height: 1.5;
    color: var(--shell-text-dark);
    font-style: italic;
    margin: 0;
}

[data-ssla-variant-tone="dark"] .ssla-pull-quote-text{
    color: var(--shell-text-on-dark);
}

.ssla-pull-quote-attribution{
    margin-top: 12px;
    font-size: 14px;
    color: var(--shell-text-muted);
}

[data-ssla-variant-tone="dark"] .ssla-pull-quote-attribution{
    color: var(--shell-text-on-dark-muted);
}