/* split_panel block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   split panel with checklist + image badge */

.split-panel__layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2.4rem; align-items: start; }
.split-panel--image-left .split-panel__layout { grid-template-columns: 1fr 1.1fr; }
.split-panel--align-center .split-panel__layout { align-items: center; }
.split-panel__title { margin-bottom: .7rem; }
.split-panel__body { margin-bottom: 1.1rem; }
.split-panel__checklist { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.1rem; }
.split-panel__checklist-item { display: flex; gap: .7rem; font-size: var(--fs-min); line-height: 1.55; color: var(--ink); }
.split-panel__check-icon { flex: 0 0 auto; color: var(--em-color); display: flex; margin-top: .15rem; }
.split-panel__highlight { border-left: 6px solid var(--accent); background: var(--white); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.split-panel__highlight-text { font-size: var(--fs-min); font-weight: 700; color: var(--navy); }
.split-panel__image-wrap { position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.split-panel__image-wrap > div:first-child { aspect-ratio: 16 / 10; background: repeating-linear-gradient(135deg, var(--ph-stripe-a) 0 9px, var(--ph-stripe-b) 9px 18px); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); color: var(--ph-ink); }
.split-panel__image-badge { position: absolute; left: 12px; bottom: 12px; background: var(--white); border-radius: var(--radius-sm); padding: .6rem .9rem; line-height: 1.15; }
.split-panel__image-badge strong { display: block; font-weight: 700; font-size: var(--fs-min); color: var(--navy); }
.split-panel__image-badge span { font-size: var(--fs-min); color: var(--muted); }

/* Stat-cards visual variant. base.css never defined .stat-card, so the values
   rendered as plain unstyled text. */
.split-panel__stat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stat-card { background: var(--white); border: 1px solid var(--line); border-top: var(--card-edge) solid var(--accent); border-radius: var(--radius-sm); padding: 1.4rem 1.5rem; }
.stat-card--wide { grid-column: 1 / -1; }
.stat-card--navy { background: var(--navy); border-color: var(--navy); }
.stat-card--navy .stat-card__value { color: var(--accent-on-dark); }
.stat-card--navy .stat-card__label { color: rgba(var(--on-dark-rgb), .8); }
/* The label token here has to partner --accent, not --btn-accent-bg. On nlc those
   are different colours (magenta vs teal), so --btn-accent-text put navy on
   magenta at 2.01:1. --accent-text is the label defined to read on --accent. */
.stat-card--accent { background: var(--accent); border-color: var(--accent); }
.stat-card--accent .stat-card__value, .stat-card--accent .stat-card__label { color: var(--accent-text); }
.stat-card__value { font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; line-height: 1; color: var(--em-color); }
.stat-card__label { font-size: var(--fs-min); color: var(--muted); margin-top: .3rem; }

/* On-dark grounds. The block's `navy` and `dark` options used to emit
   split-panel--bg-navy / --bg-dark, which had no CSS, so the section never
   actually went dark and nothing here mattered. Now that those values map to
   the real .bg-navy / .bg-dark-blue grounds, the copy column has to survive
   them: the checklist is --ink, the highlight is a white panel with --navy
   text, and both would be near-invisible. Same treatment as .pullout in
   pagebuilder/content/content.css. */
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) .split-panel__checklist-item { color: rgba(var(--on-dark-rgb), .86); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) .split-panel__check-icon { color: var(--accent-on-dark); }
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) .split-panel__highlight { background: rgba(var(--on-dark-rgb), .08); border-left-color: var(--accent-on-dark); }
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) .split-panel__highlight-text { color: var(--white); }

@media (max-width: 64em) { .split-panel__layout, .split-panel--image-left .split-panel__layout { grid-template-columns: 1fr; } }

/* visual_type: none. The template sets --single deliberately, but no rule
   existed, so the base two-column grid stayed and left an empty second column
   at desktop; it only collapsed below 64em via the mobile rule. This is the
   line that makes it collapse at every width, and it also fixes every page
   that already stored `none`. */
.split-panel--single .split-panel__layout { grid-template-columns: 1fr; }