/* ==========================================================================
   DAZZERO ACADEMY — CSS di progetto
   1. Variabili
   2. Tab / filtro
   3. Griglie e card
   4. Gallery portfolio
   5. Utility
   6. Override Elementor / Hello
   ========================================================================== */

/* 1. Variabili ============================================================ */
:root {
	--dz-nero:        #1a1a1a;
	--dz-nero-puro:   #000000;
	--dz-bianco:      #ffffff;
	--dz-grigio:      #f4f4f4;
	--dz-grigio-testo:#6b6b6b;
	--dz-bordo:       #e4e4e4;
	--dz-accento:     #141414; /* l'accento del brand è il quasi-nero, non un colore a parte */

	--dz-gap:         2px;   /* spazio tra le foto della griglia */
	--dz-radius:      0;
	--dz-transizione: 240ms cubic-bezier(0.4, 0, 0.2, 1);

	--dz-container:   1280px;
}
[type=button]:focus, button:focus, button:hover {
	background-color: transparent !important;
}
/* 2. Tab / filtro ========================================================= */
.dz-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem;
	margin: 0 0 2.5rem;
}

/* Di base: niente sfondo, niente bordo — solo il testo. Il bordo
   (border: 1px solid transparent, non border: 0) c'è già da subito, solo
   trasparente: così quando compare al passaggio del mouse non sposta di
   un pixel il bottone, cambia solo colore. */
.dz-tabs__btn {
	appearance: none;
	background: transparent;
	border: 1px solid transparent !important;
	border-radius: 0 !important;
	color: var(--dz-nero) !important;
	cursor: pointer !important;
	font-family: var(--dz-font-ui) !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.12em !important;
	line-height: 1 !important;
	padding: 1.125rem 1.5rem !important;
	text-transform: uppercase !important;
	transition:
		background-color var(--dz-transizione),
		color var(--dz-transizione),
		border-color var(--dz-transizione);
}

/* Al passaggio: esce solo il bordo, lo sfondo resta trasparente. */
.dz-tabs__btn:hover {
	border: 1px solid var(--dz-nero) !important;
	background-color: transparent !important;	
	color: var(--dz-nero) !important;
}

/* Attiva: l'unica con lo sfondo pieno. */
.dz-tabs__btn:focus-visible,
.dz-tabs__btn.is-active {
	background: var(--dz-nero) !important;
	border-color: var(--dz-nero) !important;
	border-radius: 0 !important;
	color: var(--dz-bianco) !important;
}
.dz-tabs__btn.is-active:hover {
	background: var(--dz-nero) !important;
	border-color: var(--dz-nero) !important;
	color: var(--dz-bianco) !important;
}	
.dz-tabs__btn:focus-visible {
	outline: 2px solid var(--dz-accento);
	outline-offset: 2px;
}

/* 3. Griglie e card ======================================================= */
.dz-grid-wrap {
	max-width: var(--dz-container);
	margin-inline: auto;
}

.dz-grid {
	display: grid;
	grid-template-columns: repeat(var(--dz-col, 3), minmax(0, 1fr));
	gap: var(--dz-gap);
}

.dz-card {
	position: relative;
	min-width: 0;
}

.dz-card.is-hidden {
	display: none;
}

.dz-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.dz-card__media {
	position: relative;
	overflow: hidden;
	background: var(--dz-grigio);
	height: 410px;
}

.dz-card__media img {
	display: block;
	width: 100%;
	height: 410px !important;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dz-card__link:hover .dz-card__media img {
	transform: scale(1.04);
}

/* Velo nero sopra la foto, solo al passaggio: fa risaltare il titolo
   bianco che gli esce sopra. */
.dz-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity var(--dz-transizione);
}

.dz-card__link:hover .dz-card__media::after,
.dz-card__link:focus-visible .dz-card__media::after {
	opacity: 1;
}

/* Il titolo esce in overlay solo al passaggio, in basso a sinistra sopra
   la foto — non più un rigo di testo sotto la card. */
.dz-card__title {
	position: absolute;
	z-index: 1;
	inset-inline: 1.25rem;
	inset-block-end: 1.25rem;
	margin: 0;
	color: var(--dz-bianco);
	font-family: var(--dz-font-titoli);
	font-size: 25px;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.25;
	opacity: 0;
	transition: opacity var(--dz-transizione);
	pointer-events: none;
}

.dz-card__link:hover .dz-card__title,
.dz-card__link:focus-visible .dz-card__title {
	opacity: 1;
}

