/**
 * parts/cta-footer.html — the closing CTA shared by HOME, FEATURES and PLANS.
 *
 * A template part has no block.json to declare its own stylesheet against,
 * so this lives in assets/css/parts/ and is enqueued unconditionally by
 * miraigo_enqueue_part_styles() in inc/assets.php.
 *
 * The red squiggle under "sin compromiso." is the local
 * assets/icons/underline.svg — but every underline asset ships with
 * stroke="currentColor", which resolves to black inside <img>/background
 * contexts. Painted as a mask over text-brand instead, so the squiggle is
 * the brand red on both endpoints and inherits nothing from the surface.
 * Anchored to the accent <span>, not the heading, so it stays under the
 * right words no matter where the line wraps.
 */

/**
 * This is the `#contacto` anchor every CTA button targets. desktop-nav's
 * sticky bar is `position: fixed` once scrolled, so a plain jump would land
 * the section's top edge underneath it — scroll-margin-top reserves that
 * same fixed-bar space so the heading clears it. Below 1248px desktop-nav is
 * swapped for mobile-header (never fixed), so no margin is needed there.
 */
@media (min-width: 1248px) {

	.site-cta-footer {
		scroll-margin-top: calc(var(--wp--custom--header--sticky-height) + var(--wp--custom--header--sticky-offset));
	}
}

/* Top only: below it sits the footer's or main's own section gap. */
.site-cta-footer {
	padding-block-start: var(--wp--preset--spacing--55);
}

@media (min-width: 768px) {

	.site-cta-footer {
		padding-block-start: var(--wp--preset--spacing--60);
	}
}

.site-cta-footer__inner {
	align-items: center;
	row-gap: var(--wp--preset--spacing--45);
}

/* The heading is a real h2 semantically but is drawn at 28px Medium (500),
   not the h2 element's 600. */
.site-cta-footer__heading {
	font-weight: 500;
}

.site-cta-footer__accent {
	position: relative;
	padding-block-end: var(--wp--preset--spacing--30);
}

.site-cta-footer__accent::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 0.35em;
	background-color: var(--wp--preset--color--text-brand);
	-webkit-mask-image: url(../../icons/underline.svg);
	mask-image: url(../../icons/underline.svg);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/**
 * FEATURES and PLANS (page-landing.html) close with the "¿No sabes por
 * dónde empezar?" dark panel, and both set this CTA right under it:
 * ~89px from panel edge to heading on FEATURES, ~47px on PLANS. The template's spacing--65 section gap (up to 200px)
 * plus this section's own spacing--60 top padding put ~285px there. The
 * part's wrapper takes a spacing--60 gap instead and the section drops its
 * top padding. Scoped to the landing template: HOME and INTEGRACIONES have
 * no such panel above it. `:has()` only narrows the wrapper to this part;
 * where it is unsupported the page keeps the previous, larger gap.
 */
@media (min-width: 768px) {

	.page-template-page-landing main > .wp-block-template-part:has(> .site-cta-footer) {
		margin-block-start: var(--wp--preset--spacing--60);
	}

	.page-template-page-landing .site-cta-footer {
		padding-block-start: 0;
	}
}