/* Portale Valle Maira — stili scoped .vm-*, indipendenti dagli asset del template.
   Esterno (non inline) così è cacheato su tutte le pagine del sito multipagina.
   Caricato PER ULTIMO in <head> così i suoi override vincono su main/custom.css. */

/* Palette fissa (tema Nordic). */
:root {
	--font-primary: "Inter", system-ui, sans-serif;
	--font-secondary: "Instrument Serif", Georgia, serif;
	--color-accent-1: #1C1F21;
	--color-accent-2: #D0632C;
	--color-light-1: #f1f1f1;
}
.vm-hero h1, .vm-intro h2, .vm-section-head h2, .vm-live h2, .vm-struttura h3, .vm-subhero h1 { letter-spacing: -0.01em; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.vm { --ink: var(--color-accent-1); --sand: var(--color-accent-2); --cream: var(--color-light-1); --meteo-metrics: #F5EFEA; --live-bg: #24282B; --head-style: normal; }
.vm section { scroll-margin-top: 90px; }
.vm .vm-eyebrow {
	font-family: var(--font-primary);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: .22em;
	font-size: 13px;
	font-weight: 600;
	color: var(--sand);
}

/* ---------- Header ---------- */
.vm-header {
	position: fixed; inset: 0 0 auto 0; z-index: 1000;
	display: flex; align-items: center; justify-content: space-between;
	padding: 22px clamp(18px, 4vw, 60px);
	transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
}
/* Velatura sfumata sotto l'header trasparente: garantisce la leggibilità
   del testo bianco su qualsiasi zona della foto. Scompare quando è bianco. */
.vm-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(180deg, rgba(5,25,20,.55) 0%, rgba(5,25,20,.28) 55%, rgba(5,25,20,0) 100%);
	opacity: 1; transition: opacity .35s ease;
}
.vm-header.is-stuck::before { opacity: 0; }
.vm-header__brand {
	font-family: var(--font-secondary); font-style: var(--head-style); font-weight: 600;
	font-size: clamp(20px, 2.4vw, 26px); line-height: 1; color: #fff; text-decoration: none;
	text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.vm-header__brand small { display: block; font-family: var(--font-primary); font-style: normal; font-weight: 500; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .85; margin-top: 4px; }
.vm-nav { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 38px); }
.vm-nav a { color: #fff; text-decoration: none; font-size: 15px; letter-spacing: .02em; text-shadow: 0 1px 10px rgba(0,0,0,.35); transition: color .2s; }
.vm-nav a:hover, .vm-nav a[aria-current="page"] { color: var(--sand); }
.vm-nav__live { display: inline-flex; align-items: center; gap: 7px; }
.vm-nav__live .vm-yt-logo { width: 19px; height: 19px; flex: none; }
/* !important necessario: custom.css forza `header { background: transparent !important }` su ogni <header> */
.vm-header { background: transparent !important; }
.vm-header.is-stuck { background: rgba(255,255,255,.97) !important; box-shadow: 0 6px 30px rgba(5,25,20,.08); padding-top: 14px; padding-bottom: 14px; }
.vm-header.is-stuck .vm-header__brand,
.vm-header.is-stuck .vm-nav a { color: var(--ink); text-shadow: none; }
.vm-header.is-stuck .vm-nav a:hover, .vm-header.is-stuck .vm-nav a[aria-current="page"] { color: var(--sand); }
.vm-burger { display: none; background: none; border: 0; cursor: pointer; width: 34px; height: 26px; position: relative; }
.vm-burger span { position: absolute; left: 0; right: 0; height: 2px; background: #fff; transition: transform .3s, opacity .3s, background .3s; }
.vm-burger span:nth-child(1) { top: 2px; } .vm-burger span:nth-child(2) { top: 12px; } .vm-burger span:nth-child(3) { top: 22px; }
.vm-header.is-stuck .vm-burger span { background: var(--ink); }

/* ---------- Hero ---------- */
.vm-hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; }
.vm-hero__bg { position: absolute; inset: 0; }
.vm-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.vm-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,25,20,.45) 0%, rgba(5,25,20,.12) 35%, rgba(5,25,20,.72) 100%); }
.vm-hero__inner { position: relative; z-index: 2; width: 100%; padding: clamp(96px, 14vh, 130px) clamp(18px, 4vw, 60px) clamp(48px, 8vh, 80px); }
.vm-hero__inner .vm-eyebrow { color: #fff; opacity: .92; }
.vm-hero h1 {
	font-family: var(--font-secondary); font-style: var(--head-style); color: #fff; font-weight: 600;
	font-size: clamp(2.6rem, 8vw, 5.4rem); line-height: .98; letter-spacing: -0.02em;
	margin: 18px 0 0; max-width: 16ch; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.vm-hero p { color: #fff; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; max-width: 60ch; margin-top: 22px; opacity: .95; }
.vm-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }

.vm-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; padding: 15px 30px; border-radius: 16px; font-size: 15px; font-weight: 600; letter-spacing: .04em; text-decoration: none; transition: transform .25s cubic-bezier(.22,1,.36,1), background .25s, color .25s, box-shadow .25s, border-color .25s; }
.vm-btn .vm-arrow { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.vm-btn:hover .vm-arrow { transform: translateX(5px); }

/* Scopri le strutture: reso più "vivo" con glow color-brand, arrow che scorre e sweep di luce all'hover */
.vm-btn--solid { background: var(--sand); color: #fff; box-shadow: 0 10px 26px -12px rgba(0,0,0,.4); }
.vm-btn--solid::before {
	content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
	transform: skewX(-18deg); transition: left .6s cubic-bezier(.22,1,.36,1); pointer-events: none;
}
.vm-btn--solid:hover { background: var(--sand); filter: brightness(.93); color: #fff; transform: translateY(-3px); box-shadow: 0 16px 36px -12px rgba(0,0,0,.45); }
.vm-btn--solid:hover::before { left: 140%; }
@media (prefers-reduced-motion: reduce) { .vm-btn--solid::before { display: none; } }

.vm-btn--ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(4px); }
.vm-btn--ghost:hover { background: #fff; color: var(--ink); transform: translateY(-3px); }
/* Visita XYZ: CTA secondaria, pieno ma di un arancio più profondo (terracotta) per distinguerla dall'hero. */
.vm-btn--green { background: #A8471F; color: #fff; box-shadow: 0 10px 26px -12px rgba(168,71,31,.6); }
.vm-btn--green:hover { background: #8F3B18; color: #fff; transform: translateY(-3px); box-shadow: 0 16px 34px -12px rgba(168,71,31,.7); }

/* Guarda la diretta: pulsante sobrio (ghost), identità YouTube affidata al piccolo badge rosso */
.vm-btn--yt { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.5); backdrop-filter: blur(4px); padding-left: 24px; }
.vm-btn--yt .vm-yt-logo { width: 22px; height: 22px; flex: none; }
.vm-btn--yt:hover { background: #fff; color: var(--ink); transform: translateY(-3px); }
/* CTA band: coppia Meteo (azzurro) + Diretta live (rosso YouTube), toni sobri, testo su una riga */
.vm-btn-ico { width: 20px; height: 20px; flex: none; }
.vm-btn__lead { width: 18px; height: 18px; flex: none; opacity: .5; transition: opacity .25s; }
.vm-btn:hover .vm-btn__lead { opacity: .85; }
.vm-btn--live .vm-yt-logo { width: 20px; height: 20px; flex: none; }
.vm-btn--meteo, .vm-btn--live { padding-left: 26px; padding-right: 32px; border-radius: 11px; white-space: nowrap; border: 1px solid #fff; }
.vm-btn--meteo { background: linear-gradient(135deg, #4B9FD4, #2E6FA8); color: #fff; box-shadow: 0 10px 24px -12px rgba(46,111,168,.6); }
.vm-btn--meteo:hover { color: #fff; filter: brightness(1.05); transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(46,111,168,.7); }
.vm-btn--live { background: linear-gradient(135deg, #D84A43, #C1231C); color: #fff; box-shadow: 0 10px 24px -12px rgba(193,35,28,.55); }
.vm-btn--live:hover { color: #fff; filter: brightness(1.05); transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(193,35,28,.65); }

/* CTA band: coppia vivace in tinta brand — accent arancio (primario) + light bianco pieno (secondario) */
.vm-btn--accent { background: var(--sand); color: #fff; box-shadow: 0 10px 24px -12px rgba(0,0,0,.4); }
.vm-btn--accent:hover { color: #fff; filter: brightness(1.05); transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(0,0,0,.5); }
.vm-btn--light { background: var(--sand); color: #fff; border: 2px solid #fff; }
.vm-btn--light:hover { background: var(--sand); filter: brightness(.93); color: #fff; transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(0,0,0,.5); }

/* Variante scura per pagine con sfondo chiaro */
.vm-btn--dark { background: var(--ink); color: #fff; }
.vm-btn--dark:hover { background: #000; color: #fff; transform: translateY(-3px); }

/* ---------- Intro ---------- */
.vm-intro { padding: clamp(64px, 10vh, 120px) 0; background: var(--cream); }
.vm-intro__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.vm-intro h2 { font-family: var(--font-secondary); font-style: var(--head-style); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; margin: 14px 0 0; color: var(--ink); text-wrap: balance; }
.vm-intro p { font-size: 17px; line-height: 1.75; color: #3a4f47; margin-top: 22px; max-width: 68ch; text-wrap: pretty; }
.vm-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.vm-stat { background: #fff; border-radius: 16px; padding: 20px 26px; flex: 1 1 160px; }
.vm-stat b { display: block; font-family: var(--font-secondary); font-style: var(--head-style); font-size: 34px; line-height: 1; color: var(--ink); }
.vm-stat span { display: block; font-size: 13px; letter-spacing: .04em; color: #6a7a72; margin-top: 8px; }

/* ---------- Strutture ---------- */
.vm-strutture { padding: clamp(64px, 10vh, 120px) 0; background: #fff; }
.vm-section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(48px, 7vh, 80px); }
.vm-section-head h2 { font-family: var(--font-secondary); font-style: var(--head-style); font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.04; margin: 14px 0 0; color: var(--ink); text-wrap: balance; }
.vm-section-head p { font-size: 17px; line-height: 1.7; color: #4a5c54; margin-top: 18px; }

.vm-struttura { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.vm-struttura + .vm-struttura { margin-top: clamp(56px, 9vh, 110px); }
.vm-struttura--rev .vm-struttura__media { order: 2; }
.vm-struttura__media { border-radius: 22px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 30px 60px -30px rgba(5,25,20,.4); }
.vm-struttura__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22,1,.36,1); }
.vm-struttura:hover .vm-struttura__media img { transform: scale(1.05); }
.vm-tag { display: inline-block; background: #F0EAE4; color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 8px 16px; border-radius: 100px; }
.vm-struttura h3 { font-family: var(--font-secondary); font-style: var(--head-style); font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1; margin: 18px 0 0; color: var(--ink); }
.vm-struttura__place { font-size: 14px; letter-spacing: .04em; color: var(--sand); font-weight: 600; margin-top: 12px; }
.vm-struttura__body > p { font-size: 16.5px; line-height: 1.72; color: #3a4f47; margin-top: 18px; max-width: 56ch; text-wrap: pretty; }
.vm-facts { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vm-facts li { font-size: 13.5px; color: var(--ink); background: var(--cream); border-radius: 100px; padding: 8px 16px; }
.vm-struttura__body .vm-btn { margin-top: 30px; }
.vm-struttura__logo { height: 56px; width: auto; max-width: 230px; object-fit: contain; object-position: left center; display: block; margin-bottom: 18px; }
/* Scheda struttura: badge su riga propria, poi logo a sinistra del nome */
.vm-struttura__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.vm-struttura__head .vm-struttura__logo { margin: 0; }
.vm-struttura__head h3 { margin: 0; }

/* Read more: <details> nativo, nessun JS. Il testo di default resta visibile, i paragrafi extra si espandono. */
.vm-more { margin-top: 4px; }
.vm-more > summary {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
	font-family: var(--font-primary); font-size: 14.5px; font-weight: 700; letter-spacing: .02em;
	color: var(--sand); padding: 8px 0; user-select: none; transition: color .2s;
}
.vm-more > summary::-webkit-details-marker { display: none; }
.vm-more > summary::after {
	content: "+"; display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor;
	font-size: 15px; font-weight: 700; line-height: 1;
}
.vm-more[open] > summary { color: var(--ink); }
.vm-more[open] > summary::after { content: "\2013"; }
.vm-more > summary:hover { color: var(--ink); }
.vm-more p { font-size: 16px; line-height: 1.72; color: #3a4f47; margin-top: 16px; max-width: 56ch; text-wrap: pretty; }

/* ---------- Live ---------- */
.vm-live { position: relative; overflow: hidden; isolation: isolate; padding: clamp(64px, 10vh, 120px) 0; background: var(--live-bg); color: #fff; }
/* Panorama montano del Piemonte a bassissima opacità: texture sotto la diretta, non un'immagine "vera" */
.vm-live::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: url("https://images.unsplash.com/photo-1729984283070-585dd14cb33b?w=1600&q=60&auto=format&fit=crop") center / cover no-repeat;
	opacity: .06;
}
.vm-live .vm-eyebrow { color: var(--sand); }
.vm-live h2 { font-family: var(--font-secondary); font-style: var(--head-style); font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.04; margin: 14px 0 0; color: #fff; text-wrap: balance; }
.vm-live p { color: rgba(255,255,255,.9); font-size: 17px; line-height: 1.7; margin-top: 16px; }
.vm-live__badge { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.vm-live__dot { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 0 rgba(229,72,77,.7); animation: vmPulse 1.8s infinite; }
@keyframes vmPulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.7); } 70% { box-shadow: 0 0 0 12px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } }
@media (prefers-reduced-motion: reduce) { .vm-live__dot { animation: none; } }
.vm-live__frame { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 20px; overflow: hidden; margin-top: 40px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); background: #000; }
.vm-live__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Meteo ---------- */
.vm-meteo { padding: clamp(64px, 10vh, 120px) 0; }
.vm-meteo .vm-section-head { margin-bottom: 0; }
.vm-meteo .vm-eyebrow { color: var(--sand); }

/* Pannello unico: a sinistra "Adesso", a destra "Prossimi 3 giorni".
   Un solo blocco arrotondato con un'unica ombra: le due parti leggono come
   una sola sezione (adesso | previsioni), non come due box scollegati. */
.vm-meteo__panel {
	margin-top: clamp(40px, 6vh, 64px);
	display: grid; grid-template-columns: 1fr 1fr;
	background: #fff; border-radius: 24px; overflow: hidden;
	box-shadow: 0 34px 66px -4px rgba(43,83,70,.34);
}

/* --- Adesso (colonna sinistra) --- */
.vm-meteo__now { padding: clamp(28px, 3.5vw, 48px); display: flex; flex-direction: column; }
.vm-meteo__updated {
	display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
	font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6a7a72;
}
.vm-meteo__dot {
	width: 9px; height: 9px; border-radius: 50%; background: #3f9b6f;
	box-shadow: 0 0 0 0 rgba(63,155,111,.6); animation: vmPulse2 2.2s infinite;
}
@keyframes vmPulse2 { 0% { box-shadow: 0 0 0 0 rgba(63,155,111,.55); } 70% { box-shadow: 0 0 0 10px rgba(63,155,111,0); } 100% { box-shadow: 0 0 0 0 rgba(63,155,111,0); } }

.vm-meteo__head { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 26px); margin-top: clamp(20px, 3vh, 30px); }
.vm-meteo__icon { width: clamp(62px, 8vw, 92px); flex: none; color: var(--ink); }
.vm-meteo__icon svg { width: 100%; height: auto; display: block; animation: vmFloat 5.5s ease-in-out infinite; }
.vm-meteo__icon .vm-i-sun { color: var(--sand); }
@keyframes vmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.vm-meteo__temp {
	font-family: var(--font-secondary); font-style: var(--head-style); font-weight: 600;
	font-size: clamp(3rem, 7vw, 4.4rem); line-height: .9; color: var(--ink); letter-spacing: -0.01em;
}
.vm-meteo__unit { font-size: .34em; font-style: normal; font-weight: 700; vertical-align: super; margin-left: 2px; color: var(--sand); }
.vm-meteo__descr { font-family: var(--font-secondary); font-style: var(--head-style); font-size: clamp(1.15rem, 2.2vw, 1.55rem); color: var(--ink); margin: 6px 0 0; text-wrap: balance; }
.vm-meteo__place { font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--sand); margin-top: clamp(16px, 2.5vh, 24px); }

/* metriche in fondo alla colonna "adesso": schede con icona-filigrana grande in alto a sx */
.vm-meteo__metrics { margin-top: auto; padding-top: clamp(22px, 3vh, 30px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vm-meteo__metric { position: relative; overflow: hidden; background: var(--cream); border-radius: 16px; padding: 14px 16px 16px clamp(18px, 2.2vw, 24px); min-height: 85px; display: flex; flex-direction: column; }
.vm-meteo__metric-ico { position: absolute; bottom: -5px; left: -8px; width: clamp(40px, 5vw, 54px); height: clamp(40px, 5vw, 54px); color: var(--sand); opacity: .15; pointer-events: none; }
.vm-meteo__metric-label { position: relative; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.vm-meteo__metric-val { position: relative; font-family: var(--font-secondary); font-style: var(--head-style); font-size: clamp(1.5rem, 2.8vw, 1.9rem); line-height: 1; color: var(--ink); white-space: nowrap; }
.vm-meteo__metric-val small { font-family: var(--font-primary); font-style: normal; font-size: .45em; font-weight: 700; color: #6a7a72; margin-left: 2px; }
/* vento: sigla direzione in alto a destra, freccia (punta alla provenienza) sul lato destro */
.vm-meteo__wind-card { position: absolute; top: 11px; right: 13px; font-size: 15px; font-weight: 800; letter-spacing: .02em; color: var(--sand); }
.vm-meteo__wind-arrow { position: absolute; top: 50%; right: 12px; width: 22px; height: 22px; margin-top: -11px; color: var(--sand); transform: rotate(var(--dir, 0deg)); }

/* --- Previsioni 3 giorni (colonna destra): lista di righe (niente card annidate) ---
   Ogni riga: giorno a sinistra, meteo (icona · temp · pioggia) allineato a destra. */
.vm-meteo__forecast { background: var(--meteo-metrics); padding: clamp(26px, 3.2vw, 44px); display: flex; flex-direction: column; }
.vm-meteo__fc-title { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5c6b64; }
.vm-meteo__days { list-style: none; margin: clamp(6px, 1.5vh, 14px) 0 0; padding: 0; display: flex; flex-direction: column; flex: 1; justify-content: center; }
.vm-meteo__day { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 18px); padding: 15px 2px; }
.vm-meteo__day + .vm-meteo__day { border-top: 1px solid rgba(5,25,20,.09); }
.vm-meteo__day-date { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.vm-meteo__day-name { font-size: 15px; font-weight: 700; letter-spacing: .01em; color: var(--ink); text-transform: capitalize; }
.vm-meteo__day-num { font-style: var(--head-style); font-weight: 600; font-size: 1.3rem; line-height: 1; color: var(--sand); }
.vm-meteo__day-icon { width: clamp(34px, 4vw, 44px); flex: none; color: var(--ink); margin-left: auto; }
.vm-meteo__day-icon svg { width: 100%; height: auto; display: block; }
.vm-meteo__day-icon .vm-i-sun { color: var(--sand); }
.vm-meteo__day-temps { display: inline-flex; align-items: flex-start; gap: clamp(10px, 1.4vw, 16px); justify-content: flex-end; }
.vm-meteo__day-t { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.vm-meteo__day-tval { font-family: var(--font-secondary); font-style: var(--head-style); font-weight: 600; font-size: clamp(1.2rem, 2.3vw, 1.55rem); line-height: 1; color: var(--ink); }
.vm-meteo__day-tval--min { color: var(--bs-blue); }
.vm-meteo__day-tval--max { color: var(--bs-danger); }
.vm-meteo__day-tlbl { font-family: var(--font-primary); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6a7a72; }
.vm-meteo__day-rain { position: relative; align-items: center; font-size: 16px; font-weight: 700; color: #3d76a6; min-width: 3.4rem; text-align: right; }
.vm-meteo__day-rain small { font-weight: 600; opacity: .85; display: block; }
.vm-meteo__day-rain svg { width: 25px; height: 25px; position: absolute; bottom: -3px; left: 3px; color: #3d76a6; }

@media (prefers-reduced-motion: reduce) {
	.vm-meteo__dot { animation: none; }
	.vm-meteo__icon svg { animation: none; }
}

/* ---------- Esperienze ---------- */
.vm-esperienze { position: relative; padding: clamp(64px, 10vh, 120px) 0; background: var(--cream); }
.vm-esperienze::before { content: ""; position: absolute; inset: 0; background: url("../img/valle/valle-maira-3.jpg") center / cover no-repeat; opacity: .06; pointer-events: none; }
.vm-esperienze > .container { position: relative; z-index: 1; }
.vm-esp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; margin-top: clamp(40px, 6vh, 64px); }
.vm-esp { background: #fff; border-radius: 20px; padding: 34px 30px; }
.vm-esp__n { font-family: var(--font-secondary); font-style: var(--head-style); font-size: 20px; color: var(--sand); }
.vm-esp h3 { font-family: var(--font-secondary); font-style: var(--head-style); font-size: 24px; margin: 12px 0 0; color: var(--ink); }
.vm-esp p { font-size: 15.5px; line-height: 1.65; color: #4a5c54; margin-top: 12px; }
.vm-esp a.vm-esp__link { display: inline-block; margin-top: 16px; color: var(--sand); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.vm-esp a.vm-esp__link:hover { color: var(--ink); }

/* ---------- FAQ ---------- */
.vm-faq { padding: clamp(64px, 10vh, 120px) 0; }
.vm-faq__list { max-width: 840px; margin: clamp(40px, 6vh, 64px) auto 0; }
.vm-faq__item { border-top: 1px solid rgba(5,25,20,.12); }
.vm-faq__item:last-child { border-bottom: 1px solid rgba(5,25,20,.12); }
.vm-faq__item > summary {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	cursor: pointer; list-style: none; padding: 22px 4px; user-select: none;
	font-family: var(--font-secondary); font-style: var(--head-style);
	font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--ink); transition: color .2s;
}
.vm-faq__item > summary::-webkit-details-marker { display: none; }
.vm-faq__item > summary::after {
	content: "+"; flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--sand); color: var(--sand);
	font-size: 20px; font-weight: 700; line-height: 1; transition: background .2s, color .2s;
}
.vm-faq__item[open] > summary::after { content: "\2013"; background: var(--sand); color: #fff; }
.vm-faq__item > summary:hover { color: var(--sand); }
.vm-faq__item p { font-size: 16.5px; line-height: 1.72; color: #3a4f47; margin: 0 4px 24px; text-wrap: pretty; }
.vm-faq__item p a { color: var(--sand); font-weight: 600; text-decoration: none; }
.vm-faq__item p a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
/* Sfondo a tinta unita: sopra il footer c'è sempre una CTA band con foto,
   evitiamo un secondo sfondo fotografico consecutivo. */
.vm-footer { background: var(--ink); color: rgba(255,255,255,.72); padding: clamp(60px, 9vh, 96px) 0 34px; }
/* main.css imposta un globale `p { color: accent-1 }` (verde): forziamo bianco nel footer */
.vm-footer p, .vm-footer__line { color: rgba(255,255,255,.78); }
.vm-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.vm-footer h4 { font-family: var(--font-secondary); font-style: var(--head-style); color: #fff; font-size: 22px; margin: 0 0 18px; }
.vm-footer__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.vm-footer__head h4 { margin: 0; }
.vm-footer__logo { height: 44px; width: auto; flex: none; }
.vm-footer__brand { font-family: var(--font-secondary); font-style: var(--head-style); color: #fff; font-size: 28px; }
.vm-footer a { color: rgba(255,255,255,.72); text-decoration: none; transition: color .2s; }
.vm-footer a:hover { color: var(--sand); }
.vm-footer__line { display: block; margin-top: 12px; font-size: 15px; }
.vm-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.vm-footer__bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 56px; padding-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.55); }

/* ---------- Reveal (progressive enhancement: nascosto solo se il JS gira) ---------- */
.vm-js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.vm-js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .vm-js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Pagine interne ---------- */
.vm-subhero { position: relative; overflow: hidden; min-height: 54vh; display: flex; align-items: flex-end; }
.vm-subhero__bg { position: absolute; inset: 0; }
.vm-subhero__bg img { width: 100%; height: 100%; object-fit: cover; }
.vm-subhero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,25,20,.35) 0%, rgba(5,25,20,.12) 40%, rgba(5,25,20,.80) 100%); }
.vm-subhero__inner { position: relative; z-index: 2; width: 100%; padding: clamp(96px, 15vh, 140px) clamp(18px, 4vw, 60px) clamp(34px, 6vh, 60px); }
.vm-subhero h1 { font-family: var(--font-secondary); font-style: var(--head-style); color: #fff; font-weight: 600; font-size: clamp(2.2rem, 6.5vw, 4.2rem); line-height: 1; margin: 16px 0 0; max-width: 20ch; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.vm-subhero p { color: #fff; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; max-width: 62ch; margin-top: 16px; opacity: .95; }
.vm-subhero .vm-eyebrow { color: #fff; opacity: .92; }

.vm-breadcrumb { background: var(--cream); }
.vm-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 15px 0; font-size: 13.5px; color: #6a7a72; }
.vm-breadcrumb a { color: var(--sand); text-decoration: none; }
.vm-breadcrumb a:hover { color: var(--ink); }
.vm-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.vm-breadcrumb li + li::before { content: "/"; color: #b7c2bc; }

.vm-prose { padding: clamp(48px, 8vh, 96px) 0; background: #fff; }
.vm-prose__grid { max-width: 1200px; margin-inline: auto; }
.vm-prose__grid.vm-prose--wide { max-width: none; }
.vm-prose__block + .vm-prose__block { margin-top: clamp(36px, 6vh, 64px); }
.vm-prose .vm-eyebrow { display: block; }
.vm-prose h2 { font-family: var(--font-secondary); font-style: var(--head-style); font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.1; color: var(--ink); margin: 10px 0 0; text-wrap: balance; }
.vm-prose h3 { font-family: var(--font-secondary); font-style: var(--head-style); font-size: clamp(1.3rem, 2.4vw, 1.85rem); color: var(--ink); margin: 30px 0 0; }
.vm-prose p { font-size: 17px; line-height: 1.78; color: #3a4f47; margin-top: 16px; text-wrap: pretty; }
.vm-prose a:not(.vm-btn) { color: var(--sand); font-weight: 600; text-decoration: none; }
.vm-prose a:not(.vm-btn):hover { text-decoration: underline; }
.vm-prose ul, .vm-prose ol { margin-top: 16px; padding-left: 1.25em; color: #3a4f47; font-size: 16.5px; line-height: 1.7; }
.vm-prose li { margin-top: 7px; }
.vm-prose li b { color: var(--ink); }

/* Griglia informativa a due colonne (testo + elenco/aside) */
.vm-split { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.vm-aside { background: var(--cream); border-radius: 20px; padding: clamp(24px, 3vw, 36px); }
.vm-aside h3 { font-family: var(--font-secondary); font-style: var(--head-style); font-size: 22px; color: var(--ink); margin: 0 0 6px; }

/* Fascia "proponi la tua attività" (contatti.php). Terracotta pieno #A8471F e non
   var(--sand): il sand su bianco dà 3.6:1, sotto la soglia AA per il testo corrente;
   la variante scura arriva a 5.9:1. Colore già in palette (.vm-btn--green). */
.vm-partner { background: #A8471F; color: #fff; padding: clamp(40px, 6vh, 68px) 0; }
.vm-partner__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(22px, 3vw, 48px); }
.vm-partner__txt { flex: 1 1 420px; }
.vm-partner h2 { font-family: var(--font-secondary); font-style: var(--head-style); font-size: clamp(1.6rem, 3.2vw, 2.35rem); line-height: 1.1; color: #fff; margin: 0; text-wrap: balance; }
.vm-partner p { color: rgba(255,255,255,.92); font-size: 16.5px; line-height: 1.65; margin: 12px 0 0; max-width: 56ch; text-wrap: pretty; }
.vm-partner__btn { flex: none; background: #fff; color: #A8471F; box-shadow: 0 12px 30px -14px rgba(0,0,0,.5); }
.vm-partner__btn:hover { background: #fff; color: #A8471F; filter: brightness(.95); }

/* Foto di sfondo (asset locale) + velatura scura leggera: il testo e i bottoni
   sono bianchi, l'overlay serve solo a garantirne la leggibilità sulla foto. */
.vm-cta-band { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: #fff; padding: clamp(48px, 8vh, 88px) 0; text-align: center; }
.vm-cta-band::before {
	content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
	background: url("../img/valle/valle-maira-3.jpg") center / cover no-repeat;
}
.vm-cta-band::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(180deg, rgba(10,22,18,.48) 0%, rgba(10,22,18,.60) 100%);
}
.vm-cta-band h2 { font-family: var(--font-secondary); font-style: var(--head-style); font-size: clamp(1.8rem, 3.6vw, 2.8rem); color: #fff; margin: 0; text-wrap: balance; text-shadow: 0 2px 22px rgba(0,0,0,.4); }
.vm-cta-band p { color: rgba(255,255,255,.95); font-size: 17px; margin: 16px auto 0; max-width: 58ch; text-shadow: 0 1px 16px rgba(0,0,0,.35); }
.vm-cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }
.vm-cta-band .vm-btn--solid { background: #fff; color: var(--ink); }
.vm-cta-band .vm-btn--solid:hover { background: #fff; filter: brightness(.94); color: var(--ink); }
.vm-cta-band .vm-btn--ghost { border-color: rgba(255,255,255,.85); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.vm-intro__grid { grid-template-columns: 1fr; }
	.vm-struttura, .vm-struttura--rev { grid-template-columns: 1fr; }
	.vm-struttura--rev .vm-struttura__media { order: 0; }
	.vm-footer__grid { grid-template-columns: 1fr 1fr; }
	.vm-meteo__panel { grid-template-columns: 1fr; }
	.vm-split { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
	.vm-nav {
		position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px); z-index: 1200;
		flex-direction: column; align-items: flex-start; justify-content: center; gap: 26px;
		background: var(--ink); padding: 40px; transform: translateX(105%); transition: transform .4s cubic-bezier(.22,1,.36,1);
	}
	.vm-nav.is-open { transform: translateX(0); }
	.vm-nav a { color: #fff; font-size: 20px; text-shadow: none; }
	.vm-header.is-stuck .vm-nav a { color: #fff; }
	.vm-burger { display: block; z-index: 1300; }
	.vm-nav.is-open ~ .vm-burger span,
	.vm-burger.is-open span { background: #fff; }
	.vm-burger.is-open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
	.vm-burger.is-open span:nth-child(2) { opacity: 0; }
	.vm-burger.is-open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
}
@media (max-width: 575px) {
	.vm-footer__grid { grid-template-columns: 1fr; }
	.vm-hero { min-height: 88vh; }
}

/* Galleria foto valle (galleria.php) */
.vm-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.vm-gallery__item { display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 4 / 3; background: var(--cream); }
.vm-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.vm-gallery__item:hover img { transform: scale(1.05); }
@media (max-width: 575px) {
	.vm-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
.vm-js .vm-gallery__item { cursor: zoom-in; }
.vm-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 4vh 4vw; background: rgba(10,15,13,.92); cursor: zoom-out; }
.vm-lightbox.is-open { display: flex; }
.vm-lightbox img { max-width: 100%; max-height: 92vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 60px rgba(0,0,0,.5); }
.vm-lightbox__close { position: absolute; top: 14px; right: 22px; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }

/* Switcher lingua (multilingua IT/EN/FR/DE) — nel nav, segue i colori dell'header */
.vm-lang { display: inline-flex; align-items: center; gap: 9px; margin-left: clamp(4px, 1vw, 12px); padding-left: clamp(10px, 1.4vw, 18px); border-left: 1px solid rgba(255,255,255,.35); }
.vm-lang a { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .04em; opacity: .78; text-shadow: 0 1px 10px rgba(0,0,0,.35); transition: color .2s, opacity .2s; }
.vm-flag { width: 20px; height: 14px; flex: none; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.vm-lang a:hover, .vm-lang a.is-active { opacity: 1; color: var(--sand); }
.vm-header.is-stuck .vm-lang { border-left-color: rgba(0,0,0,.15); }
.vm-header.is-stuck .vm-lang a { color: var(--ink); text-shadow: none; }
.vm-header.is-stuck .vm-lang a:hover, .vm-header.is-stuck .vm-lang a.is-active { color: var(--sand); }
@media (max-width: 780px) {
	/* Nel menu mobile (colonna scura) lo switcher va a capo, senza divisore verticale */
	.vm-lang { width: 100%; margin: 6px 0 0; padding: 20px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); gap: 20px; }
	.vm-lang a { color: #fff; font-size: 18px; opacity: .85; }
	.vm-header.is-stuck .vm-lang a { color: #fff; }
}

/* --- Sottomenu di navigazione (Esperienze, Mangiare) --------------------- */
.vm-nav__group { position: relative; display: inline-flex; align-items: center; }
.vm-nav__sub {
	position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
	display: flex; flex-direction: column; gap: 11px; min-width: 200px; padding: 15px 18px;
	background: var(--ink); border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.30);
	opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease; z-index: 1250;
}
.vm-nav__group:hover .vm-nav__sub,
.vm-nav__group:focus-within .vm-nav__sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* Il sottomenu ha sempre sfondo scuro: il testo resta bianco anche con header "stuck" */
.vm-nav__sub a,
.vm-header.is-stuck .vm-nav__sub a { color: #fff; font-size: 14.5px; text-shadow: none; white-space: nowrap; }
.vm-nav__sub a:hover,
.vm-header.is-stuck .vm-nav__sub a:hover { color: var(--sand); }

@media (max-width: 780px) {
	/* Su mobile il sottomenu è sempre aperto, rientrato sotto la voce padre */
	.vm-nav__group { display: block; width: 100%; }
	.vm-nav__sub {
		position: static; transform: none; opacity: 1; visibility: visible;
		background: none; box-shadow: none; min-width: 0; padding: 12px 0 0 14px;
		margin-top: 10px; gap: 13px; border-left: 1px solid rgba(255,255,255,.22);
	}
	.vm-nav__sub a, .vm-header.is-stuck .vm-nav__sub a { font-size: 16px; opacity: .9; }
}

/* --- Risposta breve in apertura di sezione (answer-first) ---------------- */
.vm-answer { font-size: 1.06em; line-height: 1.62; font-weight: 500; }