/**
 * Pricing cards — template-parts/pricing-cards.php, front-page.php only,
 * directly after devices.
 *
 * Reused as-is, nothing redefined except radius (card corners bumped to
 * radius-xl to match the hero section's photo rounding): color/spacing/
 * type/shadow tokens, .container, .card/.card--hover, .badge variants,
 * .section-label, .btn/.btn--primary. The "Populaire" card's elevation
 * reuses --shadow-hard (the hero's flat offset-shadow token) rather than
 * --shadow-accent-glow — this brief explicitly rules out a soft glow
 * here, and --shadow-hard is a plain box-shadow-compatible value (no
 * clip-path involved on this rectangular card, so box-shadow, not
 * filter: drop-shadow(), is the right property this time).
 *
 * Not using the generic .section utility (equal top/bottom padding) —
 * Part 2 (template-parts/pricing-trust.php) needs to read as directly
 * continuing this one, not a fresh section with a full section-gap
 * between them, so this owns the top-of-section rhythm only and
 * pricing-trust.css owns the bottom.
 */

.pricing-cards {
	padding-block-start: var(--space-section-y);
	padding-block-end: var(--space-9);
	scroll-margin-top: var(--header-height);
}

.pricing-cards__header {
	max-width: 60ch;
	margin-inline: auto;
	margin-bottom: var(--space-9);
	text-align: center;
}

.pricing-cards__subcopy {
	margin-top: var(--space-4);
	font-size: var(--fs-md);
	line-height: var(--lh-md);
}

/* =========================================================
   Grid — single column on mobile, 3-up at desktop. "Populaire" moves
   first in mobile stack order (brief's explicit recommendation: don't
   bury the best-converting card at the bottom) via `order`, which only
   changes visual position — DOM order stays Découverte -> Populaire ->
   Long terme (a sensible low-to-high reading order for anyone
   navigating linearly, e.g. screen readers). Desktop keeps natural
   left-to-right order, where "recommended in the middle" is already the
   standard, well-understood pricing-table convention.
   ========================================================= */

.pricing-cards__grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.pricing-card--popular {
	order: -1;
}

@media (min-width: 1024px) {
	.pricing-cards__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		align-items: start;
		gap: var(--space-6);
	}

	.pricing-card--popular {
		order: 0;
	}
}

/* =========================================================
   Card
   ========================================================= */

.pricing-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Rounding matches the hero section's photo treatment (radius-xl),
   overriding .card's default sharp radius-lg. */
.pricing-card {
	border-radius: var(--radius-xl);
}

/* Bold accent border + a HARD offset shadow — not a soft glow. */
.pricing-card--popular {
	border: 2px solid var(--color-accent);
	box-shadow: var(--shadow-hard);
}

@media (min-width: 1024px) {
	.pricing-card--popular {
		transform: scale(1.05);
	}

	/* More pronounced than the base .card--hover lift, given this card's
	   emphasis — combines with the always-on scale rather than replacing
	   it (a plain transform override would lose the scale). */
	.pricing-card--popular.card--hover:hover,
	.pricing-card--popular.card--hover:focus-visible {
		transform: scale(1.05) translateY(-6px);
	}
}

/* Solid, opaque fill — NOT .badge--accent's usual translucent tint. This
   ribbon straddles the card's own 2px solid accent border (top:0 +
   -50% vertical translate), and a see-through fill let that border line
   show straight through the middle of the chip. --color-accent-ink is
   the token already meant to pair with a solid accent background (used
   for accent-filled buttons/badges elsewhere), so this reuses it rather
   than inventing a new pairing. */
.pricing-card__ribbon {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	--badge-fill: var(--color-accent);
	--badge-ink: var(--color-accent-ink);
	--badge-border: var(--color-accent);
}

.pricing-card__name {
	font-size: var(--fs-lg);
	line-height: var(--lh-lg);
}

.pricing-card__savings {
	margin-top: var(--space-3);
}

/* Price: same recipe as .hero-stats__number (font-display, --fs-3xl,
   --fw-black) for consistency with the site's one other "big numeral"
   moment. Amount and period are two real, separately-readable text
   nodes in the same <p> — never a bare number with no context. */
.pricing-card__price {
	display: flex;
	align-items: baseline;
	gap: var(--space-1);
	margin-top: var(--space-4);
}

.pricing-card__price-amount {
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	line-height: var(--lh-3xl);
	font-weight: var(--fw-black);
	color: var(--color-text);
}

.pricing-card__price-period {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.pricing-card__billing-note {
	margin-top: var(--space-1);
	font-size: var(--fs-xs);
	color: var(--color-text-faint);
}

/* =========================================================
   Features — baseline rows (shared across all 3 tiers) stay muted;
   differentiator rows (what actually changes tier to tier — connections,
   support, the top tier's extra perk) get an accent-colored check and
   bolder text so the eye catches the difference instead of reading a
   wall of identical checkmarks. Same checkmark shape throughout — only
   color/weight changes — so "included" still reads as one consistent
   visual language.
   ========================================================= */

.pricing-card__features {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: var(--space-6) 0;
	padding: 0;
	list-style: none;
	flex: 1;
}

.pricing-card__feature {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.pricing-card__feature .icon {
	flex-shrink: 0;
	margin-top: 0.2em;
	color: var(--color-text-faint);
}

.pricing-card__feature--highlight {
	color: var(--color-text);
	font-weight: var(--fw-semibold);
}

.pricing-card__feature--highlight .icon {
	color: var(--color-accent);
}

.pricing-card__cta {
	width: 100%;
}