/*------------------------------------*\
****************************************

	Elementi custom Pagina
	Vermouth Torino Superiore Rosso

****************************************
\*------------------------------------*/


/*
Il layout della bottiglia considera sia larghezza, sia altezza schermo.
La bottiglia si riduce per schermi piccoli sia per altezza sia larghezza fino a dimensioni minime sotto cui non ha senso ridursi.
Altezza larghezza della bottiglia sono considerate spesso in prorporzione rispetto a pagina, quindi se bottgilia pressoché tutta altezza allora es. height: 90vh; top: 5vvh;


- Dimensioni minime pagina -> 640 x 480px
	- Quindi se un aggetto deve essere metà altezza schermo sarà min-height: 240px poi height: 50vh
	- Se un oggetto deve essere altezza quasi piena es. 90% sarà min-height: 432px poi height: 90vh

- Dimensioni massime pagina -> da definire si vedrà

- Tutti gli oggetti dovrebbero avere idealmente 3 livelli per posizionamento corretto
	- livello 1 = wrap = posizionamento globale nello schermo, spesso con clamp o max
		- fa width, height, top, left quindi il grosso dell'ingombro minimo e massimo e posizione
		- sui livello 1 si applicano anche i _tos e le animazioni
		es. height: max(120px, 25vh); quindi altezza minima 1/4 di 480px da lì poi sali in proporzione
		- di solito livello 1 è flex justify-center per centrare livello 2

	- livello 2 = figure = posizionamento relativo all'interno del wrap, spesso height 100% per prendere impostazioni livello 1 e width auto, impostata tramite aspect ratio e centrata dal flex del livello 1
	- livello 3 = img = posizionamento locale, spesso con contain per non tagliare nulla
*/



/*------------------------------------*\
/*------------------------------------*\
	Impostazioni globali e menu
\*------------------------------------*\
\*------------------------------------*/


:root {
	--color-vermouth-cyan: hsla(143, 48%, 75%, 1);
}


.color-vermouth-cyan {
	color: var(--color-vermouth-cyan);
}


/* In questa pagina che ha css custom aggiuntivo non minimizzato
si può fare nesting degli elementi e risparmiare molte dichiarazioni */

body._lp-vermouth-torino {

	/* Ricolora hamburgher */
	.ham-bars {
		&,
		&::before,
		&::after {
		background-color: var(--color-vermouth-cyan);
		}
	}

	/* Ricolora scrita menu */
	.menu-item-icon-hamburger {
		&::after {
			color: var(--color-vermouth-cyan);
		}
	}

	/* Trasforma logo in maschera con sfondo */
	._nav-logo-figure._logo-isdark {
		background: var(--color-vermouth-cyan);
		-webkit-mask: url(https://distilleriaquaglia.it/wp-content/uploads/2026/01/Quaglia-logo-white.svg) center top / contain no-repeat;
		mask: url(https://distilleriaquaglia.it/wp-content/uploads/2026/01/Quaglia-logo-white.svg) center top / contain no-repeat;
	}

		/* Spegne img logo bianco */
		._nav-logo-figure._logo-isdark .logo {
			display: none;
		}

	/* Ricolora voci menu */
	._menu-dsk .menu-item a,
	._nav-dsk select.gt_selector {
		color: var(--color-vermouth-cyan);
	}

	/* Ricolora lente ingrandimento */
	._icon.search {
		fill: var(--color-vermouth-cyan);
	}

	/* Ricolora carrello */
	.cart-icon ._icon-cart {
		background: var(--color-vermouth-cyan);
	}

	.button:not(.glass) {
		background-color: var(--color-vermouth-cyan);
		border-color: var(--color-vermouth-cyan);
	}

}

/* Transform degli oggetti con tocs */

._prlx-y {
	transition: transform .15s ease-out;
}


/*------------------------------------*\
	Hero
\*------------------------------------*/

#lp-vermouth-hero._gt-01._main-section.md\:hidden {
	display: flex;
}

	#lp-vermouth-hero._gt-01._main-section.md\:hidden:before {
		background: linear-gradient(0deg, #2e0909, transparent);
		opacity: 1;
		mix-blend-mode: normal;
		backdrop-filter: none;
	}

#lp-vermouth-hero._gt-01._main-section.hidden {
	display: none;
}

@media (min-width: 640px) {

	#lp-vermouth-hero._gt-01._main-section.md\:hidden {
		display: none;
	}
	#lp-vermouth-hero._gt-01._main-section.hidden {
		display: flex;
	}

		#lp-vermouth-hero._gt-01._main-section.hidden:before {
			opacity: 0;
		}
}

