/* =========================================================================
   Gipsy — foglio di stile unico.
   I colori sono stimati dal mockup: quando arriva la scheda tecnica di
   ChatGPT basta correggere i valori qui sotto e tutto il sito si allinea.
   ========================================================================= */

:root {
	/* Colori */
	--c-dark: #161210;
	--c-dark-2: #1e1815;
	--c-cream: #f2e7d5;
	--c-orange: #df5420;
	--c-orange-hover: #c44415;
	--c-on-dark: #f5efe7;
	--c-on-light: #1b1613;
	--c-muted: #b3a99e;
	--c-muted-light: #6b5f55;
	--c-border: rgba(245, 239, 231, .28);

	/* Tipografia */
	--f-display: "Anton", "Arial Narrow", Impact, sans-serif;
	--f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Misure */
	--wrap: 1240px;
	--wrap-stretto: 760px;
	--gap: 20px;
	--pad-lato: clamp(20px, 5vw, 48px);
	--sezione-py: clamp(56px, 7vw, 104px);
	--radius: 6px;
	--testata-h: 76px;
}

/* --- Reset essenziale --------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--c-dark);
	color: var(--c-on-dark);
	font-family: var(--f-body);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* La navigazione e' ad ancore e la testata e' fissa: senza questo margine
   l'header copre il titolo della sezione a cui si salta. */
:target,
section[id] { scroll-margin-top: calc(var(--testata-h) + 16px); }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* --- Accessibilita' ----------------------------------------------------- */

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.salta-al-contenuto {
	position: absolute;
	top: -100px; left: 12px;
	z-index: 200;
	padding: 12px 20px;
	background: var(--c-orange);
	color: #fff;
	border-radius: var(--radius);
	transition: top .2s;
}
.salta-al-contenuto:focus { top: 12px; }

:focus-visible {
	outline: 2px solid var(--c-orange);
	outline-offset: 3px;
}

/* --- Layout ------------------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--pad-lato);
}
.wrap--stretto { max-width: var(--wrap-stretto); }

.sezione { padding-block: var(--sezione-py); }
.sezione--scura { background: var(--c-dark); color: var(--c-on-dark); }
.sezione--chiara { background: var(--c-cream); color: var(--c-on-light); }

.griglia {
	display: grid;
	gap: var(--gap);
}
.griglia--3 { grid-template-columns: repeat(3, 1fr); }
.griglia--4 { grid-template-columns: repeat(4, 1fr); }

/* --- Tipografia --------------------------------------------------------- */

.titolo-sezione {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(2.4rem, 5.5vw, 4rem);
	line-height: .95;
	letter-spacing: .01em;
	text-transform: uppercase;
	margin-bottom: .2em;
}
.titolo-sezione--medio { font-size: clamp(2rem, 4vw, 3rem); }
.titolo-sezione--stretto { max-width: 9ch; }
.titolo-sezione--scuro { color: var(--c-on-light); }

.sottotitolo-sezione {
	color: var(--c-muted);
	font-size: 1rem;
	margin-bottom: 2.5rem;
}
.sottotitolo-sezione--scuro { color: var(--c-muted-light); }

.arancio { color: var(--c-orange); }

.testo-lungo h2 { font-family: var(--f-display); text-transform: uppercase; margin-top: 2rem; }
.testo-lungo p { margin-bottom: 1rem; }
.testo-lungo a { color: var(--c-orange); text-decoration: underline; }

/* --- Icone -------------------------------------------------------------- */

.icona { width: 22px; height: 22px; flex: 0 0 auto; }
.icona--grande { width: 34px; height: 34px; }
.icona--arancio { color: var(--c-orange); }

/* --- Bottoni ------------------------------------------------------------ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 26px;
	border-radius: var(--radius);
	font-weight: 600;
	font-size: .95rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: background-color .18s, color .18s, border-color .18s;
}
.btn--piccolo { min-height: 40px; padding: 0 18px; font-size: .8rem; }

.btn--primario { background: var(--c-orange); color: #fff; }
.btn--primario:hover,
.btn--primario:focus-visible { background: var(--c-orange-hover); }

.btn--fantasma {
	border: 1px solid var(--c-border);
	color: var(--c-on-dark);
}
.btn--fantasma:hover,
.btn--fantasma:focus-visible { border-color: var(--c-on-dark); background: rgba(245, 239, 231, .08); }

.sezione--chiara .btn--fantasma { border-color: rgba(27, 22, 19, .3); color: var(--c-on-light); }

/* --- Logo --------------------------------------------------------------- */

