/*
==========================================================
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. Editor labels (Batch 8H usability pass) map to the internal names:
   "Background" = sv_mode (connected / separated); "Section look" =
   sv_variant; "Left/Right side" = Column 1/2; "Side widths",
   "On phones, show first", "Line up the sides" = the row width /
   mobile order / vertical alignment classes; "Photo shape" / "Keep
   this part in view" = image display / focal; "Basic background" =
   the older row_bg / sv_header_bg treatment select
3. For the System Stack variant ("Intro + list" in the editor): fill in
   Row 1's left side for the intro heading and body, then use the
   dedicated tag and list fields after the rows

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


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

.split_view {
    width: 100%;
}

.sv_wrapper {
    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 — true 16:9 box. The shared .embed-responsive rule
   (style.css §7d) already sets padding-bottom: 56.25% + height: 0;
   the old padding-top here stacked on top of it and doubled the
   height. All four padding sides are set explicitly so the block is
   self-contained and correct with or without the shared rule. */
.sv_col_video.embed-responsive {
    position: relative;
    width: 100%;
    height: 0;
    padding: 0 0 56.25% 0;
    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;
}

/* Editor preview — static stand-in for the video iframe (Round 2B) */
.sv_video_preview_placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5) var(--space-6);
    border: 1px dashed var(--color-border);
    background-color: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
    text-align: center;
}

/* Text column */
.sv_col_heading {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-semi);
    color: var(--color-primary);
    margin: 0 0 var(--space-4) 0;
    line-height: 1.2;
}

.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;
}

/* Prevent global p / li color from overriding the wrapper's token on dark variants */
.sv_col_body p,
.sv_col_body li {
    color: inherit;
}


/* ── Row Layout (Batch 8H) — AFTER base .sv_row / .sv_col ──────
   PHP adds these classes only for non-default choices, so Equal /
   Center / Column 1 First (and every pre-existing row, where the
   fields are unset) match none of them. .sv_col_1 / .sv_col_2 are
   always present but inert on their own — only these compound
   selectors use them. Width ratios use flex-grow on a 0 basis so
   the split is exact after the gap and can never overflow. Mobile
   resets live in the Responsive section below. */

.sv_row_width_left_larger .sv_col_1,
.sv_row_width_right_larger .sv_col_2 {
    flex: 3 1 0%;
}

.sv_row_width_left_larger .sv_col_2,
.sv_row_width_right_larger .sv_col_1 {
    flex: 2 1 0%;
}

.sv_row_align_top {
    align-items: flex-start;
}

.sv_row_align_bottom {
    align-items: flex-end;
}


/* ── Image Display + Focal Position (Batch 8H) ──────────────────
   Natural (default) adds no class. Cropped modes always use
   object-fit: cover — they crop, never distort. */

.sv_col_image_display_landscape .sv_col_img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.sv_col_image_display_square .sv_col_img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.sv_col_image_display_portrait .sv_col_img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* Fill Column — the column stretches to the row's height (overriding
   the row's Vertical Alignment for this column only) and the image
   covers it. Mobile falls back to Landscape (see Responsive). */
.sv_col_image_display_fill {
    align-self: stretch;
}

.sv_col_image_display_fill .sv_col_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sv_col_image_focal_center .sv_col_img       { object-position: center center; }
.sv_col_image_focal_top .sv_col_img          { object-position: center top; }
.sv_col_image_focal_bottom .sv_col_img       { object-position: center bottom; }
.sv_col_image_focal_left .sv_col_img         { object-position: left center; }
.sv_col_image_focal_right .sv_col_img        { object-position: right center; }
.sv_col_image_focal_top_left .sv_col_img     { object-position: left top; }
.sv_col_image_focal_top_right .sv_col_img    { object-position: right top; }
.sv_col_image_focal_bottom_left .sv_col_img  { object-position: left bottom; }
.sv_col_image_focal_bottom_right .sv_col_img { object-position: right bottom; }


/* ── Column Button (Batch 8H) ───────────────────────────────────
   Optional per-text-column button. Reuses the global .btn; only
   spacing is block-specific. Accent-background contrast is handled
   with the block-level CTA contrast rules below. */

.sv_col_ctas {
    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);
}

/* Batch 8H D1 fix: Dark's light-text rules apply only when all rows
   share one background (.sv_mode_connected), the only layout where
   .sv_variant_dark actually paints the dark panel. Before this, they
   also matched the each-row layout (.sv_mode_separated), turning text
   white on the rows' default white background. :where() adds zero
   specificity, so these rules keep their original 2-class weight and
   the Background Mode rules further below still win exactly as before. */
