/* === g-content-split — greenfield canonical, slot-contract form === */
/* Phase 0.1.f2 — rewritten per preset-architecture-v1.md §3.3 + §3.5.       */

/* ── Base layout ── */
.ssla-g-content-split {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--g-content-split-bg);
  color:      var(--g-content-split-fg);
}
.ssla-g-content-split-inner {
  max-width: var(--g-content-split-content-max-width);
  margin: 0 auto;
  padding: var(--g-content-split-section-padding) 48px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--g-content-split-media-side-gap);
  align-items: center;
}

/* ── Fullbleed ── */
.alignfull .ssla-g-content-split-inner {
  max-width: 100%;
  padding-left: 48px;
  padding-right: 48px;
}

/* ── Text column ── */
.ssla-g-content-split-eyebrow {
  color:           var(--g-content-split-eyebrow);
  font-size:       var(--g-content-split-eyebrow-size);
  letter-spacing:  var(--g-content-split-eyebrow-letter);
  font-weight:     800;
  text-transform:  uppercase;
  margin:          0 0 20px;
}
.ssla-g-content-split-heading {
  font-family:    var(--g-content-split-heading-family);
  font-size:      var(--g-content-split-heading-size);
  font-weight:    var(--g-content-split-heading-weight);
  letter-spacing: var(--g-content-split-heading-letter);
  line-height:    1.15;
  margin:         0 0 24px;
}
.ssla-g-content-split-body {
  font-family: var(--g-content-split-body-family);
  font-size:   var(--g-content-split-body-size);
  line-height: var(--g-content-split-body-line-height);
  margin:      0 0 32px;
}
.ssla-g-content-split-body p { margin: 0 0 14px; }
.ssla-g-content-split-body p:last-child { margin-bottom: 0; }

/* ── CTA ── */
.ssla-g-content-split-cta {
  display: inline-block;
  background:      var(--ssla-button-fill, var(--g-content-split-cta-bg));
  color:           var(--ssla-button-text, var(--g-content-split-cta-fg));
  padding:         var(--g-content-split-button-padding);
  border-radius:   var(--g-content-split-button-radius);
  font-weight:     800;
  font-size:       13px;
  letter-spacing:  2px;
  text-transform:  uppercase;
  text-decoration: none;
}
.ssla-g-content-split-cta:empty { display: none; }

/* ── Media column ── */
.ssla-g-content-split-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--g-content-split-media-line);
  overflow: hidden;
}
.ssla-g-content-split-media img,
.ssla-g-content-split-media video,
.ssla-g-content-split-media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.ssla-ov-editing .ssla-g-content-split-media[data-required="1"]:empty {
  border: 2px dashed var(--g-content-split-media-line);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Structural variant: media_side (per §3.4) ── */
.ssla-g-content-split--media-side-left .ssla-g-content-split-inner {
  grid-template-areas: "media text";
}
.ssla-g-content-split--media-side-left .ssla-g-content-split-text {
  text-align: var(--ssla-text-align, left); /* v3.18.32 f3.text-align */ grid-area: text; }
.ssla-g-content-split--media-side-left .ssla-g-content-split-media { grid-area: media; }

/* ── Structural variant: density (per §3.4) ── */
.ssla-g-content-split--density-minimal .ssla-g-content-split-eyebrow,
.ssla-g-content-split--density-minimal .ssla-g-content-split-body,
.ssla-g-content-split--density-minimal .ssla-g-content-split-cta { display: none; }
.ssla-g-content-split--density-standard .ssla-g-content-split-eyebrow,
.ssla-g-content-split--density-standard .ssla-g-content-split-cta { display: none; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .ssla-g-content-split-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 60px 24px;
  }
  .ssla-g-content-split--media-side-left .ssla-g-content-split-inner {
    grid-template-areas: none;
  }
}

/* ═══ Skeleton state per §3.5 ═══ */
.ssla-section.ssla-g-content-split {
  --g-content-split-bg:               transparent;
  --g-content-split-fg:               var(--brand-fg);
  --g-content-split-eyebrow:          var(--brand-accent);
  --g-content-split-cta-bg:           var(--brand-accent);
  --g-content-split-cta-fg:           var(--brand-bg);
  --g-content-split-heading-family:   var(--brand-heading-family);
  --g-content-split-heading-size:     var(--brand-h2-size-clamp);
  --g-content-split-heading-weight:   var(--brand-heading-weight);
  --g-content-split-heading-letter:   var(--brand-letter-spacing-h2);
  --g-content-split-body-family:      var(--brand-body-family);
  --g-content-split-body-size:        var(--brand-body-size);
  --g-content-split-body-line-height: var(--brand-body-line-height);
  --g-content-split-eyebrow-size:     var(--brand-eyebrow-size);
  --g-content-split-eyebrow-letter:   var(--brand-letter-spacing-eyebrow);
  --g-content-split-section-padding:  var(--brand-section-padding);
  --g-content-split-content-max-width:var(--brand-content-max-width);
  --g-content-split-button-padding:   var(--brand-button-padding);
  --g-content-split-button-radius:    var(--brand-button-radius);
  --g-content-split-media-side-gap:   var(--brand-gutter);
  --g-content-split-media-line:       var(--brand-line);
}