/*
 * Contextual CTA block — visual CSS only.
 * Layout uses Bootstrap flex/grid utilities + bespoke per-variant CSS.
 * All colors, borders, radii come from eggb tokens.
 *
 * Variants:
 *   .eggb-cta--default    — marginalia / hairlines, editorial
 *   .eggb-cta--highlight  — panel, brand column, filled CTA
 *   .eggb-cta--inline     — single-row band, three-column grid
 *   .eggb-cta--split      — two-column panel, action rows
 */


/* ─── Shared icon sizing for all CTA variants ─── */

.eggb-cta .eggb-icon {
  display:        inline-flex;
  width:          1em;
  height:         1em;
  vertical-align: -.125em;
}

.eggb-cta .eggb-icon svg {
  display: block;
  width:   100%;
  height:  100%;
}


/* ════════════════════════════════════════════
   VARIATION: DEFAULT
   Marginalia / pull-quote. No surface, no panel.
   Hairlines and typography only.
════════════════════════════════════════════ */

.eggb-cta--default {
  --eggb-block-title-size:   1.6875rem;
  --eggb-block-title-weight: 500;
  display:        flex;
  flex-direction: column;
  gap:            .85rem;
  padding:        1.75rem 0;
  border-top:     var(--eggb-border-w) solid var(--eggb-border);
  border-bottom:  var(--eggb-border-w) solid var(--eggb-border);
}

