/* ==========================================================================
   HERO DELLE PAGINE
   Immagine in evidenza sotto l'header, titolo al centro, briciole sotto.
   Caricato solo dove l'hero esce davvero (vedi inc/enqueue.php).

   1. Contenitore e immagine
   2. Testo
   3. Briciole di pane
   4. Responsive
   ========================================================================== */

/* 1. Contenitore e immagine =============================================== */
.dz-hero {
	--dz-hero-h:       clamp(260px, 32vw, 420px);
	--dz-hero-testo:   #ffffff;

	/* Velo nero in sfumatura: tre tappe, dal più chiaro in alto al più scuro
	   in fondo. Alzando o abbassando queste tre opacità regoli tutto senza
	   toccare il gradiente. */
	--dz-hero-velo-alto:  rgba(0, 0, 0, 0.35);
	--dz-hero-velo-medio: rgba(0, 0, 0, 0.58);
	--dz-hero-velo-basso: rgba(0, 0, 0, 0.82);

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--dz-hero-h);
	overflow: hidden;
	background: var(--dz-nero, #1a1a1a); /* si vede finché l'immagine carica */
	color: var(--dz-hero-testo);
}

.dz-hero__media {
	position: absolute;
	inset: 0;
}

.dz-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Velo nero sfumato sopra la foto: senza, un titolo bianco su un'immagine
   chiara è illeggibile. Scurisce scendendo, così titolo e briciole restano
   nitidi qualunque cosa ci sia nella foto.
   Valori rgba espliciti, niente color-mix(): funziona ovunque senza fallback. */
.dz-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to bottom,
			var(--dz-hero-velo-alto)  0%,
			var(--dz-hero-velo-medio) 45%,
			var(--dz-hero-velo-basso) 100%
		);
}

/* 2. Testo ================================================================ */
.dz-hero__inner {
	position: relative; /* sopra il velo */
	z-index: 1;
	width: 100%;
	max-width: var(--dz-container, 1280px);
	margin-inline: auto;
	padding: 3.5rem 1.25rem;
	text-align: center;
}

.dz-hero__title {
	font-family: var(--dz-font-titoli, inherit);
	font-size: clamp(1.75rem, 4vw, 2.875rem);
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.15;
	margin: 0;
	text-transform: uppercase;
	color: inherit;
}

/* 3. Briciole di pane ===================================================== */
.dz-crumbs {
	margin-top: 1.125rem;
}

.dz-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
}

.dz-crumbs__item {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* Separatore generato dal CSS: non è contenuto, non deve finire negli
   screen reader né essere selezionabile col testo. */
.dz-crumbs__item + .dz-crumbs__item::before {
	content: '/';
	opacity: 0.6;
	user-select: none;
}

.dz-crumbs__link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--dz-transizione, 240ms ease);
}

.dz-crumbs__link:hover,
.dz-crumbs__link:focus-visible {
	color: inherit;
	border-bottom-color: currentColor;
}

.dz-crumbs__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.dz-crumbs__corrente {
	opacity: 0.85;
}

/* Fuori dall'hero (se un domani le usi in una pagina chiara) il colore torna
   quello del testo normale; dentro l'hero eredita il bianco. */
.dz-crumbs {
	color: var(--dz-grigio-testo, #6b6b6b);
}

.dz-hero .dz-crumbs {
	color: inherit;
}

/* 4. Responsive =========================================================== */
@media (max-width: 640px) {
	.dz-hero {
		--dz-hero-h: 220px;
	}

	.dz-hero__inner {
		padding: 2.5rem 1.25rem;
	}

	.dz-crumbs__list {
		font-size: 0.875rem;
	}
}