/* Lunatika Factory — components.css (Fase 2B, Chrome base, dark-first).
   Usa i token di core.css. Il Chrome non referenzia il font brand (Gallos). */

/* --- Accessibilità --- */
.lf-screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.lf-skip-link {
	position: absolute;
	left: 0;
	top: -100%;
	background: var(--lf-borgogna);
	color: var(--lf-on-accent);
	padding: .7rem 1.2rem;
	border-radius: 0 0 6px 0;
	z-index: 1000;
	font-size: .9rem;
}
.lf-skip-link:focus { top: 0; }
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--lf-rame);
	outline-offset: 2px;
}

/* --- Tipografia condivisa (audit tipografico vs kit.css, 11/06) --- */
.lf-eyebrow {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--lf-rame);
	margin: 0 0 .6rem;
}

/* --- Header --- */
.lf-header {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 1rem 0;
	border-bottom: 1px solid var(--lf-divider);
	background: rgba(var(--lf-bg-rgb), .82);
	backdrop-filter: blur(28px);
}
.lf-header__inner { display: flex; align-items: center; gap: 1.5rem; }

.lf-logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--lf-avorio); text-decoration: none; }
.lf-logo:hover { color: var(--lf-rame); }
.lf-logo__mark { width: 34px; height: 34px; display: block; color: inherit; flex: none; }
.lf-logo__text {
	font-family: var(--lf-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.1;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: inherit;
}
.lf-logo__text span { display: block; font-weight: 400; font-size: 12px; letter-spacing: .22em; }

/* --- Nav --- */
.lf-nav { margin-left: auto; }
/* gap 1rem (era 1.6rem): con 7 voci dà cuscinetto ~40px a 1100px senza
   toccare font-size/letter-spacing (design token). white-space:nowrap → nessuna
   label a due parole (Hall of Fame, Chi siamo) spezza su due righe. Sotto 1024px
   subentra il collasso hamburger (media query più giù). */
.lf-nav__list { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.lf-nav__list a {
	font-family: var(--lf-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(var(--lf-fg-rgb), .7);
	white-space: nowrap;
}
.lf-nav__list a:hover { color: var(--lf-rame); }

/* --- Sottomenu nav (voce con figli: es. Artiste sotto Hall of Fame, fedele al
   demo). Mobile-first: lista statica indentata → accessibile senza JS, su touch
   e nel pannello mobile. Da desktop (>=769px) diventa dropdown su hover/focus. --- */
.lf-nav__list .sub-menu {
	list-style: none;
	margin: .5rem 0 0;
	padding: 0 0 0 .9rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	border-left: 1px solid rgba(var(--lf-rame-rgb), .35);
}
.lf-nav__list .sub-menu a { font-size: 10px; color: rgba(var(--lf-fg-rgb), .6); }

@media (min-width: 1025px) {
	.lf-nav__list > li { position: relative; }
	.lf-nav__has-children > a::after {
		content: "";
		display: inline-block;
		width: .36em; height: .36em;
		margin-left: .45em;
		border-right: 1.4px solid currentColor;
		border-bottom: 1.4px solid currentColor;
		transform: translateY(-.12em) rotate(45deg);
		opacity: .55;
	}
	.lf-nav__list .sub-menu {
		position: absolute;
		top: 100%;
		left: -.9rem;
		min-width: 12rem;
		margin: 0;
		padding: .8rem 1rem;
		border-left: 0;
		background: var(--lf-card);
		border: 1px solid var(--lf-card-border);
		border-radius: 12px;
		box-shadow: var(--lf-shadow-2);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .18s ease, transform .18s ease, visibility .18s;
		z-index: 60;
	}
	.lf-nav__list > li:hover > .sub-menu,
	.lf-nav__list > li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

/* --- Search (header) --- */
.lf-search { display: flex; align-items: center; gap: .4rem; }
.lf-search__field {
	background: var(--lf-card);
	border: 1px solid rgba(var(--lf-fg-rgb), .12);
	color: var(--lf-avorio);
	border-radius: 999px;
	padding: .4rem .9rem;
	font: inherit;
	font-size: .85rem;
	width: 9rem;
}
.lf-search__field::placeholder { color: var(--lf-muted); }
.lf-search__submit {
	background: none;
	border: 0;
	color: var(--lf-rame);
	cursor: pointer;
	font: inherit;
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .4rem .6rem;
}
.lf-search__submit:hover { color: var(--lf-borgogna-light); }

@media (max-width: 1024px) {
	.lf-header__inner { flex-wrap: wrap; gap: .8rem 1rem; }
	.lf-nav { margin-left: 0; }
	.lf-search__field { width: 7rem; }
}

/* --- Liste generiche (index / fallback) --- */
.lf-list { padding: 2.5rem 0; }
.lf-list__item { padding: 1.2rem 0; border-bottom: 1px solid rgba(var(--lf-fg-rgb), .07); }
.lf-list__title { font-size: 1.6rem; margin: 0 0 .3rem; }

/* --- Risultati ricerca --- */
.lf-search-results { padding: 2.5rem 0; }
.lf-search-results__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 1.5rem; }
.lf-search-results__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.lf-search-result__link { font-family: var(--lf-font-display); font-size: 1.3rem; }
.lf-search-results__empty { color: var(--lf-muted); }

/* --- Footer a 4 colonne (da Footer.jsx del demo, portato via alias layer) ---
   Colonne-link menu-driven + Contatti da Impostazioni. Token-driven → dual-theme
   automatico (fg/accent flippano col tema, nessun override [data-theme] serve). */
.lf-footer {
	margin-top: 4rem;
	padding: 64px 0 32px;
	border-top: 1px solid var(--lf-divider);
	color: var(--fg-muted);
}
.footer-grid { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px); margin-bottom: 40px; }
.footer-brand { flex: 2 1 260px; }
.lf-footer__logo { display: inline-flex; align-items: center; gap: 12px; color: var(--fg); margin-bottom: 16px; }
.lf-footer__logo svg { width: 34px; height: 34px; flex-shrink: 0; }
.lf-footer__name { font-family: var(--lf-font-body); font-weight: 600; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg); line-height: 1.15; }
.lf-footer__name span { display: block; font-weight: 400; font-size: 12px; letter-spacing: .22em; }
.footer-brand p { font-size: 14px; color: var(--fg-muted); line-height: 1.7; margin: 0; max-width: 300px; }
.footer-col { flex: 1 1 150px; }
.footer-col h5 { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 16px; }
.footer-col a,
.footer-col p { display: block; font-size: 14px; color: var(--fg-muted); padding: 4px 0; margin: 0; transition: color var(--t-base) var(--ease); }
.footer-col a:hover { color: var(--fg); }
.footer-bottom {
	padding-top: 24px;
	border-top: 1px solid var(--lf-divider);
	display: flex; justify-content: space-between; align-items: center;
	flex-wrap: wrap; gap: 12px;
	font-size: 12px; color: rgba(var(--fg-rgb), .45);
}
.lf-legal-links {
	display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
}
.lf-legal-links a,
.lf-legal-links button.cmplz-manage-consent {
	background: none; border: 0; padding: 0; cursor: pointer;
	font: inherit; color: inherit;
	text-decoration: underline; text-underline-offset: 2px;
	transition: color var(--t-base) var(--ease);
}
.lf-legal-links a:hover,
.lf-legal-links button.cmplz-manage-consent:hover { color: var(--accent-2-hover); }
.footer-soc { display: flex; gap: 10px; }
.footer-soc a {
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(var(--lf-rame-rgb), .08);
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--accent-2); transition: all var(--t-base) var(--ease);
}
.footer-soc a svg { width: 16px; height: 16px; }
.footer-soc a:hover { background: var(--accent); color: var(--lf-on-accent); transform: translateY(-2px); }
@media (max-width: 768px) {
	.footer-bottom { flex-direction: column; text-align: center; }
}

