/*
==========================================================
SPLIT VIEW — split_view.css
==========================================================
WHAT IT IS:
A multi-row two-column layout block for building
structured content sections with shared or separated
row backgrounds.

WHAT IT DOES:
Renders an optional header, a repeater of two-column
rows (each column independently set to image, video,
or text), and optional CTA buttons. Supports two modes:
connected (one shared background panel) and separated
(each row has its own background).

HOW TO USE:
1. Add the Split View block to any page
2. Choose Connected or Separated in the Style tab
3. Add rows — set a type for each column
4. Style with section variants (connected) or
   per-row backgrounds (separated)

All values use boilerplate CSS tokens from style.css.
==========================================================
*/


/* ── Base Block ─────────────────────────────────────────────── */

.split_view {
    width: 100%;
}

/* ── Connected Mode ──────────────────────────────────────────── */

.sv_mode_connected .sv_panel {
    position: relative;
    padding: var(--space-20) 0;
    background-color: var(--color-bg);
}


/* ── Separated Mode ──────────────────────────────────────────── */

.sv_mode_separated .sv_header_panel,
.sv_mode_separated .sv_row_panel {
    position: relative;
    padding: var(--space-16) 0;
}


/* ── Background Overlay ──────────────────────────────────────── */

.sv_overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.sv_mode_connected .sv_panel > .sv_wrapper {
    position: relative;
    z-index: 1;
}


/* ── Header ──────────────────────────────────────────────────── */

.sv_header {
    margin-bottom: var(--space-12);
}

.sv_header_align_left    { text-align: left; }
.sv_header_align_center  { text-align: center; }
.sv_header_align_right   { text-align: right; }

.sv_header_heading {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    margin: 0;
    line-height: 1.1;
}


/* ── Header Island Style ─────────────────────────────────────── */

/* Island container is a flex row — alignment controls card position */
.sv_header_island {
    display: flex;
    justify-content: flex-start;
}

.sv_header_align_center.sv_header_island { justify-content: center; }
.sv_header_align_right.sv_header_island  { justify-content: flex-end; }

/* The heading becomes the card */
.sv_header_island .sv_header_heading {
    display: inline-block;
    background-color: var(--sv-header-card-bg, var(--color-bg-alt));
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-8);
    box-shadow: var(--shadow-md);
    margin: 0;
}

/* Flow style — header bg color applies to the full container */
.sv_header_flow {
    background-color: var(--sv-header-card-bg, transparent);
}


/* ── Rows ────────────────────────────────────────────────────── */

.sv_rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.sv_row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
}


/* ── Columns ─────────────────────────────────────────────────── */

.sv_col {
    flex: 1;
    min-width: 0;
}

/* Image column */
.sv_col_img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

/* Video column */
.sv_col_video.embed-responsive {
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.sv_col_video.embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Text column */
.sv_col_eyebrow {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: rgba(162, 89, 255, 0.12);
    border: 1px solid rgba(162, 89, 255, 0.25);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    margin-bottom: var(--space-3);
}

.sv_col_heading {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    margin: 0;
    line-height: 1.1;
}

/* Remove bottom margin when accent line follows — they form one heading visually */
.sv_col_heading:has(+ .sv_col_accent_line) {
    margin-bottom: 0;
}

.sv_col_accent_line {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    background: linear-gradient(135deg, var(--color-accent), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.1;
    margin-bottom: var(--space-4);
}

.sv_col_body {
    font-size: var(--text-base);
    color: var(--color-text);
    line-height: var(--leading-normal);
}

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

.sv_col_cta {
    margin-top: var(--space-6);
}


/* ── CTAs ────────────────────────────────────────────────────── */

.sv_ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-12);
}

.sv_ctas_separated {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding: var(--space-8) var(--wrapper-padding) 0;
}


/* ── Section Variants — connected mode — AFTER base rules ─────── */

.sv_variant_default .sv_panel {
    background-color: var(--color-bg);
}

