/*
Theme Name: Aletia Art Design
Theme URI: https://aletiadesign.com
Author: Aletia
Description: Tema su misura per Aletia Art Design. Ricostruzione fedele del sito originale, con testi editabili e gallerie gestite via Modula. Bilingue EN/IT (Polylang).
Version: 0.7.5
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: aletia
*/

/* ============================================================
   Design tokens (catturati dal sito originale)
   ============================================================ */
:root{
  --brown:#45332A;          /* sfondo principale */
  --brown-deep:#3a2a22;     /* footer / sezioni piu scure */
  --cream:#ffffff;          /* testo su sfondo scuro */
  --muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.14);
  --maxw:1560px;
  --gutter:40px;
  --media-maxw:1480px; /* larghezza massima di Hero e grandi immagini editoriali (es. About): = --maxw(1560) meno il padding laterale del container (40px x2), per allinearsi esattamente a logo/testo/nav */
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Design system: scala tipografica (cambiare qui = cambia tutto il sito) --- */
  --fs-hero: clamp(42px, 5.6vw, 78px);      /* titolo pagina/collezione */
  --fs-section: clamp(28px, 3.4vw, 40px);   /* titolo di sezione (es. "Pattern") */
  --fs-subtitle: clamp(18px, 1.9vw, 26px);  /* sottotitolo hero */
  --fs-lead: clamp(17px, 1.4vw, 20px);      /* testo introduttivo */
  --fs-body: 20px;                          /* corpo testo (misurato con WhatFont sull'originale: Bricolage 400, 20px/32px) */
  --fs-caption: 19px;                       /* didascalie pattern */
  --fs-nav: 18px;                           /* voci di menu */
  --fw-light: 300;
  --fw-regular: 400;
  --lh-tight: 1.2;
  --lh-body: 1.6; /* 32px / 20px, misurato con WhatFont */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{max-width:100%;overflow-x:clip}
body{
  margin:0;
  background:var(--brown);
  color:var(--cream);
  font-family:var(--font);
  font-weight:300;
  line-height:1.6;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ============================================================
   Header
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(69,51,42,.92);backdrop-filter:blur(6px)}
.site-header .container{display:flex;align-items:center;justify-content:flex-start;gap:24px;min-height:160px}
.site-logo img{height:138px;width:auto}
.main-nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.main-nav>ul{display:flex;align-items:center;gap:30px;margin:0;padding:0;list-style:none}
.main-nav a{font-size:var(--fs-nav);font-weight:var(--fw-regular);letter-spacing:.01em;color:var(--cream);opacity:.94;transition:opacity .2s}
.main-nav a:hover{opacity:1}
.menu-item-has-children{position:relative}
.menu-item-has-children>a::after{content:"\25BE";font-size:9px;margin-left:6px;opacity:.7;vertical-align:middle}
.sub-menu{position:absolute;top:100%;left:0;min-width:190px;background:rgba(35,26,20,.92);backdrop-filter:blur(10px);color:var(--cream);
  padding:10px 0;border-radius:8px;box-shadow:0 20px 40px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:all .18s ease;list-style:none;margin:10px 0 0}
.menu-item-has-children:hover .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sub-menu li a{display:block;padding:11px 22px;font-size:16px;color:var(--cream);opacity:.8;transition:opacity .15s ease,background .15s ease}
.sub-menu li a:hover{opacity:1;background:rgba(255,255,255,.07)}

.lang-switch{display:flex;align-items:center;gap:12px;margin-left:14px;padding-left:24px;border-left:1px solid rgba(255,255,255,.22)}
/* selettore testo EN/IT (predefinito) */
.lang-text{display:inline-flex;align-items:center;gap:12px}
.lang-text a{font-size:16px;font-weight:400;letter-spacing:.04em;color:var(--cream);opacity:.5;transition:opacity .2s}
.lang-text a.current,.lang-text a:hover{opacity:1}
/* selettore a bandierine (opzionale, riattivabile) */
.lang-flags{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.28);border-radius:7px;padding:6px 10px}
.lang-flags a{display:inline-flex;width:22px;height:22px;border-radius:50%;overflow:hidden;opacity:.5;transition:opacity .2s}
.lang-flags a.current,.lang-flags a:hover{opacity:1}
.lang-flags img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* mobile nav toggle */
.nav-toggle{display:none;background:none;border:0;color:var(--cream);font-size:26px;cursor:pointer}

/* ============================================================
   Hero (pagina collezione / pagine interne)
   ============================================================ */