.logo { display: inline-flex; align-items: center; }

.logo__cerchio {
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	background: var(--c-orange);
	border-radius: 50%;
}
.logo__testo {
	font-family: var(--f-display);
	font-size: 1.1rem;
	color: #fff;
	letter-spacing: .02em;
}
.logo--piccolo .logo__cerchio { width: 44px; height: 44px; }
.logo--piccolo .logo__testo { font-size: .9rem; }

/* Logo caricato dal Customizer. WordPress stampa il suo <a class="custom-logo-link">,
   quindi le misure vanno messe qui e non su .logo.

   In cima alla pagina e' grande; appena si scorre, la testata diventa opaca
   (.is-fissa) e il logo rimpicciolisce. La testata resta visibile per tutta la
   pagina: se restasse grande, mangerebbe schermo a ogni sezione. */
.custom-logo-link { display: inline-flex; align-items: center; flex: 0 0 auto; }
.custom-logo {
	width: auto;
	height: 92px;
	max-width: none;
	transition: height .25s ease;
}
.testata.is-fissa .custom-logo { height: 54px; }

.pie .custom-logo { height: 52px; }

@media (max-width: 780px) {
	.custom-logo { height: 66px; }
	.testata.is-fissa .custom-logo { height: 44px; }
	.pie .custom-logo { height: 46px; }
}

/* --- Testata ------------------------------------------------------------ */

.testata {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	transition: background-color .25s, box-shadow .25s;
}
/* Sfumatura di protezione: senza, la navigazione bianca dipende da quanto e'
   scura la foto dell'hero. */
.testata::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(22, 18, 16, .85), rgba(22, 18, 16, 0));
	pointer-events: none;
}
.testata.is-fissa {
	background: var(--c-dark);
	box-shadow: 0 1px 0 var(--c-border);
}
.testata.is-fissa::before { opacity: 0; }

/* Alta quando si e' in cima, compatta appena si scorre. La variabile
   --testata-h resta l'altezza da scrollata: e' quella che serve allo
   scroll-margin delle ancore, perche' e' quella che copre il contenuto. */
.testata__wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--gap);
	width: 100%;
	max-width: var(--wrap);
	min-height: 116px;
	margin-inline: auto;
	padding-inline: var(--pad-lato);
	transition: min-height .25s ease;
}
.testata.is-fissa .testata__wrap { min-height: var(--testata-h); }

@media (max-width: 780px) {
	.testata__wrap { min-height: 88px; }
}

.nav {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-left: auto;
}
.nav__lista { display: flex; gap: 26px; }
.nav__link {
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-on-dark);
	padding-block: 8px;
	transition: color .18s;
}
.nav__link:hover,
.nav__link.is-attiva { color: var(--c-orange); }

.nav__coda { display: flex; align-items: center; gap: 20px; }

.lingue { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; letter-spacing: .08em; }
.lingue__voce { color: var(--c-muted); transition: color .18s; }
.lingue__voce.is-attiva, .lingue__voce:hover { color: var(--c-on-dark); }
.lingue__sep { color: var(--c-muted); }

.hamburger { display: none; margin-left: auto; padding: 12px; }
.hamburger__linee,
.hamburger__linee::before,
.hamburger__linee::after {
	display: block;
	width: 24px; height: 2px;
	background: var(--c-on-dark);
	transition: transform .2s, opacity .2s;
}
.hamburger__linee { position: relative; }
.hamburger__linee::before,
.hamburger__linee::after { content: ""; position: absolute; left: 0; }
.hamburger__linee::before { top: -7px; }
.hamburger__linee::after { top: 7px; }

.hamburger[aria-expanded="true"] .hamburger__linee { background: transparent; }
.hamburger[aria-expanded="true"] .hamburger__linee::before { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__linee::after { transform: translateY(-7px) rotate(-45deg); }

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

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(100svh, 900px);
	padding-block: calc(var(--testata-h) + 40px) 72px;
	overflow: hidden;
}
.hero__sfondo { position: absolute; inset: 0; }
.hero__foto { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto !important; }
.hero__velo {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(22, 18, 16, .92) 0%, rgba(22, 18, 16, .45) 45%, rgba(22, 18, 16, .15) 75%),
		linear-gradient(to right, rgba(22, 18, 16, .7), rgba(22, 18, 16, 0) 60%);
}

