/* ==========================================================
   La Vanguardia · Tarjeta de resultado de búsqueda
   Handoff design/handoff-search-result, integrado en app/.
   Vive dentro del panel de resultados del buscador (<dialog> del menú).

   • Toda la tarjeta es un único <a> (navegación, no contenido editorial):
     sin <article>, sin <h2>/<h3>. Textos en <span>/<p>/<div>.
   • Prefijo .lvm-res- (convive con el menú .lvm__).
   • Tokens: var(--token, fallback) → hereda el sistema LV si está;
     si no, usa los fallback. NO incluye @font-face (la página ya carga fuentes).
   ========================================================== */

/* ==========================================================
   Rejilla
   ========================================================== */
.lvm-res-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 30px 22px;
}

/* ==========================================================
   Tarjeta (enlace)
   ========================================================== */
.lvm-res-card {
	/* tokens locales con fallback al sistema LV */
	--lvmr-navy: var(--lv-blue, #001c4c);
	--lvmr-live: var(--live, #c8252c);
	--lvmr-paper: var(--paper, #fafaf6);
	--lvmr-paper-2: var(--paper-2, #f2f0e9);
	--lvmr-ink: var(--ink, #15171a);
	--lvmr-ink-soft: var(--ink-soft, #2a2d33);
	--lvmr-meta: var(--meta, #6b6960);
	--lvmr-hair: var(--hair, #d9d5ca);
	--lvmr-hair-soft: var(--hair-soft, #e8e5dc);
	--lvmr-yellow: var(--lv-yellow, #ffd200);
	--lvmr-f-head: var(--f-headline, "Tiempos Headline", Georgia, serif);
	--lvmr-f-text: var(--f-text, "Tiempos Text", Georgia, serif);
	--lvmr-f-sans: var(--f-sans, "Söhne", -apple-system, "Helvetica Neue", Arial, sans-serif);

	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
	color: inherit;
	border-radius: 4px; /* solo para que el foco no recorte en seco */
	outline: none;
}
.lvm-res-card *,
.lvm-res-card *::before,
.lvm-res-card *::after {
	box-sizing: border-box;
}

/* — Foco de teclado (las tarjetas son enlaces) — */
.lvm-res-card:focus-visible {
	outline: 2px solid var(--lvmr-navy);
	outline-offset: 3px;
}

/* ==========================================================
   Media 16:9 (reserva espacio → sin saltos de layout)
   ========================================================== */
.lvm-res-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background:                  /* placeholder rayado bajo la imagen */ repeating-linear-gradient(135deg, var(--lvmr-hair-soft) 0 8px, transparent 8px 16px), var(--lvmr-paper-2);
}
.lvm-res-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}
/* Estado SIN foto: marca discreta sobre el rayado (no un hueco roto) */
.lvm-res-card__media--empty::after {
	content: "La Vanguardia";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--lvmr-f-sans);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lvmr-meta);
	opacity: 0.7;
}

/* ==========================================================
   Cuerpo de texto
   ========================================================== */
.lvm-res-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* — Volanta = sección — */
.lvm-res-card__kicker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--lvmr-f-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lvmr-navy);
}
/* Directo: punto + texto en rojo */
.lvm-res-card__kicker--live {
	color: var(--lvmr-live);
}
.lvm-res-live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--lvmr-live);
	flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.lvm-res-live-dot {
		animation: lvm-res-pulse 1.8s ease-out infinite;
	}
}
@keyframes lvm-res-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(200, 37, 44, 0.45);
	}
	70% {
		box-shadow: 0 0 0 6px rgba(200, 37, 44, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(200, 37, 44, 0);
	}
}

/* — Titular (Tiempos Headline, máx. 3 líneas) — */
.lvm-res-card__title {
	font-family: var(--lvmr-f-head);
	font-weight: 600;
	font-size: var(--fs-18);
	line-height: var(--lh-18);
	letter-spacing: -0.01em;
	color: var(--lvmr-ink);
	text-wrap: pretty;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.15s ease;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	word-wrap: break-word;
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}
/* Resaltado del término buscado — amarillo de marca, sutil */
.lvm-res-card__title mark {
	background-color: #ffe680; /* fallback */
	background-color: color-mix(in srgb, var(--lvmr-yellow) 48%, var(--lvmr-paper));
	color: inherit;
	padding: 0 0.06em;
	border-radius: 2px;
}

/* — Pie: byline + fecha — */
.lvm-res-card__meta {
	display: block;
	font-family: var(--f-sans);
	font-size: var(--fs-11);
	line-height: var(--lh-11);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--meta);
}
.lvm-res-card__author {
	color: var(--meta);
}

/* ==========================================================
   Variante OPINIÓN — el autor es lo relevante de una columna
   ========================================================== */
.lvm-res-card--opinion .lvm-res-card__title {
	font-style: italic;
	font-weight: 500;
}
.lvm-res-card--opinion .lvm-res-card__author {
	font-family: var(--lvmr-f-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lvmr-navy);
}

/* ==========================================================
   Hover (apuntador fino)
   ========================================================== */
@media (hover: hover) {
	.lvm-res-card:hover .lvm-res-card__title {
		opacity: 0.8;
	}
}
@media (prefers-reduced-motion: reduce) {
	.lvm-res-card__img {
		transition: none;
	}
	.lvm-res-card:hover .lvm-res-card__img {
		transform: none;
	}
}

@media (max-width: 640px) {
	.lvm-res-grid {
		gap: 0px;
	}

	.lvm-res-card {
		border-bottom: 1px solid var(--hair);
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.lvm__more-wrap {
		margin-top: 15px;
	}
}