/* Mobile: TUTTE le media query del tema, estratte dai fogli precedenti e
   riunite qui nell'ordine relativo originale. Caricato per ultimo da
   inc/enqueue.php: un override qui vince sempre sulla regola base, esattamente
   come nella demo (verificato: in ogni caso di selettore ripetuto, la regola
   non condizionata precede sempre quella in @media nel sorgente originale). */

@media (max-width:720px){ .nav__links > a{ display:none; } }
@media (prefers-reduced-motion:reduce){ .hero__cards .badge{ animation:none; } }
@media (max-width:860px){
    /* su schermo stretto il velo diagonale non copre: il testo finisce sul muro
       bianco della casa (bianco su bianco). Qui serve un velo uniforme. */
    /* Il velo uniforme copriva tutto lo schermo di grigio e non bastava lo stesso:
       il testo cade sul MURO BIANCO della casa, e li' il contrasto crollava a 4,2:1
       (misurato campionando il fondo sotto ogni riga, non a occhio). Ora e' una macchia
       ancorata in alto a sinistra, dove sta il testo: densa dove serve, dissolta in basso
       a destra, cosi' giardino e pozzo restano fotografia e non grigio. Il secondo
       gradiente tiene un fondo minimo ovunque, per foto future piu' chiare di questa. */
    .hero-zone__scrim{ background:
      radial-gradient(118% 86% at 4% 30%, rgba(var(--scrim-rgb),.92) 0%, rgba(var(--scrim-rgb),.86) 40%, rgba(var(--scrim-rgb),.60) 68%, rgba(var(--scrim-rgb),.10) 90%),
      linear-gradient(180deg, rgba(var(--scrim-rgb),.38) 0%, rgba(var(--scrim-rgb),.22) 52%, rgba(var(--scrim-rgb),.16) 74%, rgba(var(--scrim-rgb),.34) 100%); }
    /* il testo si tiene piu' stretto del contenitore: cosi' il velo non deve
       arrivare al bordo destro dello schermo per coprire l'ultima parola */
    .hero h1{ max-width:19ch; }
    .hero__sub{ max-width:26ch; }
    .hero__grid{ grid-template-columns:1fr; gap:1.6rem; }
    .hero h1{ max-width:none; }
    /* in riga i due badge si strizzano e il testo va a capo su quattro righe:
       su mobile stanno in colonna, come già fanno nella sezione recensioni */
    .hero__cards{ align-items:stretch; gap:.7rem; min-width:0; }
    .hero__cards .badge{ min-width:0; animation:none; }
    .hero__cards .badge:nth-of-type(1),.hero__cards .badge:nth-of-type(2){ margin-right:0; }
    .hero__grid > *{ min-width:0; }
  }
@media (max-width:860px){
    .hero__grid{ grid-template-columns:1fr; gap:2rem; }
    .hero h1{ max-width:none; }
    .hero__fig--short{ margin-bottom:0; }
  }
@media (prefers-reduced-motion:reduce){ .carousel__track{ scroll-behavior:auto; } }
@media (max-width:560px){ .specs{ grid-template-columns:1fr; gap:.9rem; } }
@media (max-width:560px){
    .specs.specs--2{ display:grid; grid-template-columns:max-content 1fr; gap:.55rem 1rem; align-items:baseline; }
    .specs.specs--2 > div, .specs.specs--2 > div > dd{ display:contents; }
    .specs.specs--2 dt{ display:none; }
    .specs.specs--2 > div:first-child dd span{
      grid-column:1; font-family:'Karla',sans-serif; font-size:.66rem; font-weight:700;
      letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
    }
    .specs.specs--2 > div:first-child dd span::before{ content:"Camera "; }
    .specs.specs--2 > div:last-child dd span{ grid-column:2; }
    .specs.specs--2 > div:first-child dd span:nth-child(1),
    .specs.specs--2 > div:last-child dd span:nth-child(1){ grid-row:1; }
    .specs.specs--2 > div:first-child dd span:nth-child(2),
    .specs.specs--2 > div:last-child dd span:nth-child(2){ grid-row:2; }
    .specs.specs--2 > div:first-child dd span:nth-child(3),
    .specs.specs--2 > div:last-child dd span:nth-child(3){ grid-row:3; }
  }
@media (max-width:560px){
    .prezzi__list, .prezzi--wide .prezzi__list{ grid-template-columns:1fr; }
  }
@media (max-width:760px){
    /* Su mobile (richiesta di Paolo, 08/08) la galleria delle suite scende
       SOTTO il paragrafo e sopra i dettagli (camere/tipologia/prezzi).
       Il body si dissolve (display:contents) e i suoi figli diventano item
       del flex della card, ordinabili insieme al carosello. Desktop intatto.
       gap:0: il ritmo verticale lo tengono i margini propri dei blocchi. */
    /* align-items:stretch: la regola desktop ha align-items:center, che nel
       flex a colonna centrerebbe orizzontalmente titolo e blocchi */
    .suite,.suite:nth-of-type(even){ display:flex; flex-direction:column; gap:0; align-items:stretch; }
    .suite__body{ display:contents; }
    .suite__tag{ order:1; align-self:flex-start; }
    .suite__body h3{ order:2; }
    .suite__body > p{ order:3; }
    .suite__media,.suite:nth-of-type(even) .suite__media{ order:4; margin:1.7rem 0 1.9rem; }
    .suite .specs{ order:5; }
    .suite .prezzi{ order:6; }
    .suite__cta{ order:7; align-self:flex-start; }
    .carousel{ aspect-ratio:16/11; }
  }