@media (max-width: 959px) {
	#lp-vermouth-hero._gt-01._main-section.hidden:before {
		background: linear-gradient(0deg, #2e0909, transparent);
		opacity: 1;
		mix-blend-mode: normal;
		backdrop-filter: none;
	}
}


/*------------------------------------*\
	Fascia 1B
	Scritte in mobile
	Below the fold
\*------------------------------------*/





/*------------------------------------*\
	Fascia 2 Bottiglia e scritte
	- mob
	- dsk
\*------------------------------------*/


/* Livello 1 - Wrapper della figure bottiglia, per posizionamento globale */
._lp-vermouth-bottiglia-wrap {
	position: relative;
	width: 100%;
	height: max(480px, 80vh);
	z-index: 3;
	will-change: transform;
	/* animation-name: vermouth-bottiglia-wave;
	animation-duration: 10s;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
	animation-iteration-count: infinite; */
	/* al suo interno è flex e centra orizzontalmente la bottiglia che ha width auto e height 100% */
	display: flex;
	justify-content: center;
}

	/* @keyframes vermouth-bottiglia-wave {
		0% {
			transform: rotate(2deg);
		}
		50% {
			transform: rotate(-1deg);
		}
		100% {
			transform: rotate(2deg);
		}
	} */


	._lp-vermouth-bottiglia-figure {
		@apply relative w-full h-full;
	}

		._lp-vermouth-bottiglia-figure img {
			@apply absolute h-full object-contain object-center; /* solo height 100%, larghezza auto che si imposta con aspect ratio */
			width: auto;
		}


/* tutte le foto  della pagina */
._lp-vermouth-figure {
	border: 10px solid var(--color-vermouth-cyan);
	position: relative;
	box-sizing: border-box;
	overflow: hidden; /* Risolve bug Safari che calcola male aspect-ratio immagine con bordi e la fa uscire dal box nel lato bottom */
}


._block-1-1 {
	margin-top: 5rem;
	width: 90%;
	left: 5%;
}

/* Foto Mole antonelliana */
._block-1-2 {
	margin-top: 5rem;
	width: 70%;
	left: 15%;
}

	._block-1-2._is-on {
		transform: rotate(5.25deg);
	}

		._block-1-2 ._lp-vermouth-figure {
			aspect-ratio: 4 / 5;
		}


._block-1-3 {
	margin-top: 5rem;
	width: 90%;
	left: 5%;
}

/* Foto Castello Valentino */
._block-1-4 {
	margin-top: 5rem;
	width: 90%;
	left: 5%;
}

	._block-1-4._is-on {
		transform: rotate(-8.1deg);
	}


/* Foto Piazza San Carlo */
._block-2-1 {
	margin-top: 5rem;
}

	._block-2-1._is-on {
		transform: rotate(-6.25deg);
	}

._block-2-2 {
	margin-top: 5rem;
	width: 90%;
	left: 5%;
}

/* Locandina Quaglia */
._block-2-3 {
	margin-top: 5rem;
	width: 70%;
	left: 15%;
}

	._block-2-3._is-on {
		transform: rotate(4deg);
	}


._block-2-4 {
	margin-top: 5rem;
	width: 90%;
	left: 5%;
}


/* Medium ------------------- */
@media (min-width: 640px) {

	._lp-vermouth-bottiglia-wrap {
		position: sticky;
		top: max(80px, 9vh);
	}

	._block-1-1 {
		margin-top: 0;
	}

}



/* Large ------------------- */
@media (min-width: 960px) {

	._lp-vermouth-bottiglia-wrap {
		top: max(80px, 9vh);
		width: 300px;
		height: max(520px, 80vh);
	}

	._block-1-1 {
		width: 95%;
		left: 25%;
	}

	._block-1-2 {
		width: min(75%, 295px);
		left: 10%;
	}

	._block-1-4 {
		width: min(95%, 390px);
		left: 5%;
	}

	._block-2-1 {
		width: min(95%, 420px);
		left: -10%;
		margin-top: 0;
	}

	._block-2-3 {
		width: min(90%, 335px);
		left: -2%;
	}

	._block-2-4 {
		left: 5%;
	}

}

/* XLarge ------------------- */
@media (min-width: 1280px) {

	._lp-vermouth-bottiglia-wrap {
		height: max(640px, 82vh);
	}

	._block-1-2 {
		left: 60px;
	}

	._block-2-1 {
		left: -15%;
	}

}


/* XXLarge ------------------- */
@media (min-width: 1440px) {

	._block-1-1 {
		width: 430px;
		left: 126px;
	}

	._block-1-2 {
		left: 120px;
	}

	._block-1-4 {
		left: 40px;
	}

}