/**
 * Title card: template-parts/cart/title-card.php (cart, checkout, order
 * received, content pages).
 * Cart 2186:1063: 176px green card, H1 in Display/L white 72px from the
 * left, radius 30; 64px under it. Smaller and radius 20 on phones.
 * --tall (FAQ 2171:670 and the other content pages): 251px, the H1 at most
 * 630px wide, so "Frequently asked questions" breaks onto two lines.
 * Background: the card fill exported flat from Figma (2560 x 352, corners
 * rounded in the image), stretched to every card height as in the frames
 * (the 251px FAQ card shows the same composition). The CSS gradient stays
 * under it while it loads and fills the transparent corners.
 */

.title-card-wrap {
	padding-bottom: clamp(32px, 22.6615px + 2.4903vw, 64px);
}

.title-card {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: clamp(112px, 93.323px + 4.9805vw, 176px);
	padding: var(--space-md) clamp(20px, 4.8249px + 4.0467vw, 72px);
	border-radius: 20px;
	background:
		image-set(url("../../images/title-card-bg.webp") 1x, url("../../images/title-card-bg@2x.webp") 2x) center / 100% 100% no-repeat,
		var(--gradient-title-card);
}

.title-card--tall {
	min-height: clamp(140px, 107.607px + 8.6381vw, 251px);
}

.title-card__title {
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: var(--text-display-l);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-display-l);
	line-height: var(--leading-display-l);
}

.title-card--tall .title-card__title {
	max-width: 630px;
}

@media (min-width: 768px) {
	.title-card {
		border-radius: 30px;
	}
}

/* Line under the H1 (Terms 2190:1539): Body/L white, 12px under the title;
 * the card grows with it (219px at 1660). */
.title-card:has(.title-card__subtitle) {
	min-height: clamp(150px, 129.8638px + 5.3696vw, 219px);
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	justify-content: center;
}

.title-card__subtitle {
	margin: 0;
	color: var(--color-white);
	font-size: var(--text-body-l);
	line-height: var(--leading-body-l);
}