/* ────────────────────────────────────────────────────────────
   03-cta.css — Call to Action family
   Class chains:
     .cta-section    → core/group outer (bg via Style panel)
                        → gb element .call-to-action
     .cta-image-bg   → gb element outer (bg image + overlay)

   .call-to-action base rules apply to both variants.
   Dark-bg selector form differs by variant:
     cta-section:   .is-style-bg-dark .call-to-action (bg on core/group outer)
     cta-image-bg:  .call-to-action.cta-image-bg.is-style-bg-dark (bg on same element)
   ──────────────────────────────────────────────────────────── */

/* ── Family base ─────────────────────────────────────────── */
.call-to-action {
		padding: var(--spacing-4xl) var(--spacing-md);
	text-align: center;
}

.call-to-action__inner {
	max-width: var(--container-narrow);
	margin-inline: auto;
}

/* ── Heading ─────────────────────────────────────────────── */
/* Global 01-base.css covers font-family, weight, color, line-height.
   Only centering and margin delta scoped here. */
.call-to-action h2 {
	text-align: center;
}

/* ── Paragraph ───────────────────────────────────────────── */
/* Slightly larger body text + extra bottom margin before buttons. */
.call-to-action p {
	font-size: var(--text-body-lg);
	text-align: center;
	margin-bottom: var(--spacing-lg);
}

/* ── Button group ────────────────────────────────────────── */
.call-to-action .wp-block-buttons {
	justify-content: center;
	gap: var(--spacing-md);
	flex-wrap: wrap;
}

/* ── Dark-bg overrides: cta-section variant ──────────────── */
/* is-style-bg-dark lives on core/group outer; .call-to-action
   lives on the inner GB element — descendant selector required.
   GB text h2 does not carry .wp-block-heading so the global
   inversion in 02-style-variations.css does not reach it. */
.is-style-bg-dark .call-to-action h2 {
	color: var(--color-text-body-inverse);
}

/* 02-style-variations.css blanket-inverts all .wp-block-button
   to white fill on dark bg. Re-pin is-style-primary to orange
   and re-style is-style-secondary to white outline. */
.is-style-bg-dark .call-to-action .wp-block-button.is-style-primary .wp-block-button__link,
.is-style-bg-dark .call-to-action .wp-block-button.is-style-primary a.wp-block-button__link {
	background-color: var(--color-orange-primary);
	color: var(--color-white);
	border-color: transparent;
}

.is-style-bg-dark .call-to-action .wp-block-button.is-style-primary .wp-block-button__link:hover {
	background-color: #B74A1E;
}

.is-style-bg-dark .call-to-action .wp-block-button.is-style-secondary .wp-block-button__link,
.is-style-bg-dark .call-to-action .wp-block-button.is-style-secondary a.wp-block-button__link {
	background-color: transparent;
	color: var(--color-white);
	border: 2px solid var(--color-white);
}

.is-style-bg-dark .call-to-action .wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background-color: var(--color-white);
	color: var(--color-blue-primary);
}

/* ── Layout: cta-content ─────────────────────────────────── */
/* Constrain the component itself to narrow width so it sits within
   page content flow rather than spanning the full section. */
.call-to-action.cta-content {
	padding: var(--spacing-xl);
	margin-inline: auto;
	margin: var(--spacing-xl) auto;
}

.call-to-action.cta-content h2 {
	font-size: var(	--text-heading-lg);
}

/* ── Layout: cta-image-bg ────────────────────────────────── */
/* Background image is set per-instance via the GB Backgrounds
   panel. Overlay pseudo gives text contrast against the photo.
   Note: is-style-bg-dark is on the GB element itself here
   (not a core/group outer), so same-element selectors are correct. */
.call-to-action.cta-image-bg {
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	overflow: hidden;
	isolation: isolate;
	background-color: transparent;
}

.call-to-action.cta-image-bg::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-overlay-light-heavy);
	pointer-events: none;
	z-index: 1;
}

.is-style-bg-dark .call-to-action.cta-image-bg::before {
	background-color: var(--color-overlay-dark-fade);
}

.call-to-action.cta-image-bg .call-to-action__inner {
	position: relative;
	z-index: 2;
}

/* Every direct child of the section sits above the ::before overlay.
   Covers both the .call-to-action__inner wrapper (pattern default) and
   content blocks placed directly inside the section without the wrapper. */
.call-to-action.cta-image-bg > * {
	position: relative;
	z-index: 2;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
	.call-to-action {
		padding: var(--spacing-2xl) var(--spacing-sm);
	}
}

/* ── Editor: center button group ──────────────────────────────
   Gutenberg's own editor stylesheet overrides justify-content on
   .wp-block-buttons. Re-applying with .editor-styles-wrapper wins specificity.
*/
.editor-styles-wrapper .call-to-action .wp-block-buttons {
    justify-content: center;
}