.sv_variant_dark:where(.sv_mode_connected) .sv_header_heading,
.sv_variant_dark:where(.sv_mode_connected) .sv_col_heading {
    color: var(--color-text-inverse);
}

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

/* WYSIWYG Editor Consistency and Contrast — a "No color" heading saved
   inside .sv_col_body otherwise falls back to the global h1-h6 rule
   (style.css §4b, --color-primary), unreadable on this dark background.
   p/li already inherit the wrapper's color (below, §Columns); headings
   need their own rule since inherit here would give them the paragraph
   (inverse-soft) tone instead of a true heading tone. */
.sv_variant_dark:where(.sv_mode_connected) .sv_col_body h1, .sv_variant_dark:where(.sv_mode_connected) .sv_col_body h2,
.sv_variant_dark:where(.sv_mode_connected) .sv_col_body h3, .sv_variant_dark:where(.sv_mode_connected) .sv_col_body h4,
.sv_variant_dark:where(.sv_mode_connected) .sv_col_body h5, .sv_variant_dark:where(.sv_mode_connected) .sv_col_body h6 {
    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 */ }


/* ── Section Background Mode (Batch 8F Round 1) ──────────────
   Split View's own Theme-Default state is light text on a light
   background (.sv_panel's default --color-bg; .sv_header_heading /
   .sv_col_heading default to --color-primary; .sv_col_body to
   --color-text) — the OPPOSITE starting point from Hero/CTA Banner/
   Zone Band. Dark and Accent semantic modes therefore need the INVERSE
   flip, mirroring the existing .sv_variant_dark rules above exactly.
   Custom mode's explicit Light/Dark text-treatment field drives the
   matching text class the same way.

   Corrected per Codex's defect 2: Background/Alternate/Custom-Dark
   cannot just "rely on the existing default and add no rule" — this
   block can ALREADY be sitting inside an existing dark context when a
   Background Mode choice is made: the overall section_variant can be
   "dark" (.sv_variant_dark, above), or — in Separated mode — the row's
   or header's OWN pre-existing Background-treatment select can be "Dark"
   (producing the bare .sv_bg_dark class on .sv_header_panel/
   .sv_row_panel, further below in this file, which already carries its
   own heading/body/WYSIWYG-heading color rules). Both are real,
   independent fields an editor can set at the same time as a new
   Background Mode choice — not hypothetical. Relying on "no rule, so
   the default wins" meant the OLD dark-context rule — unconditional,
   not scoped to this new system at all — stayed the only matching rule
   and kept painting inverse text over what was now a light background.
   Every selector below is therefore an explicit, same-specificity-class
   pair with the Dark/Accent/text-light rules above it (3 classes each:
   the structural element + the new mode class + the target), which
   beats the 2-class .sv_variant_dark / .sv_bg_dark rules by specificity
   alone, regardless of source order — not a reliance on "no competing
   rule exists".

   The connected-panel selectors are deliberately compounded with
   .sv_mode_connected: the bare class name this region uses (sv_bg_dark,
   sv_bg_background, etc. — matching the sv_bg_mode field's own name) is
   the same bare name Separated mode's PRE-EXISTING, unrelated Header/Row
   Background treatment selects already produce on .sv_header_panel/
   .sv_row_panel. Without the .sv_mode_connected compound, these rules
   would also match a Separated-mode header/row that happens to have its
   own treatment select set to the same word — a real block, not a
   hypothetical one — silently changing that pre-existing, unrelated
   feature's behavior. The Separated-header and row selectors further
   below use their own distinctly-named classes (sv_header_bg_*,
   sv_row_bg_*) and need no such compounding, since those names don't
   already exist anywhere else in this file. */

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

.sv_mode_connected.sv_bg_dark .sv_col_body,
.sv_mode_connected.sv_bg_accent .sv_col_body,
.sv_mode_connected.sv_text_light .sv_col_body {
    color: var(--color-text-inverse-soft);
}

/* Connected panel — force NORMAL text even when an existing Dark
   section_variant is also active (the cascade fix). */