/* --- Header panel + hamburger (progressive enhancement) ---
   Default (desktop e senza JS): il panel è trasparente (nav+search inline),
   l'hamburger è nascosto. Con .js-nav + mobile: nav/search collassano. */
.lf-header__panel { display: contents; }
.lf-nav-toggle { display: none; }
.lf-nav__list a[aria-current="page"] { color: var(--lf-rame); }

@media (max-width: 1024px) {
	.js-nav .lf-nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		width: 2.6rem;
		height: 2.6rem;
		padding: 0;
		background: none;
		border: 1px solid rgba(var(--lf-fg-rgb), .18);
		border-radius: 8px;
		color: var(--lf-avorio);
		cursor: pointer;
	}
	.js-nav .lf-nav-toggle__bars { position: relative; display: block; }
	.js-nav .lf-nav-toggle__bars,
	.js-nav .lf-nav-toggle__bars::before,
	.js-nav .lf-nav-toggle__bars::after {
		width: 18px;
		height: 2px;
		background: currentColor;
	}
	.js-nav .lf-nav-toggle__bars::before { content: ""; position: absolute; top: -6px; left: 0; }
	.js-nav .lf-nav-toggle__bars::after { content: ""; position: absolute; top: 6px; left: 0; }

	/* Pannello overlay VERSO IL BASSO sotto la barra (criterio Gian; il mockup
	   ha l'hamburger ma nessun pannello → interpretazione dichiarata).
	   La barra resta in vista; il contenuto sotto è coperto dal backdrop. */
	.js-nav .lf-header__panel {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--lf-nero);
		border-bottom: 1px solid var(--lf-divider);
		padding: 1.4rem 1.5rem 1.6rem;
		box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
	}
	.js-nav .lf-nav-toggle[aria-expanded="true"] + .lf-header__panel {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
	.js-nav .lf-header__panel .lf-nav { margin-left: 0; }
	.js-nav .lf-header__panel .lf-nav__list { flex-direction: column; gap: .9rem; }
	.js-nav .lf-header__panel .lf-search { width: 100%; }
	.js-nav .lf-header__panel .lf-search__field { width: 100%; flex: 1; }
}

