/* === content-split-deep === */
/* v3.12.26 (#19) — Grid breakage fix.
 *
 * Glenn 2026-05-21 walk: visual column rendering below text column,
 * entire .csd-inner expanding to 2087px wide.
 *
 * Root cause: section template had `data-ssla-field="reverse"` on
 * the .csd structural wrapper. Made the wrapper contenteditable.
 * Any text edit in the section (including the body field) saved
 * to `reverse` field. On re-render, the {{reverse}} substitution
 * injected the corrupted text INTO the class attribute:
 *   `<div class="csd-innerThree Simple Steps 1. We do the analysis...">`
 * Broken class meant .csd-inner CSS rule (max-width, grid) never
 * matched, so the container expanded uncontrolled.
 *
 * Two-part fix:
 *   1. PHP template: removed data-ssla-field="reverse" from .csd
 *      (no more contenteditable on the wrapper).
 *   2. PHP template + CSS: moved reverse toggle from class concat
 *      to data-attribute. Even if a page has corrupted `reverse`
 *      data from pre-v3.12.26 saves, the data-attribute receives
 *      the garbage cleanly without breaking the class. CSS branches
 *      on the attribute; non-matching values produce no rule match
 *      and the default (non-reversed) layout holds.
 *
 * Reverse toggle values:
 *   ''        — default (text-left, visual-right)
 *   'reverse' — flipped (visual-left, text-right)
 *   anything else — treated as default (CSS rule won't match)
 */
.csd{width:100%}
.csd-inner{max-width:1000px;margin:0 auto;padding:100px 48px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.csd-inner[data-csd-reverse="reverse"]{direction:rtl}
.csd-inner[data-csd-reverse="reverse"]>*{direction:ltr}
.csd-eyebrow{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--shell-accent,currentColor);margin-bottom:16px}
.csd-eyebrow:empty{display:none}
.csd h2{font-size:32px;font-weight:800;letter-spacing:-1px;color:var(--shell-h,currentColor);margin:0 0 16px}
.csd-body{font-size:15px;color:var(--shell-t,#1a1a1a);line-height:1.8}
.csd-body p{margin:0 0 16px}.csd-body p:last-child{margin-bottom:0}
.csd-body strong{color:var(--shell-h,currentColor)}
.csd-img{max-width:100%;height:auto;display:block;margin-bottom:24px}
.csd-img[src=""]{display:none;margin:0}
.csd-pillars{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.csd-pillar{padding:32px 16px;text-align:center}
.csd-pillar-icon{font-size:28px;font-weight:900;color:var(--pc);margin:0 0 12px;line-height:1}
.csd-pillar-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--pc);margin:0}
.csd-pillar:has(.csd-pillar-icon:empty){display:none}
/* v3.16.0 / Band 2a — pillar_style=stats variant.
 * When the variant attribute pillar_style=stats is set, the section wrapper
 * receives class .ssla-content-split-deep--pillar_style-stats. We re-style
 * the pillar icon as a large numeric stat value, and tighten the label
 * spacing to feel like a stat caption rather than a pillar tag. Pillars
 * still hide when empty (the :has(:empty) rule above continues to apply).
 */
.ssla-content-split-deep--pillar_style-stats .csd-pillar-icon{font-size:40px;font-weight:800;letter-spacing:-1px;margin:0 0 6px;line-height:1}
.ssla-content-split-deep--pillar_style-stats .csd-pillar-label{font-size:11px;letter-spacing:1.5px;margin:0;opacity:.85}
.ssla-content-split-deep--pillar_style-stats .csd-pillar{padding:24px 12px}
@media(max-width:768px){.csd-inner{grid-template-columns:1fr;gap:40px}.csd-inner.reverse{direction:ltr}}