.sv_mode_connected.sv_bg_background .sv_header_heading,
.sv_mode_connected.sv_bg_background .sv_col_heading,
.sv_mode_connected.sv_bg_alt_background .sv_header_heading,
.sv_mode_connected.sv_bg_alt_background .sv_col_heading,
.sv_mode_connected.sv_text_dark .sv_header_heading,
.sv_mode_connected.sv_text_dark .sv_col_heading {
    color: var(--color-primary);
}

.sv_mode_connected.sv_bg_background .sv_col_body,
.sv_mode_connected.sv_bg_alt_background .sv_col_body,
.sv_mode_connected.sv_text_dark .sv_col_body {
    color: var(--color-text);
}

/* Connected panel — WYSIWYG "No color" headings inside .sv_col_body.
   Same reasoning as the existing .sv_variant_dark / .sv_bg_dark h1-h6
   rules elsewhere in this file: a "No color" heading saved inside
   .sv_col_body otherwise falls back to the global h1-h6 rule
   (style.css §4b, --color-primary), which is wrong in both directions
   here depending on which mode is active. p/li already inherit the
   wrapper's color; headings need their own rule either way. */
.sv_mode_connected.sv_bg_dark .sv_col_body h1, .sv_mode_connected.sv_bg_dark .sv_col_body h2, .sv_mode_connected.sv_bg_dark .sv_col_body h3,
.sv_mode_connected.sv_bg_dark .sv_col_body h4, .sv_mode_connected.sv_bg_dark .sv_col_body h5, .sv_mode_connected.sv_bg_dark .sv_col_body h6,
.sv_mode_connected.sv_bg_accent .sv_col_body h1, .sv_mode_connected.sv_bg_accent .sv_col_body h2, .sv_mode_connected.sv_bg_accent .sv_col_body h3,
.sv_mode_connected.sv_bg_accent .sv_col_body h4, .sv_mode_connected.sv_bg_accent .sv_col_body h5, .sv_mode_connected.sv_bg_accent .sv_col_body h6,
.sv_mode_connected.sv_text_light .sv_col_body h1, .sv_mode_connected.sv_text_light .sv_col_body h2, .sv_mode_connected.sv_text_light .sv_col_body h3,
.sv_mode_connected.sv_text_light .sv_col_body h4, .sv_mode_connected.sv_text_light .sv_col_body h5, .sv_mode_connected.sv_text_light .sv_col_body h6 {
    color: var(--color-text-inverse);
}

.sv_mode_connected.sv_bg_background .sv_col_body h1, .sv_mode_connected.sv_bg_background .sv_col_body h2, .sv_mode_connected.sv_bg_background .sv_col_body h3,
.sv_mode_connected.sv_bg_background .sv_col_body h4, .sv_mode_connected.sv_bg_background .sv_col_body h5, .sv_mode_connected.sv_bg_background .sv_col_body h6,
.sv_mode_connected.sv_bg_alt_background .sv_col_body h1, .sv_mode_connected.sv_bg_alt_background .sv_col_body h2, .sv_mode_connected.sv_bg_alt_background .sv_col_body h3,
.sv_mode_connected.sv_bg_alt_background .sv_col_body h4, .sv_mode_connected.sv_bg_alt_background .sv_col_body h5, .sv_mode_connected.sv_bg_alt_background .sv_col_body h6,
.sv_mode_connected.sv_text_dark .sv_col_body h1, .sv_mode_connected.sv_text_dark .sv_col_body h2, .sv_mode_connected.sv_text_dark .sv_col_body h3,
.sv_mode_connected.sv_text_dark .sv_col_body h4, .sv_mode_connected.sv_text_dark .sv_col_body h5, .sv_mode_connected.sv_text_dark .sv_col_body h6 {
    color: var(--color-primary);
}

/* Connected header (Island/Flow card) — sv_header_connected_bg_* and
   sv_header_connected_text_* are both on .sv_header itself. */
.sv_header.sv_header_connected_bg_dark .sv_header_heading,
.sv_header.sv_header_connected_bg_accent .sv_header_heading,
.sv_header.sv_header_connected_text_light .sv_header_heading {
    color: var(--color-text-inverse);
}

.sv_header.sv_header_connected_bg_background .sv_header_heading,
.sv_header.sv_header_connected_bg_alt_background .sv_header_heading,
.sv_header.sv_header_connected_text_dark .sv_header_heading {
    color: var(--color-primary);
}

/* Separated header panel */
.sv_header_panel.sv_header_bg_dark .sv_header_heading,
.sv_header_panel.sv_header_bg_accent .sv_header_heading,
.sv_header_panel.sv_header_bg_text_light .sv_header_heading {
    color: var(--color-text-inverse);
}