@media (max-width:820px){
    .pillars{ grid-template-columns:1fr; gap:0; }
    .pillars__thread{ display:none; }
    .pillar{ display:grid; grid-template-columns:var(--pic) 1fr; column-gap:1.1rem; padding-bottom:1.8rem; }
    .pillar:last-child{ padding-bottom:0; }
    .pillar__ic{ margin-bottom:0; }
    .pillar:not(:last-child)::before{
      content:""; position:absolute; left:calc(var(--pic)/2 - 1px);
      top:calc(var(--pic) + .45rem); bottom:.45rem;
      border-left:2px dashed color-mix(in srgb,var(--hill-front) 55%, transparent);
    }
  }
@media (min-width:761px){
    .spazi-top{ align-items:stretch; }
    /* Pannello in vetro scuro, a DESTRA (prova del 07/08 su richiesta di Paolo):
       la banda scura resta la base ma lascia intravedere la foto (76%),
       col blur a garantire la lettura. Fallback quasi pieno (92%) dove
       backdrop-filter non c'è — la leggibilità non deve dipendere dal vetro. */
    .spazi-pannello{
      grid-column:2;
      background:color-mix(in srgb, var(--band-deep) 92%, transparent);
      border-radius:18px;
      padding:clamp(2rem,4vw,3.2rem);
      box-shadow:0 30px 60px -30px rgba(var(--shadow-rgb),.6);
      align-self:center;
    }
    @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
      .spazi-pannello{
        background:color-mix(in srgb, var(--band-deep) 76%, transparent);
        -webkit-backdrop-filter:blur(14px) saturate(1.3);
        backdrop-filter:blur(14px) saturate(1.3);
      }
    }
    .spazi h2{ color:var(--on-deep); }
    .spazi .prose p{ color:var(--on-deep-body); }
    .spazi .chip-label{ background:var(--band-sun); color:var(--chip-ink); }
  }
@media (max-width:760px){
    .spazi-top{ grid-template-columns:1fr; min-height:0; }
    /* impilato: il carosello torna nel flusso, a tutta larghezza sotto il testo.
       Uscendo dal posizionamento assoluto perde l'altezza, quindi gli si ridà
       un rapporto; i pallini tornano centrati perché non c'è più testo accanto. */
    /* relative (non static) con offset azzerati: torna nel flusso come prima,
       ma resta l'ancora di frecce e pallini — con static si ancoravano alla
       sezione e galleggiavano sopra il TESTO (bug visibile a 390) */
    .spazi__foto{ position:relative; top:auto; bottom:auto; margin-top:1.6rem; }
    .spazi__foto.carousel{ aspect-ratio:16/11; }
    /* in flusso la foto non sconfina: l'offset torna semplice (i pallini
       su questa parete sono spenti a monte) */
    .spazi__foto .carousel__nav{ bottom:1.2rem; }
  }
@media (max-width:760px){
    .mosaico{ grid-template-columns:1fr 1fr; }
    .mosaico > *{ grid-column:auto; grid-row:auto; }
    .mosaico__dom{ grid-column:1/-1; }
    .mosaico__dom .carousel{ flex:none; aspect-ratio:4/3; }
  }
@media (max-width:900px){
    .steps{ grid-template-columns:1fr; gap:0; }
    .steps__thread{ display:none; }
    .step{ display:grid; grid-template-columns:var(--disc) 1fr; column-gap:1.1rem; padding-bottom:1.8rem; }
    .step:last-child{ padding-bottom:0; }
    .step__disc{ margin-bottom:0; }
    .step:not(:last-child)::before{
      content:""; position:absolute; left:calc(var(--disc)/2 - 1px);
      top:calc(var(--disc) + .45rem); bottom:.45rem;
      border-left:2px dashed color-mix(in srgb,var(--hill-front) 55%, transparent);
    }
  }
@media (max-width:820px){ .quotes .carousel__slide{ flex:0 0 100%; } }
@media (max-width:1239px){ .gb-heart--2, .gb-heart--3, .gb-heart--4{ display:none; } }
@media (max-width:900px){ .gb-heart{ display:none; } }
@media (prefers-reduced-motion:reduce){ .gb-heart{ animation:none; } }
@media (max-width:720px){ .foot__grid{ grid-template-columns:1fr; gap:1.4rem; } }
@media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    .reveal,.hero h1,.hero__sub,.hero__io,.hero__cta,.hero__sign,.hero__mark{ opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; }
    .suite__media img{ transition:none; }
  }
@media (max-width:760px){
    .pratiche{ grid-template-columns:1fr; }
    .pratiche__prezzi .tariffe{ grid-template-columns:1fr; }
  }
@media (max-width:760px){ .place{ grid-template-columns:1fr; } }
@media (max-width:860px){ .book__grid{ grid-template-columns:1fr; } }
@media (max-width:430px){ .field-row{ grid-template-columns:1fr; gap:0; } }
@media (max-width:640px){ .blog__card{ grid-template-columns:1fr; } .blog__thumb img{ aspect-ratio:16/9; } }
/* pulsante WhatsApp flottante: più vicino ai bordi e sopra la barra gesti
   dell'iPhone — senza env() il pulsante ci finisce sotto e non si preme. */
@media (max-width:760px){
  .wa-float{ right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce){ .wa-float{ transition:none; } }

@media (prefers-reduced-motion:reduce){ .form__stato, .form__stato--ok{ animation:none; } }