/**
 * Griglia responsive condivisa per i pattern a 4 celle (process-steps, stat-grid).
 *
 * 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 il comportamento richiesto dal
 * brief (4 colonne desktop, 2 su tablet, 1 su mobile).
 */
.mignat-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

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

@media (max-width: 599px) {
	.mignat-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 da process-steps).
 */
.mignat-grid-4--hairline {
	gap: 1px;
	background-color: rgba(255, 255, 255, 0.1);
}

/**
 * Toggle di visibilità responsive per sezioni che cambiano contenuto fra mobile e
 * desktop invece di semplicemente impilarsi (es. hero curvo mobile-only e colonna
 * immagine desktop-only di Contatti, riusata dalle pagine con la stessa struttura
 * nei task successivi). Breakpoint 1024px, coerente col riferimento React/Tailwind
 * (variante "lg") da cui le pagine sono ricostruite.
 */
.mignat-mobile-only {
	display: block;
}

.mignat-desktop-only {
	display: none;
}

@media (min-width: 1024px) {
	.mignat-mobile-only {
		display: none;
	}

	.mignat-desktop-only {
		display: block;
	}
}

/**
 * Etichetta piccola maiuscola tracciata sopra i campi dei form (es. i 6 campi del
 * form Contact Form 7 di Contatti — reference/pages/Contatti.tsx righe 71-101 usa
 * "text-[10px] tracking-widest uppercase text-gray-400 mb-2" sopra ogni input).
 * Riusabile da qualunque form CF7 nelle pagine successive con lo stesso stile.
 */
.mignat-form-label {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--muted-foreground, #717182);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/**
 * Override scoped per il pattern stat-grid quando è ospitato in una colonna a metà
 * larghezza invece che a piena larghezza (sezione Intro di Allestimenti —
 * reference/pages/Servizi.tsx:164 usa `grid-cols-2` fisso, mai 4, per questa
 * sezione). `.mignat-grid-4` normalmente passa a 4/2/1 colonne in base al
 * VIEWPORT, non al contenitore: dentro una colonna stretta (~580px a 1440px)
 * andrebbe comunque a 4 colonne e "3000+" degli stat andrebbe a capo o
 * debordebbe. Questa regola forza sempre 2 colonne, senza media query, perché il
 * contenitore è già stretto di suo. Non tocca `inc/patterns/stat-grid.php`, che
 * resta corretto per un eventuale uso futuro a piena larghezza (es. come il
 * Manifesto della Home, genuinamente responsive 4/2/1).
 */
.mignat-servizi-intro-stats .mignat-grid-4 {
	grid-template-columns: repeat(2, 1fr);
}

/**
 * Sotto i 600px (stesso breakpoint di `.mignat-grid-4` sopra, e stesso punto in
 * cui il blocco Columns nativo di WordPress impila le colonne) la colonna delle
 * stat resta comunque a piena larghezza ma a 2 celle: a schermi molto stretti
 * (320-430px, la maggioranza dei telefoni) il numero "3000+" nella cella non ci
 * sta più su una riga alla dimensione "x-large" (42px, fissata dalla classe
 * utility `.has-x-large-font-size` di WordPress) e va a capo in due righe.
 * Riduciamo la dimensione SOLO qui — verificato via browser che 1.5rem (24px)
 * sta su una riga anche a 320px di larghezza. `!important` è necessario perché
 * la classe core `.has-x-large-font-size` stampa già `font-size ... !important`:
 * senza pareggiare l'importanza, la specificità più alta di questo selettore non
 * basterebbe a vincere.
 */
@media (max-width: 599px) {
	.mignat-servizi-intro-stats .has-x-large-font-size {
		font-size: 1.5rem !important;
	}
}

/**
 * Immagine principale di ciascuna card stile (Stili, page-stili.html).
 * reference/pages/Stili.tsx:91 usa "aspect-[4/3] lg:aspect-auto lg:min-h-[460px]":
 * proporzione fissa 4/3 su mobile/tablet, altezza minima fissa (pari a quella della
 * colonna di testo affiancata, che stretcha di default nel blocco Columns) da
 * 1024px in su.
 */
.mignat-style-image {
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.mignat-style-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 1024px) {
	.mignat-style-image {
		aspect-ratio: auto;
		min-height: 460px;
		height: 100%;
	}
}

/**
 * Mini-gallery a 3 colonne sotto ciascuna card stile (Stili, page-stili.html).
 * reference/pages/Stili.tsx:110 usa "grid-cols-3 gap-2" SENZA varianti responsive:
 * a differenza di `.mignat-grid-4`, resta fissa a 3 colonne anche su mobile (le tre
 * miniature restano leggibili anche strette, non hanno bisogno di impilarsi).
 */
.mignat-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
}

.mignat-grid-3 > div {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.mignat-grid-3 img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/**
 * Spinge giù il contenuto delle 5 pagine interne (non Home) sotto l'header fisso
 * (blocks/site-header/style.css, position:fixed). reference/NataleLayout.tsx:182 usa
 * className={isHome ? "" : "pt-16 sm:pt-20"} sul <main>: nessun padding in Home (l'hero
 * ci sta apposta dietro all'header trasparente), pt-16/sm:pt-20 altrove. pt-16 = 4rem =
 * l'altezza di .mignat-header__bar su mobile, sm:pt-20 = 5rem = l'altezza da 640px in su
 * (stesso breakpoint di .mignat-header__bar in style.css).
 */
.mignat-page-main {
	padding-top: 4rem;
}

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

/**
 * Honeypot anti-bot per i due form di iscrizione newsletter (blocks/newsletter-popup/
 * render.php e inc/patterns/newsletter-section.php): il campo "website" va nascosto via
 * CSS, non con type="hidden", perché i bot che compilano i form senza applicare i fogli
 * di stile lo trovano comunque e vi scrivono qualcosa — un visitatore umano non lo vede
 * mai. Lato server, mignat_handle_newsletter_signup() in functions.php risponde comunque
 * "successo" ma non invia nessuna mail se questo campo arriva valorizzato.
 */
.mignat-honeypot {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/**
 * Placeholder click-to-load per l'embed di Google Maps in Contatti (SEZIONE 5,
 * templates/page-contatti.html). Un <iframe src="google.com/maps"> caricato subito
 * scarica cookie di terze parti da Google prima che il visitatore abbia dato
 * qualunque consenso — gap GDPR segnalato dalla review finale del progetto gemello
 * (stesso cliente, stessa struttura di sito). L'iframe vero viene creato via JS solo
 * al click (assets/js/maps-embed.js) e non è mai presente nell'HTML servito dal
 * server: click sul bottone = consenso per questo singolo embed, senza integrazione
 * col cookie banner (blocks/cookie-banner), che resta invariato.
 */
.mignat-map-embed__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
	height: 100%;
	padding: 1.5rem;
	background-color: var(--wp--preset--color--background-warm, #f8f7f5);
	text-align: center;
}

.mignat-map-embed__address {
	margin: 0;
	color: var(--wp--preset--color--muted-foreground, #717182);
	font-size: 0.875rem;
	line-height: 1.5;
}

.mignat-map-embed__button {
	padding: 0.75rem 1.75rem;
	background-color: var(--wp--preset--color--primary-dark, #0f1a0f);
	color: var(--wp--preset--color--background, #fff);
	border: 0;
	border-radius: 0.375rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.mignat-map-embed__button:hover {
	background-color: var(--wp--preset--color--primary, #00462c);
}

.mignat-map-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
}