/* ============================================================
   La Vanguardia · Módulo "Ficha de la autora / autor"
   Bloque de cierre al final del cuerpo de la noticia.
   (Del handoff design/noticia/ficha-autor-modulo, integrado en app/.)
   ------------------------------------------------------------
   Usa los tokens del design system del sitio (tokens.css) con
   fallback embebido, de modo que funciona STANDALONE y, al
   integrarlo, hereda automáticamente los tokens del sistema.
   Único ajuste sobre el handoff: la fuente de texto es --f-text
   (el sitio no define --f-serif-text).
   Responsive: layout DESKTOP (foto a la izquierda) que colapsa a
   layout apilado en <= 600px, o forzado con .lv-author--compact.
   Dark mode: automático vía los tokens del host ([data-theme]).
   ============================================================ */

.lv-author {
	/* — Tokens con fallback. Si el host los define, se heredan — */
	--_blue: var(--lv-blue, #001c4c);
	--_ink: var(--ink, #15171a);
	--_ink-soft: var(--ink-soft, #2a2d33);
	--_meta: var(--meta, #6b6960);
	--_hair: var(--hair, #d9d5ca);
	--_hair-soft: var(--hair-soft, #e8e5dc);
	--_paper: var(--paper, #fafaf6);
	--_paper-2: var(--paper-2, #f2f0e9);
	--_r-card: var(--r-card, 0px);
	--_f-headline: var(--f-headline, "Tiempos Headline", "Tiempos Text", Georgia, serif);
	--_f-sans: var(--f-sans, "Söhne", -apple-system, "Helvetica Neue", Arial, sans-serif);
	--_f-text: var(--f-text, "Tiempos Text", "Source Serif 4", Georgia, serif);
	--_f-mono: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
}

/* — Epígrafe — */
.lv-author__eyebrow {
	display: block;
	font-family: var(--_f-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--_blue);
	margin: 0 0 16px;
}

/* — Tarjeta — */
.lv-author__card {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	padding: 30px 32px;
	border: 1px solid var(--_hair);
	border-radius: var(--_r-card);
	background: var(--_paper-2);
}

/* — Retrato (foto grande) — */
.lv-author__photo {
	position: relative;
	flex: 0 0 104px;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, var(--lv-blue), var(--accent-quote, #6b4a52));
	display: grid;
	place-items: center;
	font-size: var(--fs-24);
	text-transform: uppercase;
	text-align: center;
	line-height: 1.3;
	color: #fff;
	font-family: var(--f-sans);
	font-weight: 600;
}
.lv-author__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* — Cuerpo del detalle — */
.lv-author__body {
	flex: 1 1 auto;
	min-width: 0;
}
.lv-author__head {
	display: flex;
	align-items: center;
	gap: 6px 14px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}
.lv-author__name {
	margin: 0;
	flex: 0 0 auto;
	font-family: var(--_f-headline);
	font-weight: 600;
	font-size: 27px;
	line-height: 1.1;
	color: var(--_ink);
}
.lv-author__count {
	font-family: var(--_f-sans);
	font-size: 13px;
	color: var(--_meta);
}
.lv-author__role {
	font-family: var(--_f-sans);
	font-size: var(--fs-13);
	font-weight: 600;
	line-height: 1.4;
	color: var(--_blue);
	text-transform: uppercase;
}
.lv-author__bio {
	margin: 12px 0 0;
	font-family: var(--_f-text);
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--_ink-soft);
	text-wrap: pretty;
}

/* — Pie: enlace + redes — */
.lv-author__footer {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--_hair);
}
.lv-author__more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--_f-sans);
	font-size: var(--fs-13);
	font-weight: 600;
	color: var(--_ink);
	text-decoration: none;
	text-transform: uppercase;
}
.lv-author__more:hover {
	color: var(--_blue);
}
.lv-author__more svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.lv-author__spacer {
	flex: 1 1 auto;
}

.lv-author__socials {
	display: flex;
	align-items: center;
	gap: 6px;
}
.lv-author__social {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--_hair);
	background: transparent;
	color: var(--_ink);
	display: grid;
	place-items: center;
	text-decoration: none;
	transition:
		background 0.15s,
		border-color 0.15s,
		color 0.15s;
}
.lv-author__social:hover {
	background: var(--_paper);
	border-color: var(--_blue);
	color: var(--_blue);
}
.lv-author__social svg {
	width: 15px;
	height: 15px;
}

/* — Coautores (firmas adicionales) — filas compactas bajo la ficha rica,
   integradas en la misma caja (el card pierde su borde inferior). — */
.lv-author:has(.lv-author__co) .lv-author__card {
	border-bottom: 0;
}
.lv-author__co {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--_hair);
	background: var(--_paper-2);
}
.lv-author__co-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 32px;
}
.lv-author__co-item + .lv-author__co-item {
	border-top: 1px solid var(--_hair-soft);
}
.lv-author__co-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex-shrink: 0;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--lv-blue), var(--accent-quote, #6b4a52));
	color: #fff;
	font-family: var(--_f-sans);
	font-weight: 600;
	font-size: var(--fs-14);
}
.lv-author__co-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lv-author__co-id {
	flex: 1;
	min-width: 0;
}
.lv-author__co-name {
	font-family: var(--_f-headline);
	font-weight: 600;
	font-size: var(--fs-18);
	line-height: 1.2;
	color: var(--_ink);
}
.lv-author__co-role {
	margin-top: 2px;
	font-family: var(--_f-sans);
	font-size: var(--fs-13);
	font-weight: 600;
	line-height: 1.3;
	color: var(--_blue);
	text-transform: uppercase;
}
.lv-author__co-more {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--_f-sans);
	font-size: var(--fs-13);
	font-weight: 600;
	color: var(--_ink);
	text-decoration: none;
	text-transform: uppercase;
}
.lv-author__co-more:hover {
	color: var(--_blue);
}
.lv-author__co-more svg {
	width: 14px;
	height: 14px;
}

/* ============================================================
   LAYOUT APILADO  ·  móvil
   Activo automáticamente en <= 600px, o forzado con
   .lv-author--compact en cualquier ancho.
   ============================================================ */
@media (max-width: 600px) {
	.lv-author {
		margin-top: 36px;
	}
	.lv-author__card {
		flex-direction: column;
		align-items: center;
		gap: 16px;
		padding: 24px 20px;
		text-align: center;
	}
	.lv-author__photo {
		flex-basis: auto;
		width: 84px;
		height: 84px;
	}
	.lv-author__body {
		width: 100%;
	}
	.lv-author__head {
		justify-content: center;
	}
	.lv-author__name {
		font-size: 22px;
	}
	.lv-author__bio {
		text-align: left;
	}
	.lv-author__footer {
		justify-content: center;
		flex-direction: column;
		gap: 4px;
	}
	.lv-author__co-item {
		padding: 14px 20px;
	}
}

/* Modificador explícito — mismas reglas que el breakpoint móvil */
.lv-author--compact .lv-author__card {
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 24px 20px;
	text-align: center;
}
.lv-author--compact .lv-author__photo {
	flex-basis: auto;
	width: 84px;
	height: 84px;
}
.lv-author--compact .lv-author__body {
	width: 100%;
}
.lv-author--compact .lv-author__head {
	justify-content: center;
}
.lv-author--compact .lv-author__name {
	font-size: 22px;
}
.lv-author--compact .lv-author__bio {
	text-align: left;
}
.lv-author--compact .lv-author__footer {
	justify-content: center;
}