.dz-card__meta {
	color: var(--dz-grigio-testo);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	margin: 0.875rem 0 0;
	text-transform: uppercase;
}

/* Badge "Sfoglia" sui lavori degli studenti — in alto a destra, non in
   basso: da quando il titolo esce in overlay in basso a sinistra (vedi
   sopra), quello spazio è suo, i due non devono contendersi la stessa riga. */
.dz-card__badge {
	position: absolute;
	z-index: 1;
	inset-block-start: 1.25rem;
	inset-inline-end: 1.25rem;
	transform: translateY(-0.5rem);
	background: var(--dz-bianco);
	color: var(--dz-nero);
	font-family: var(--dz-font-ui);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	padding: 0.625rem 1.25rem;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity var(--dz-transizione), transform var(--dz-transizione);
	pointer-events: none;
}

.dz-card__link:hover .dz-card__badge,
.dz-card__link:focus-visible .dz-card__badge {
	opacity: 1;
	transform: translateY(0);
}

/* 4. Gallery portfolio ==================================================== */
.dz-gallery {
	display: grid;
	grid-template-columns: repeat(var(--dz-col, 3), minmax(0, 1fr));
	gap: var(--dz-gap);
	margin: 0;
}

.dz-gallery__item {
	margin: 0;
	min-width: 0;
}

.dz-gallery__item img {
	display: block;
	width: 100%;
	height: auto;
}

/* Variante masonry: aggiungi la classe .dz-gallery--masonry al contenitore */
@supports (grid-template-rows: masonry) {
	.dz-gallery--masonry {
		grid-template-rows: masonry;
	}
}

/* --- Schede portfolio ([dazzero_portfolio_tabs]) ---
   Ogni scheda è un progetto, il pannello che mostra è la sua gallery
   intera (.dz-gallery, gli stili sono quelli qui sopra): cambiare scheda
   scambia il pannello visibile, non filtra una griglia unica.
   L'attributo [hidden] da solo non basterebbe: .dz-gallery dichiara
   display:grid nel CSS del tema, e una regola d'autore batte sempre lo
   style di user-agent dietro [hidden] anche a parità di specificità —
   il pannello nascosto continuerebbe a occupare spazio come una griglia
   vuota. Questa regola vince perché ha una classe in più. */
.dz-portfolio-tabs__panel[hidden] {
	display: none;
}

/* 5. Utility ============================================================== */
[data-dz-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 700ms ease, transform 700ms ease;
}

[data-dz-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* 6. Override Elementor / Hello =========================================== */
body {
	font-family: var(--dz-font-testo);
}

/* Tutti i titoli in Kiona Regular.
   L'!important serve davvero: la palette tipografica del kit Elementor viene
   stampata dopo questo file e con selettori più specifici, quindi senza
   !important i titoli dei widget tornerebbero al font del kit. Il valore resta
   la variabile, così il font si cambia in un punto solo (fonts.css).
   .elementor-heading-title copre i titoli che Elementor stampa come div o
   span invece che come h1-h6. */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--dz-font-titoli) !important;
}

/* Addio #c36 del reset.css di Hello Elementor.
   Prima i link seguivano l'Accent della palette globale di Elementor
   (--e-global-color-accent): comodo finché quell'Accent è quello giusto, ma
   sul kit di questo sito non lo è — è per questo che il rosa del reset
   continuava a spuntare qui e là nonostante l'override. Adesso i link
   ignorano del tutto la palette di Elementor e usano --dz-accento, che è
   il quasi-nero del brand: cambi colore in un punto solo, qui sopra,
   indipendentemente da cosa c'è impostato in Impostazioni sito → Elementor. */
:root {
	--dz-link:       var(--dz-accento);
	--dz-link-hover: color-mix(in srgb, var(--dz-link) 70%, #000);
}

a {
	color: var(--dz-link);
	transition: color var(--dz-transizione);
}

a:hover,
a:focus {
	color: var(--dz-link-hover);
}

a:focus-visible {
	outline: 2px solid var(--dz-link);
	outline-offset: 2px;
}

/* I link delle card hanno già il loro colore. */
.dz-card__link,
.dz-card__link:hover {
	color: inherit;
}

/* 7. Responsive =========================================================== */
@media (max-width: 1024px) {
	.dz-grid,
	.dz-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.dz-grid,
	.dz-gallery {
		grid-template-columns: 1fr;
	}

	.dz-tabs {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.dz-tabs::-webkit-scrollbar {
		display: none;
	}

	.dz-tabs__btn {
		flex: 0 0 auto;
	}
}