/**
 * Greenfield canonical: Hero — Split
 * v3.18.48
 */

.ssla-section.ssla-g-hero-split {
  background-color: var(--ssla-bg-color, transparent);
  color: var(--g-hero-split-fg);
  padding: var(--g-hero-split-section-padding);
}
.ssla-g-hero-split-inner {
  max-width: var(--g-hero-split-content-max-width);
  margin: 0 auto;
  padding: var(--paint-section-padding, 80px) 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.ssla-g-hero-split-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ssla-g-hero-split-eyebrow {
  font: 600 12px/1.2 var(--shell-bf, system-ui);
  letter-spacing: 0.08em;
  text-transform: var(--paint-eyebrow-case, uppercase);
  color: var(--g-hero-split-eyebrow);
}
.ssla-g-hero-split-heading {
  font: 700 var(--g-hero-split-heading-size, clamp(32px, 4.5vw, 56px))/1.1 var(--g-hero-split-heading-family, var(--shell-hf, system-ui));
  font-weight: var(--paint-heading-weight, 700); /* v3.52.04 — painted ProSet heading weight reaches g- heading; 700 no-paint default */
  color: var(--g-hero-split-heading);
  margin: 0;
  text-transform: var(--paint-heading-case-h1, none);
}
/* v3.23.63 — colored heading word. The inline_color affordance carries an
   emphasized word as <em> (migrated legacy highlight) or <span class="gold">
   (.gold → accent via 0-shared). Color the <em> with the brand strong accent so
   a migrated heading renders its highlight on-brand (RedShift: red), matching the
   original design. Themeable: each preset's --shell-accent-strong drives it.
   Explicit color: spans from the overlay picker still win by specificity. */
.ssla-g-hero-split-heading em {
  color: var(--shell-accent-strong, var(--g-hero-split-heading));
  font-style: italic;
}
.ssla-g-hero-split-body {
  font: 400 var(--g-hero-split-body-size, 18px)/1.55 var(--g-hero-split-body-family, var(--shell-bf, system-ui));
  color: var(--g-hero-split-body);
  margin: 0;
}
.ssla-g-hero-split-cta {
  display: inline-block;
  padding: 12px 22px;
  font: 600 14px/1 var(--shell-bf, system-ui);
  text-decoration: none;
  /* v3.23.65 — button fills from the brand accent (gold), not the heading colour,
     to match g-cta; dark readable text on the accent fill. */
  background: var(--ssla-button-fill, var(--brand-accent, #1a1a1a));
  color: var(--ssla-button-text, var(--shell-text-dark, #1a1a1a));
  border: 1px solid var(--ssla-button-fill, var(--brand-accent, #1a1a1a));
  align-self: flex-start;
  margin-top: 8px;
}
/* v3.54.27 — see the matching note in g-content-split.css. The forced 4:3 box +
   object-fit:cover cropped every asset that wasn't 4:3, with no operator control
   over which edges were lost, forcing people to pre-crop images outside the
   product to guess our shape. The media now sizes to the image (height:auto);
   max-height is a safety rail that letterboxes (contain) instead of cutting when
   it applies. The 4:3 shape stays for the empty placeholder so the drop target
   still reads as a media well in edit mode. */
.ssla-g-hero-split-media {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ssla-g-hero-split-media:empty {
  aspect-ratio: 4 / 3;
  background: rgba(0,0,0,0.06);
}
/* 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-hero-split-media img,
.ssla-g-hero-split-media video,
.ssla-g-hero-split-media iframe { border: none; }

/* ═══ Media side variants ═══ */
.ssla-g-hero-split--media-side-left .ssla-g-hero-split-inner {
  grid-template-columns: 1fr 1fr;
}
.ssla-g-hero-split--media-side-left .ssla-g-hero-split-media { order: 0; }
.ssla-g-hero-split--media-side-left .ssla-g-hero-split-text  { order: 1; }
/* v3.24.44 — copy follows its side: when media sits on the left the copy is on
   the RIGHT, so right-align its text and end-align its column (button included),
   matching g-content-split. Left side keeps the default left alignment. */
.ssla-g-hero-split--media-side-left .ssla-g-hero-split-text  { text-align: right; align-items: flex-end; }

/* ═══ Density variants ═══ */
.ssla-g-hero-split--density-minimal .ssla-g-hero-split-eyebrow,
.ssla-g-hero-split--density-minimal .ssla-g-hero-split-body,
.ssla-g-hero-split--density-minimal .ssla-g-hero-split-cta { display: none; }
.ssla-g-hero-split--density-standard .ssla-g-hero-split-eyebrow,
.ssla-g-hero-split--density-standard .ssla-g-hero-split-cta { display: none; }
/* density-rich: all visible */

/* ═══ Skeleton ═══ */
.ssla-g-hero-split {
  --g-hero-split-fg:                 var(--brand-fg);
  --g-hero-split-eyebrow:            var(--brand-accent);
  --g-hero-split-heading:            var(--brand-fg);
  --g-hero-split-body:               var(--brand-fg);
  --g-hero-split-heading-family:     var(--shell-hf, system-ui);
  --g-hero-split-heading-size:       clamp(32px, 4.5vw, 56px);
  --g-hero-split-body-family:        var(--shell-bf, system-ui);
  --g-hero-split-body-size:          18px;
  --g-hero-split-section-padding:    0;
  --g-hero-split-content-max-width:  1200px;
}

/* Tone variants */
.ssla-g-hero-split--tone-light {
  --g-hero-split-fg:      #1a1a1a;
  --g-hero-split-heading: #1a1a1a;
  --g-hero-split-body:    #4a4a4a;
}
.ssla-g-hero-split--tone-dark {
  --g-hero-split-fg:      #f5f5f5;
  --g-hero-split-heading: #ffffff;
  --g-hero-split-body:    #d0d0d0;
}
.ssla-g-hero-split--tone-accent {
  --g-hero-split-fg:      var(--preset-accent-fg, #1a1a1a);
  --g-hero-split-heading: var(--preset-accent-fg, #1a1a1a);
  --g-hero-split-body:    var(--preset-accent-fg, #1a1a1a);
}

/* v3.23.63 — Height option (mirrors g-hero-full v3.23.14). Standard = content
   height; Tall / Full screen floor the section and center the split vertically.
   Variant class ssla-g-hero-split--height-{value} is projected on the section root. */
.ssla-g-hero-split--height-tall,
.ssla-g-hero-split--height-fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ssla-g-hero-split--height-tall       { min-height: 80vh; }
.ssla-g-hero-split--height-fullscreen { min-height: 100vh; }

/* Mobile */
@media (max-width: 768px) {
  .ssla-g-hero-split-inner { padding: 40px 16px; grid-template-columns: 1fr; gap: 24px; }
  .ssla-g-hero-split--media-side-left .ssla-g-hero-split-media { order: 1; }
  .ssla-g-hero-split--media-side-left .ssla-g-hero-split-text  { order: 0; }
  .ssla-g-hero-split-heading { font-size: clamp(28px, 7vw, 40px); }
}