.hero__contenuto { position: relative; }

.hero__titolo {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(3rem, 9vw, 6.5rem);
	line-height: .9;
	text-transform: uppercase;
	margin-bottom: .35em;
}
.hero__riga { display: block; }
.hero__riga--2 { color: var(--c-orange); }

.hero__claim {
	font-weight: 600;
	font-size: clamp(.85rem, 1.6vw, 1rem);
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 1.2rem;
}

.hero__luogo {
	display: flex;
	gap: 10px;
	color: var(--c-on-dark);
	font-size: .95rem;
	line-height: 1.45;
	margin-bottom: 2rem;
}

.hero__azioni { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__giu {
	position: absolute;
	left: var(--pad-lato); bottom: 18px;
	color: var(--c-on-dark);
	animation: gipsy-rimbalzo 2.4s ease-in-out infinite;
}
@keyframes gipsy-rimbalzo {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

/* --- Bordo strappato ---------------------------------------------------- */

.strappo { position: relative; z-index: 2; line-height: 0; margin-top: -1px; }
.strappo svg { display: block; width: 100%; height: clamp(26px, 3.2vw, 48px); }
.strappo--capovolto svg { transform: scaleY(-1); }

/* --- Fascia valori ------------------------------------------------------ */

.valori { padding-block: clamp(40px, 5vw, 68px); }
.valori__griglia {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 3vw, 44px);
}
.valore__titolo {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 1.05rem;
	line-height: 1.15;
	text-transform: uppercase;
	margin: .8rem 0 .5rem;
}
.valore__testo { font-size: .88rem; color: var(--c-muted-light); }

/* --- Card --------------------------------------------------------------- */

.card {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--c-dark-2);
}
.card__media { position: relative; }
.card__media img,
.card__media .gipsy-img { width: 100%; object-fit: cover; }
.card__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(22, 18, 16, .95) 12%, rgba(22, 18, 16, .1) 65%);
}

.card__corpo { padding: 20px 22px 24px; }
.card__corpo--sovrapposto {
	position: absolute;
	inset: auto 0 0 0;
	padding: 18px 20px 20px;
}

.card__titolo {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	line-height: 1;
	text-transform: uppercase;
	margin-bottom: .35em;
}
.card__titolo--piccolo { font-size: clamp(1.1rem, 1.8vw, 1.35rem); }

/* Etichetta del prezzo sopra la foto. E' testo vero, non parte dell'immagine:
   lo leggono i motori di ricerca e gli screen reader, e si cambia da
   inc/strings.php senza rifare la grafica.
   Per farla arancione: scambia i due colori qui sotto. */
.card__prezzo {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	padding: 8px 15px 7px;
	background: var(--c-cream);
	color: var(--c-on-light);
	border-radius: 999px;
	font-family: var(--f-display);
	font-size: 1.1rem;
	line-height: 1;
	letter-spacing: .01em;
	white-space: nowrap;
	transform: rotate(-5deg);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
}

.card__giorno {
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-orange);
	margin-bottom: .4em;
}

.card__testo { font-size: .88rem; color: var(--c-muted); max-width: 26ch; }
.card__freccia { margin-top: 12px; transition: transform .2s; }
.card:hover .card__freccia { transform: translateX(5px); }

/* Card cliccabile: il link sta sul titolo, ma l'area sensibile e' tutta la
   card. Cosi' resta un solo link per gli screen reader e per la tastiera. */
.card--link { cursor: pointer; }
.card--link a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.card--link:hover .card__freccia { transform: translateX(5px); }
.card--link:focus-within { outline: 2px solid var(--c-orange); outline-offset: 3px; }

/* --- Some nights get louder --------------------------------------------- */

.nights__wrap {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) 2fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}
.nights__paragrafo { color: var(--c-muted); font-size: .92rem; max-width: 24ch; margin-top: 1.4rem; }

/* Le altezze delle righe sono fissate qui, non ricavate dalle proporzioni delle
   foto: altrimenti una cella larga quanto tutta la griglia diventa un blocco
   altissimo e il mosaico si allunga a dismisura. Le foto vengono ritagliate
   per riempire la cella, qualunque formato abbiano. */