/* Backdrop del menu mobile: scrim scuro theme-agnostic (come le ombre). */
.lf-nav-backdrop { display: none; }
.js-nav .lf-nav-backdrop.is-open {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 99;
	background: rgba(0, 0, 0, .5);
	backdrop-filter: blur(2px);
}
body.lf-nav-locked { overflow: hidden; }

/* --- Iscriviti (trigger modale newsletter) ---
   La modale è JS: i trigger esistono solo sotto .js-nav (niente controlli morti).
   Desktop: pill nell'utility area. Mobile: voce dentro il pannello hamburger. */
/* Pill OUTLINE come .nav-cta del kit: bordo accent, bg trasparente; piena solo in hover. */
.lf-iscriviti {
	display: none;
	background: transparent;
	color: var(--lf-avorio);
	border: 1px solid var(--lf-borgogna);
	border-radius: 999px;
	padding: 9px 22px;
	font-family: var(--lf-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
}
.lf-iscriviti:hover { background: var(--lf-borgogna); color: var(--lf-on-accent); }
.js-nav .lf-iscriviti--desktop { display: inline-flex; }
@media (max-width: 1024px) {
	.js-nav .lf-iscriviti--desktop { display: none; }
	.js-nav .lf-header__panel .lf-iscriviti--panel { display: inline-flex; align-self: flex-start; }
}

/* --- Search overlay: trigger + suggerimenti ---
   Con JS (.js-nav) il form inline si nasconde e appare la lente (desktop) o la
   voce Cerca nel pannello (mobile). Senza JS resta il form inline. */
.lf-search-open { display: none; }
.js-nav .lf-search { display: none; }
/* Lente circolare bordata, identica al .search-toggle del kit (38px, rame). */
.js-nav .lf-search-open--desktop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
	background: rgba(var(--lf-rame-rgb), .08);
	border: 1px solid rgba(var(--lf-rame-rgb), .18);
	color: var(--lf-rame);
	cursor: pointer;
}
.js-nav .lf-search-open--desktop:hover {
	background: rgba(var(--lf-rame-rgb), .16);
	color: var(--lf-rame-light);
	box-shadow: 0 0 0 3px rgba(var(--lf-rame-rgb), .12);
}
@media (max-width: 1024px) {
	.js-nav .lf-search-open--desktop { display: none; }
	.js-nav .lf-header__panel .lf-search-open--panel {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		background: none;
		border: 0;
		padding: 0;
		color: rgba(var(--lf-fg-rgb), .7);
		font-family: var(--lf-font-body);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .14em;
		text-transform: uppercase;
		cursor: pointer;
	}
	.js-nav .lf-header__panel .lf-search-open--panel:hover { color: var(--lf-rame); }
}

