/**
 * GOYN — responsive condiviso
 *
 * Fonte: src/styles.css:1615-1780 del progetto React originale.
 *
 * Qui stanno SOLO le regole responsive che valgono per più sezioni. Il riflusso
 * di una singola sezione (mosaico ingredienti, fascia manifesto, griglia
 * catalogo…) vive nel foglio del rispettivo widget, dentro il plugin.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINT DEL PROGETTO
 * ─────────────────────────────────────────────────────────────────────────
 *
 *   ≤ 1080px   tablet orizzontale / laptop piccolo
 *              Le griglie a 2 colonne asimmetriche passano a 1 colonna,
 *              i gap si stringono.
 *              --goyn-pad NON cambia qui: resta il clamp del :root fino a
 *              860px. Vale la stessa scelta dell'originale (src/styles.css:1631,
 *              dove il blocco 1080 tocca solo le griglie).
 *
 *   ≤  860px   mobile — è la soglia principale.
 *              --goyn-pad scende a 20px fisso; tutte le griglie a 1-2 colonne;
 *              la navigazione diventa hamburger; la fascia manifesto cambia
 *              impaginazione; l'indicatore di scroll spariisce.
 *              ⚠️ Questa soglia è replicata in JavaScript (GOYN.MOBILE in
 *                 assets/js/core.js). Cambiandola qui va cambiata anche là.
 *
 *   ≤  560px   mobile piccolo
 *              Le icone secondarie dell'header spariscono, i pilastri passano
 *              a 1 colonna, i bottoni si compattano.
 *
 * ⚠️ NON coincidono con i default di Elementor (1024 / 767). Vanno impostati
 *    come breakpoint personalizzati: Elementor → Impostazioni sito → Layout →
 *    Breakpoint. Procedura passo per passo in docs/INSTALLATION.md.
 *    Senza questa configurazione i controlli responsive dei widget agiscono a
 *    1024/767 mentre il CSS scritto a mano agisce a 1080/860: nella fascia
 *    intermedia il layout si spezza.
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ============================================================
   ≤ 860px — mobile
   ============================================================ */

@media (max-width: 860px) {
	:root {
		/* valore fisso, non clamp: sotto questa soglia il respiro laterale
		   dell'originale è esattamente 20px */
		--goyn-pad: 20px;
	}
}

/* ============================================================
   Utilità di visibilità
   ------------------------------------------------------------
   Elementor ha già le proprie classi di visibilità responsive, ma agiscono sui
   suoi breakpoint. Queste seguono i nostri e servono dentro i widget, dove il
   markup è nostro.
   ============================================================ */

@media (max-width: 1080px) {
	.goyn-hide-tablet {
		display: none !important;
	}
}

@media (max-width: 860px) {
	.goyn-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 861px) {
	.goyn-only-mobile {
		display: none !important;
	}
}

@media (max-width: 560px) {
	.goyn-hide-small {
		display: none !important;
	}
}

/* ============================================================
   Altezza piena su mobile — il problema dei 100vh
   ------------------------------------------------------------
   L'originale usa `min-height: 100svh` (hero e sezione goccia). `svh` è
   supportato da Safari 15.4+, Chrome 108+, Firefox 101+: su versioni più
   vecchie la dichiarazione viene ignorata e la sezione collassa all'altezza
   del contenuto.

   La cascata qui sotto risolve in tre passaggi:
     1. 100vh          — funziona sempre, ma su iOS include le barre del browser
     2. -webkit-fill-available — corregge iOS Safari datato
     3. 100svh         — valore corretto dove supportato, vince sugli altri

   Usare la classe, non `min-height` a mano, in ogni sezione a piena altezza.
   ============================================================ */

.goyn-fullheight {
	min-height: 100vh;
}

@supports (-webkit-touch-callout: none) {
	.goyn-fullheight {
		min-height: -webkit-fill-available;
	}
}

@supports (min-height: 100svh) {
	.goyn-fullheight {
		min-height: 100svh;
	}
}

/* ============================================================
   Sezioni sticky
   ------------------------------------------------------------
   `position: sticky` si rompe silenziosamente se un antenato ha overflow
   diverso da visible. Nel tema il rischio è su `body` (vedi base.css, dove si
   usa `clip` e non `hidden` proprio per questo) e sui contenitori Elementor.

   Questa classe va sull'elemento sticky; il suo genitore diretto NON deve
   avere overflow hidden. Elementor imposta `overflow: hidden` su un contenitore
   quando si attiva "Nascondi overflow": in quel caso lo sticky del figlio non
   funziona ed è una impostazione da togliere, non un bug del CSS.
   ============================================================ */

.goyn-sticky {
	position: sticky;
	top: var(--goyn-sticky-top, 110px);
	align-self: start; /* in un grid/flex senza questo lo sticky non ha spazio in cui scorrere */
}

@media (max-width: 860px) {
	/* Su mobile lo sticky delle colonne laterali (filtri catalogo, riepilogo
	   checkout) va disattivato: la colonna diventa a piena larghezza e
	   resterebbe incollata coprendo il contenuto. */
	.goyn-sticky {
		position: static;
	}
}