/* ==========================================================
   La Vanguardia · Módulo Newsletter (tarjeta individual)
   Handoff design/portada/handoff-newsletter, integrado en app/.
   Las @font-face del handoff se omiten (el proyecto ya carga
   Tiempos vía tokens.css/Base.astro) y --f-serif-text → --f-text.
   Se pega dentro de la rejilla .newsletters (definida en portada.css).
   ========================================================== */

/* ==========================================================
   Tarjeta
   ========================================================== */
.nl-card {
	/* tokens locales con fallback al sistema LV */
	--nl-navy: var(--lv-blue, #001c4c);
	--nl-paper: var(--paper, #fafaf6);
	--nl-ink: var(--ink, #15171a);
	--nl-ink-soft: var(--ink-soft, #2a2d33);
	--nl-meta: var(--meta, #6b6960);
	--nl-hair: var(--hair, #d9d5ca);
	--nl-hair-soft: var(--hair-soft, #e8e5dc);
	--nl-f-head: var(--f-headline, "Tiempos Headline", Georgia, serif);
	--nl-f-text: var(--f-text, "Tiempos Text", Georgia, serif);
	--nl-f-sans: var(--f-sans, "Söhne", -apple-system, "Helvetica Neue", Arial, sans-serif);
	--nl-f-mono: var(--f-mono, "JetBrains Mono", ui-monospace, "SF Mono", monospace);

	box-sizing: border-box;
	/* flex column + height:100% → todas las tarjetas igualan altura (la caja la
	   estira el grid/flex padre con stretch) y el botón se ancla al fondo. */
	display: flex;
	flex-direction: column;
	height: auto;
	padding: var(--sp-4) var(--sp-5);
	background: var(--paper-2);
}
/* El CTA al fondo de la tarjeta → bordes inferiores alineados entre tarjetas. */
.nl-card .btn {
	margin-top: auto;
	width: 180px;
}
.nl-card *,
.nl-card *::before,
.nl-card *::after {
	box-sizing: border-box;
}

/* — Cabecera: etiqueta + cadencia ————————————————— */
.nl-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.nl-kicker {
	font-family: var(--nl-f-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nl-meta);
}
.nl-kicker--brand {
	color: var(--nl-navy);
}

/* — Firma: retrato del autor + marca ——————————————— */
.nl-card__masthead {
	display: flex;
	align-items: center;
	gap: 10px;
}
.nl-portrait {
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover; /* cuando es <img> */
	background:                   /* placeholder rayado cuando es <div> */ repeating-linear-gradient(135deg, var(--nl-hair-soft) 0 6px, transparent 6px 12px), var(--paper-2, #f2f0e9);
}
.nl-card__brand {
	margin: 0;
	font-family: var(--nl-f-head);
	font-weight: 600;
	font-size: var(--fs-20);
	line-height: var(--lh-20);
	letter-spacing: -0.01em;
	color: var(--nl-ink);
}
.nl-card__byline {
	margin: 3px 0 0;
	font-family: var(--f-sans);
	font-size: var(--fs-14);
	line-height: var(--lh-14);
	color: var(--nl-meta);
}
.nl-card__byline strong {
	font-weight: 400;
	color: var(--lv-blue);
}

/* — Separador ————————————————————————————————— */
.nl-rule {
	border: 0;
	border-top: 1px solid var(--nl-hair-soft);
	margin: 16px 0 14px;
}

/* — Edición de la semana ——————————————————————— */
.nl-eyebrow {
	margin: 0;
	font-family: var(--nl-f-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nl-navy);
	display: none !important;
}
.nl-card__issue {
	display: block;
	margin-bottom: 8px;
	font-family: var(--nl-f-head);
	font-style: italic;
	font-weight: 500;
	font-size: var(--fs-22);
	line-height: var(--lh-22);
	color: var(--nl-ink);
	text-decoration: none;
}
.nl-card__issue:hover {
	color: var(--nl-navy);
}
.nl-card__summary {
	margin: 0 0 12px 0;
	font-family: var(--nl-f-text);
	font-size: var(--fs-15);
	line-height: var(--lh-15);
	color: var(--nl-ink-soft);
	text-wrap: pretty;
}

/* — CTA a todo el ancho ————————————————————————— */
.nl-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 42px;
	margin-top: auto; /* ancla el botón al fondo de la tarjeta */
	padding: 0 18px;
	border: 1px solid var(--nl-ink);
	border-radius: 999px;
	background: var(--nl-ink);
	color: var(--nl-paper);
	font-family: var(--nl-f-sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		background 0.15s,
		border-color 0.15s,
		color 0.15s;
}
.nl-card__cta-gap {
	margin-top: 18px;
} /* respiración antes del CTA */
.nl-card__cta:hover {
	background: var(--nl-navy);
	border-color: var(--nl-navy);
	color: var(--nl-paper);
}
.nl-card__cta svg {
	width: 14px;
	height: 14px;
}

@media (max-width: 640px) {
	.nl-card__brand {
		font-size: var(--fs-18);
		line-height: var(--lh-18);
	}

	.nl-card__issue {
		font-size: var(--fs-20);
		line-height: var(--lh-20);
	}
}