/* --- Theme toggle (bottone circolare bordato, valori .theme-toggle dal kit) --- */
.lf-theme-toggle { display: none; }
.js-nav .lf-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
	background: rgba(var(--lf-rame-rgb), .08);
	border: 1px solid rgba(var(--lf-rame-rgb), .18);
	color: var(--lf-rame);
	cursor: pointer;
}
.js-nav .lf-theme-toggle:hover {
	background: rgba(var(--lf-rame-rgb), .16);
	color: var(--lf-rame-light);
	transform: rotate(20deg);
}
@media (prefers-reduced-motion: no-preference) {
	.js-nav .lf-theme-toggle { transition: background .15s ease, color .15s ease, transform .15s ease; }
}
.lf-theme-toggle__moon { display: none; }
[data-theme="light"] .lf-theme-toggle__sun { display: none; }
[data-theme="light"] .lf-theme-toggle__moon { display: block; }
@media (max-width: 1024px) {
	/* Mobile/tablet: il toggle resta nella BARRA (come il mockup), a sinistra dell'hamburger. */
	.js-nav .lf-theme-toggle { margin-left: auto; order: 8; }
	.js-nav .lf-nav-toggle { margin-left: 10px; order: 9; }
}

.lf-modal--search { width: min(92vw, 560px); }
.lf-search-overlay { display: flex; gap: .6rem; margin-top: .4rem; }
.lf-search-overlay__field {
	flex: 1;
	background: var(--lf-card);
	border: 1px solid rgba(var(--lf-fg-rgb), .15);
	color: var(--lf-avorio);
	border-radius: 10px;
	padding: .8rem 1.1rem;
	font: inherit;
	font-size: 1.2rem;
}
.lf-search-overlay__field::placeholder { color: var(--lf-muted); }
.lf-search-overlay__submit {
	background: var(--lf-borgogna);
	color: var(--lf-on-accent);
	border: 0;
	border-radius: 999px;
	padding: .6rem 1.4rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .8rem;
	cursor: pointer;
}
.lf-search-overlay__submit:hover { background: var(--lf-borgogna-light); }
.lf-search-overlay__count {
	color: var(--lf-muted);
	font-family: var(--lf-font-display);
	font-style: italic;
	font-size: .95rem;
	margin: .9rem 0 0;
	min-height: 1.2em;
}
.lf-search-overlay__list { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .3rem; }
.lf-search-overlay__list a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: .55rem .8rem;
	border-radius: 8px;
	color: var(--lf-avorio);
	font-family: var(--lf-font-display);
	font-size: 1.15rem;
}
.lf-search-overlay__list a:hover { background: rgba(var(--lf-rame-rgb), .12); color: var(--lf-rame); }
.lf-search-overlay__type {
	font-family: var(--lf-font-body);
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--lf-rame);
	white-space: nowrap;
}

