/* ==========================================================================
   Devgun Family Law -- Chrome: Callout band
   Figma Callout symbol (7146:816 etc.), present on every page. Light Green
   band, centered heading + body, two pill buttons. Uses the shared
   section-bg--light-green utility (foundation/base.css) for the fill --
   this file only styles the internal layout.
   ========================================================================== */

.callout__inner {
  max-width: 760px;
  margin: 0 auto;
  /* Tighter top than bottom (Dave 2026-07-04): trim the gap above the
     Book a Free Consultation band. */
  padding: calc(var(--space-section-y) * 0.5) var(--space-page-gutter) var(--space-section-y);
  text-align: center;
}

.callout__heading {
  margin-bottom: 0.75rem;
}

.callout__body {
  margin-bottom: var(--space-gap);
}

.callout__body p:last-child {
  margin-bottom: 0;
}

.callout__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* X4: design shows both callout pills dark-filled (primary CTA + phone),
   not an outline secondary. Scoped to .callout so the shared .btn--outline
   rule in chrome/buttons.css (used nowhere else in the codebase --
   confirmed via grep) stays untouched; hover still reads distinctly via
   the existing --color-action-hover token. */
.callout__actions .btn--outline {
  background-color: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-action-text);
}

.callout__actions .btn--outline:hover,
.callout__actions .btn--outline:focus {
  background-color: var(--color-action-hover);
  border-color: var(--color-action-hover);
  color: var(--color-white);
}

@media (max-width: 575.98px) {
  .callout__actions {
    flex-direction: column;
  }

  .callout__actions .btn {
    width: 100%;
  }
}