/**
 * GOYN — componenti condivisi
 *
 * Fonte: src/styles.css:84-229 del progetto React originale.
 *
 * Bottoni, link con sottolineatura scorrevole e contenitore foto: elementi che
 * ricorrono in tutte le pagine e in decine di widget. Stanno nel tema (non nel
 * plugin) perché servono anche ai template Elementor costruiti con widget
 * standard e alle pagine WooCommerce.
 *
 * Tutti gli hover sono CSS puro: nell'originale erano varianti Framer Motion,
 * qui non richiedono una riga di JavaScript.
 */

/* ============================================================
   BOTTONI
   ------------------------------------------------------------
   Meccanica: un ::after pieno che sale dal basso al passaggio del mouse,
   mentre il testo cambia colore. `isolation: isolate` crea il contesto di
   impilamento, così lo ::after non esce dal bottone.

   4 varianti:
     .goyn-btn              peach su petrol-deep   (predefinito)
     .goyn-btn--ghost       trasparente, bordo cream  (su fondi scuri)
     .goyn-btn--outline     trasparente, bordo petrol (su fondi chiari)
     .goyn-btn--solid       petrol su cream

   I QUATTRO COLORI SONO VARIABILI, NON VALORI
   Fondo, testo, riempimento che sale e testo in hover passano da
   `--goyn-btn-bg | -color | -fill | -color-hover`, e ogni variante si limita a
   riscriverle. Il valore dei token resta come ripiego, quindi il risultato senza
   nessuna sovrascrittura è identico a prima.

   Serve perché i colori di un bottone devono poter diventare controlli
   dell'editor: un widget scrive la variabile sul bottone o su un suo antenato e
   il tema non va toccato. Prima erano proprietà dirette, e l'unico modo di
   cambiarle era una regola più specifica in ogni widget.
   ============================================================ */

.goyn-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 17px 32px;
	border: none;
	background-color: var(--goyn-btn-bg, var(--goyn-peach));
	color: var(--goyn-btn-color, var(--goyn-petrol-deep));
	font-family: var(--goyn-font-label);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 2px;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	/* Le etichette dei bottoni possono essere lunghe in traduzione: il testo va
	   a capo invece di sfondare il contenitore. */
	text-wrap: balance;
}

/*
 * ⚠️ IL COLORE DEL TESTO STA QUI, SULLO SPAN, E NON SOLO SUL BOTTONE.
 *    `.goyn-widget a { color: inherit }` — il reset dei link qui sopra — ha
 *    specificità (0,1,1) e batte `.goyn-btn` (0,1,0): un bottone che è un `<a>`
 *    ereditava quindi il colore della sezione invece del proprio.
 *
 *    Conseguenza misurata: "Scopri GOYN" nell'hero era crema su pesca e "Inizia
 *    il rituale" nella goccia era inchiostro su petrol — in entrambi i casi
 *    illeggibile, e in nessuno dei due il colore dichiarato dalla variante.
 *
 *    Sullo `<span>` il problema non esiste: nessun'altra regola lo prende di
 *    mira, quindi vince sempre. Ed è comunque lo span il testo che si vede,
 *    perché sta sopra il riempimento che sale.
 */
.goyn-btn > span {
	position: relative;
	z-index: 2;
	color: var(--goyn-btn-color, var(--goyn-petrol-deep));
	transition: color var(--goyn-dur-fast) var(--goyn-ease);
}

.goyn-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: var(--goyn-btn-fill, var(--goyn-petrol-deep));
	transform: translateY(101%);
	transition: transform var(--goyn-dur) var(--goyn-ease);
}

.goyn-btn:hover::after,
.goyn-btn:focus-visible::after {
	transform: translateY(0);
}

.goyn-btn:hover > span,
.goyn-btn:focus-visible > span {
	color: var(--goyn-btn-color-hover, var(--goyn-peach));
}

/* --- ghost: su fondo scuro --- */
.goyn-btn--ghost {
	--goyn-btn-bg: transparent;
	--goyn-btn-color: var(--goyn-cream);
	--goyn-btn-fill: var(--goyn-cream);
	--goyn-btn-color-hover: var(--goyn-petrol-deep);

	border: 1.5px solid rgba(233, 229, 217, 0.55);
}

/* --- outline: su fondo chiaro --- */
.goyn-btn--outline {
	--goyn-btn-bg: transparent;
	--goyn-btn-color: var(--goyn-petrol);
	--goyn-btn-fill: var(--goyn-petrol);
	--goyn-btn-color-hover: var(--goyn-cream);

	border: 1.5px solid var(--goyn-petrol);
}

/* --- solid --- */
.goyn-btn--solid {
	--goyn-btn-bg: var(--goyn-petrol);
	--goyn-btn-color: var(--goyn-cream);
	--goyn-btn-fill: var(--goyn-peach);
	--goyn-btn-color-hover: var(--goyn-petrol-deep);
}

/* --- larghezza piena, usata nelle colonne strette (riepiloghi, drawer) --- */
.goyn-btn--full {
	width: 100%;
}

@media (max-width: 560px) {
	.goyn-btn {
		padding: 15px 24px;
		font-size: 13px;
	}
}