/* Separated header panel — force NORMAL text even when the header's own
   PRE-EXISTING Background-treatment select (further below in this file)
   is also set to Dark/Gradient, producing the bare .sv_bg_dark class on
   this same element. */
.sv_header_panel.sv_header_bg_background .sv_header_heading,
.sv_header_panel.sv_header_bg_alt_background .sv_header_heading,
.sv_header_panel.sv_header_bg_text_dark .sv_header_heading {
    color: var(--color-primary);
}

/* Separated row panel */
.sv_row_panel.sv_row_bg_dark .sv_col_heading,
.sv_row_panel.sv_row_bg_accent .sv_col_heading,
.sv_row_panel.sv_row_text_light .sv_col_heading {
    color: var(--color-text-inverse);
}

.sv_row_panel.sv_row_bg_dark .sv_col_body,
.sv_row_panel.sv_row_bg_accent .sv_col_body,
.sv_row_panel.sv_row_text_light .sv_col_body {
    color: var(--color-text-inverse-soft);
}

/* Separated row panel — force NORMAL text even when the row's own
   PRE-EXISTING Background-treatment select is also set to Dark/Gradient
   (the bare .sv_bg_dark class, same element, further below). */
.sv_row_panel.sv_row_bg_background .sv_col_heading,
.sv_row_panel.sv_row_bg_alt_background .sv_col_heading,
.sv_row_panel.sv_row_text_dark .sv_col_heading {
    color: var(--color-primary);
}

.sv_row_panel.sv_row_bg_background .sv_col_body,
.sv_row_panel.sv_row_bg_alt_background .sv_col_body,
.sv_row_panel.sv_row_text_dark .sv_col_body {
    color: var(--color-text);
}

/* Separated row panel — WYSIWYG "No color" headings inside .sv_col_body,
   both directions, same reasoning as the Connected-panel rules above. */
.sv_row_panel.sv_row_bg_dark .sv_col_body h1, .sv_row_panel.sv_row_bg_dark .sv_col_body h2, .sv_row_panel.sv_row_bg_dark .sv_col_body h3,
.sv_row_panel.sv_row_bg_dark .sv_col_body h4, .sv_row_panel.sv_row_bg_dark .sv_col_body h5, .sv_row_panel.sv_row_bg_dark .sv_col_body h6,
.sv_row_panel.sv_row_bg_accent .sv_col_body h1, .sv_row_panel.sv_row_bg_accent .sv_col_body h2, .sv_row_panel.sv_row_bg_accent .sv_col_body h3,
.sv_row_panel.sv_row_bg_accent .sv_col_body h4, .sv_row_panel.sv_row_bg_accent .sv_col_body h5, .sv_row_panel.sv_row_bg_accent .sv_col_body h6,
.sv_row_panel.sv_row_text_light .sv_col_body h1, .sv_row_panel.sv_row_text_light .sv_col_body h2, .sv_row_panel.sv_row_text_light .sv_col_body h3,
.sv_row_panel.sv_row_text_light .sv_col_body h4, .sv_row_panel.sv_row_text_light .sv_col_body h5, .sv_row_panel.sv_row_text_light .sv_col_body h6 {
    color: var(--color-text-inverse);
}

.sv_row_panel.sv_row_bg_background .sv_col_body h1, .sv_row_panel.sv_row_bg_background .sv_col_body h2, .sv_row_panel.sv_row_bg_background .sv_col_body h3,
.sv_row_panel.sv_row_bg_background .sv_col_body h4, .sv_row_panel.sv_row_bg_background .sv_col_body h5, .sv_row_panel.sv_row_bg_background .sv_col_body h6,
.sv_row_panel.sv_row_bg_alt_background .sv_col_body h1, .sv_row_panel.sv_row_bg_alt_background .sv_col_body h2, .sv_row_panel.sv_row_bg_alt_background .sv_col_body h3,
.sv_row_panel.sv_row_bg_alt_background .sv_col_body h4, .sv_row_panel.sv_row_bg_alt_background .sv_col_body h5, .sv_row_panel.sv_row_bg_alt_background .sv_col_body h6,
.sv_row_panel.sv_row_text_dark .sv_col_body h1, .sv_row_panel.sv_row_text_dark .sv_col_body h2, .sv_row_panel.sv_row_text_dark .sv_col_body h3,
.sv_row_panel.sv_row_text_dark .sv_col_body h4, .sv_row_panel.sv_row_text_dark .sv_col_body h5, .sv_row_panel.sv_row_text_dark .sv_col_body h6 {
    color: var(--color-primary);
}