.sv_variant_minimal .sv_panel {
    background-color: transparent;
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

.sv_variant_dark .sv_panel {
    background-color: var(--color-bg-dark);
}

.sv_variant_dark .sv_header_heading,
.sv_variant_dark .sv_col_heading {
    color: var(--color-text-inverse);
}

.sv_variant_dark .sv_col_body {
    color: var(--color-text-inverse);
}

/* Gradient variants — define per project */
.sv_variant_gradient_1 .sv_panel { /* add gradient here */ }
.sv_variant_gradient_2 .sv_panel { /* add gradient here */ }
.sv_variant_gradient_3 .sv_panel { /* add gradient here */ }

/* System Stack — prepared for Zone Band-hosted split explanation sections */
.sv_variant_system_stack .sv_panel {
    background-color: transparent;
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
}

.sv_variant_system_stack .sv_rows {
    gap: 0;
}

.sv_variant_system_stack .sv_row {
    position: relative;
    align-items: center;
    gap: clamp(var(--space-6), 3vw, var(--space-12));
    min-height: 640px;
    padding: clamp(var(--space-8), 4vw, var(--space-20));
    border: 1px solid rgba(212, 114, 255, 0.28);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 15% 18%, rgba(245, 166, 35, 0.16), transparent 30%),
        radial-gradient(circle at 86% 16%, rgba(108, 164, 255, 0.18), transparent 30%),
        radial-gradient(circle at 58% 96%, rgba(162, 89, 255, 0.18), transparent 38%),
        linear-gradient(135deg, rgba(5, 8, 27, 0.94), rgba(10, 15, 44, 0.68));
    box-shadow:
        0 42px 118px rgba(0, 0, 0, 0.38),
        0 0 82px rgba(162, 89, 255, 0.20),
        0 0 78px rgba(245, 166, 35, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.09) inset;
    overflow: visible;
    isolation: isolate;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.sv_variant_system_stack .sv_row::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: calc(var(--radius-xl) - 1px);
    background:
        linear-gradient(rgba(255, 255, 255, 0.034) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.034) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.42;
    pointer-events: none;
    z-index: 0;
}

.sv_variant_system_stack .sv_row::after {
    content: "";
    position: absolute;
    top: var(--space-12);
    bottom: var(--space-12);
    left: 50%;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(212, 114, 255, 0.46),
        rgba(108, 164, 255, 0.30),
        transparent
    );
    pointer-events: none;
    opacity: 0.72;
    z-index: 0;
}

.sv_variant_system_stack .sv_col {
    position: relative;
    z-index: 1;
}

.sv_variant_system_stack .sv_col_type_text {
    display: flex;
    flex-direction: column;
}

.sv_variant_system_stack .sv_col:first-child,
.sv_variant_system_stack .sv_col:last-child {
    min-height: 0;
    padding: clamp(var(--space-7), 3vw, var(--space-10));
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 18% 0%, rgba(245, 166, 35, 0.10), transparent 36%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(245, 245, 247, 0.91));
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.28),
        0 0 42px rgba(162, 89, 255, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.80) inset;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.sv_variant_system_stack .sv_col:first-child {
    flex: 0 1 48%;
    justify-content: center;
    max-width: 620px;
    text-align: left;
    align-items: flex-start;
}

.sv_variant_system_stack .sv_col:last-child {
    flex: 1 1 52%;
    justify-content: flex-start;
    max-width: 680px;
    transform: translateY(-42px);
}

.sv_variant_system_stack .sv_col_eyebrow {
    width: fit-content;
    margin-bottom: var(--space-6);
    padding: 0.46rem 0.9rem;
    color: rgba(255, 255, 255, 0.92);
    background:
        linear-gradient(135deg, rgba(162, 89, 255, 0.25), rgba(108, 164, 255, 0.10)),
        rgba(10, 15, 44, 0.48);
    border-color: rgba(212, 114, 255, 0.35);
    box-shadow:
        0 0 22px rgba(162, 89, 255, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.045) inset;
}

.sv_variant_system_stack .sv_col:first-child .sv_col_eyebrow,
.sv_variant_system_stack .sv_system_stack_label {
    align-self: flex-start;
}

