/* === 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 ── */
/* v3.59.01 — fix M-O render gap: the universal ALIGNMENT control (§f3.text-align,
   text_align block attr) emits --ssla-text-align on the section root for every
   g-* section, but this section only ever consumed it inside the
   --media-side-left override below. The DEFAULT layout (media_side: right —
   text column on the left) had no rule reading the var at all, so Center/Right
   silently no-opped on every page that hadn't explicitly flipped media_side.
   Base rule below covers the default case; the --media-side-left override
   further down still wins there via higher specificity, unchanged. */
.ssla-g-content-split-text {
  text-align: var(--ssla-text-align, left);
}
.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:  var(--paint-eyebrow-case, 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);
  text-transform: var(--paint-heading-case-h2, none);
  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_style (LNCH-INBOX-027) ──
 * The overlay (play button + caption) is a SIBLING of .ssla-g-content-split-
 * -media, not nested inside it — nesting would make the media div never
 * :empty, breaking the drop-target placeholder styling above for every
 * other instance of this section. Hidden entirely unless video-teaser is
 * selected; stacked into the SAME grid cell as the media column via
 * matching grid-column/row (default) or grid-area (media-side-left, below)
 * so it visually overlays the photo without any absolute positioning. */
.ssla-g-content-split-video-overlay { display: none; }
.ssla-g-content-split--media-style-video-teaser .ssla-g-content-split-media,
.ssla-g-content-split--media-style-video-teaser .ssla-g-content-split-video-overlay {
  grid-column: 2;
  grid-row: 1;
}
/* The overlay editor's own field-wrapper class (.ssla-ov-field, added to
 * .ssla-g-content-split-media at runtime) sets position:relative on the
 * media div. A positioned sibling always paints ABOVE a static one,
 * regardless of DOM/grid source order — so without this, the overlay was
 * rendering fully correctly (right position, right colors, confirmed via
 * getComputedStyle) but invisibly, painted underneath the photo. Matching
 * position puts DOM order back in charge, so the later-in-DOM overlay
 * wins again. Confirmed live on rci.simpliment.co — this was NOT an
 * editor-only artifact, the published front-end had the identical bug. */
.ssla-g-content-split-video-overlay {
  position: relative;
}
/* Departs from the "never crop, height:auto" philosophy above ON PURPOSE —
 * video-teaser is a deliberate fixed-height poster panel, not a content
 * image, so it stretches to the row and covers rather than letterboxing. */
.ssla-g-content-split--media-style-video-teaser .ssla-g-content-split-inner {
  align-items: stretch;
  /* Flush two-tone panel look (colored text panel butting directly against
     the poster panel, no gutter between them) — the whole point of the
     pattern is reading as one seamless banner, not two separate blocks.
     Outer 48px page padding is untouched; only the gap BETWEEN the two
     columns collapses. */
  gap: 0;
}
.ssla-g-content-split--media-style-video-teaser .ssla-g-content-split-media {
  min-height: 500px;
  height: 100%;
}
.ssla-g-content-split--media-style-video-teaser .ssla-g-content-split-media img,
.ssla-g-content-split--media-style-video-teaser .ssla-g-content-split-media video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
.ssla-g-content-split--media-style-video-teaser .ssla-g-content-split-video-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 500px;
  background: var(--g-content-split-video-scrim);
  /* The overlay stacks on TOP of .ssla-g-content-split-media in the same
     grid cell (by design, so the scrim/button/caption paint over the
     photo) — but that also blocks clicks/drops reaching the media field's
     own upload target underneath it, both in the overlay editor and in
     Gutenberg. It's purely decorative except the caption text, so let
     clicks fall through by default and opt the caption itself back in. */
  pointer-events: none;
}
.ssla-g-content-split-video-caption {
  pointer-events: auto;
}
.ssla-g-content-split--media-style-video-teaser .ssla-g-content-split-text {
  padding: 48px;
}
.ssla-g-content-split-video-play {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ssla-button-fill, var(--g-content-split-cta-bg));
  color: #ffffff;
  flex-shrink: 0;
}
.ssla-g-content-split-video-caption {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.ssla-g-content-split-video-caption:empty { display: none; }

/* ── 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; }
.ssla-g-content-split--media-side-left .ssla-g-content-split-video-overlay { 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;
  }
  /* LNCH-INBOX-027 — the desktop rule pins media + overlay to grid-column:2,
     which would create a phantom empty 2nd column on this 1fr mobile grid.
     Collapse both back to column 1 (and grid-area:auto overrides the
     media-side-left named-area rule for the same reason) so they stack
     normally with the text column instead. */
  .ssla-g-content-split--media-style-video-teaser .ssla-g-content-split-media,
  .ssla-g-content-split--media-style-video-teaser .ssla-g-content-split-video-overlay {
    grid-column: 1;
    grid-area: auto;
  }
  .ssla-g-content-split--media-style-video-teaser .ssla-g-content-split-inner {
    gap: 0;
  }
  .ssla-g-content-split--media-style-video-teaser .ssla-g-content-split-media,
  .ssla-g-content-split--media-style-video-teaser .ssla-g-content-split-video-overlay {
    min-height: 320px;
  }
}

/* ═══ 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;
  /* LNCH-INBOX-027 — generic dark photo-darkener for the video-teaser poster
     panel (legibility for the white play-button/caption on top of any
     photo), same purpose/tone-family as g-hero's own --g-hero-scrim
     default. Not preset-resolved (structural, not a paint slot) but still a
     real custom property, so a preset can override it later without a code
     change if a brand wants a different scrim tint. */
  --g-content-split-video-scrim: linear-gradient(135deg, rgba(10,15,25,.85), rgba(10,15,25,.65));
}