/*
 * Mid-article CTA banner — inc/rs-cta-banner.php
 *
 * Design: Figma "Article banners", node 25335:19811 (light variant).
 * Card 755x165 r4 / content inset 30 / gap 20 / heading Montserrat 700 24-1.4 /
 * button 15-30 r4 gap 20 with the shared button shadow / glyph clipped to the card's
 * right edge at 20% opacity. Widths are fluid here: the card fills the article
 * column (740px on template-asana-vs.php), so only the insets are fixed.
 *
 * Every value below maps to a token in css/rs-design-tokens.css; the component needs
 * no new ones. Literal fallbacks are present because the tokens are enqueued site-wide
 * but this file must still be readable on its own.
 */

.rs-cta-banner {
	position: relative;
	overflow: hidden; /* clips the glyph to the card, the way the Figma mask does */
	margin: 2rem 0;
	padding: 30px;
	border-radius: var(--rs-radius-xs, 4px);
	background: var(--rs-grey-light-50, #f9f9f9);
}

/*
 * The glyph files (img/bg-asana.svg, bg-rs.svg, bg-calc.svg) bake in
 * fill="#678689" opacity="0.1". Both are overridden here so the watermark matches
 * Figma (--rs-teal-00 at 20%) instead of the fainter grey production has shown.
 * Recolouring in CSS rather than in the asset also means a new archetype needs only
 * one more SVG, not one per treatment.
 */
.rs-cta-banner__glyph {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	color: var(--rs-teal-00, #408897);
	opacity: .2;
	pointer-events: none;
}

.rs-cta-banner__glyph svg {
	display: block;
	height: 100%;
	width: auto;
}

.rs-cta-banner__glyph svg path {
	fill: currentColor;
	opacity: 1;
}

/*
 * Direct-child selectors in rs_article_body_css() do not reach in here (the h4 is
 * nested), but the article container does set Lora on everything, so the display
 * face has to be restated.
 */
.rs-cta-banner__title {
	position: relative; /* above the glyph */
	margin: 0 0 20px;
	font-family: var(--rs-font-display, Montserrat, sans-serif);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.4;
	color: var(--rs-black-prime, #34383c);
}

.rs-cta-banner__action {
	position: relative;
	margin: 0;
}

/*
 * Two classes deep on purpose. rs_article_body_css() emits `<scope> a { color: coral }`
 * from the template's own inline <style>, which is both equal in specificity to a
 * single-class rule and later in the cascade — so a one-class button rule loses and
 * the label renders coral on yellow. This is the bug the stopgap card shipped with.
 */
.rs-cta-banner a.rs-cta-banner__btn {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	padding: 15px 30px;
	border-radius: var(--rs-radius-xs, 4px);
	background: var(--rs-yellow-00, #ffc94b);
	color: var(--rs-black-prime, #34383c);
	font-family: var(--rs-font-display, Montserrat, sans-serif);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: var(--rs-shadow-btn, 0 20px 40px -10px rgba(38, 50, 56, .2));
	transition: background-color .3s ease-in-out, box-shadow .3s ease-in-out;
}

.rs-cta-banner a.rs-cta-banner__btn:hover,
.rs-cta-banner a.rs-cta-banner__btn:focus-visible {
	background: var(--rs-yellow-btn-hover, #ffb710);
	color: var(--rs-black-prime, #34383c);
	box-shadow: var(--rs-shadow-btn-hover, 0 10px 20px -5px rgba(38, 50, 56, .3));
}

/*
 * No Figma frame exists below 755px, so the reflow matches the shipped sibling
 * (.rs-bsp-cta in template-blog-single.php): same 767px breakpoint, same 20px inset,
 * same full-width centred button. The glyph is the first thing to drop — at this
 * width it sits under the button rather than beside the copy.
 */
@media (max-width: 767px) {
	.rs-cta-banner {
		padding: 20px;
	}

	.rs-cta-banner__glyph {
		display: none;
	}

	.rs-cta-banner__title {
		font-size: 20px;
	}

	.rs-cta-banner a.rs-cta-banner__btn {
		display: flex;
		justify-content: center;
		gap: 15px;
	}
}

/* Editor-only diagnostic from rs_cta_banner_fail(); never rendered for visitors. */
.rs-cta-banner-error {
	margin: 2rem 0;
	padding: 15px 20px;
	border-left: 4px solid var(--rs-coral-00, #f35b54);
	background: var(--rs-grey-light-50, #f9f9f9);
	color: var(--rs-black-prime, #34383c);
	font-family: var(--rs-font-display, Montserrat, sans-serif);
	font-size: 16px;
}