/* === g-cta — greenfield canonical, slot-contract form === */
/* Phase 0.1.f2 — rewritten per preset-architecture-v1.md §3.3 + §3.5.   */
/* button_style: structural shape cascades; paint slots resolve fill/    */
/* text/border per variant value (per §3.4 + handoff §7 resolution).     */

/* ── Base layout ── */
.ssla-g-cta {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--g-cta-bg);
  color:      var(--g-cta-fg);
}
.ssla-g-cta-inner {
  max-width: var(--g-cta-content-max-width);
  margin: 0 auto;
  padding: var(--g-cta-section-padding) 48px;
  position: relative;
  z-index: 1;
  text-align: var(--ssla-text-align, center);
}

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

/* ── Typography ── */
.ssla-g-cta-heading {
  font-family:  var(--g-cta-heading-family);
  font-size:    var(--g-cta-heading-size);
  font-weight:  var(--g-cta-heading-weight);
  color:        var(--g-cta-heading);
  line-height:  1.2;
  margin:       0 0 16px;
}
.ssla-g-cta-body {
  font-family: var(--g-cta-body-family);
  font-size:   var(--g-cta-body-size);
  line-height: var(--g-cta-body-line-height);
  color:       var(--g-cta-body);
  margin:      0 0 32px;
}
.ssla-g-cta-body p { margin: 0; }

/* ── Button base (paint comes from slot tokens; shape from button_style) ── */
.ssla-g-cta-button {
  display: inline-block;
  background:      var(--ssla-button-fill, var(--g-cta-button-fill));
  color:           var(--ssla-button-text, var(--g-cta-button-text));
  border:          var(--g-cta-button-border);
  padding:         var(--g-cta-button-padding);
  border-radius:   var(--g-cta-button-radius);
  font-weight:     800;
  font-size:       13px;
  letter-spacing:  2px;
  text-transform:  uppercase;
  text-decoration: none;
  transition:      transform .25s ease;
}
.ssla-g-cta-button:empty { display: none; }

/* ── Structural variant: button_style shape (per §3.4 + handoff §7) ── */
/* Border/radius/padding shape lives in CSS; fill/text/border color is  */
/* slot-driven per variant value via Simple Theme emission.             */
.ssla-g-cta--button-style-chip .ssla-g-cta-button {
  border-radius: 999px;
  padding: 14px 32px;
}
/* v3.18.31 — outline button. Was declared in the manifest (button_style:
 * outline) but had no rule, so it fell back to the solid base and looked
 * identical to Solid. Outline inverts the solid treatment: transparent fill
 * with border + text in the FILL/accent token (--g-cta-button-fill), which the
 * skeleton block (§3.5) already resolves to --brand-accent, so it's visible in
 * the bare lab and a preset recolors it. No currentColor fallback (§3.3/§3.5). */
.ssla-g-cta--button-style-outline .ssla-g-cta-button {
  background: transparent;
  border: 1.5px solid var(--ssla-button-fill, var(--g-cta-button-fill));
  color: var(--ssla-button-fill, var(--g-cta-button-fill));
}
.ssla-g-cta--button-style-ghost .ssla-g-cta-button {
  padding: 0;
}
.ssla-g-cta--button-style-ghost .ssla-g-cta-button::after {
  content: ' →';
}

/* ── Structural variant: width (per §3.4; was 'treatment' — alignment
 *    moved to universal text_align in v3.18.32, banner kept as a layout) ── */
.ssla-g-cta--width-banner .ssla-g-cta-inner {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* v3.18.33 / TA-banner — text-align is inert on flex children, so the
   * universal alignment must drive justify-content here (it accepts
   * left/center/right). Unset keeps the banner's space-between signature. */
  justify-content: var(--ssla-text-align, space-between);
  gap: 32px;
  text-align: var(--ssla-text-align, left);
}
.ssla-g-cta--width-banner .ssla-g-cta-heading { margin: 0; flex: 1 1 60%; }
.ssla-g-cta--width-banner .ssla-g-cta-body { margin: 0; flex: 1 1 100%; }
.ssla-g-cta--width-banner .ssla-g-cta-button { flex: 0 0 auto; }

/* ── Structural variant: spacing (per §3.4) ── */
.ssla-g-cta--spacing-compact .ssla-g-cta-inner { padding-top: 48px; padding-bottom: 48px; }
.ssla-g-cta--spacing-roomy .ssla-g-cta-inner { padding-top: 140px; padding-bottom: 140px; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .ssla-g-cta-inner {
    padding: 60px 24px;
  }
}

/* ═══ Skeleton state per §3.5 ═══ */
.ssla-section.ssla-g-cta {
  --g-cta-bg:                 transparent;
  --g-cta-fg:                 var(--brand-fg);
  --g-cta-heading:            var(--brand-fg);
  --g-cta-body:               var(--brand-fg);
  --g-cta-button-fill:        var(--brand-accent);
  --g-cta-button-text:        var(--brand-bg);
  --g-cta-button-border:      0;
  --g-cta-heading-family:     var(--brand-heading-family);
  --g-cta-heading-size:       var(--brand-h2-size-clamp);
  --g-cta-heading-weight:     var(--brand-heading-weight);
  --g-cta-body-family:        var(--brand-body-family);
  --g-cta-body-size:          var(--brand-body-size);
  --g-cta-body-line-height:   var(--brand-body-line-height);
  --g-cta-section-padding:    var(--brand-section-padding);
  --g-cta-content-max-width:  var(--brand-content-max-width-narrow);
  --g-cta-button-padding:     var(--brand-button-padding);
  --g-cta-button-radius:      var(--brand-button-radius);
}