/* CTA band patterns (patterns/cta-band.php, patterns/cta-band-short.php).
   Red card with the Ohio shape ghosted at the right. On phones the full band loses its card
   corners, centres its content and takes the Ohio notches (the "Ohio section" panel; theme.css
   draws the top one in ::before, which is the ghosted shape on desktop): the bottom band is cut
   into the footer's maroon, the button 63.5 into it as in Figma 191:10157. */

.fyo-cta-band {
	/* The full band's inline bottom padding reads this (on phones the notch spacing sets the space). */
	--fyo-cta-band-padding-bottom: var(--wp--preset--spacing--80);

	isolation: isolate;
}

/* Ohio shape, maroon at 30% as drawn in the mockup (750x872 at x 1022 of 1664, y -8). Desktop
   and tablet only: on phones ::before is the top notch. */
@media (min-width: 783px) {
	.fyo-cta-band::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: -8px;
		left: 61.4%;
		width: 750px;
		height: 872px;
		background-color: var(--wp--preset--color--maroon);
		opacity: 0.3;
		-webkit-mask: url("../../images/ohio-shape-mask.svg") no-repeat center / 100% 100%;
		mask: url("../../images/ohio-shape-mask.svg") no-repeat center / 100% 100%;
		pointer-events: none;
	}

	.fyo-cta-band--short::before {
		top: -26px;
		left: 67.6%;
	}
}

.fyo-cta-band__headline {
	text-wrap: balance;
}

/* The global teal focus ring is invisible on red. */
.fyo-cta-band .wp-block-button__link:focus-visible,
.fyo-cta-band :where(a):focus-visible {
	outline-color: var(--wp--preset--color--white);
}

.fyo-cta-band__aside {
	max-width: 25rem; /* 401px aside in the mockup */
}

.fyo-cta-band--short .fyo-cta-band__text {
	max-width: 54rem; /* 863px text column in the mockup */
}

/* ---------- Desktop and tablet ---------- */

@media (min-width: 783px) {
	/* The short band sits 112px in; the card gives 64, the inner group the rest. */
	.fyo-cta-band--short .fyo-cta-band__inner {
		padding-inline: var(--wp--preset--spacing--70);
	}
}

/* ---------- Phones ---------- */

@media (max-width: 782px) {
	.fyo-cta-band.is-style-card {
		overflow: visible;
	}

	/* The top notch takes the colour above. The band sits in the templates, so no page can set it:
	   it reads the last block of the page content instead, a palette background or the events
	   panel's light teal (Figma 191:10156), otherwise the panel's setting (white). The setting is
	   an inline custom property, hence !important. */
	.wp-block-post-content:has(> .has-red-background-color:last-child) + .fyo-cta-band {
		--fyo-notch-top: var(--wp--preset--color--red) !important;
	}

	.wp-block-post-content:has(> .has-maroon-background-color:last-child) + .fyo-cta-band {
		--fyo-notch-top: var(--wp--preset--color--maroon) !important;
	}

	.wp-block-post-content:has(> .has-teal-background-color:last-child) + .fyo-cta-band {
		--fyo-notch-top: var(--wp--preset--color--teal) !important;
	}

	.wp-block-post-content:has(> .has-light-teal-background-color:last-child) + .fyo-cta-band {
		--fyo-notch-top: var(--wp--preset--color--light-teal) !important;
	}

	.wp-block-post-content:has(> .has-lighter-teal-background-color:last-child) + .fyo-cta-band {
		--fyo-notch-top: var(--wp--preset--color--lighter-teal) !important;
	}

	.wp-block-post-content:has(> .has-charcoal-background-color:last-child) + .fyo-cta-band {
		--fyo-notch-top: var(--wp--preset--color--charcoal) !important;
	}

	.wp-block-post-content:has(> .has-navy-background-color:last-child) + .fyo-cta-band {
		--fyo-notch-top: var(--wp--preset--color--navy) !important;
	}

	.wp-block-post-content:has(> .has-burgundy-background-color:last-child) + .fyo-cta-band {
		--fyo-notch-top: var(--wp--preset--color--burgundy) !important;
	}

	.wp-block-post-content:has(> .has-blue-background-color:last-child) + .fyo-cta-band {
		--fyo-notch-top: var(--wp--preset--color--blue) !important;
	}

	.wp-block-post-content:has(> .fyo-events.has-panel:last-child) + .fyo-cta-band,
	.wp-block-post-content:has(> .wp-block-fyo-upcoming-events:last-child .fyo-events.has-panel) + .fyo-cta-band,
	:is(.fyo-events.has-panel, .wp-block-fyo-upcoming-events:has(.fyo-events.has-panel)) + .fyo-cta-band {
		--fyo-notch-top: var(--wp--preset--color--light-teal) !important;
	}

	/* When the page content already ends on a notched section, its bottom band (cut into the red)
	   is the join: the band draws no second notch above it. */
	.wp-block-post-content:has(> .fyo-section--notch-bottom:last-child) + .fyo-cta-band::before {
		display: none;
	}

	.fyo-cta-band .fyo-cta-band__inner {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.fyo-cta-band .fyo-cta-band__aside,
	.fyo-cta-band .fyo-cta-band__text {
		align-items: center;
		max-width: none;
	}

	.fyo-cta-band .wp-block-buttons {
		justify-content: center;
	}

}