/**
 * Keystone in-article CTA blocks
 * ------------------------------------------------------------------
 * Conversion blocks injected into post content by a site's CTA agent.
 * Three tiers on a Material elevation ladder:
 *
 *   .keystone-cta--inline    elevation 0 — thin, mid-article, no button
 *   .keystone-cta--question  elevation 1 — medium, rules-heavy topics
 *   .keystone-cta--panel     elevation 2 — the primary end-of-article ask
 *
 * Scoped entirely to .keystone-cta*, so this file is safe to load on every
 * brand: nothing outside these blocks can match. Brand look is inherited
 * through the shared tokens (see assets/css/tokens.css) rather than
 * hardcoded, so a `body.brand-{slug}` token override reskins CTAs for free.
 *
 * ── Why this file exists ──────────────────────────────────────────
 * These blocks shipped with inline styles because the markup is written
 * into post_content by an agent, not rendered by a template. Inline styles
 * cannot hold media queries, so there was no way to make the blocks
 * responsive — and on 2026-08-12 that produced a real defect: a long button
 * label wrapped to two lines and, because `text-align:right` on the wrapper
 * is INHERITED into the anchor, both lines sat flush right and the pill
 * looked broken on a phone.
 *
 * This stylesheet is the permanent fix. Note the ordering rule below.
 *
 * ── Inline styles vs this file (IMPORTANT) ────────────────────────
 * Inline styles beat stylesheet rules. So for blocks that still carry
 * inline styles, most declarations here are inert — with one deliberate
 * exception that does the retroactive work:
 *
 *   `.keystone-cta__action a { text-align: center; }`
 *
 * A direct declaration always beats an INHERITED value, whatever the
 * source. The bad alignment reaches the anchor by inheritance from the
 * wrapper's inline `text-align:right`, so this rule wins over it without
 * needing !important, on every block, past and future.
 *
 * Everything else here takes effect once the inline styles are stripped
 * from post_content (a content-side pass that must run AFTER this file is
 * deployed — stripping first would leave every CTA unstyled).
 *
 * @package Keystone
 * @since   1.0.47
 */

/* ── Shared block shell ─────────────────────────────────────────── */

.keystone-cta {
	margin:        38px 0;
	border-radius: var(--keystone-card-radius, 14px);
	/* Blocks sit inside post_content; keep them clear of the prose rhythm. */
	clear: both;
}

.keystone-cta > *:last-child {
	margin-bottom: 0;
}

.keystone-cta h3 {
	margin:      0 0 10px;
	font-size:   1.15rem;
	line-height: 1.3;
}

.keystone-cta p {
	margin: 0 0 18px;
}

/* ── Tier 1: inline — elevation 0, no shadow, no button ─────────── */

.keystone-cta--inline {
	padding:       14px 18px;
	background:    var(--keystone-card-bg, #f1f1f4);
	border-left:   3px solid var(--wp--preset--color--accent, #377dff);
	border-radius: 0 var(--keystone-card-radius, 14px) var(--keystone-card-radius, 14px) 0;
}

.keystone-cta--inline p {
	margin: 0;
}

/* ── Tier 2: question — elevation 1 ─────────────────────────────── */

.keystone-cta--question {
	padding:    24px 26px;
	background: var(--keystone-card-bg, #f5f6f8);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}

/* ── Tier 3: panel — elevation 2, the primary ask ───────────────── */

.keystone-cta--panel {
	padding:    26px 28px;
	background: var(--wp--preset--color--base, #ffffff);
	/* Fallback matches tokens.css so the tier keeps its elevation even if
	   tokens.css fails to load or a brand omits the variable. */
	box-shadow: var(--keystone-card-shadow, 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15));
}

/* ── Corridor chip ──────────────────────────────────────────────── */

.keystone-cta__chip {
	margin:      0 0 12px;
	font-size:   0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	color:       var(--wp--preset--color--contrast-2, #4a5568);
}

/* ── Action row + button ────────────────────────────────────────── */

.keystone-cta__action {
	margin:     0;
	text-align: right;
}

/*
 * THE RETROACTIVE FIX — see the header note.
 *
 * `text-align: right` above (and its inline equivalent on legacy blocks)
 * positions the button BLOCK. It must never align the label INSIDE the
 * button. This direct declaration beats the inherited value from either
 * source, so it repairs blocks already in the database as well as new ones.
 */
.keystone-cta__action a {
	display:         inline-block;
	max-width:       100%;
	box-sizing:      border-box;
	padding:         12px 26px;
	border-radius:   999px;
	background:      var(--wp--preset--color--accent, #377dff);
	color:           var(--wp--preset--color--base, #ffffff);
	font-weight:     600;
	line-height:     1.4;
	text-align:      center;
	text-decoration: none;
	transition:      background-color 0.2s ease, box-shadow 0.2s ease;
}

.keystone-cta__action a:hover,
.keystone-cta__action a:focus-visible {
	box-shadow: var(--keystone-card-shadow-hover, 0 2px 3px rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15));
}

.keystone-cta__action a:focus-visible {
	outline:        2px solid var(--wp--preset--color--contrast, #1a1a1a);
	outline-offset: 2px;
}

/* ── Mobile ─────────────────────────────────────────────────────────
 * The whole reason this file exists: inline styles could not express a
 * breakpoint. Below 600px the card leaves roughly 235px of text width
 * inside the button, so any label past ~29 characters wrapped. Going
 * full-width removes the constraint entirely — and matches Material's
 * own guidance for primary actions on narrow screens.
 *
 * Copy rules still cap labels at 29 characters (see each site's
 * CTA-SPEC.md); this is the safety net, not a licence to write longer
 * labels. It matters most for locale blocks, where French and Russian
 * phrasing runs 15-30% longer than the English equivalent.
 */
@media (max-width: 600px) {
	.keystone-cta {
		margin: 30px 0;
	}

	.keystone-cta--panel,
	.keystone-cta--question {
		padding: 22px 20px;
	}

	.keystone-cta__action a {
		display: block;
		width:   100%;
	}
}

/* ── Reduced motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.keystone-cta__action a {
		transition: none;
	}
}