/* ===========================================================
   Moments with You — stili tema (mobile-first)
   =========================================================== */

:root{
	--cream:#FFF6E9;
	--paper:#FFFDF8;
	--coral:#FF6B4A;
	--coral-dark:#B8431E;
	--teal:#117C72;
	--teal-dark:#0A4A44;
	--mustard:#F2A93B;
	--ink:#1F2A33;
	--ink-soft:#5B6670;
	--blush:#FFB4A8;
	--land:#E9E2D3;
	--land-visited:#C9A77C;
	--land-hover:#FF6B4A;
	--cork:#c98f53;
	--cork-frame:#7a5230;
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
	margin:0;
	font-family:'Work Sans', system-ui, sans-serif;
	background:var(--cream);
	color:var(--ink);
	line-height:1.55;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--coral-dark);}
.wrap{max-width:1040px;margin:0 auto;padding:0 18px;}

/* ---------- Header ---------- */
.site-header{
	background:var(--paper);
	border-bottom:2px solid var(--ink);
	position:sticky;top:0;z-index:50;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.brand-logo{display:block;width:46px;height:46px;}
.brand-name{font-family:'Baloo 2', sans-serif;font-weight:800;font-size:20px;}
.site-nav{display:flex;gap:18px;}
.site-nav a{
	font-family:'Space Mono', monospace;font-size:13px;text-transform:uppercase;letter-spacing:0.5px;
	text-decoration:none;color:var(--ink-soft);
}
.site-nav a:hover{color:var(--coral);}
.site-nav .nav-map,.site-nav .nav-video{display:inline-flex;align-items:center;justify-content:center;color:var(--ink);line-height:0;transition:color 0.18s ease, transform 0.18s ease;}
.site-nav .nav-map:hover,.site-nav .nav-video:hover{color:var(--coral);transform:scale(1.12) rotate(-4deg);}
.site-nav .nav-map svg,.site-nav .nav-video svg{display:block;}

/* ---------- Footer ---------- */
.site-footer{
	border-top:2px dashed #D8CBAE;margin-top:40px;padding:24px 0;
	font-family:'Space Mono', monospace;font-size:12px;color:var(--ink-soft);text-align:center;
}

/* ===========================================================
   GATE (login d'accesso)
   =========================================================== */
.mwy-gate-body{
	min-height:100vh;display:flex;align-items:center;justify-content:center;
	background:var(--cream);
	background-image:
		radial-gradient(circle at 12% 18%, rgba(17,124,114,0.10) 0, transparent 40%),
		radial-gradient(circle at 88% 82%, rgba(255,107,74,0.12) 0, transparent 40%);
	padding:40px 18px;
}
.gate{width:100%;display:flex;justify-content:center;}
.ticket{
	background:var(--paper);width:420px;max-width:100%;border-radius:18px;padding:40px 30px 32px;
	border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
}
.stamp-icon{
	width:64px;height:64px;border-radius:50%;border:3px dashed var(--coral);
	display:flex;align-items:center;justify-content:center;margin:0 auto 16px;transform:rotate(-6deg);
}
.stamp-icon span{font-size:26px;}
.ticket h1{font-family:'Baloo 2', sans-serif;font-weight:700;font-size:26px;text-align:center;margin:0 0 6px;}
.ticket .sub{text-align:center;font-size:14px;color:var(--ink-soft);margin:0 0 24px;}
.gate-error{
	background:#fdecea;border:1px solid var(--coral);color:var(--coral-dark);
	padding:8px 12px;border-radius:8px;font-size:13px;text-align:center;margin-bottom:16px;
}
.field{margin-bottom:14px;}
.field label{
	display:block;font-family:'Space Mono', monospace;font-size:11px;text-transform:uppercase;
	letter-spacing:0.5px;color:var(--ink-soft);margin-bottom:5px;
}
.field input{
	width:100%;border:2px solid var(--ink);border-radius:10px;padding:11px 14px;
	font-family:inherit;font-size:16px;background:var(--paper);color:var(--ink);
}
.field input:focus{outline:3px solid var(--blush);}
.enter-btn{
	width:100%;margin-top:8px;background:var(--coral);color:var(--paper);border:2px solid var(--ink);
	border-radius:10px;padding:13px;font-family:'Baloo 2', sans-serif;font-weight:700;font-size:16px;
	cursor:pointer;box-shadow:3px 3px 0 var(--ink);
}
.enter-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.footnote{text-align:center;font-size:12px;color:var(--ink-soft);margin-top:16px;}

/* ===========================================================
   HOME (hero + mappa) — palette "Sabbia calda"
   =========================================================== */
.home-hero{
	--hbg:#FBF3E4; --hland:#D6C09A; --hlandv:#8C2F39; --hlandv-hover:#A8324A;
	--hroute:#A87E52; --hplane-a:#8C2F39; --hplane-b:#6B4F3A; --hplane-stroke:#3a2c22;
	--heye:#0A3A34; --hacc:#8C2F39;
	position:relative;
	overflow:hidden;
	background:var(--hbg);
	padding:0;
	min-height:calc(100vh - 60px);
	z-index:0;
}
/* rotte aeree animate: passano SOPRA la mappa (ma non cliccabili) */
.hero-routes{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
.hero-routes svg{position:absolute;inset:0;width:100%;height:100%;}
.hero-routes .route{stroke:var(--hroute);opacity:0.6;}
.hero-routes .dot{fill:var(--hroute);opacity:0.5;}
.hero-routes .plane-a{fill:var(--hplane-a);stroke:var(--hplane-stroke);stroke-width:0.7;stroke-linejoin:round;}
.hero-routes .plane-b{fill:var(--hplane-b);stroke:var(--hplane-stroke);stroke-width:0.7;stroke-linejoin:round;}
.hero-inner{position:relative;width:100%;max-width:1480px;margin:0 auto;padding:70px 24px 60px;}
.hero-head{position:relative;z-index:3;max-width:1040px;margin:0 auto;width:100%;}

.eyebrow{
	font-family:'Space Mono', monospace;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
	color:var(--teal-dark);margin:0 0 8px;
}
/* eyebrow della home: più grande e più scuro */
.home-hero .eyebrow{font-size:14px;letter-spacing:2px;color:var(--heye);font-weight:700;margin-bottom:10px;}

.hero-title{font-family:'Baloo 2', sans-serif;font-weight:800;font-size:32px;line-height:1.1;margin:0;max-width:640px;color:var(--ink);}
.hero-title em{font-style:italic;color:var(--hacc);}
.lead{font-size:16px;color:var(--ink-soft);max-width:480px;margin:12px 0 0;}

/* la mappa: grande, integrata, con stacco dal titolo (sotto le rotte) */
.map-stage{position:relative;width:100%;margin-top:clamp(34px,6vh,72px);}
.map-container{width:100%;overflow:visible;}
.map-container.grabbing{cursor:grabbing;}
.map-container svg{width:100%;height:auto;display:block;transform-origin:center center;transition:transform 0.05s linear;
	filter:drop-shadow(0 10px 22px rgba(0,0,0,0.16));}
.country{fill:var(--hland);stroke:var(--hbg);stroke-width:0.7;transition:fill 0.18s ease;}
.country.visited{fill:var(--hlandv);cursor:pointer;}
.country.visited:hover,.country.visited:focus{fill:var(--hlandv-hover);outline:none;}
.country:not(.visited):hover{fill:#C7AE85;}

.map-tip{
	position:absolute;background:var(--ink);color:var(--paper);font-family:'Space Mono', monospace;
	font-size:12px;padding:5px 10px;border-radius:6px;pointer-events:none;opacity:0;
	transform:translate(-50%,-140%);transition:opacity 0.1s ease;white-space:nowrap;z-index:5;
}
/* comandi zoom: nascosti su desktop (mappa già grande), mostrati su mobile */
.map-controls{display:none;position:absolute;top:6px;right:6px;flex-direction:column;gap:6px;z-index:6;}
.map-controls button{
	width:40px;height:40px;border:2px solid var(--ink);background:var(--paper);border-radius:9px;
	font-size:18px;font-weight:700;cursor:pointer;color:var(--ink);box-shadow:2px 2px 0 var(--ink);
}
.map-controls button:active{transform:translate(2px,2px);box-shadow:none;}
.map-hint{font-family:'Space Mono', monospace;font-size:11px;color:var(--ink-soft);text-align:center;margin:12px 0 2px;}

/* ===========================================================
   PAESE — hero a copertina + galleria a mosaico moderna
   =========================================================== */
.paese{overflow-x:hidden;background:var(--mood-light, var(--cream));}

/* --- Hero copertina --- */
.paese-hero{
	position:relative;
	width:100vw;
	margin-left:calc(50% - 50vw);
	min-height:60vh;
	background-color:var(--mood-dark, var(--teal-dark));
	background-size:cover;
	background-position:center;
	display:flex;
	align-items:flex-end;
	color:#fff;
}
.paese-hero.no-image{
	background-image:linear-gradient(135deg, var(--mood, var(--teal)), var(--mood-dark, var(--coral)));
}
.paese-hero-overlay{
	position:absolute;inset:0;
	background:linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.28) 100%);
}
.paese-hero-inner{
	position:relative;z-index:2;width:100%;
	padding:44px max(18px, calc((100vw - 1400px) / 2)) 46px;
}
.paese-hero .back-link{color:#fff;opacity:0.92;}
.paese-hero-title{
	font-family:'Baloo 2', sans-serif;font-weight:800;
	font-size:clamp(38px, 8vw, 82px);line-height:1.02;
	margin:10px 0 8px;letter-spacing:0.5px;
	text-shadow:0 2px 24px rgba(0,0,0,0.45);
}
.paese-hero-meta{
	font-family:'Space Mono', monospace;font-size:13px;opacity:0.92;
	text-shadow:0 1px 10px rgba(0,0,0,0.5);
}

.paese-intro{max-width:680px;margin:26px auto 4px;font-size:16px;color:var(--ink);}

/* --- Galleria a mosaico (colonne, proporzioni reali) --- */
.gallery-wrap{
	width:90%;                                /* margine ai lati a ogni dimensione schermo */
	max-width:1280px;                         /* su schermi grandi il margine cresce */
	margin:0 auto;
	padding:9px 9px 50px;                     /* cornice interna + stacco sotto la copertina */
	background:var(--mood-light, #ffffff);
}
.corkboard{                    /* stesso id/hook: mosaico editoriale a blocchi */
	display:grid;
	grid-template-columns:repeat(2, 1fr);   /* mobile: 2 colonne di base */
	grid-auto-rows:46vw;                     /* altezza casella ~ quadrata su mobile */
	grid-auto-flow:dense;                    /* riempie i vuoti: incastro irregolare */
	gap:9px;                                  /* bordo chiaro e visibile tra le foto */
	background:var(--mood-light, #ffffff);    /* colore del bordo = tinta chiara */
}
.polaroid{                     /* ogni foto riempie il proprio blocco */
	position:relative;
	overflow:hidden;
	background:#eee;
	cursor:pointer;
	margin:0;
	line-height:0;
	transition:opacity 0.25s ease;
}
/* Blocchi di dimensione variabile → movimento "quasi casuale".
   I cicli (7n, 9n, 13n...) non coincidono col numero di colonne,
   così l'incastro non forma mai colonne regolari. */
.polaroid:nth-child(7n+1){ grid-row:span 2; }                    /* alta */
.polaroid:nth-child(9n+5){ grid-column:span 2; }                 /* larga */
.polaroid:nth-child(13n+8){ grid-row:span 2; grid-column:span 2; } /* grande 2x2 */

.polaroid:hover{opacity:0.97;}
.polaroid:focus{outline:3px solid var(--coral);outline-offset:-3px;z-index:2;}
.polaroid img{
	width:100%;height:100%;display:block;
	object-fit:cover;                        /* riempie il blocco (ritaglio editoriale) */
	transition:transform 0.5s ease;
}
.polaroid:hover img{transform:scale(1.06);}
.polaroid figcaption{
	position:absolute;left:0;right:0;bottom:0;
	padding:26px 14px 12px;
	background:linear-gradient(to top, rgba(0,0,0,0.72), transparent);
	color:#fff;font-family:'Space Mono', monospace;font-size:12px;line-height:1.3;
	opacity:0;transform:translateY(8px);transition:opacity 0.3s ease, transform 0.3s ease;
}
.polaroid:hover figcaption{opacity:1;transform:translateY(0);}

.empty-note{
	background:var(--paper);border:2px dashed #D8CBAE;border-radius:12px;padding:20px;
	color:var(--ink-soft);text-align:center;margin:20px 0;
}

/* ---------- Lightbox ---------- */
.lightbox{
	position:fixed;inset:0;background:rgba(20,16,12,0.92);z-index:200;
	display:none;align-items:center;justify-content:center;padding:20px;
}
.lightbox.open{display:flex;}
.lb-stage{margin:0;max-width:92vw;max-height:86vh;display:flex;flex-direction:column;align-items:center;}
.lb-stage img{max-width:92vw;max-height:78vh;object-fit:contain;border-radius:4px;background:#fff;padding:8px;box-shadow:0 10px 40px rgba(0,0,0,0.5);}
.lb-stage figcaption{color:#fff;font-family:'Space Mono', monospace;font-size:13px;margin-top:12px;text-align:center;}
.lb-close,.lb-prev,.lb-next{
	position:absolute;background:rgba(255,255,255,0.12);color:#fff;border:none;cursor:pointer;
	border-radius:50%;width:48px;height:48px;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.lb-close{top:18px;right:18px;}
.lb-prev{left:14px;top:50%;transform:translateY(-50%);}
.lb-next{right:14px;top:50%;transform:translateY(-50%);}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,0.25);}
.lb-play{
	position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
	background:var(--coral);color:#fff;border:none;border-radius:30px;padding:10px 20px;
	font-family:'Baloo 2', sans-serif;font-weight:700;font-size:14px;cursor:pointer;
}

/* ===========================================================
   VIDEO GALLERY
   =========================================================== */
.video-section{padding:30px 0 20px;}
.section-title{font-family:'Baloo 2', sans-serif;font-weight:800;font-size:30px;margin:6px 0 4px;}
.video-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:24px;}
.video-card{
	margin:0;background:var(--paper);border:2px solid var(--ink);border-radius:14px;overflow:hidden;
	box-shadow:4px 4px 0 var(--ink);
}
.video-card video{width:100%;display:block;background:#000;aspect-ratio:16/9;object-fit:cover;}
.video-card figcaption{padding:14px 16px;display:flex;flex-direction:column;gap:4px;}
.video-title{font-family:'Baloo 2', sans-serif;font-weight:700;font-size:17px;}
.video-desc{font-size:13px;color:var(--ink-soft);}
.pagination{margin-top:26px;font-family:'Space Mono', monospace;}
.pagination a,.pagination .current{padding:6px 10px;border:2px solid var(--ink);border-radius:8px;margin-right:6px;text-decoration:none;}

/* ===========================================================
   RESPONSIVE — da tablet in su
   =========================================================== */
@media (min-width:680px){
	.hero-title{font-size:40px;}
	/* tablet: 3 colonne, caselle un po' più piccole */
	.corkboard{grid-template-columns:repeat(3, 1fr);grid-auto-rows:30vw;}
	.video-grid{grid-template-columns:repeat(2,1fr);}
}

@media (min-width:980px){
	.hero-title{font-size:48px;}
	.home-hero .eyebrow{font-size:15px;}
	/* desktop: 4 colonne; l'altezza segue la larghezza colonna, con tetto su schermi enormi */
	.corkboard{grid-template-columns:repeat(4, 1fr);grid-auto-rows:min(23vw, 380px);}
	.video-grid{grid-template-columns:repeat(3,1fr);}
}

/* Accessibilità: rispetta la riduzione del movimento */
@media (prefers-reduced-motion:reduce){
	*{transition:none !important;animation:none !important;}
}