/* ==========================================================================
   GRIGLIA CORSI — [dazzero_corsi]
   Caricato solo dove lo shortcode è presente (vedi inc/enqueue.php).

   0. Pagina corsi (page-templates/corsi.php)
   1. Contenitore e griglia
   2. Card
   3. Prezzo
   4. Freccia
   5. Variante guida ([dazzero_guide]): bottone carrello invece della freccia
   6. Paginazione
   7. Responsive
   8. Banner shop (page-templates/corsi-presenza.php)
   ========================================================================== */

/* 0. Pagina corsi ========================================================= */
/* Serve solo al template senza Elementor: se costruisci la pagina con
   Elementor questi stili non entrano mai in gioco, perché il markup
   .dz-corsi-page non esiste. */
.dz-corsi-page {
	max-width: var(--dz-container, 1280px);
	margin-inline: auto;
	padding: 3.5rem 1.25rem 5rem;
}

.dz-corsi-page__head {
	margin-bottom: 3rem;
	text-align: center;
}

.dz-corsi-page__title {
	font-family: var(--dz-font-titoli, inherit);
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	font-weight: 400;
	letter-spacing: 0.02em;
	margin: 0;
}

.dz-corsi-page__testo {
	color: var(--dz-grigio-testo, #6b6b6b);
	margin: 1rem auto 0;
	max-width: 62ch;
}

/* 1. Contenitore e griglia ================================================ */
.dz-corsi-wrap {
	--dz-corso-gap:    1.75rem;
	--dz-corso-ratio:  4 / 3;

	max-width: var(--dz-container, 1280px);
	margin-inline: auto;
}

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

/* 2. Card ================================================================= */
.dz-corso {
	position: relative;
	min-width: 0;
}

/* Riusa il filtro a schede di custom.js */
.dz-corso.is-hidden {
	display: none;
}

/* Niente contenitore: la card non è un riquadro ma una colonna di elementi
   allineati al bordo dell'immagine, come nella griglia del portfolio. Bordo,
   ombra e angoli arrotondati erano linguaggio da dashboard e stonavano con
   il resto del sito, che è impaginato piatto e severo (--dz-radius: 0). */
.dz-corso__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.dz-corso__link:hover,
.dz-corso__link:focus-visible {
	color: inherit;
}

.dz-corso__link:focus-visible {
	outline: 2px solid var(--dz-link, var(--dz-accento, #141414));
	outline-offset: 4px;
}

/* --- Immagine --- */
.dz-corso__media {
	position: relative;
	overflow: hidden;
	background: var(--dz-grigio, #f4f4f4);
	aspect-ratio: var(--dz-corso-ratio, 4 / 3);
}

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

/* Le copertine delle guide hanno spesso titolo e sottotitolo stampati
   dentro l'immagine stessa: un ritaglio a proporzione fissa ne taglierebbe
   un pezzo, stessa scelta già fatta altrove per le copertine dei corsi.
   Qui niente aspect-ratio: l'immagine tiene le sue proporzioni naturali. */
.dz-corso--guida .dz-corso__media {
	aspect-ratio: auto;
}

.dz-corso--guida .dz-corso__media img {
	height: auto;
	object-fit: initial;
}

/* --- Esaurito ([dazzero_corsi_presenza]: i prodotti WooCommerce esauriti
   restano in griglia invece di sparire, vedi inc/woocommerce.php) --- */
.dz-corso--esaurito .dz-corso__media img {
	filter: grayscale(0.7);
	opacity: 0.55;
}

.dz-corso__badge {
	position: absolute;
	z-index: 1;
	top: 0.875rem;
	left: 0.875rem;
	padding: 0.375rem 0.75rem;
	background: var(--dz-nero-puro, #000);
	color: var(--dz-bianco, #fff);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
}

/* --- Etichetta tipo ([dazzero_corsi_tutti]: "Online" / "In presenza") ---
   Stesso trattamento di .dz-corso__badge (leggibile su qualunque foto),
   ma in alto a DESTRA: sulla stessa card possono uscire entrambe (un corso
   in presenza esaurito), non devono contendersi lo stesso angolo. */
.dz-corso__tipo {
	position: absolute;
	z-index: 1;
	top: 0.875rem;
	right: 0.875rem;
	padding: 0.375rem 0.75rem;
	background: var(--dz-nero-puro, #000);
	color: var(--dz-bianco, #fff);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
}

.dz-corso__link:hover .dz-corso__media img {
	transform: scale(1.04);
}

/* Corso senza immagine in evidenza: riquadro neutro, niente buco nel layout */
.dz-corso__media-vuota {
	display: block;
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(
			-45deg,
			var(--dz-grigio, #f4f4f4) 0 12px,
			#ededed 12px 24px
		);
}

/* --- Corpo --- */
/* Nessun padding laterale: il testo parte esattamente dal bordo sinistro
   dell'immagine. È l'allineamento che tiene insieme la griglia una volta
   tolti i riquadri. */
.dz-corso__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;          /* i piedini restano allineati anche con titoli di
	                            lunghezza diversa */
	gap: 0.875rem;           /* distanza minima titolo-filetto: il gap vale
	                            sempre, il margin-top:auto del piedino si
	                            prende solo lo spazio che avanza */
	padding: 0.875rem 0 0;
}

.dz-corso__title {
	font-family: var(--dz-font-titoli, inherit);
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: 0.04em;  /* stesso tracking di .dz-card__title */
	line-height: 1.35;
	margin: 0;

	/* Massimo tre righe: oltre, la griglia si sfalsa in altezza */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Filetto tipografico al posto del bordo della card: dà struttura alla riga
   del prezzo senza chiudere niente dentro una scatola. */
.dz-corso__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.875rem;
	border-top: 1px solid var(--dz-bordo, #e4e4e4);
}


/* 3. Prezzo =============================================================== */
.dz-corso__prezzo {
	font-family: var(--dz-font-ui, inherit);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--dz-nero, #1a1a1a);
	line-height: 1.2;
	min-width: 0;
}

.dz-corso__prezzo--gratis {
	color: var(--dz-link, var(--dz-accento, #141414));
	text-transform: uppercase;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
}

/* Prezzo scontato. Copriamo sia il nostro markup (del/ins) sia quello
   di LearnPress (.origin-price / .price), così la card resta identica
   qualunque dei due arrivi. */
.dz-corso__prezzo del,
.dz-corso__prezzo .origin-price {
	color: var(--dz-grigio-testo, #6b6b6b);
	font-weight: 400;
	font-size: 0.875em;
	text-decoration: line-through;
	margin-right: 0.35em;
}

.dz-corso__prezzo ins,
.dz-corso__prezzo .price {
	text-decoration: none;
	background: none;
	color: inherit;
}

/* 4. Freccia ============================================================== */
.dz-corso__freccia {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--dz-bordo, #e4e4e4);
	border-radius: 50%;
	color: var(--dz-nero, #1a1a1a);
	transition:
		background-color var(--dz-transizione, 240ms ease),
		border-color var(--dz-transizione, 240ms ease),
		color var(--dz-transizione, 240ms ease);
}

.dz-corso__link:hover .dz-corso__freccia,
.dz-corso__link:focus-visible .dz-corso__freccia {
	background: var(--dz-nero, #1a1a1a);
	border-color: var(--dz-nero, #1a1a1a);
	color: var(--dz-bianco, #fff);
}

.dz-corso__freccia-icona {
	width: 1.125rem;
	height: 1.125rem;
	transition: transform var(--dz-transizione, 240ms ease);
}

.dz-corso__link:hover .dz-corso__freccia-icona {
	transform: translateX(2px);
}

/* 5. Variante guida ([dazzero_guide], riusata anche da [dazzero_pillole] —
   la card delle pillole porta la classe .dz-corso--guida apposta per
   ereditare queste stesse regole invece di duplicarle) ===================== */
/* .dz-corso__link è height:100% di serie, per righe di card tutte alte
   uguale (riempie la cella della griglia). Qui non va bene: senza
   aspect-ratio sull'immagine (vedi sezione 2, .dz-corso--guida
   .dz-corso__media) il link si sarebbe comunque steso fino all'altezza
   della card più alta della riga, e .dz-corso__acquisto — che sta fuori
   dal link, vedi sotto — sarebbe finito staccato dal titolo con un vuoto
   in mezzo, diverso riga per riga. height:auto lo fa alto quanto basta al
   suo contenuto vero (immagine + titolo), non quanto la riga. */
.dz-corso--guida .dz-corso__link {
	height: auto;
}

/* Un bottone vero non può stare dentro un <a> (il link della card):
   prezzo e bottone carrello escono in un piede a parte, fuori dal link,
   invece che nel .dz-corso__foot dentro .dz-corso__body. */
.dz-corso__acquisto {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.875rem;
	padding-top: 0.875rem;
	border-top: 1px solid var(--dz-bordo, #e4e4e4);
}

.dz-corso__carrello {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 0.625rem 1.125rem;
	border: 1px solid var(--dz-nero, #1a1a1a);
	background: var(--dz-nero, #1a1a1a);
	color: var(--dz-bianco, #fff);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--dz-transizione, 240ms ease),
		color var(--dz-transizione, 240ms ease);
}

.dz-corso__carrello:hover,
.dz-corso__carrello:focus-visible {
	background: var(--dz-bianco, #fff);
	color: var(--dz-nero, #1a1a1a);
}

/* Stato "sto aggiungendo…": le classi le mette da sola wc-add-to-cart.js
   di WooCommerce, qui solo l'aspetto. */
.dz-corso__carrello.loading {
	opacity: 0.6;
	pointer-events: none;
}

.dz-corso__carrello--disabilitato {
	border-color: var(--dz-bordo, #e4e4e4);
	background: var(--dz-grigio, #f4f4f4);
	color: var(--dz-grigio-testo, #6b6b6b);
	cursor: not-allowed;
}

/* "Visualizza il carrello", il link che WooCommerce aggiunge da solo
   subito dopo il bottone quando l'aggiunta va a buon fine. */
.dz-corso__acquisto .added_to_cart {
	margin-inline-start: 0.625rem;
	color: var(--dz-nero, #1a1a1a);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.6875rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* 6. Paginazione ========================================================== */
.dz-corsi__pagine {
	margin-top: 2.5rem;
}

.dz-corsi__pagine ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dz-corsi__pagine li {
	margin: 0;
}

.dz-corsi__pagine .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border: 1px solid var(--dz-bordo, #e4e4e4);
	color: var(--dz-nero, #1a1a1a);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.875rem;
	text-decoration: none;
	transition:
		background-color var(--dz-transizione, 240ms ease),
		color var(--dz-transizione, 240ms ease);
}

.dz-corsi__pagine .page-numbers:hover,
.dz-corsi__pagine .page-numbers.current {
	background: var(--dz-nero, #1a1a1a);
	border-color: var(--dz-nero, #1a1a1a);
	color: var(--dz-bianco, #fff);
}

.dz-corsi__pagine .page-numbers.dots {
	border-color: transparent;
}

.dz-corsi__pagine .page-numbers.dots:hover {
	background: transparent;
	color: var(--dz-nero, #1a1a1a);
}

/* 7. Responsive =========================================================== */
/* col="" è il numero di colonne sul desktop: scendendo di larghezza le
   colonne calano da sole. Il conteggio dentro repeat() deve essere un
   intero letterale — niente min()/calc() — quindi il tetto lo mettiamo
   con data-col sul contenitore. */

/* Da 4 colonne in su → 3. Chi ne ha chieste 3 o meno resta com'è. */
@media (max-width: 1200px) {
	.dz-corsi-wrap:not([data-col="1"]):not([data-col="2"]):not([data-col="3"]) .dz-corsi {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.dz-corsi-wrap {
		--dz-corso-gap: 1.25rem;
	}

	.dz-corsi-wrap:not([data-col="1"]) .dz-corsi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.dz-corsi {
		grid-template-columns: 1fr;
	}

	.dz-corso__body {
		padding: 1rem;
	}
}

/* 8. Banner shop ========================================================== */
/* Boxata come .dz-corsi-wrap: stessa larghezza massima, niente padding
   proprio — lo prende dal padding orizzontale di .dz-corsi-page che la
   contiene. */
.dz-corsi-banner {
	max-width: var(--dz-container, 1280px);
	margin: 3rem auto 0;
}

.dz-corsi-banner__link {
	display: block;
}

.dz-corsi-banner__link:focus-visible {
	outline: 2px solid var(--dz-link, var(--dz-accento, #141414));
	outline-offset: 4px;
}

.dz-corsi-banner__img {
	display: block;
	width: 100%;
	height: auto;
}