.sv_variant_system_stack .sv_col_heading {
    max-width: 13ch;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(--space-4);
    color: var(--color-primary);
    font-size: clamp(2rem, 3vw, 2.85rem);
    line-height: 1.04;
    letter-spacing: 0;
    text-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

.sv_variant_system_stack .sv_col_accent_line {
    width: fit-content;
    margin-top: calc(-1 * var(--space-4));
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(--space-5);
    font-size: clamp(2rem, 3vw, 2.85rem);
    line-height: 1.04;
    background: linear-gradient(135deg, var(--color-accent), var(--color-rating));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 18px rgba(162, 89, 255, 0.22));
}

.sv_variant_system_stack .sv_col_body,
.sv_variant_system_stack .sv_col_body p {
    color: rgba(10, 15, 44, 0.76);
}

.sv_variant_system_stack .sv_col_body p {
    max-width: 50ch;
    margin-left: 0;
    margin-right: 0;
}

.sv_variant_system_stack .sv_col:first-child .sv_col_body p {
    font-size: clamp(0.98rem, 1vw, 1.06rem);
    line-height: 1.66;
    margin-bottom: var(--space-4);
}

.sv_variant_system_stack .sv_system_pills_wrap {
    margin-top: var(--space-6);
}

.sv_variant_system_stack .sv_col:first-child .sv_col_body ul,
.sv_variant_system_stack .sv_system_pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 1180px) {

    .sv_variant_system_stack .sv_col:first-child .sv_col_body ul,
    .sv_variant_system_stack .sv_system_pills {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: min(100%, 560px);
        margin-left: auto;
        margin-right: auto;
    }
}

.sv_variant_system_stack .sv_col:first-child .sv_col_body li,
.sv_variant_system_stack .sv_system_pills li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 40px;
    padding: 0.62rem 1rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(162, 89, 255, 0.20);
    background:
        linear-gradient(135deg, rgba(162, 89, 255, 0.13), rgba(245, 166, 35, 0.08)),
        rgba(255, 255, 255, 0.82);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    line-height: 1.2;
    box-shadow:
        0 10px 24px rgba(10, 15, 44, 0.10),
        0 0 18px rgba(162, 89, 255, 0.08) inset;
}

.sv_variant_system_stack .sv_system_stack_label,
.sv_variant_system_stack .sv_col:last-child .sv_col_heading {
    display: inline-block;
    width: fit-content;
    padding: 0.46rem 0.9rem;
    border: 1px solid rgba(162, 89, 255, 0.24);
    border-radius: var(--radius-full);
    background:
        linear-gradient(135deg, rgba(162, 89, 255, 0.12), rgba(245, 166, 35, 0.08)),
        rgba(255, 255, 255, 0.78);
    color: var(--color-primary);
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    max-width: none;
    margin-bottom: var(--space-6);
    line-height: 1.2;
    text-shadow: none;
    box-shadow: 0 10px 24px rgba(10, 15, 44, 0.08);
}

.sv_variant_system_stack .sv_system_stack_body,
.sv_variant_system_stack .sv_col:last-child .sv_col_body {
    counter-reset: system-stack;
}

.sv_variant_system_stack .sv_system_stack_body {
    position: relative;
}

.sv_variant_system_stack .sv_system_stack_items,
.sv_variant_system_stack .sv_col:last-child .sv_col_body ol,
.sv_variant_system_stack .sv_col:last-child .sv_col_body ul {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.sv_variant_system_stack .sv_system_stack_items::before,
.sv_variant_system_stack .sv_col:last-child .sv_col_body ol::before,
.sv_variant_system_stack .sv_col:last-child .sv_col_body ul::before {
    content: "";
    position: absolute;
    top: var(--space-6);
    bottom: var(--space-6);
    left: calc(var(--space-5) + 21px);
    width: 2px;
    background: linear-gradient(
        180deg,
        rgba(162, 89, 255, 0.12),
        rgba(245, 166, 35, 0.48),
        rgba(162, 89, 255, 0.20)
    );
    box-shadow: 0 0 18px rgba(245, 166, 35, 0.24);
}

.sv_variant_system_stack .sv_system_stack_item,
.sv_variant_system_stack .sv_col:last-child .sv_col_body li {
    counter-increment: system-stack;
    position: relative;
    min-height: 78px;
    padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-12) + var(--space-4));
    border: 1px solid rgba(162, 89, 255, 0.12);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 9% 22%, rgba(245, 166, 35, 0.10), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 245, 247, 0.88));
    color: var(--color-text-muted);
    text-align: center;
    box-shadow:
        0 14px 34px rgba(10, 15, 44, 0.14),
        0 0 18px rgba(245, 166, 35, 0.08) inset;
    z-index: 1;
}