.mosaico {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows:
		clamp(130px, 15vw, 190px)
		clamp(100px, 12vw, 150px)
		clamp(100px, 12vw, 150px);
	gap: 12px;
}
.mosaico__cella { overflow: hidden; border-radius: 4px; }
.mosaico__cella img,
.mosaico__cella .gipsy-img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto !important; }

/* Due larghe sopra, tre medie in mezzo, una striscia panoramica in fondo. */
.mosaico__cella--1,
.mosaico__cella--2 { grid-column: span 3; }
.mosaico__cella--3,
.mosaico__cella--4,
.mosaico__cella--5 { grid-column: span 2; }
.mosaico__cella--6 { grid-column: span 6; }

/* --- Menu --------------------------------------------------------------- */

.menu__wrap {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) 1.6fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}
.menu__carte { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }

.carta { position: relative; overflow: hidden; border-radius: var(--radius); }
.carta__media img,
.carta__media .gipsy-img { width: 100%; object-fit: cover; }
.carta__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(22, 18, 16, .9) 15%, rgba(22, 18, 16, 0) 70%);
}
.carta__corpo { position: absolute; inset: auto 0 0 0; padding: 20px; color: var(--c-on-dark); }
.carta__titolo {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(1.2rem, 2.2vw, 1.7rem);
	text-transform: uppercase;
	margin-bottom: .6rem;
}

/* --- Vinyl Brunch ------------------------------------------------------- */

.brunch__wrap {
	display: grid;
	grid-template-columns: minmax(200px, 1fr) 2fr minmax(180px, 1fr);
	gap: clamp(20px, 3vw, 40px);
	align-items: center;
}
.brunch__testo { color: var(--c-muted); font-size: .92rem; }
.brunch__foto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.brunch__foto img,
.brunch__foto .gipsy-img { width: 100%; border-radius: 4px; object-fit: cover; }

.brunch__frase {
	font-family: var(--f-display);
	font-size: 1.05rem;
	line-height: 1.1;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

/* --- Stay tuned ---------------------------------------------------------- */

/* Coda della sezione serate. Il filetto sta SOTTO, non sopra: cosi' la
   striscia resta attaccata alle card e chiude la sezione, invece di
   presentarsi come un blocco separato. */
.stay-tuned {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin-top: clamp(18px, 2.4vw, 26px);
	padding-bottom: clamp(18px, 2.4vw, 26px);
	border-bottom: 1px solid var(--c-border);
}

.stay-tuned__occhiello {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-orange);
	margin-bottom: .35rem;
}
.stay-tuned__occhiello .icona { width: 17px; height: 17px; }

.stay-tuned__frase { color: var(--c-muted); font-size: .92rem; max-width: 62ch; }
.stay-tuned__handle { font-weight: 700; text-transform: none; letter-spacing: .02em; }

/* --- Feste e gruppi ------------------------------------------------------ */

.eventi__wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}

.occhiello {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-orange);
	margin-bottom: .8rem;
}

.eventi__intro { color: var(--c-muted); margin-bottom: 1.6rem; max-width: 44ch; }

.eventi__voci { display: grid; gap: 8px; margin-bottom: 1.6rem; }
.eventi__voci li { display: flex; align-items: center; gap: 10px; font-weight: 500; }

.eventi__dati {
	display: grid;
	gap: 6px;
	padding: 14px 0 18px;
	margin-bottom: 1.6rem;
	border-block: 1px solid var(--c-border);
	font-size: .88rem;
	color: var(--c-muted);
}

/* Il numero dentro il bottone: su un telefono ci si clicca sopra e parte la
   chiamata, su desktop resta leggibile per chi compone a mano. */
.eventi__cta { flex-wrap: wrap; }
.eventi__numero { font-weight: 700; letter-spacing: .04em; }
.eventi__nota { margin-top: .7rem; font-size: .78rem; color: var(--c-muted); }

.eventi__foto { display: grid; gap: 14px; }
.eventi__foto img,
.eventi__foto .gipsy-img { width: 100%; border-radius: var(--radius); object-fit: cover; }

/* --- Contatti differenziati ---------------------------------------------- */

.find__contatti { margin-bottom: 1.8rem; }
.find__contatti ul { display: grid; gap: 12px; }
.find__contatti li { display: grid; gap: 1px; }
.find__contatto-cosa { font-size: .78rem; color: var(--c-muted); }
.find__contatto-nota { font-size: .74rem; color: var(--c-muted); font-style: italic; }
.find__contatti a { font-weight: 600; }
.find__contatti a:hover { color: var(--c-orange); }