/* ── Connected-panel CTA contrast (Codex correction pass 2) ───────
   .sv_cta_primary/.sv_cta_secondary inherit the global .btn/.btn-outline
   (style.css §6b) — accent fill + white text, and transparent + accent
   border/text, respectively. Neither was tuned for a Connected panel
   whose OWN background is now Accent: the primary's accent fill blends
   into it, and — unlike Hero/CTA Banner's white-bordered secondary,
   which already reads fine on an accent panel — Split View's secondary
   is accent-BORDERED/accent-TEXT by default, so it blends too (accent
   border/text on an accent background). Dark and Custom + Light Text
   are left untouched — the existing accent-on-dark combination already
   reads fine in both buttons, matching Hero/CTA Banner's rule.

   Scoped to .sv_mode_connected so Separated mode's own .sv_ctas_separated
   buttons — rendered directly under the outer <section class="...
   sv_mode_separated">, never inside a Connected panel — are structurally
   unreachable by this selector; .sv_bg_accent is never present on a
   Separated-mode section in the first place, so this is belt-and-
   suspenders, not the only thing preventing the cross-contamination. */

/* Batch 8H accessibility correction: resting border changed from
   --color-bg-dark to --color-text-inverse. The dark fill + dark border
   measured 2.63:1 against the Accent panel (default tokens), below the
   WCAG 1.4.11 3:1 boundary; the inverse border measures 6.62:1. Same
   fix as the Batch 8H column button (.sv_col_cta) below. */
.sv_mode_connected.sv_bg_accent .sv_cta_primary {
    background-color: var(--color-bg-dark);
    border-color: var(--color-text-inverse);
    color: var(--color-text-inverse);
}

.sv_mode_connected.sv_bg_accent .sv_cta_primary:hover {
    background-color: var(--color-text-inverse);
    border-color: var(--color-text-inverse);
    color: var(--color-primary);
}

.sv_mode_connected.sv_bg_accent .sv_cta_secondary {
    border-color: var(--color-text-inverse);
    color: var(--color-text-inverse);
}

.sv_mode_connected.sv_bg_accent .sv_cta_secondary:hover {
    background-color: var(--color-text-inverse);
    color: var(--color-primary);
}

/* Batch 8H accessibility correction: style.css §12a outlines
   .btn:focus-visible in --color-accent — identical to the Accent panel,
   so keyboard focus on either block CTA was invisible (measured 1.00:1).
   Only the outline COLOR is overridden; style/width/offset stay §12a's.
   Same treatment as the column button (.sv_col_cta) below. */
.sv_mode_connected.sv_bg_accent .sv_cta_primary:focus-visible,
.sv_mode_connected.sv_bg_accent .sv_cta_secondary:focus-visible {
    outline-color: var(--color-text-inverse);
}

/* ── Column-button Accent contrast (Batch 8H) ───────────────────
   Same risk as .sv_cta_primary above — the global .btn accent fill
   blends into an Accent background — in two contexts: the Connected
   panel set to Accent, and a Separated row panel set to Accent.
   Focus: style.css §12a outlines .btn:focus-visible in
   --color-accent, invisible on an Accent background, so only the
   outline COLOR is overridden here; style/width/offset still come
   from §12a. */

/* Resting border is --color-text-inverse, not --color-bg-dark: the
   dark fill alone is under 3:1 against an Accent panel (2.63:1 with
   the default tokens), so the inverse border gives the button a
   boundary that clears WCAG 1.4.11 non-text contrast. */
.sv_mode_connected.sv_bg_accent .sv_col_cta,
.sv_row_panel.sv_row_bg_accent .sv_col_cta {
    background-color: var(--color-bg-dark);
    border-color: var(--color-text-inverse);
    color: var(--color-text-inverse);
}

.sv_mode_connected.sv_bg_accent .sv_col_cta:hover,
.sv_row_panel.sv_row_bg_accent .sv_col_cta:hover {
    background-color: var(--color-text-inverse);
    border-color: var(--color-text-inverse);
    color: var(--color-primary);
}

