/**
 * Kalunat — la sección de newsletter de las portadas Magazine y
 * "horizontes (carrusel)": un panel en tinta con la esquina encendida
 * por el naranja del logo, el título grande a la izquierda y el
 * formulario a la derecha. Dentro, la paleta es la del modo oscuro,
 * así que el formulario se adapta solo.
 *
 * Se carga en esas plantillas (inc/magazine.php, inc/horizons.php).
 */

.kalunat-mag-letter {
	--wp--preset--color--base: #1d1f22;
	--wp--preset--color--contrast: #f3f2ee;
	--wp--preset--color--muted: #a3a3a3;
	--wp--preset--color--line: #d6d6d6;
	--wp--preset--color--accent: #fb864d;

	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: end;
	margin-top: var(--wp--preset--spacing--70) !important;
	padding: var(--wp--preset--spacing--60);
	overflow: clip;
	border-radius: var(--wp--custom--radius--media);
	background:
		radial-gradient(60% 90% at 100% 100%, color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent), transparent 70%),
		var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	color-scheme: dark;
}

.kalunat-mag-letter > * {
	margin: 0;
}

.kalunat-mag-letter__eyebrow {
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--wider);
	text-transform: uppercase;
}

.kalunat-mag-letter__title {
	max-width: 12ch;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.7rem, 1.512rem + 3.888vw, 5.94rem);
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

@media (max-width: 781px) {

	.kalunat-mag-letter {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}