/* --- Modale newsletter (<dialog> nativo) --- */
.lf-modal {
	position: relative;
	background: var(--lf-notte);
	color: var(--lf-avorio);
	border: 1px solid rgba(var(--lf-rame-rgb), .25);
	border-radius: 12px;
	padding: 2rem;
	width: min(92vw, 460px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.lf-modal::backdrop { background: rgba(var(--lf-bg-rgb), .7); backdrop-filter: blur(3px); }
.lf-modal__close {
	position: absolute;
	top: .7rem;
	right: .7rem;
	background: none;
	border: 0;
	color: var(--lf-muted);
	font-size: 1.5rem;
	line-height: 1;
	padding: .3rem .55rem;
	cursor: pointer;
}
.lf-modal__close:hover { color: var(--lf-rame); }
.lf-modal__title { font-size: 1.9rem; margin: 0 0 .4rem; }
.lf-modal__copy { color: var(--lf-muted); margin: 0 0 1.2rem; font-size: .95rem; }

/* Override dark del form GPFB dentro la modale (mai toccare i file del plugin). */
.lf-modal .gpfb-frontend-wrapper {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	max-width: none;
}
.lf-modal .gpfb-form-heading { display: none; }
.lf-modal .gpfb-frontend-wrapper label {
	color: var(--lf-avorio);
	font-family: var(--lf-font-body);
	font-size: .85rem;
	letter-spacing: .04em;
}
.lf-modal .gpfb-frontend-wrapper input[type="email"],
.lf-modal .gpfb-frontend-wrapper input[type="text"],
.lf-modal .gpfb-frontend-wrapper input[type="number"] {
	background: var(--lf-card);
	border: 1px solid rgba(var(--lf-fg-rgb), .15);
	color: var(--lf-avorio);
	border-radius: 8px;
}
.lf-modal .gpfb-checkbox-wrap label { font-weight: 400; color: var(--lf-muted); }
.lf-modal .gpfb-submit-btn {
	background: var(--lf-borgogna);
	color: var(--lf-on-accent);
	border: 0;
	border-radius: 999px;
	padding: .7rem 1.7rem;
	font-weight: 600;
	letter-spacing: .08em;
	cursor: pointer;
}
.lf-modal .gpfb-submit-btn:hover { background: var(--lf-borgogna-light); }
.lf-modal .gpfb-success-msg { color: var(--lf-rame-light); }
.lf-modal .gpfb-error-msg { color: var(--lf-borgogna-light); }
/* Difensivo: honeypot sempre fuori vista anche se il CSS del plugin non carica. */
.lf-modal .gpfb-hp-field { position: absolute !important; left: -9999px !important; }

/* =============================================================
   STREAMING LINK — componente riusabile (icona + label), pillola.
   Fonte unica per i link a piattaforme (Records single + scheda artista):
   SEMPRE icona, mai testo nudo. Veste globale (token --lf-*) così è identica
   ovunque, anche dove i CSS di sezione non sono caricati. La label resta il
   testo funzionale ad alto contrasto (avorio/notte); l'icona è in rame.
   ============================================================= */
.lf-streaming-link {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .7rem 1.05rem;
	border-radius: 999px;
	border: 1px solid var(--lf-card-border-strong);
	color: var(--lf-avorio);
	font-family: var(--lf-font-body);
	font-size: .82rem;
	font-weight: 500;
	line-height: 1;
	transition: border-color var(--lf-t-base) var(--lf-ease), background-color var(--lf-t-base) var(--lf-ease), transform var(--lf-t-base) var(--lf-ease);
}
.lf-streaming-link__ico { display: inline-flex; color: var(--lf-rame); }
.lf-streaming-link__out { display: inline-flex; opacity: .5; }
.lf-streaming-link:hover {
	border-color: var(--lf-rame);
	background-color: rgba(var(--lf-rame-rgb), .08);
	transform: translateY(-2px);
}
.lf-streaming-link:hover .lf-streaming-link__ico { color: var(--lf-rame-light); }
.lf-streaming-link:focus-visible { outline: 2px solid var(--lf-rame); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.lf-streaming-link { transition: none; }
	.lf-streaming-link:hover { transform: none; }
}

/* =============================================================
   PLACEHOLDER MEDIA — sagome SVG sovrane (vedi inc/placeholders.php).
   Veste globale (token --lf-*) → segue dark/light da sola. Filigrana: sagoma
   tenue (rame, bassa opacità) su fondo a basso contrasto. Riempie i contenitori
   con aspect-ratio proprio (card/giuria/chi-siamo); dove il contenitore non
   impone un box (hero artista, cover evento) la sagoma dà forma via aspect-ratio.
   ============================================================= */
.lf-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
	background:
		radial-gradient(115% 85% at 28% 12%, rgba(var(--lf-borgogna-rgb), .10), transparent 60%),
		var(--lf-notte);
	color: var(--lf-rame);
}
.lf-ph__svg { width: 56%; height: auto; max-height: 64%; opacity: .42; }
/* line-art (ritratto): contorni fini → un filo più visibile e un po' più grande. */
.lf-ph__svg--line { opacity: .55; }
.lf-ph--ritratto .lf-ph__svg { width: 60%; max-height: 72%; }
.lf-ph--ritratto,
.lf-ph--staff { aspect-ratio: 4 / 5; }
.lf-ph--evento { aspect-ratio: 16 / 9; }
.lf-ph--evento .lf-ph__svg { width: auto; height: 78%; max-height: 78%; opacity: .4; }

/* contenitori senza box proprio: il ripiego dà forma + raggio coerente con la foto */
.lf-artist__photo .lf-ph { border-radius: 10px; }
.lf-evento__cover .lf-ph { border-radius: 12px; max-height: 360px; }

/* =============================================================
   VIDEO FACADE SOVRANA (.lf-video) — poster locale + play, iframe solo al
   click (video-embed.js → youtube-nocookie). GDPR: zero richieste a Google
   prima del click. 16:9 responsive, token theme-aware (dark/light da soli).
   ============================================================= */
.lf-video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--r-lg, 18px);
	background: var(--lf-notte);
}
.lf-video .lf-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.92);
}
/* Scrim tenue per leggibilità del play su poster chiari. */
.lf-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 60% at 50% 50%, rgba(12, 11, 14, .32), rgba(12, 11, 14, .08));
	pointer-events: none;
}
.lf-video__play {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-decoration: none;
	cursor: pointer;
}
.lf-video__play-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: rgba(12, 11, 14, .55);
	border: 1px solid rgba(245, 239, 230, .35);
	color: #f5efe6; /* sempre chiaro: sta su scrim scuro in entrambi i temi */
	backdrop-filter: blur(4px);
	transition: transform var(--t-base, .25s) var(--ease, ease), background var(--t-base, .25s) var(--ease, ease), border-color var(--t-base, .25s) var(--ease, ease);
}
.lf-video__play-circle .lf-icon { width: 30px; height: 30px; }
.lf-video__play-label {
	font-family: var(--font-accent, inherit);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(245, 239, 230, .92);
	text-shadow: 0 1px 8px rgba(12, 11, 14, .5);
}
.lf-video__play:hover .lf-video__play-circle,
.lf-video__play:focus-visible .lf-video__play-circle {
	background: var(--accent, var(--lf-borgogna));
	border-color: var(--accent, var(--lf-borgogna));
	transform: scale(1.06);
}
.lf-video__play:focus-visible {
	outline: 2px solid var(--accent-2, var(--lf-rame));
	outline-offset: -2px;
	border-radius: var(--r-lg, 18px);
}
.lf-video.is-playing .lf-video__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.lf-video.is-playing::after { display: none; }