.sv_variant_system_stack .sv_system_stack_item + .sv_system_stack_item::after,
.sv_variant_system_stack .sv_col:last-child .sv_col_body li + li::after {
    content: none;
}

.sv_variant_system_stack .sv_system_stack_item::before,
.sv_variant_system_stack .sv_col:last-child .sv_col_body li::before {
    content: counter(system-stack);
    position: absolute;
    top: var(--space-4);
    left: var(--space-5);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent), var(--color-rating));
    color: var(--color-text-inverse);
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    box-shadow:
        0 0 24px rgba(162, 89, 255, 0.36),
        0 0 0 6px rgba(162, 89, 255, 0.09);
}

.sv_variant_system_stack .sv_system_stack_content {
    display: block;
}

.sv_variant_system_stack .sv_system_stack_content > span {
    display: block;
    color: rgba(10, 15, 44, 0.68);
    font-size: var(--text-sm);
    line-height: 1.48;
}

.sv_variant_system_stack .sv_system_stack_content strong,
.sv_variant_system_stack .sv_col:last-child .sv_col_body li strong {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.08vw, 1.13rem);
    line-height: 1.2;
}


/* ── Row Background Variants — separated mode — AFTER base rules ─ */

.sv_bg_default {
    background-color: var(--color-bg);
}

.sv_bg_minimal {
    background-color: transparent;
}

.sv_bg_dark {
    background-color: var(--color-bg-dark);
}

.sv_bg_dark .sv_header_heading,
.sv_bg_dark .sv_col_heading {
    color: var(--color-text-inverse);
}

.sv_bg_dark .sv_col_body {
    color: var(--color-text-inverse);
}

/* Gradient row backgrounds — define per project */
.sv_bg_gradient_1 { /* add gradient here */ }
.sv_bg_gradient_2 { /* add gradient here */ }
.sv_bg_gradient_3 { /* add gradient here */ }


/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 768px) {

    .sv_mode_connected .sv_panel {
        padding: var(--space-12) 0;
    }

    .sv_mode_separated .sv_header_panel,
    .sv_mode_separated .sv_row_panel {
        padding: var(--space-12) 0;
    }

    .sv_row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-8);
    }

    .sv_rows {
        gap: var(--space-10);
    }

    .sv_header_heading {
        font-size: var(--text-2xl);
    }

    .sv_col_heading {
        font-size: var(--text-lg);
    }

    .sv_variant_system_stack .sv_row {
        gap: var(--space-8);
        min-height: 0;
        padding: var(--space-6);
    }

    .sv_variant_system_stack .sv_row::after {
        display: none;
    }

    .sv_variant_system_stack .sv_col:first-child,
    .sv_variant_system_stack .sv_col:last-child {
        flex-basis: auto;
        width: 100%;
        min-height: 0;
        padding: var(--space-6);
    }

    .sv_variant_system_stack .sv_col:last-child {
        transform: none;
    }

    .sv_variant_system_stack .sv_col_heading,
    .sv_variant_system_stack .sv_col_accent_line {
        font-size: clamp(2rem, 7vw, 2.55rem);
        max-width: 18ch;
    }

    .sv_variant_system_stack .sv_system_stack_item,
    .sv_variant_system_stack .sv_col:last-child .sv_col_body li {
        min-height: 0;
    }

    .sv_ctas {
        flex-direction: column;
    }
}