.sv_mode_connected.sv_bg_accent .sv_col_cta:focus-visible,
.sv_row_panel.sv_row_bg_accent .sv_col_cta:focus-visible {
    outline-color: var(--color-text-inverse);
}


/* ── System Stack Variant ────────────────────────────────────── */

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

.sv_system_stack_row {
    align-items: flex-start;
}

.sv_system_pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.sv_system_pill {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.sv_system_stack_blueprint {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.sv_system_stack_body {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.sv_system_stack_body p {
    margin: 0;
}

.sv_system_stack_items {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.sv_system_stack_item {
    padding-left: var(--space-4);
    border-left: 2px solid var(--color-border);
}

.sv_system_stack_content {
    /* CSS hook — no base styles. Apply per-project overrides here. */
}

.sv_stack_item_title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--weight-semi);
    color: var(--color-primary);
    margin: 0 0 var(--space-1) 0;
}

.sv_stack_item_desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

/* ── System Stack text contrast (Codex correction pass 2) ────────
   System Stack's base rules above assume the variant's default light
   panel (.sv_variant_system_stack .sv_panel, above, forces
   --color-bg) — .sv_system_stack_body/.sv_stack_item_desc are muted
   dark text, .sv_stack_item_title is primary dark text, none of them
   were reachable by the Connected-panel Background Mode system this
   round added, so choosing Dark/Accent/Custom+Light left this muted/
   dark text sitting unreadable on top of the new dark background.

   .sv_system_pill is deliberately left untouched: it carries its own
   opaque --color-bg-alt fill plus a --color-border outline, so it
   already reads as a self-contained light badge regardless of what
   the panel behind it is — it doesn't fail contrast, so there's
   nothing to preserve it FROM per §8F.0's "preserve existing design
   unless it genuinely fails" standard. .sv_system_stack_item's
   --color-border left border is the same case: #E0E0E0 against the
   dark background still reads as a visible line, not a vanished one. */

.sv_mode_connected.sv_bg_dark .sv_system_stack_body,
.sv_mode_connected.sv_bg_dark .sv_system_stack_body p,
.sv_mode_connected.sv_bg_dark .sv_stack_item_desc,
.sv_mode_connected.sv_bg_accent .sv_system_stack_body,
.sv_mode_connected.sv_bg_accent .sv_system_stack_body p,
.sv_mode_connected.sv_bg_accent .sv_stack_item_desc,
.sv_mode_connected.sv_text_light .sv_system_stack_body,
.sv_mode_connected.sv_text_light .sv_system_stack_body p,
.sv_mode_connected.sv_text_light .sv_stack_item_desc {
    color: var(--color-text-inverse-soft);
}

.sv_mode_connected.sv_bg_dark .sv_stack_item_title,
.sv_mode_connected.sv_bg_accent .sv_stack_item_title,
.sv_mode_connected.sv_text_light .sv_stack_item_title {
    color: var(--color-text-inverse);
}

.sv_mode_connected.sv_bg_background .sv_system_stack_body,
.sv_mode_connected.sv_bg_background .sv_system_stack_body p,
.sv_mode_connected.sv_bg_background .sv_stack_item_desc,
.sv_mode_connected.sv_bg_alt_background .sv_system_stack_body,
.sv_mode_connected.sv_bg_alt_background .sv_system_stack_body p,
.sv_mode_connected.sv_bg_alt_background .sv_stack_item_desc,
.sv_mode_connected.sv_text_dark .sv_system_stack_body,
.sv_mode_connected.sv_text_dark .sv_system_stack_body p,
.sv_mode_connected.sv_text_dark .sv_stack_item_desc {
    color: var(--color-text-muted);
}

.sv_mode_connected.sv_bg_background .sv_stack_item_title,
.sv_mode_connected.sv_bg_alt_background .sv_stack_item_title,
.sv_mode_connected.sv_text_dark .sv_stack_item_title {
    color: var(--color-primary);
}


/* ── 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-soft);
}

/* Same WYSIWYG heading-contrast fix as .sv_variant_dark above, for the
   Separated mode's per-row dark background. */
.sv_bg_dark .sv_col_body h1, .sv_bg_dark .sv_col_body h2, .sv_bg_dark .sv_col_body h3,
.sv_bg_dark .sv_col_body h4, .sv_bg_dark .sv_col_body h5, .sv_bg_dark .sv_col_body h6 {
    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;
        gap: var(--space-8);
    }

    /* Batch 8H — stacked columns always take the full row width.
       Once the row is column-direction, align-items is the horizontal
       axis, so without this a column sizes to its own content.
       Scoped to the positional columns $sv_render_column() outputs, so
       System Stack's .sv_system_stack_intro / _blueprint columns keep
       their pre-batch mobile layout. */
    .sv_col_1,
    .sv_col_2 {
        width: 100%;
    }

    /* Defensive only: drop the desktop width ratio so no basis is
       read as a height in column direction. */
    .sv_row_width_left_larger .sv_col,
    .sv_row_width_right_larger .sv_col {
        flex: 1 1 auto;
    }

    /* Vertical Alignment is a desktop concept — restore the base. */
    .sv_row_align_top,
    .sv_row_align_bottom {
        align-items: center;
    }

    .sv_row_order_col_2_first .sv_col_2 {
        order: -1;
    }

    /* Fill Column has no row height to fill once stacked — fall back
       to Landscape's stable aspect-ratio treatment. */
    .sv_col_image_display_fill {
        align-self: auto;
    }

    .sv_col_image_display_fill .sv_col_img {
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

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

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

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

    .sv_ctas {
        flex-direction: column;
    }

    .sv_variant_system_stack .sv_system_stack_row {
        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);
    }
}

/* ── Small label above the title (Batch 8H, BATCH_8_PLAN.md §28) ──
   Optional; same small-caps style as the theme's other small labels
   (style.css §10c). Its color follows the title's color in every
   background context below, so it stays as readable as the title. */
.sv_header_label {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary);
    margin: 0 0 var(--space-3) 0;
}

