/**
 * Home/Banners lado a lado — Figma 260:1725.
 *
 * Desktop (1200): padding 48/24 · gap 24 · 2 banners iguais, proporção 564/360, raio radius-card
 *   degradê de baixo para cima (preto 75% → transparente em 75% da altura)
 *   texto na base, padding 24, largura máx. 340, gap 8, cor surface:
 *   título Heading Medium 24/1.2 (600) · frase Body 16 · link Label 16 (500) sublinhado + "→".
 * Mobile (< 782px): padding 32/16 · gap 16 · empilham (um por linha).
 *
 * Home/Banners em 3 — Figma 272:2127: mesmo componente com 3 banners de proporção 368/460
 *   (título, frase e link iguais). No celular empilham na proporção 564/360.
 */

.cdw-duplos__conteiner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--space-24);
	max-width: var(--wp--custom--layout--container-max);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--space-48) var(--wp--preset--spacing--space-24);
}

.cdw-duplo {
	position: relative;
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	overflow: hidden;
	min-width: 300px;
	aspect-ratio: 564 / 360;
	padding: var(--wp--preset--spacing--space-24);
	border-radius: var(--wp--custom--radius--card);
	/* Fundo de reserva escuro: o texto é branco, então precisa continuar legível enquanto a foto
	   carrega ou se ela falhar. */
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

/* Banners em 3 (Figma 272:2127): três colunas iguais, proporção 368/460. */
.cdw-duplos--3 .cdw-duplo {
	min-width: 0;
	aspect-ratio: 368 / 460;
}

/* Um banner só: ocupa a linha toda sem ficar alto demais. */
.cdw-duplos--1 .cdw-duplo {
	aspect-ratio: 1152 / 360;
}

.cdw-duplo__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--motion--duracao-lenta) var(--wp--custom--motion--ease-padrao);
}

.cdw-duplo.tem-texto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 75%);
	pointer-events: none;
}

.cdw-duplo__texto {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--space-8);
	max-width: min(340px, 100%);
}

.cdw-duplo__titulo {
	font-family: var(--wp--preset--font-family--display);
	/* Figma: font-size/heading-md = 24 neste componente. */
	font-size: 1.5rem;
	font-weight: var(--wp--custom--weight--heavy);
	line-height: 1.2;
}

.cdw-duplo__descricao {
	font-size: var(--wp--preset--font-size--body);
	font-weight: var(--wp--custom--weight--regular);
	line-height: 1.5;
}

.cdw-duplo__link {
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: 1.5;
	text-decoration: underline;
	text-underline-position: from-font;
}

a.cdw-duplo:hover .cdw-duplo__img {
	transform: scale(1.03);
}

a.cdw-duplo:focus-visible {
	outline-offset: 2px;
}

@media (max-width: 781px) {
	.cdw-duplos__conteiner {
		flex-direction: column;
		gap: var(--wp--preset--spacing--space-16);
		padding: var(--wp--preset--spacing--space-32) var(--wp--preset--spacing--space-16);
	}

	.cdw-duplo,
	.cdw-duplos--1 .cdw-duplo,
	.cdw-duplos--3 .cdw-duplo {
		flex: none;
		width: 100%;
		min-width: 0;
		aspect-ratio: 564 / 360;
		padding: var(--wp--preset--spacing--space-16);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cdw-duplo__img {
		transition: none;
	}
}