/* --- Dehors ------------------------------------------------------------- */

.dehors {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(420px, 60vh, 620px);
	padding-block: var(--sezione-py);
	overflow: hidden;
}
.dehors__sfondo { position: absolute; inset: 0; }
.dehors__foto { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto !important; }
.dehors__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(22, 18, 16, .92) 0%, rgba(22, 18, 16, .55) 45%, rgba(22, 18, 16, .2) 100%);
}
.dehors__contenuto { position: relative; }
.dehors__titolo {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(2.2rem, 6vw, 4.2rem);
	line-height: .92;
	text-transform: uppercase;
	margin-bottom: .5em;
}
.dehors__titolo span { display: block; }
.dehors__testo { color: var(--c-on-dark); max-width: 34ch; margin-bottom: 1.8rem; }

.dehors__badge { display: flex; flex-wrap: wrap; gap: 12px; }
.dehors__badge li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	background: rgba(22, 18, 16, .55);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* --- Find Gipsy --------------------------------------------------------- */

.find__wrap {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}
.find__voci { display: grid; gap: 10px; margin-bottom: 1.8rem; }
.find__voci li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; }
.find__voci a:hover { color: var(--c-orange); }
.find__orari {
	padding: 16px 0 20px;
	margin-bottom: 1.6rem;
	border-block: 1px solid var(--c-border);
}
.find__orari-titolo {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-orange);
	margin-bottom: .6rem;
}
.find__orari li { font-size: .9rem; color: var(--c-on-dark); }

.find__azioni { display: flex; flex-wrap: wrap; gap: 12px; }

.find__mappa { border-radius: var(--radius); overflow: hidden; }

/* La mappa parte come bottone: nessuna richiesta a Google finche' l'utente
   non la chiede esplicitamente. */
.mappa-consenso {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 8px;
	width: 100%;
	aspect-ratio: 16 / 10;
	padding: 24px;
	text-align: center;
	background: var(--c-dark-2);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	transition: border-color .2s, background-color .2s;
}
.mappa-consenso:hover { border-color: var(--c-orange); background: #241d19; }
.mappa-consenso__etichetta { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; }
.mappa-consenso__nota { font-size: .78rem; color: var(--c-muted); max-width: 34ch; }

.find__mappa iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; }

/* --- Footer ------------------------------------------------------------- */

.pie { background: var(--c-dark); border-top: 1px solid var(--c-border); padding-block: 32px 24px; }
.pie__wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.pie__nav ul { display: flex; flex-wrap: wrap; gap: 22px; }
.pie__nav a {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-muted);
	transition: color .18s;
}
.pie__nav a:hover { color: var(--c-on-dark); }

.pie__social { display: flex; gap: 14px; margin-left: auto; }
.pie__social a { color: var(--c-muted); transition: color .18s; }
.pie__social a:hover { color: var(--c-orange); }

.pie__legale {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--c-border);
	font-size: .75rem;
	color: var(--c-muted);
}
.pie__piva::before { content: " · "; }
.pie__policy { display: flex; gap: 18px; }
.pie__policy a:hover { color: var(--c-on-dark); }

.pagina-semplice { padding-top: calc(var(--testata-h) + var(--sezione-py)); }

/* --- Segnaposto immagini ------------------------------------------------ */

/* Finche' la foto non e' in assets/img/ si vede un riquadro col nome del file
   mancante: la pagina resta leggibile e si capisce subito cosa manca. */