/* Card title style: the title container is a flex row, so with a label it
   becomes a column; the label and card keep the chosen title position. */
.sv_header_island.sv_header_has_label {
    flex-direction: column;
    align-items: flex-start;
}

.sv_header_align_center.sv_header_island.sv_header_has_label { align-items: center; }
.sv_header_align_right.sv_header_island.sv_header_has_label  { align-items: flex-end; }

/* Label color — mirrors every title color rule above, in the same order. */
.sv_variant_dark:where(.sv_mode_connected) .sv_header_label {
    color: var(--color-text-inverse);
}

.sv_mode_connected.sv_bg_dark .sv_header_label,
.sv_mode_connected.sv_bg_accent .sv_header_label,
.sv_mode_connected.sv_text_light .sv_header_label {
    color: var(--color-text-inverse);
}

.sv_mode_connected.sv_bg_background .sv_header_label,
.sv_mode_connected.sv_bg_alt_background .sv_header_label,
.sv_mode_connected.sv_text_dark .sv_header_label {
    color: var(--color-primary);
}

.sv_header.sv_header_flow.sv_header_connected_bg_dark .sv_header_label,
.sv_header.sv_header_flow.sv_header_connected_bg_accent .sv_header_label,
.sv_header.sv_header_flow.sv_header_connected_text_light .sv_header_label {
    color: var(--color-text-inverse);
}

.sv_header.sv_header_flow.sv_header_connected_bg_background .sv_header_label,
.sv_header.sv_header_flow.sv_header_connected_bg_alt_background .sv_header_label,
.sv_header.sv_header_flow.sv_header_connected_text_dark .sv_header_label {
    color: var(--color-primary);
}

.sv_header_panel.sv_header_bg_dark .sv_header_label,
.sv_header_panel.sv_header_bg_accent .sv_header_label,
.sv_header_panel.sv_header_bg_text_light .sv_header_label {
    color: var(--color-text-inverse);
}

.sv_header_panel.sv_header_bg_background .sv_header_label,
.sv_header_panel.sv_header_bg_alt_background .sv_header_label,
.sv_header_panel.sv_header_bg_text_dark .sv_header_label {
    color: var(--color-primary);
}

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

/* ── Label look: Rounded tag (Batch 8H, BATCH_8_PLAN.md §28) ──────
   Added only when the editor picks Label look → Rounded tag; Plain text
   (the default) adds nothing, so existing sections look the same. Uses the
   label's own color (currentColor), so it reads on light and dark
   backgrounds. The first border line is the fallback for browsers without
   color-mix(). No blur, glow or animation.
   BOILERPLATE NOTE: the same rule lives in style.css §10c. Kept here so
   this block works when copied to a new project on its own; on a live
   project with §10c in place this copy can be removed. */
.sv_header_label.sv_label_pill {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid currentColor;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    line-height: var(--leading-tight);
}