/**
 * CTA banner SDC — section spacing + max-width container only.
 *
 * The pasted html_text already carries its own card/typography styling via
 * inline `style` attributes (see html/About.html "CTA" — single centered
 * column; html/Home.html "CONTACT CTA" — two-column text+form). This file
 * must not restyle that content; the grid-template-columns override below
 * only collapses the two-column variant to one column at narrow widths,
 * since inline styles can't respond to a media query on their own.
 */

.mk3-sdc--cta-banner {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.mk3-sdc--cta-banner .mk3-sdc__inner {
  max-width: 80rem; /* 1280px — matches .wrap in html/*.html */
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
}

@media (max-width: 768px) {
  .mk3-sdc--cta-banner .mk3-sdc__inner [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* The single-column CTA's button row (html/About.html etc.: `display:flex;
 * gap:14px; justify-content:center;` around two <a> buttons) has no inline
 * media query of its own, so on narrow phones the two buttons stay
 * side-by-side and squeeze their label text onto 2-3 lines instead of
 * wrapping to a full-width stack. */
@media (max-width: 480px) {
  .mk3-sdc--cta-banner .mk3-sdc__inner [style*="justify-content:center"][style*="gap:14px"] {
    flex-direction: column !important;
  }
  .mk3-sdc--cta-banner .mk3-sdc__inner [style*="justify-content:center"][style*="gap:14px"] > a {
    width: 100%;
    text-align: center;
  }
}

/* Narrower variant for a cta_banner nested in an article's prose column
   (html/Blog Article.html: `.wrap > .prose`, 720px) instead of the full
   1280px section width used standalone on Home/About/Services. */
.mk3-sdc--cta-banner.narrow-prose .mk3-sdc__inner {
  max-width: 45rem; /* 720px */
  padding-top: 20px;
  padding-bottom: 20px;
}