@media (max-width: 480px) {

    .sv_mode_connected .sv_panel {
        padding: var(--space-12) 0;
    }

    .sv_header_heading {
        font-size: var(--text-xl);
    }

    .sv_variant_system_stack .sv_row {
        padding: var(--space-5);
        border-radius: var(--radius-lg);
    }

    .sv_variant_system_stack .sv_col:first-child,
    .sv_variant_system_stack .sv_col:last-child {
        padding: var(--space-5);
        border-radius: var(--radius-lg);
    }

    .sv_variant_system_stack .sv_col_eyebrow,
    .sv_variant_system_stack .sv_system_stack_label {
        font-size: 0.66rem;
        white-space: normal;
    }

    .sv_variant_system_stack .sv_col_heading,
    .sv_variant_system_stack .sv_col_accent_line {
        font-size: clamp(1.9rem, 10vw, 2.35rem);
        max-width: 12ch;
    }

    .sv_variant_system_stack .sv_col:first-child .sv_col_body p {
        font-size: var(--text-base);
        line-height: 1.65;
    }

    .sv_variant_system_stack .sv_col:first-child .sv_col_body ul,
    .sv_variant_system_stack .sv_system_pills {
        gap: var(--space-2);
    }

    .sv_variant_system_stack .sv_col:first-child .sv_col_body li,
    .sv_variant_system_stack .sv_system_pills li {
        width: 100%;
        justify-content: center;
    }

    .sv_variant_system_stack .sv_system_stack_item,
    .sv_variant_system_stack .sv_col:last-child .sv_col_body li {
        padding: var(--space-4);
        padding-left: calc(var(--space-10) + var(--space-3));
    }

    .sv_variant_system_stack .sv_system_stack_item::before,
    .sv_variant_system_stack .sv_col:last-child .sv_col_body li::before {
        top: var(--space-4);
        left: var(--space-4);
        width: 34px;
        height: 34px;
    }

    .sv_variant_system_stack .sv_system_stack_item + .sv_system_stack_item::after,
    .sv_variant_system_stack .sv_col:last-child .sv_col_body li + li::after {
        left: calc(var(--space-4) + 16px);
    }
}


/* ── Homepage — sv_variant_gradient_1 background stage ──────── */
/* Legacy homepage-specific treatment. Use dedicated variants like
   sv_variant_system_stack for reusable inner-page/Zone Band sections. */

.page-home .sv_variant_gradient_1 {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.page-home .sv_variant_gradient_1 .sv_panel {
    position: relative;
    overflow: hidden;
    border-radius: 35px;
    background: linear-gradient(
        180deg,
        rgba(76, 164, 255, 0.88) 0%,
        rgba(92, 79, 255, 0.78) 100%
    );
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.28),
        0 0 34px rgba(108, 164, 255, 0.12),
        0 0 56px rgba(245, 166, 35, 0.08);
}

/* Inverted grid — size and position matched to site background */
.page-home .sv_variant_gradient_1 .sv_panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../../assets/backgrounds/bydenero-boxes-no-fill-tight-inverted\ copy.svg');
    background-repeat: repeat;
    background-size: 400px auto;
    background-position: center top;
    opacity: 1;
    pointer-events: none;
}

/* Radial glow accents */
.page-home .sv_variant_gradient_1 .sv_panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 18% 20%, rgba(245, 166, 35, 0.16), transparent 24%),
        radial-gradient(circle at 48% 8%, rgba(255, 255, 255, 0.10), transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(162, 89, 255, 0.12), transparent 30%);
    pointer-events: none;
}


/* ── Homepage — sv_variant_gradient_1 content sizing & alignment ─ */

/*
 * .hero_content sits at margin-left: var(--wrapper-padding) inside
 * .hero_inner, which receives horizontal padding from .wrapper.
 * Combined offset from the full-width edge: 2 × --wrapper-padding.
 * Doubling .sv_wrapper's horizontal padding matches that start line.
 * --wrapper-padding updates in :root at each breakpoint (40px → 24px → 16px),
 * so the doubled value stays correct at every screen size automatically.
 */
