/* === 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-color: var(--ssla-bg-color, transparent);
  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 ──
   v3.54.27 — SHOW the operator's image; stop cropping it to a 4:3 hole.
   Glenn 2026-08-04: "the image gets cropped … we probably should set max width
   and height but not crop too much, it will make images hard to manage for
   users."

   Before: the column forced `aspect-ratio: 4/3` and the image filled it with
   `object-fit: cover`, so ANY image that wasn't 4:3 lost its edges — and the
   operator had no way to influence which edges. A tall UI screenshot (the live
   simpliment.co home Hub panel) lost its top and bottom. Managing that means
   pre-cropping every asset outside the product to guess our box, which is
   exactly the burden Glenn is describing.

   Now: the box takes its height FROM the image (height:auto), so the natural
   aspect ratio is preserved and nothing is cut. `max-height` is the safety rail
   that keeps a very tall image from running away with the layout; when it bites,
   `object-fit: contain` letterboxes rather than crops — capped, never cut. The
   4:3 shape is kept ONLY for the empty placeholder, so the drop target still
   reads as a media well in edit mode. */
.ssla-g-content-split-media {
  width: 100%;
  overflow: hidden;
}
.ssla-g-content-split-media:empty {
  aspect-ratio: 4 / 3;
  background: var(--g-content-split-media-line);
}
/* v3.54.27 — media fit now comes from the UNIVERSAL rule in 0-shared.css
   (.ssla-media-img, token-driven: height:auto + max-height + contain). The
   per-section height:100%/object-fit:cover that used to live here out-specified
   it and re-introduced the crop, so it is removed rather than left to fight. */
.ssla-g-content-split-media { --ssla-media-max-height: var(--g-content-split-media-max-height); }
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 {
  /* v3.24.44 — when media is on the LEFT the copy sits on the RIGHT, so default
     its alignment to right ("content follows its side"). The explicit
     --ssla-text-align control still wins when an author sets one. */
  text-align: var(--ssla-text-align, right); 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-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(--paint-section-padding, var(--brand-section-padding, 80px));
  --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);
  /* v3.54.27 — safety rail, not a crop box. The media sizes to its own aspect
     ratio; this only stops a very tall asset from dominating the viewport, and
     it letterboxes (contain) rather than cutting when it applies. Tunable per
     preset without touching section CSS. */
  --g-content-split-media-max-height: 620px;
}