.gipsy-img--vuota {
	display: grid;
	place-items: center;
	width: 100%;
	padding: 12px;
	background: repeating-linear-gradient(45deg, #241d19, #241d19 10px, #2b231e 10px, #2b231e 20px);
	border: 1px dashed var(--c-border);
	color: var(--c-muted);
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
	font-size: .72rem;
	text-align: center;
	word-break: break-all;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1024px) {
	.griglia--4 { grid-template-columns: repeat(2, 1fr); }
	.valori__griglia { grid-template-columns: repeat(2, 1fr); }
	.nights__wrap { grid-template-columns: 1fr; }
	.menu__wrap { grid-template-columns: 1fr; }
	.brunch__wrap { grid-template-columns: 1fr; }
	.brunch__claim { display: flex; align-items: center; gap: 20px; }
	.brunch__frase { margin-bottom: 0; }
	.find__wrap { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
	:root { --testata-h: 64px; }

	.hamburger { display: block; }

	/* Agganciato al bordo inferiore della testata, non a un'altezza fissa:
	   la testata si rimpicciolisce allo scroll e il menu deve seguirla. */
	.nav {
		position: absolute;
		inset: 100% 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 12px var(--pad-lato) 28px;
		background: var(--c-dark);
		border-bottom: 1px solid var(--c-border);
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s, transform .2s, visibility .2s;
	}
	.nav.is-aperta { transform: none; opacity: 1; visibility: visible; }

	.nav__lista { flex-direction: column; gap: 0; }
	.nav__link { display: block; padding: 14px 0; font-size: 1rem; border-bottom: 1px solid var(--c-border); }

	.nav__coda { justify-content: space-between; margin-top: 20px; }

	.griglia--3, .griglia--4 { grid-template-columns: 1fr; }
	.valori__griglia { grid-template-columns: 1fr; gap: 26px; }

	/* Su due colonne la quinta resterebbe spaiata e lascerebbe un buco: si
	   nasconde, e restano due file da due piu' la striscia panoramica in
	   fondo. Essendo a caricamento differito, la foto nascosta non viene
	   nemmeno scaricata. */
	.mosaico {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, clamp(100px, 27vw, 150px));
		gap: 8px;
	}
	.mosaico__cella--1,
	.mosaico__cella--2,
	.mosaico__cella--3,
	.mosaico__cella--4 { grid-column: span 1; }
	.mosaico__cella--5 { display: none; }
	.mosaico__cella--6 { grid-column: span 2; }

	.menu__carte { grid-template-columns: 1fr; }
	.brunch__foto { grid-template-columns: 1fr; }
	.settimana__griglia { grid-template-columns: 1fr; }
	.brunch__claim { flex-direction: column; align-items: flex-start; gap: 12px; }

	.hero { min-height: 88svh; }
	.hero__azioni .btn { flex: 1 1 auto; }

	.pie__wrap { flex-direction: column; align-items: flex-start; }
	.pie__social { margin-left: 0; }
	.pie__legale { flex-direction: column; }
}

/* --- Righe scorrevoli su telefono ---------------------------------------- */

/* Le griglie di card, impilate, diventano quattro schermate di scorrimento
   ciascuna. Qui si trasformano in una riga che si trascina col dito: si vedono
   tutte in una schermata e il gesto e' quello che gli studenti fanno gia' su
   Instagram.
   Deve stare in fondo al foglio: sovrascrive le regole a colonna singola
   dichiarate piu' sopra nello stesso media query. */
@media (max-width: 780px) {
	.riga-mobile {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: 74vw;
		gap: 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		/* Esce dai margini e li rimette come padding: la prima card resta
		   allineata al testo, l'ultima non si incolla al bordo. */
		margin-inline: calc(var(--pad-lato) * -1);
		padding-inline: var(--pad-lato);
		scroll-padding-inline: var(--pad-lato);
		padding-bottom: 14px;
		scrollbar-width: thin;
		scrollbar-color: rgba(245, 239, 231, .35) transparent;
	}
	.riga-mobile > * {
		scroll-snap-align: start;
		min-width: 0;
	}
	.riga-mobile::-webkit-scrollbar { height: 5px; }
	.riga-mobile::-webkit-scrollbar-thumb {
		background: rgba(245, 239, 231, .35);
		border-radius: 3px;
	}

	/* Nella fascia chiara la barretta scura si vede, quella chiara no. */
	.sezione--chiara .riga-mobile {
		scrollbar-color: rgba(27, 22, 19, .3) transparent;
	}
	.sezione--chiara .riga-mobile::-webkit-scrollbar-thumb {
		background: rgba(27, 22, 19, .3);
	}

	/* Le foto del brunch sono immagini diritte, senza contenitore. */
	.brunch__foto.riga-mobile img,
	.brunch__foto.riga-mobile .gipsy-img { width: 100%; }

	.eventi__wrap { grid-template-columns: 1fr; }
	.eventi__foto { grid-template-columns: 1fr 1fr; }

	/* Su telefono il bottone va a capo e prende tutta la riga. */
	.stay-tuned { flex-direction: column; align-items: stretch; }
	.stay-tuned .btn { width: 100%; }
}

/* Il corpo non scorre mentre il menu mobile e' aperto. */
body.menu-aperto { overflow: hidden; }