.page-home .sv_variant_gradient_1 .sv_wrapper {
    padding: 0 calc(var(--wrapper-padding) * 2);
}

/* ── Homepage — floating header plate ───────────────────────── */

/*
 * .sv_header is a block sibling of .sv_rows inside .sv_wrapper.
 * position: relative + z-index: 10 keeps the plate above the glass rows.
 * negative margin-bottom pulls the first row up behind the plate,
 * creating the overlap/floating effect.
 * display: flex + justify-content: center centres the inline plate
 * regardless of the sv_header_align_center text-align class.
 */
.page-home .sv_variant_gradient_1 .sv_header {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    margin-bottom: calc(-1 * var(--space-10));
}

.page-home .sv_variant_gradient_1 .sv_header_heading {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: var(--space-4) var(--space-10);
    border-radius: var(--radius-lg);
    background: linear-gradient(
        150deg,
        rgba(14, 20, 58, 0.98) 0%,
        rgba(10, 15, 44, 0.97) 100%
    );
    border: 1px solid rgba(245, 166, 35, 0.22);
    color: var(--color-text-inverse);
    font-size: var(--text-2xl);
    letter-spacing: 0.02em;
    box-shadow:
        0 22px 54px rgba(0, 0, 0, 0.46),
        0 6px 16px rgba(0, 0, 0, 0.30),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 0 32px rgba(162, 89, 255, 0.20),
        0 0 28px rgba(245, 166, 35, 0.10);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
}

.page-home .sv_variant_gradient_1 .sv_header_heading::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(162, 89, 255, 0.06)  0%,
        rgba(108, 164, 255, 0.12) 14%,
        rgba(162, 89, 255, 0.40)  28%,
        rgba(245, 166, 35, 0.86) 50%,
        rgba(162, 89, 255, 0.40)  72%,
        rgba(108, 164, 255, 0.12) 86%,
        rgba(162, 89, 255, 0.06)  100%
    );
    box-shadow:
        0 0 10px rgba(245, 166, 35, 0.24),
        0 0 24px rgba(162, 89, 255, 0.18);
    pointer-events: none;
}


/* ── Homepage — row glass panels ─────────────────────────────── */

/*
 * .sv_rows needs position: relative + z-index: 1 so the rows sit
 * below the header plate in the same stacking context (sv_wrapper).
 * Gap between rows creates the separated module feel.
 */
.page-home .sv_variant_gradient_1 .sv_rows {
    position: relative;
    z-index: 1;
    gap: var(--space-8);
}

.page-home .sv_variant_gradient_1 .sv_row {
    background:
        radial-gradient(circle at 12% 10%, rgba(245, 166, 35, 0.075), transparent 30%),
        rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow:
        0 10px 36px rgba(0, 0, 0, 0.20),
        0 0 26px rgba(245, 166, 35, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    overflow: visible;
}


/* ── Homepage — image card (dark, dimensional, tilted) ────────── */

/*
 * Image column — narrower ratio (38%) from previous pass, now also
 * styled as a dark navy card matching the hero portrait card spirit.
 * :first-child = left column → tilt right (+2deg)
 * :last-child  = right column → tilt left  (-2deg)
 * Each sv_row has exactly two sv_col children, so this is reliable.
 */
.page-home .sv_variant_gradient_1 .sv_col_type_image {
    flex: 0 1 38%;
    max-width: 400px;
    background: rgba(10, 15, 44, 0.92);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        0 26px 58px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 0 28px rgba(162, 89, 255, 0.14),
        0 0 34px rgba(245, 166, 35, 0.12);
}

.page-home .sv_variant_gradient_1 .sv_row .sv_col_type_image:first-child {
    transform: rotate(2deg);
    transform-origin: center bottom;
}

.page-home .sv_variant_gradient_1 .sv_row .sv_col_type_image:last-child {
    transform: rotate(-2deg);
    transform-origin: center bottom;
}

.page-home .sv_variant_gradient_1 .sv_col_img {
    border-radius: var(--radius-lg);
    display: block;
    width: 100%;
    height: auto;
}


/* ── Homepage — content card (paper surface, rich text ready) ─── */

/*
 * Text column uses a near-white paper card to contrast the dark image
 * card and the glass row panel behind both.
 * All WYSIWYG heading/text colours are overridden here because the global
 * brand rules in Section 10 of style.css set h1/h3/h5 to accent colours
 * and h2 to display: inline-block with a purple underline — all wrong
 * on a white card surface.
 */
.page-home .sv_variant_gradient_1 .sv_col_type_text {
    background:
        radial-gradient(circle at 8% 0%, rgba(245, 166, 35, 0.10), transparent 34%),
        rgba(252, 252, 255, 0.95);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-10);
    border: 1px solid rgba(255, 255, 255, 0.80);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.14),
        0 0 24px rgba(245, 166, 35, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.60) inset;
}