.page-hero{text-align:center;padding:60px 0 70px}
.page-hero h1,.a-title{font-weight:var(--fw-regular);font-size:var(--fs-hero);letter-spacing:.01em;margin:0;line-height:var(--lh-tight)}
.page-hero .subtitle,.a-subtitle{max-width:720px;margin:34px auto 0;font-size:var(--fs-subtitle);color:var(--cream);font-weight:var(--fw-regular);line-height:1.3}

/* --- Design system: classi di testo riutilizzabili in tutte le pagine --- */
.a-section-title{font-weight:var(--fw-light);font-size:var(--fs-section);letter-spacing:.01em;margin:90px 0 34px}
.a-lead{font-size:var(--fs-lead);font-weight:var(--fw-light);color:var(--cream);line-height:1.5;max-width:760px}
.a-text{font-size:var(--fs-body);font-weight:var(--fw-regular);color:var(--muted);line-height:var(--lh-body)}
.a-text a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   Gallery grid (fallback + wrapper Modula)
   ============================================================ */
.section{padding:55px 0 120px}
.section-title{font-weight:var(--fw-light);font-size:var(--fs-section);margin:90px 0 34px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid-3 .cell{aspect-ratio:1/1;overflow:hidden;background:#2c211b}
.grid-3 .cell img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.grid-3 .cell:hover img{transform:scale(1.04)}

/* pattern captions */
.patterns .grid-3 .cell{position:relative}
.pattern-name{margin-top:8px;font-size:15px;color:var(--muted);text-align:center}

/* griglia Pattern con didascalie (nome del pannello sotto) */
.aletia-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);
  column-gap:26px;row-gap:64px;margin-top:20px}
