/**
 * Classi CSS condivise fra più pagine/pattern (non legate a un singolo blocco
 * custom, che ha già il proprio style.css auto-enqueuato). Creato dal Task 5 per la
 * griglia a 4 celle della sezione Manifesto della Home — enqueuato una volta sola in
 * mggrp_enqueue_assets() (functions.php), i task successivi che riusano queste classi
 * (es. Task 8, sezione "Processo" di Soluzioni) non devono ri-registrare nulla.
 */

/**
 * Griglia responsive condivisa per i pattern a 4 celle. Il blocco Columns nativo di
 * WordPress ha solo due stati (affiancato oppure impilato a 1 colonna sotto ~600px):
 * non esiste uno stato intermedio "2 colonne" per il tablet. Questa classe usa CSS
 * grid per ottenere 4 colonne desktop, 2 su tablet, 1 su mobile.
 */
.mggrp-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

@media (max-width: 999px) {
	.mggrp-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.mggrp-grid-4 {
		grid-template-columns: 1fr;
	}
}

/**
 * Variante "hairline": gap di 1px su sfondo bianco al 10% di opacità, per creare
 * divisori sottili fra celle a sfondo pieno (usata dalla griglia dei 4 pillar della
 * sezione Manifesto della Home — reference/pages/Home.tsx riga 540, "gap-px bg-white/10").
 */
.mggrp-grid-4--hairline {
	gap: 1px;
	background-color: rgba(255, 255, 255, 0.1);
}

/**
 * Padding-top del wrapper <main> sulle pagine interne (non home): l'header è fisso
 * (`position: fixed`, altezza `5rem`/`6rem` — vedi blocks/site-header/style.css `.mggrp-header__bar`)
 * quindi il contenuto deve iniziare sotto di esso. Valore preso da
 * reference/MiglioLayout.tsx:187 (`isHome ? "" : "pt-24 sm:pt-28"`) — Tailwind pt-24/pt-28 =
 * 6rem/7rem, cioè altezza header + 1rem di respiro, non semplicemente l'altezza dell'header.
 * Creata dal Task 6 (prima pagina interna del tema), riusata da tutti i task successivi che
 * creano template pagina non-home.
 */
.mggrp-page-main {
	padding-top: 6rem;
}

@media (min-width: 640px) {
	.mggrp-page-main {
		padding-top: 7rem;
	}
}

/**
 * Righe "immagine + testo" alternate a coppie (Pagina Prodotti, Task 7 — lista
 * categorie). reference/pages/Prodotti.tsx riga 100 applica `lg:order-2` (Tailwind,
 * breakpoint 1024px) SOLO alla colonna immagine e SOLO da `lg:` in su: sotto quel
 * breakpoint la griglia è a colonna singola (`grid-cols-1`) e l'immagine, prima nel
 * DOM, resta sempre in cima. Qui usiamo il breakpoint di stacking del blocco Columns
 * nativo (782px, wp-includes/blocks/columns/style.css) al posto del `lg` di Tailwind:
 * il DOM ha sempre l'immagine per prima (stessa colonna in cima da impilata sotto i
 * 782px), e questa classe inverte l'ordine visivo delle due colonne solo da 782px in
 * su, dove il blocco Columns le affianca (`display:flex`, sempre attivo, quindi
 * `order` funziona a qualunque larghezza: è la media query a limitarne l'effetto).
 */
@media (min-width: 782px) {
	.mggrp-alt-row--reverse > .wp-block-column:first-child {
		order: 2;
	}

	.mggrp-alt-row--reverse > .wp-block-column:last-child {
		order: 1;
	}
}