/* ACF column heading (sv_col_heading h3) */
.page-home .sv_variant_gradient_1 .sv_col_type_text .sv_col_heading {
    color: var(--color-primary);
}

/* WYSIWYG body text */
.page-home .sv_variant_gradient_1 .sv_col_type_text .sv_col_body {
    color: var(--color-text);
}

/* WYSIWYG headings — override global brand colour/border rules */
.page-home .sv_variant_gradient_1 .sv_col_type_text h1,
.page-home .sv_variant_gradient_1 .sv_col_type_text h2,
.page-home .sv_variant_gradient_1 .sv_col_type_text h3,
.page-home .sv_variant_gradient_1 .sv_col_type_text h4,
.page-home .sv_variant_gradient_1 .sv_col_type_text h5,
.page-home .sv_variant_gradient_1 .sv_col_type_text h6 {
    color: var(--color-primary);
    border-bottom: none;
    padding-bottom: 0;
    display: block;
    text-shadow: none;
}

.page-home .sv_variant_gradient_1 .sv_col_type_text p {
    color: var(--color-text);
}

.page-home .sv_variant_gradient_1 .sv_col_type_text a {
    color: var(--color-accent);
}


/* ── Homepage — CTA row ───────────────────────────────────────── */

/*
 * Centered below the rows. Matches the hero primary/secondary
 * button system exactly — same gradient, radius, shadow, hover.
 */
/*
 * Mirrors the header plate overlap — negative margin-top pulls the CTA
 * up into the last row. z-index: 10 floats it on top of the glass panel.
 * Last row gets matching extra padding-bottom so its content clears the CTA.
 */
.page-home .sv_variant_gradient_1 .sv_rows .sv_row:last-child {
    padding-bottom: calc(var(--space-8) + var(--space-10));
}

.page-home .sv_variant_gradient_1 .sv_ctas {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: calc(-1 * var(--space-10));
    padding-bottom: var(--space-2);
}

.page-home .sv_variant_gradient_1 .sv_ctas .sv_cta_primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0.95rem 1.45rem;
    border-radius: var(--radius-full);
    background: linear-gradient(
        135deg,
        rgba(162, 89, 255, 0.95),
        rgba(212, 114, 255, 0.96) 72%,
        rgba(245, 166, 35, 0.72)
    );
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--color-text-inverse);
    font-size: var(--text-base);
    text-decoration: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 0 26px rgba(162, 89, 255, 0.28),
        0 0 18px rgba(245, 166, 35, 0.12),
        0 10px 28px rgba(0, 0, 0, 0.32);
}

.page-home .sv_variant_gradient_1 .sv_ctas .sv_cta_primary:hover {
    background: linear-gradient(
        135deg,
        rgba(212, 114, 255, 1),
        rgba(162, 89, 255, 1)
    );
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--color-text-inverse);
    text-decoration: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 0 30px rgba(162, 89, 255, 0.32);
}

.page-home .sv_variant_gradient_1 .sv_ctas .sv_cta_secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0.95rem 1.45rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--color-text-inverse);
    font-size: var(--text-base);
    text-decoration: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 18px rgba(108, 164, 255, 0.10),
        0 10px 28px rgba(0, 0, 0, 0.28);
}