/* =============================================================
   LIGHTBOX GALLERY CONDIVISA (.lf-lightbox) — vanilla sovrana, usata da
   scheda evento E articoli Taccuino (assets/js/lf-lightbox.js). Portata qui
   da single-evento.css (era .ev-lightbox) per essere disponibile ovunque.
   ============================================================= */
.lf-lightbox { position: fixed; inset: 0; z-index: var(--z-modal, 1000); background: rgba(8, 7, 10, 0.94); display: flex; align-items: center; justify-content: center; padding: 24px; }
.lf-lightbox[hidden] { display: none; }
.lf-lightbox__stage { position: relative; max-width: min(1100px, 92vw); max-height: 86vh; display: flex; align-items: center; justify-content: center; }
.lf-lightbox__img { max-width: 100%; max-height: 86vh; object-fit: contain; border-radius: var(--r-md, 12px); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); }
.lf-lightbox__counter { position: absolute; top: -34px; left: 0; font-family: var(--font-accent, inherit); font-size: 13px; letter-spacing: 0.08em; color: rgba(245, 239, 230, 0.75); }
.lf-lightbox__nav, .lf-lightbox__close { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(245, 239, 230, 0.22); background: rgba(20, 16, 22, 0.72); color: #f5efe6; font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--t-base, .25s) var(--ease, ease), border-color var(--t-base, .25s) var(--ease, ease); }
.lf-lightbox__nav:hover, .lf-lightbox__close:hover { background: var(--accent, var(--lf-borgogna)); border-color: var(--accent, var(--lf-borgogna)); }
.lf-lightbox__nav:focus-visible, .lf-lightbox__close:focus-visible { outline: 2px solid var(--accent-2, var(--lf-rame)); outline-offset: 2px; }
.lf-lightbox__prev { left: -66px; }
.lf-lightbox__next { right: -66px; }
.lf-lightbox__prev::before { content: '\2039'; }
.lf-lightbox__next::before { content: '\203A'; }
.lf-lightbox__close { top: -54px; right: -4px; }
.lf-lightbox__close::before { content: '\00D7'; }

@media ( max-width: 768px ) {
	.lf-lightbox__prev { left: 6px; }
	.lf-lightbox__next { right: 6px; }
	.lf-lightbox__close { top: 6px; right: 6px; }
	.lf-lightbox__counter { top: 10px; left: 12px; }
	.lf-lightbox__stage { max-height: 78vh; }
	.lf-lightbox__img { max-height: 78vh; }
}

/* [DS-muted 16/07] eyebrow AA in LIGHT: il rame (--lf-rame #8f6240 in light)
   sul crema scende sotto AA (~4.35:1, pink Permette Signorina 2.13) su testo
   minuscolo maiuscolo. Convenzione del tema (già su HoF card/modal, chi-siamo,
   taccuino feature): in LIGHT l'occhiello passa a --lf-borgogna-soft (#6e1c41 =
   7.3–10:1 sui fondi chiari). Dark invariato (rame ~7.3:1). Hero FOTO (fondo
   scuro) esclusi via :not(). */
[data-theme="light"] .lf-eyebrow { color: var(--lf-borgogna-soft); }