.aletia-grid .cell{margin:0}
.aletia-grid .cell>a{display:block;aspect-ratio:1/1;overflow:hidden;background:#2c211b}
.aletia-grid .cell img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.aletia-grid .cell>a:hover img{transform:scale(1.04)}
.aletia-grid figcaption{margin-top:18px;font-size:var(--fs-caption);font-weight:var(--fw-light);color:var(--cream);letter-spacing:.01em}
@media (max-width:900px){ .aletia-grid{grid-template-columns:repeat(2,1fr);row-gap:52px} }
@media (max-width:600px){ .aletia-grid{grid-template-columns:1fr} }

/* demo carousel (ambientazioni) - scorre in orizzontale */
.demo-gallery{margin:8px 0 10px}
.aletia-carousel{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.aletia-carousel::-webkit-scrollbar{height:6px}
.aletia-carousel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.aletia-carousel .slide{position:relative;flex:0 0 calc((100% - 52px)/3);scroll-snap-align:start;
  aspect-ratio:1/1;overflow:hidden;background:#2c211b;display:block}
.aletia-carousel .slide img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.aletia-carousel .slide:hover img{transform:scale(1.05)}
.aletia-carousel .slide-name{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  font-size:20px;font-weight:300;color:#fff;letter-spacing:.01em;pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  opacity:0;transform:translateY(6px);transition:opacity .28s ease, transform .28s ease}
.aletia-carousel .slide:hover .slide-name{opacity:1;transform:translateY(0)}
@media (max-width:900px){ .aletia-carousel .slide{flex-basis:calc((100% - 26px)/2)} }

/* frecce di scorrimento sul carosello demo/ambientazioni: posizionate FUORI dalle immagini
   (nel margine/gutter del container) cosi' restano leggibili anche su grafiche molto cariche.
   Niente icona sopra: la freccia e' "forata" nel cerchio (un vero taglio trasparente),
   ottenuta con una maschera SVG (cerchio pieno meno la sagoma della freccia). */
.aletia-carousel-wrap{position:relative}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:68px;height:68px;border-radius:50%;cursor:pointer;border:0;
  background-color:rgba(255,255,255,.35);
  transition:background-color .18s ease}
.carousel-arrow:hover{background-color:rgba(255,255,255,.55)}
.carousel-arrow--prev{left:-76px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' fill='white' d='M50,4 A46,46 0 1,1 49.99,4 Z M57.17,29.17 L39.17,47.17 L44.83,52.83 L62.83,34.83 Z M57.17,70.83 L39.17,52.83 L44.83,47.17 L62.83,65.17 Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' fill='white' d='M50,4 A46,46 0 1,1 49.99,4 Z M57.17,29.17 L39.17,47.17 L44.83,52.83 L62.83,34.83 Z M57.17,70.83 L39.17,52.83 L44.83,47.17 L62.83,65.17 Z'/%3E%3C/svg%3E")}
.carousel-arrow--next{right:-76px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' fill='white' d='M50,4 A46,46 0 1,1 49.99,4 Z M42.83,29.17 L60.83,47.17 L55.17,52.83 L37.17,34.83 Z M42.83,70.83 L60.83,52.83 L55.17,47.17 L37.17,65.17 Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' fill='white' d='M50,4 A46,46 0 1,1 49.99,4 Z M42.83,29.17 L60.83,47.17 L55.17,52.83 L37.17,34.83 Z M42.83,70.83 L60.83,52.83 L55.17,47.17 L37.17,65.17 Z'/%3E%3C/svg%3E")}
.carousel-arrow{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
@media (max-width:980px){
  .carousel-arrow{width:56px;height:56px}
  .carousel-arrow--prev{left:-60px}
  .carousel-arrow--next{right:-60px}
}
@media (max-width:680px){
  /* poco spazio fuori dal container: le frecce restano appena dentro il bordo dell'immagine */
  .carousel-arrow{width:64px;height:64px}
  .carousel-arrow--prev{left:12px}
  .carousel-arrow--next{right:12px}
}

/* dispositivi touch (niente mouse): via lo zoom in hover (inutile), didascalia demo sempre visibile */
@media (hover:none){
  .grid-3 .cell img,.aletia-grid .cell img,.aletia-carousel .slide img{transition:none}
  .grid-3 .cell:hover img,.aletia-grid .cell>a:hover img,.aletia-carousel .slide:hover img{transform:none}
  .aletia-carousel .slide-name{opacity:1;transform:none;transition:none}
}

/* ============================================================
   Lightbox (GLightbox) - stile su misura
   ============================================================ */
/* sfondo appena trasparente (lascia intravedere la pagina) */
.goverlay{background:rgba(26,19,15,.90)!important}
/* immagine con margine sopra/sotto (~8%) */
.glightbox-clean .gslide-media{box-shadow:none!important}
.glightbox-clean .gslide-image img{max-height:82vh!important;border-radius:2px}
/* didascalia: bianca, centrata, vicina all'immagine, senza barra bianca */
.glightbox-clean .gslide-description{background:transparent!important}
.glightbox-clean .gdesc-inner{padding:14px 16px 0!important;text-align:center}
.glightbox-clean .gslide-title{color:#fff!important;font-family:var(--font);font-weight:300;
  font-size:20px;letter-spacing:.01em;margin:0}
.glightbox-clean .gslide-desc{color:rgba(255,255,255,.78)!important}
/* frecce e chiudi: bianchi tenui su sfondo trasparente */
.glightbox-clean .gnext,.glightbox-clean .gprev,.glightbox-clean .gclose{background:transparent!important}
.glightbox-clean .gnext svg,.glightbox-clean .gprev svg,.glightbox-clean .gclose svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
/* niente bordo/outline di focus col mouse dopo chiusura lightbox (resta per tastiera) */
.aletia-grid a,.aletia-carousel a,a.glightbox{outline:none}
.aletia-grid a:focus:not(:focus-visible),.aletia-carousel a:focus:not(:focus-visible),a.glightbox:focus:not(:focus-visible){outline:none;box-shadow:none}
.aletia-grid a:focus-visible,.aletia-carousel a:focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:2px}

/* ============================================================
   Home: hero (logo + menu sovrapposti alla foto, fedele all'originale:
   niente header compatto separato su questa pagina, vedi header.php)
   ============================================================ */
/* altezza Hero: rapporto misurato sull'originale (1600x916 = ~1.746), non 86vh.
   aspect-ratio scala l'altezza con la larghezza mantenendo le proporzioni originali,
   invece di legarla all'altezza del viewport (che sballava su schermi alti/bassi). */
/* NIENTE overflow:hidden qui: sulla Home il menu sta in fondo alla Hero e le sue tendine
   si aprono verso il basso, uscendo dal riquadro - con overflow:hidden venivano tagliate e
   sparivano sotto lo sfondo. Non serve comunque: le foto sono absolute inset:0 con
   object-fit:cover, quindi restano gia' esattamente dentro il riquadro. */
.home-hero{position:relative;aspect-ratio:1600 / 916;
  max-width:var(--media-maxw);margin-left:auto;margin-right:auto;background:var(--brown)}
/* immagini leggermente trasparenti (85%): il marrone del sito traspare sotto e si fonde con la
   foto, ammorbidendo lo stacco di colore tra Hero e resto della pagina */
.home-hero img.home-hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:0;transition:opacity 1.4s ease}
.home-hero img.home-hero-slide.is-active{opacity:.85;z-index:1}
.home-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(20,14,10,.65) 0%, rgba(20,14,10,.08) 38%, rgba(0,0,0,.15) 100%);z-index:1}

/* logo grande e centrato nella Hero: 44% della larghezza (misurato sull'originale: 706px su 1600),
   centro verticale a ~30% dell'altezza (upper-middle, come l'originale) */
.home-hero-overlay{position:absolute;inset:0;z-index:2;display:flex;justify-content:center;align-items:flex-start;padding-top:7%}
.home-hero-overlay .site-logo{display:block;height:auto}
.home-hero-overlay .site-logo img{width:min(660px,46vw);height:auto}

.home-hero-nav{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:26px;
  padding:22px var(--gutter) 28px;
  background:linear-gradient(to top, rgba(15,10,7,.6), rgba(15,10,7,0))}
.home-hero-nav .main-nav{margin-left:0}
.home-hero-nav .lang-switch{border-left:0;margin-left:6px}
@media (max-width:980px){
  /* su tablet/mobile l'aspect-ratio orizzontale renderebbe la Hero troppo bassa per logo+menu:
     si torna a un'altezza minima in vh (immagine ritagliata in cover) */
  .home-hero{aspect-ratio:auto;min-height:82vh}
  .home-hero-overlay{padding-top:16%}
  .home-hero-overlay .site-logo img{width:min(440px,64vw)}
  /* la Hero ha overflow:hidden (per l'immagine a pieno formato): il menu a tendina
     non puo' restare "assoluto" al suo interno o verrebbe tagliato, quindi su mobile
     diventa un pannello a schermo intero fissato al viewport */
  .home-hero-nav .main-nav{position:fixed;inset:0;top:0;justify-content:center;
    padding:0;box-shadow:none;z-index:60}
  .home-hero-nav .main-nav>ul{justify-content:center}
}

.home-intro{padding:100px 0 20px;max-width:680px;margin-left:auto;margin-right:auto}
.home-intro .a-title{font-size:var(--fs-section)}
.home-intro .a-subtitle-italic{font-style:italic;color:var(--muted);font-size:var(--fs-lead);margin:20px 0 36px;font-weight:var(--fw-light)}

/* ============================================================
   Home: griglia collezioni
   ============================================================ */
/* Menu di 7 bottoni quadrati uguali (non una galleria): angoli stondati */
.aletia-collections{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:70px 0 130px}
.collection-tile{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:16px;background:#2c211b}
.collection-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.collection-tile:hover img{transform:scale(1.05)}
.collection-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 55%)}
.tile-name{position:absolute;left:18px;bottom:14px;z-index:2;color:#fff;font-size:20px;font-weight:var(--fw-regular)}
@media (max-width:900px){ .aletia-collections{grid-template-columns:repeat(2,1fr)} }
@media (hover:none){ .collection-tile:hover img{transform:none} }

/* ============================================================
   Home: features
   ============================================================ */
/* piu' stretta della griglia collezioni sopra, per alternare le larghezze come nell'originale
   (misura sul vero contenitore a griglia dell'originale: 803px su 1377 di viewport = 58.3%) */
.aletia-features{display:grid;grid-template-columns:repeat(3,1fr);gap:74px 30px;margin:20px auto 140px;max-width:910px}
.feature-icon{width:56px;height:56px;color:var(--cream);margin-bottom:26px}
.feature h3{font-size:24px;font-weight:700;margin:0 0 10px}
.feature p{margin:0}
@media (max-width:900px){ .aletia-features{grid-template-columns:repeat(2,1fr)} }
/* mobile (colonna singola): blocchi feature centrati - icona, titolo e testo.
   Fedele all'originale, verificato a 390px di larghezza: li' titolo e paragrafo
   hanno entrambi text-align:center. */
@media (max-width:600px){
  .aletia-features{grid-template-columns:1fr}
  .feature{text-align:center}
  .feature-icon{display:block;margin-left:auto;margin-right:auto}
}

/* Striscia foto ambientazioni: piena larghezza (come Hero), sotto le feature */
.aletia-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
  max-width:var(--media-maxw);margin:40px auto 0}
.strip-cell{aspect-ratio:1/1;overflow:hidden;background:#2c211b}
.strip-cell img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.strip-cell:hover img{transform:scale(1.05)}
@media (hover:none){ .strip-cell:hover img{transform:none} }
@media (max-width:900px){ .aletia-strip{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .aletia-strip{grid-template-columns:repeat(2,1fr)} }

/* ============================================================
   About
   ============================================================ */
.about-content{max-width:700px;margin:20px auto 90px}
.about-content p{margin:0 0 26px}
.about-content strong{color:var(--cream);font-weight:var(--fw-regular)}

/* Immagine editoriale grande (larga quanto la Hero): usata da About e riutilizzabile altrove */
.a-wide-media{display:block;width:100%;max-width:var(--media-maxw);margin:40px auto 0}

/* About: immagine ritagliata (cover) per non prendere troppa altezza, appoggiata al footer */
.about-media{margin:40px auto 0}
.about-media .a-wide-media{aspect-ratio:2.2/1;object-fit:cover;margin-top:0}
@media (max-width:680px){ .about-media .a-wide-media{aspect-ratio:4/3} }

/* ============================================================
   Gallery (video)
   ============================================================ */
.gallery-video{margin:20px 0 90px}
.gallery-video video{width:100%;display:block;background:#000}

/* ============================================================
   Contacts
   ============================================================ */
.contact-list{display:flex;flex-direction:column;gap:44px;margin:30px auto 100px;max-width:640px}
.contact-item{display:flex;gap:20px;align-items:flex-start}
.contact-item svg{width:26px;height:26px;flex:0 0 26px;color:var(--cream);margin-top:2px}
.contact-item h4{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:var(--fw-regular);margin:0 0 6px}
.contact-item p{margin:0;font-size:17px;line-height:1.6}
.contact-item a{text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--brown-deep);border-top:1px solid var(--line);padding:80px 0 30px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.1fr 1.1fr 1.1fr 1fr;gap:40px;align-items:start}
.foot-brand img{height:96px;width:auto;opacity:.92}
.site-footer h4{font-weight:400;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.foot-col h4:not(:first-child){margin-top:22px}
.site-footer p{font-size:15px;color:var(--muted);line-height:1.65;margin:0 0 4px}
.site-footer a{color:var(--muted);transition:color .2s}
.site-footer a:hover{color:var(--cream)}
.foot-social{display:flex;flex-direction:column;gap:14px}
.foot-link{display:inline-flex;align-items:center;gap:11px;font-size:15px}
.foot-link svg{width:20px;height:20px;flex:0 0 20px;color:var(--cream);opacity:.85}
.foot-link:hover svg{opacity:1}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:56px;padding-top:24px;font-size:13px;color:rgba(255,255,255,.5)}
.foot-legal-links{display:inline-flex;gap:18px}
.foot-legal-links a{color:rgba(255,255,255,.5)}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr} .foot-bottom{flex-direction:column;text-align:center;justify-content:center} }

/* ============================================================
   Responsive (migliorato rispetto all'originale)
   ============================================================ */
@media (max-width:1100px){
  .site-header .container{min-height:140px}
  .site-logo img{height:104px}
}
/* tablet verticale e sotto: menu a hamburger, header non fisso (scorre con la pagina) */
@media (max-width:980px){
  :root{--gutter:28px}
  .site-header{position:relative;top:auto}
  .site-header .container{min-height:112px;gap:16px}
  .site-logo img{height:74px}
  .page-hero .subtitle{max-width:460px}
  .nav-toggle{display:block;order:3}
  .lang-switch{margin-left:auto;padding-left:0;border-left:0;gap:14px}
  .main-nav{position:absolute;left:0;right:0;top:100%;background:var(--brown);flex-direction:column;align-items:stretch;
    gap:0;padding:8px 0 20px;border-top:1px solid var(--line);box-shadow:0 16px 30px rgba(0,0,0,.3);
    transform:translateY(-120%);transition:transform .28s ease;z-index:40;margin-left:0}
  .main-nav.open{transform:translateY(0)}
  .main-nav>ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .main-nav>ul>li>a{display:block;padding:14px 28px}
  .sub-menu{position:static;opacity:1;visibility:visible;transform:none;background:transparent;color:var(--cream);
    box-shadow:none;padding:0 0 6px}
  .sub-menu li a{color:var(--muted);padding:8px 44px}
}
@media (max-width:900px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  :root{--gutter:20px}
  .site-header .container{min-height:98px;gap:14px}
  .site-logo img{height:64px}
  .grid-3{grid-template-columns:1fr}
  /* demo: 1 immagine per volta + anteprima ~10px della successiva */
  .aletia-carousel .slide{flex-basis:calc(100% - 22px)}
}