.page-home .sv_variant_gradient_1 .sv_ctas .sv_cta_secondary:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--color-text-inverse);
    text-decoration: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 0 24px rgba(108, 164, 255, 0.12);
}


/* ── Homepage — responsive resets ────────────────────────────── */

@media (max-width: 768px) {

    .page-home .sv_variant_gradient_1 .sv_header {
        margin-bottom: var(--space-6);
    }

    .page-home .sv_variant_gradient_1 .sv_col_type_image {
        flex: 1 1 auto;
        max-width: 100%;
        order: -1; /* always above text column when stacked on mobile */
    }

    .page-home .sv_variant_gradient_1 .sv_row .sv_col_type_image:first-child,
    .page-home .sv_variant_gradient_1 .sv_row .sv_col_type_image:last-child {
        transform: none;
    }

    .page-home .sv_variant_gradient_1 .sv_col_type_text {
        text-align: center;
    }

    .page-home .sv_variant_gradient_1 .sv_col_heading,
    .page-home .sv_variant_gradient_1 .sv_col_eyebrow,
    .page-home .sv_variant_gradient_1 .sv_col_accent_line,
    .page-home .sv_variant_gradient_1 .sv_col_body,
    .page-home .sv_variant_gradient_1 .sv_col_body p {
        text-align: center;
    }

    .page-home .sv_variant_gradient_1 .sv_row {
        padding: var(--space-5);
    }

    .page-home .sv_variant_gradient_1 .sv_col_type_text {
        padding: var(--space-5) var(--space-6);
    }

    .page-home .sv_variant_gradient_1 .sv_rows .sv_row:last-child {
        padding-bottom: var(--space-5);
    }

    .page-home .sv_variant_gradient_1 .sv_ctas {
        flex-direction: column;
        align-items: stretch;
        margin-top: var(--space-8);
    }

    .page-home .sv_variant_gradient_1 .sv_ctas .sv_cta_primary,
    .page-home .sv_variant_gradient_1 .sv_ctas .sv_cta_secondary {
        width: 100%;
        text-align: center;
    }
}


/* ── Homepage — stacking context + solid backing plate ──────────────
   Scope: .page-home only. Elevates Split View so Image Grid slides
   under it. The ::before backing plate is a true separate layer:
   solid navy, below the glass content, but inside the Split View
   stacking context (z-index: 2) — so the Image Grid (z-index: 1)
   cannot show through from behind.

   Layer order inside the Split View stacking context:
     z-index: -1  → ::before backing plate (solid navy)
     normal flow  → sv_wrapper content (glass panel above)
   ─────────────────────────────────────────────────────────────────── */

.page-home .split_view.sv_variant_gradient_1 {
    position: relative;
    z-index: 2;
}

.page-home .split_view.sv_variant_gradient_1.sv_mode_connected .sv_panel {
    background-color: var(--color-bg-dark); /* solid navy — replaces white base, blocks image_grid show-through */
}

.page-home .sv_variant_gradient_1::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-bg-dark);
    z-index: -1;
    pointer-events: none;
}


/* ── Nested in Zone Band ───────────────────────────────────────
   Zone Band owns the outer background. Split View should stay
   contained and avoid painting default white row/panel strips. */

.zone_band.zone_band .split_view.split_view {
    width: min(100%, calc(var(--max-width) + 160px));
    max-width: calc(100vw - (var(--wrapper-padding) * 2));
    margin-left: auto;
    margin-right: auto;
}

.zone_band.zone_band .split_view.sv_variant_gradient_1,
.zone_band.zone_band .split_view.sv_variant_system_stack {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.zone_band .split_view.sv_mode_connected .sv_panel,
.zone_band .split_view.sv_mode_separated .sv_header_panel.sv_bg_default,
.zone_band .split_view.sv_mode_separated .sv_row_panel.sv_bg_default,
.zone_band .split_view.sv_variant_system_stack .sv_panel,
.zone_band .split_view.sv_variant_system_stack .sv_header_panel,
.zone_band .split_view.sv_variant_system_stack .sv_row_panel {
    background-color: transparent;
}
    margin-left: auto;
    margin-right: auto;