.eggb-cta--default .eggb-cta-eyebrow {
  font-size:      var(--eggb-text-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color:          var(--eggb-accent);
  margin:         0;
  line-height:    1;
}

.eggb-cta--default .eggb-cta-headline {
  line-height:    1.25;
  letter-spacing: -.01em;
  color:          inherit;
}

.eggb-cta--default .eggb-cta-text {
  font-size:   1.0625rem;
  line-height: 1.6;
  margin:      0;
  color:       inherit;
  opacity:     .82;
}

.eggb-cta--default .eggb-cta-actions {
  display:     flex;
  flex-wrap:   wrap;
  align-items: baseline;
  gap:         .35rem .8rem;
  margin:      0;
}

.eggb-cta--default .eggb-cta-primary {
  font-size:       1rem;
  font-weight:     700;
  letter-spacing:  -.005em;
  color:           var(--eggb-accent);
  text-decoration: none;
  border-bottom:   2px solid var(--eggb-accent);
  padding:         .05em 0 .1em;
  transition:      background-color .18s ease, border-bottom-color .18s ease;
}

.eggb-cta--default .eggb-cta-primary:hover {
  background:          color-mix(in srgb, var(--eggb-accent) 9%, transparent);
  border-bottom-color: color-mix(in srgb, var(--eggb-accent) 70%, transparent);
  color:               var(--eggb-accent);
}

.eggb-cta--default .eggb-cta-primary .eggb-icon {
  font-size:  1em;
  transition: transform .18s ease;
}

.eggb-cta--default .eggb-cta-primary:hover .eggb-icon {
  transform: translateX(2px);
}

.eggb-cta--default .eggb-cta-divider {
  font-size:   .9rem;
  color:       var(--eggb-text-muted);
  opacity:     .55;
  user-select: none;
}

.eggb-cta--default .eggb-cta-secondary {
  color:           var(--eggb-text-muted);
  text-decoration: none;
  letter-spacing:  .005em;
}

.eggb-cta--default .eggb-cta-secondary:hover {
  color:                 inherit;
  text-decoration:       underline;
  text-underline-offset: .2em;
}

.eggb-cta--default .eggb-cta-primary-meta {
  font-size:    var(--eggb-text-sm);
  color:        var(--eggb-text-muted);
  line-height:  1.35;
  margin-left:  auto;
  padding-left: .6rem;
}

@media (max-width: 540px) {
  .eggb-cta--default .eggb-cta-primary-meta {
    width:        100%;
    text-align:   right;
    padding-left: 0;
    margin-left:  0;
  }
}

.eggb-cta--default .eggb-cta-context {
  font-style:  italic;
  font-size:   var(--eggb-text-sm);
  color:       var(--eggb-text-muted);
  margin-top:  .4rem; /* adds to flex gap to reach ~1.25rem above context */
  line-height: 1.5;
}


/* ════════════════════════════════════════════
   VARIATION: HIGHLIGHT
   Editor's-pick feature card. Panel surface.
   Brand block + ribbon + serif headline.
════════════════════════════════════════════ */

.eggb-cta--highlight {
  padding:  0;
  overflow: hidden;
}

.eggb-cta--highlight .eggb-cta-ribbon {
  padding:        .8rem 1.125rem .55rem;
  font-size:      .625rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color:          var(--eggb-accent);
  margin:         0;
}

.eggb-cta--highlight .eggb-cta-feature {
  display:               grid;
  grid-template-columns: 116px 1fr;
  gap:                   1.25rem;
  padding:               .25rem 1.125rem 1rem;
  align-items:           start;
}

/* No ribbon — restore the top breathing room it would have provided */
.eggb-cta--highlight:not(:has(.eggb-cta-ribbon)) .eggb-cta-feature {
  padding-top: 1.125rem;
}

/* Logo absent — collapse brand column, editorial fills full width */
.eggb-cta--highlight .eggb-cta-feature:not(:has(.eggb-cta-brand)) {
  grid-template-columns: 1fr;
}

.eggb-cta--highlight .eggb-cta-brand {
  display:        flex;
  flex-direction: column;
  gap:            .6rem;
}

.eggb-cta--highlight .eggb-cta-logo {
  width:           116px;
  height:          116px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          var(--eggb-border-w) solid color-mix(in srgb, var(--eggb-accent) 22%, transparent);
  border-radius:   var(--eggb-radius);
  color:           var(--eggb-accent);
  font-size:       2.4rem;
  letter-spacing:  -.05em;
  font-weight:     800;
  overflow:        hidden;
}

.eggb-cta--highlight .eggb-cta-logo img {
  max-width:  84%;
  max-height: 84%;
  object-fit: contain;
}

.eggb-cta--highlight .eggb-cta-editorial {
  display:        flex;
  flex-direction: column;
  gap:            .5rem;
  min-width:      0;
}

.eggb-cta--highlight {
  --eggb-block-title-size:   1.3125rem;
  --eggb-block-title-weight: 600;
}

.eggb-cta--highlight .eggb-cta-headline {
  line-height:    1.3;
  letter-spacing: -.005em;
}

.eggb-cta--highlight .eggb-cta-text {
  margin:      0;
  line-height: 1.6;
  color:       inherit;
}

.eggb-cta--highlight .eggb-cta-actions {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         .25rem .9rem;
  margin-top:  .25rem;
}

.eggb-cta--highlight .eggb-cta-primary {
  font-size:      .9375rem;
  padding:        .6em 1.2em;
  font-weight:    700;
  letter-spacing: -.005em;
}

.eggb-cta--highlight .eggb-cta-primary .eggb-icon {
  font-size:    1.1em;
  transition:   transform .18s ease;
  margin-right: -.1em;
}

.eggb-cta--highlight .eggb-cta-primary:hover .eggb-icon {
  transform: translateX(2px);
}

.eggb-cta--highlight .eggb-cta-secondary {
  font-size:       var(--eggb-text-sm);
  color:           var(--eggb-text-muted);
  text-decoration: none;
  font-weight:     500;
}

.eggb-cta--highlight .eggb-cta-secondary:hover {
  color:                 inherit;
  text-decoration:       underline;
  text-underline-offset: .2em;
}

.eggb-cta--highlight .eggb-cta-primary-meta {
  font-size:   var(--eggb-text-sm);
  color:       var(--eggb-text-muted);
  line-height: 1.35;
  margin:      .35rem 0 0;
}

.eggb-cta--highlight .eggb-cta-context {
  border-top:  var(--eggb-border-w) solid var(--eggb-border);
  padding:     .55rem 1.125rem;
  font-size:   var(--eggb-text-xs);
  color:       var(--eggb-text-muted);
  line-height: 1.4;
  background:  color-mix(in srgb, var(--eggb-border) 8%, var(--eggb-surface));
  margin:      0;
}

.eggb-cta--highlight .eggb-cta-context .eggb-icon {
  opacity:      .7;
  margin-right: .2em;
}

@media (max-width: 540px) {
  .eggb-cta--highlight .eggb-cta-feature {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .eggb-cta--highlight .eggb-cta-brand {
    flex-direction: row;
    align-items:    center;
    gap:            .85rem;
  }
  .eggb-cta--highlight .eggb-cta-logo {
    width:       72px;
    height:      72px;
    font-size:   1.5rem;
    flex-shrink: 0;
  }
}


/* ════════════════════════════════════════════
   VARIATION: INLINE
   Single-row band. Three-column grid:
   eyebrow · message · primary action.
   Hairlines top + bottom, no surface.
════════════════════════════════════════════ */

.eggb-cta--inline {
  display:               grid;
  grid-template-columns: auto 1fr auto;
  align-items:           center;
  gap:                   1.75rem;
  padding:               .9rem 0;
  border-top:            var(--eggb-border-w) solid var(--eggb-border);
  border-bottom:         var(--eggb-border-w) solid var(--eggb-border);
}

.eggb-cta--inline .eggb-cta-eyebrow {
  font-size:      var(--eggb-text-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color:          var(--eggb-accent);
  margin:         0;
  line-height:    1.2;
  white-space:    nowrap;
}

.eggb-cta--inline .eggb-cta-message {
  line-height:    1.6;
  letter-spacing: -.005em;
  margin:         0;
  min-width:      0;
}

.eggb-cta--inline .eggb-cta-headline {
  font-weight: 600;
  color:       inherit;
}

.eggb-cta--inline .eggb-cta-divider {
  color:       var(--eggb-text-muted);
  margin:      0 .35em 0 .45em;
  opacity:     .6;
  user-select: none;
}

.eggb-cta--inline .eggb-cta-text {
}

.eggb-cta--inline .eggb-cta-primary {
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .eggb-cta--inline {
    grid-template-columns: 1fr;
    gap:     .4rem;
    padding: .85rem 0 1rem;
  }
  .eggb-cta--inline .eggb-cta-primary {
    margin-top: .15rem;
  }
}


/* ════════════════════════════════════════════
   VARIATION: SPLIT
   Left copy column (the WHY) +
   right action-menu column (the HOW).
   Two genuine paths, not primary + consolation.
════════════════════════════════════════════ */

.eggb-cta--split {
  --eggb-radius: 10px;
  display:               grid;
  grid-template-columns: 1.1fr 1fr;
  overflow:              hidden;
  padding:               0;
}

.eggb-cta--split .eggb-cta-copy {
  background:     color-mix(in srgb, var(--eggb-accent) 10%, var(--eggb-surface));
  padding:        1.625rem 1.5rem;
  display:        flex;
  flex-direction: column;
  gap:            .75rem;
}

.eggb-cta--split .eggb-cta-eyebrow {
  font-size:      var(--eggb-text-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color:          var(--eggb-accent);
  margin:         0;
  line-height:    1.2;
}

.eggb-cta--split {
  --eggb-block-title-size:   1.5rem;
  --eggb-block-title-weight: 800;
}

.eggb-cta--split .eggb-cta-headline {
  line-height:    1.2;
  letter-spacing: -.02em;
  color:          inherit;
}

.eggb-cta--split .eggb-cta-text {
  line-height: 1.6;
  margin:      0;
}

.eggb-cta--split .eggb-cta-menu {
  background:     var(--eggb-surface);
  border-left:    var(--eggb-border-w) solid var(--eggb-border);
  display:        flex;
  flex-direction: column;
}

.eggb-cta--split .eggb-cta-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         1.25rem 1.25rem 1.25rem 1.375rem;
  text-decoration: none;
  color:           inherit;
  flex:            1;
  transition:      background-color .15s ease;
}

.eggb-cta--split .eggb-cta-row:not(.eggb-cta-secondary) {
  color: var(--eggb-accent);
}

.eggb-cta--split .eggb-cta-row:hover {
  background: color-mix(in srgb, var(--eggb-accent) 5%, transparent);
}

.eggb-cta--split .eggb-cta-row + .eggb-cta-row {
  border-top: var(--eggb-border-w) solid var(--eggb-border);
}

.eggb-cta--split .eggb-cta-row-body {
  min-width:      0;
  flex-grow:      1;
  display:        flex;
  flex-direction: column;
  gap:            .2rem;
  font-size:      var(--eggb-text-md);
  font-weight:    700;
  letter-spacing: -.008em;
  line-height:    1.3;
}

.eggb-cta--split .eggb-cta-row.eggb-cta-secondary .eggb-cta-row-body {
  font-weight: 600;
}

.eggb-cta--split .eggb-cta-primary-meta {
  font-size:      var(--eggb-text-sm);
  font-weight:    400;
  letter-spacing: 0;
  color:          var(--eggb-text-muted);
  line-height:    1.35;
}

.eggb-cta--split .eggb-cta-row-arrow {
  font-size:   1.35rem;
  flex-shrink: 0;
  color:       var(--eggb-accent);
  transition:  transform .18s ease;
}

.eggb-cta--split .eggb-cta-row:hover .eggb-cta-row-arrow {
  transform: translateX(3px);
}

.eggb-cta--split .eggb-cta-row.eggb-cta-secondary .eggb-cta-row-arrow {
}

.eggb-cta--split .eggb-cta-context {
  grid-column: 1 / -1;
  border-top:  var(--eggb-border-w) solid var(--eggb-border);
  padding:     .55rem 1.125rem;
  font-size:   var(--eggb-text-xs);
  color:       var(--eggb-text-muted);
  line-height: 1.4;
  background:  color-mix(in srgb, var(--eggb-border) 8%, var(--eggb-surface));
  margin:      0;
}

.eggb-cta--split .eggb-cta-context .eggb-icon {
  opacity:      .7;
  margin-right: .2em;
}

@media (max-width: 600px) {
  .eggb-cta--split {
    grid-template-columns: 1fr;
  }
  .eggb-cta--split .eggb-cta-menu {
    border-left: none;
    border-top:  var(--eggb-border-w) solid var(--eggb-border);
  }
  .eggb-cta--split .eggb-cta-row {
    padding: 1rem 1.125rem;
    flex:    0 0 auto;
  }
  .eggb-cta--split .eggb-cta-headline {
    font-size: 1.3125rem;
  }
}