/* ============================================================
   LINK CON SOTTOLINEATURA SCORREVOLE
   ------------------------------------------------------------
   Due pseudo-elementi sovrapposti: ::before è il filetto sempre visibile al
   30%, ::after quello pieno che si estende da sinistra in hover.
   ============================================================ */

.goyn-link-sweep {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 6px;
	font-family: var(--goyn-font-label);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	background: none;
	border: none;
}

.goyn-link-sweep::before,
.goyn-link-sweep::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.5px;
	background-color: currentColor;
}

.goyn-link-sweep::before {
	opacity: 0.3;
}

.goyn-link-sweep::after {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.55s var(--goyn-ease);
}

.goyn-link-sweep:hover::after,
.goyn-link-sweep:focus-visible::after {
	transform: scaleX(1);
}

.goyn-link-sweep .goyn-arrow {
	transition: transform 0.45s var(--goyn-ease);
}

.goyn-link-sweep:hover .goyn-arrow,
.goyn-link-sweep:focus-visible .goyn-arrow {
	transform: translateX(6px);
}

/* ============================================================
   CONTENITORE FOTO
   ------------------------------------------------------------
   Nell'originale `<Photo>` era un componente React che provava più percorsi in
   cascata e mostrava un segnaposto se il file mancava. In WordPress quel
   meccanismo non serve: le immagini arrivano dalla Media Library e sono
   sempre presenti. Resta il contenitore, che è ciò che regge il ritaglio e il
   parallasse.

   `position: absolute; inset: 0` è voluto: la foto riempie sempre il genitore,
   che è l'elemento a dettare le proporzioni. Serve quindi un genitore con
   `position: relative`.
   ============================================================ */

.goyn-photo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-color: var(--goyn-petrol-deep);
}

.goyn-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Variante in flusso, per quando la foto deve dettare l'altezza invece di
   riempire il genitore (schede, miniature). */
.goyn-photo--flow {
	position: relative;
	inset: auto;
}

.goyn-photo--flow img {
	height: auto;
}

/* ============================================================
   ZOOM FOTO IN HOVER
   ------------------------------------------------------------
   Nell'originale: `whileHover="hover"` sul contenitore che pilotava una
   variante `{ scale: 1.06 }` sul figlio. In CSS è una riga sola, e ricorre in
   14 sezioni diverse (schede formato, tessere ingredienti, card contatti,
   social, correlati, fasi, galleria prodotto…).

   Si applica al contenitore: `.goyn-zoom` sul padre, la foto dentro.
   ============================================================ */

.goyn-zoom .goyn-photo img {
	transition: transform var(--goyn-dur-slow) var(--goyn-ease);
}

.goyn-zoom:hover .goyn-photo img,
.goyn-zoom:focus-visible .goyn-photo img {
	transform: scale(var(--goyn-zoom-scale, 1.06));
}

/* ============================================================
   VELI E SFUMATURE RICORRENTI
   ------------------------------------------------------------
   Estratti dai `style={{ background: 'linear-gradient(...)' }}` inline. I
   gradienti specifici di una sezione restano nel foglio del widget: qui solo
   quelli usati in più punti.
   ============================================================ */

.goyn-veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* velo che scurisce dal basso, per le didascalie sopra le foto */
.goyn-veil--bottom {
	background-image: linear-gradient(
		180deg,
		rgba(22, 62, 70, 0) 28%,
		rgba(22, 62, 70, 0.72) 62%,
		rgba(22, 62, 70, 0.94) 100%
	);
}

/* velo laterale, per il testo sulla metà sinistra di uno scatto */
.goyn-veil--left {
	background-image: linear-gradient(
		90deg,
		rgba(12, 36, 41, 0.9) 0%,
		rgba(12, 36, 41, 0.72) 34%,
		rgba(12, 36, 41, 0.28) 62%,
		rgba(12, 36, 41, 0.34) 100%
	);
}

/* velo laterale MORBIDO: parte da 0,62 invece di 0,9 e si spegne quasi del
   tutto a destra. È la taratura della chiusura dei contatti, dove la fotografia
   deve restare leggibile perché il titolo occupa solo la metà sinistra. */
.goyn-veil--left-soft {
	background-image: linear-gradient(
		90deg,
		rgba(12, 36, 41, 0.62) 0%,
		rgba(12, 36, 41, 0.18) 58%,
		rgba(12, 36, 41, 0.05) 100%
	);
}

/* velo uniforme leggero su fondo petrol */
.goyn-veil--petrol {
	background-image: linear-gradient(180deg, rgba(22, 62, 70, 0.72), rgba(22, 62, 70, 0.9));
}

/* ============================================================
   TEXTURE DI FONDO
   ------------------------------------------------------------
   Le due texture (cream e petrol) ricorrono in 8 sezioni. I percorsi sono
   relativi a questo file, quindi restano validi a prescindere dall'URL del
   sito. Sostituibili dal cliente via controllo immagine nei widget: in quel
   caso il widget scrive `--goyn-texture` inline e queste classi la usano.
   ============================================================ */

.goyn-texture {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.goyn-texture--cream {
	background-image: var(--goyn-texture, url('../images/texture-cream.webp'));
	opacity: 0.14;
}

.goyn-texture--petrol {
	background-image: var(--goyn-texture, url('../images/texture-petrol.webp'));
	opacity: 0.3;
}