/* Suite: le due camere — testo, carosello foto, specifiche, prezzi. */

  /* ============ Suite (sulla banda verde) ============ */
  .suite-intro{ border-left:2px solid var(--hill-front); padding-left:1.2rem; margin:1.4rem 0 clamp(2rem,5vw,3.2rem); }
  .suite-intro p{ margin:0; color:var(--ink-soft); max-width:68ch; }
  /* i tre capoversi restano staccati come li ha scritti Roberto */
  .suite-intro p + p{ margin-top:1rem; }
  /* le tre soluzioni: indice di ciò che segue, staccato dall'introduzione */
  .soluzioni{ margin-top:clamp(1.4rem,3vw,2rem); }
  .soluzioni p{ margin:0 0 .7rem; color:var(--ink); font-weight:600; }
  /* Elenco numerato, non puntato (19/08, richiesta di Paolo): sono tre alternative
     e la frase sopra dice "in 3 soluzioni", quindi enumerarle aiuta. Numero in
     Young Serif oliva SENZA disco: il disco pieno è il segno dei 4 passi, che è
     una sequenza — qui si sceglie, non si procede in ordine. Stessa distinzione
     già fatta il 26/07 fra i pilastri del manifesto e i quattro passi. */
  .soluzioni ol{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; counter-reset:soluzione; }
  .soluzioni li{ position:relative; padding-left:1.6rem; color:var(--ink-soft); counter-increment:soluzione; }
  .soluzioni li::before{ content:counter(soluzione) "."; position:absolute; left:0; top:0;
    font-family:'Young Serif', Georgia, 'Hoefler Text', serif; font-size:.98em; line-height:inherit;
    color:var(--accent); font-variant-numeric:lining-nums; }
  /* La foto sta sempre nella colonna larga e la descrizione sempre in quella stretta:
     sulla suite pari si invertono le COLONNE, non le proporzioni. Così il testo
     ha la stessa larghezza in entrambe le suite pur essendo ribaltato. */
  /* Il blocco suite è il cuore informativo della pagina (scelta 03/08): card alta,
     foto verticale dominante e spaziature larghe fra i blocchi di testo. */
  .suite{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
    padding-block:clamp(4.5rem,10vw,7.5rem); border-top:1px solid var(--line); }
  .suite:nth-of-type(even){ grid-template-columns:.95fr 1.05fr; }
  .suite:nth-of-type(even) .suite__media{ order:2; }
  .suite__media{ border-radius:14px; overflow:hidden; box-shadow:var(--shadow-md); }

  /* ============ Carosello foto suite ============ */
  /* 4:5 verticale sul desktop: è il taglio naturale di una camera, e dà alla foto
     l'altezza che regge la card; sotto i 760px vale il 16/11 della media query */
  .carousel{ position:relative; aspect-ratio:4/5; }
  .carousel__track{
    display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth;
  }
  .carousel__track::-webkit-scrollbar{ display:none; }
  .carousel__slide{ margin:0; flex:0 0 100%; scroll-snap-align:center; height:100%; }
  .carousel__slide img{ width:100%; height:100%; object-fit:cover; }
  .carousel__nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:2.5rem; height:2.5rem; border-radius:50%; border:0; cursor:pointer;
    display:grid; place-items:center; color:var(--ink);
    background:color-mix(in srgb, var(--card) 82%, transparent);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    box-shadow:0 2px 10px rgba(var(--photo-shadow-rgb),.28);
    transition:background-color .2s var(--ease), transform .2s var(--ease);
  }
  .carousel__nav:hover{ background:var(--card); transform:translateY(-50%) scale(1.06); }
  .carousel__nav--prev{ left:.6rem; } .carousel__nav--next{ right:.6rem; }
  .carousel__nav .icon{ width:1.2rem; height:1.2rem; stroke-width:2.1; }
  .carousel__dots{ position:absolute; bottom:.7rem; left:0; right:0; z-index:2;
    display:flex; justify-content:center; gap:.4rem; }
  .carousel__dot{
    width:.55rem; height:.55rem; padding:0; border-radius:50%; cursor:pointer;
    border:1px solid rgba(var(--photo-shadow-rgb),.35); background:color-mix(in srgb, var(--card) 70%, transparent);
    transition:background-color .2s, transform .2s;
  }
  .carousel__dot[aria-current="true"]{ background:var(--sun); border-color:var(--chip-ink); transform:scale(1.18); }
  /* micro-etichetta sovraimpressa sulla singola slide (es. "Letto matrimoniale"):
     vive nella figure, quindi scorre con la sua foto; pill in vetro scuro per
     leggere su qualunque scatto, alzata sopra la fila dei pallini */
  .carousel__slide{ position:relative; }
  .carousel__label{
    position:absolute; left:.8rem; bottom:2rem; z-index:2; margin:0;
    font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink); background:color-mix(in srgb, var(--card) 82%, transparent);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    box-shadow:0 2px 10px rgba(var(--photo-shadow-rgb),.28);
    padding:.3rem .75rem; border-radius:999px;
  }
  
  .suite__tag{ display:inline-block; background:var(--sun); color:var(--chip-ink); font-weight:700; font-size:.72rem;
    letter-spacing:.1em; text-transform:uppercase; padding:.28rem .7rem; border-radius:999px; margin-bottom:1.2rem; }
  .suite__body h3{ font-size:clamp(1.55rem,2.4vw,2rem); margin:0 0 1rem; }
  /* il conteggio camere va a capo sotto "Soluzione con" */
  .suite__body h3 span{ display:block; }
  .suite__body p{ color:var(--ink-soft); line-height:1.75; }

  /* blocco dati in maiuscoletto — il device "SIZE / ROAST / ORIGIN" della referenza.
     Tiene SOLO ciò che distingue le due suite: prima erano quattro voci e tre
     erano identiche in entrambe (ospiti, cucina, esterno), quindi il blocco
     diceva al lettore che le due suite sono la stessa cosa proprio dove deve
     sceglierne una. Cucina e spazio esterno vivono nell'introduzione, dove
     erano già scritti. Colonne dichiarate e non auto-fit: con auto-fit la
     quarta voce restava orfana su una riga sua. */
  .specs{ list-style:none; margin:2.4rem 0 0; padding:1.6rem 0 0; border-top:1px solid var(--line);
    display:grid; grid-template-columns:minmax(84px,.7fr) minmax(190px,1.8fr) minmax(104px,1fr); gap:1rem 1.4rem; }
  /* variante a due sole voci (numero camera + tipologia letto): la colonna dei
     letti prende tutto lo spazio, così "matrimoniale alla francese" non va a capo.
     PRIMA della media query sotto, che a 560px deve vincere e impilare anche questa */
  .specs--2{ grid-template-columns:minmax(84px,.4fr) 1fr; }
  
  /* sul verde profondo il grigio-verde della nota sparisce */
  .band--deep .demo-note{ color:var(--on-deep-soft); }
  .specs dt{ font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.45rem; }
  .specs dd{ margin:0; font-family:'Young Serif',serif; font-size:1.02rem; line-height:1.25; color:var(--ink); }
  /* le celle-elenco (camere riga per riga, tipologia dei letti accanto) sono testo,
     non una cifra: corpo ridotto, identico nelle due colonne così le righe si allineano.
     DEVE stare dopo .specs dd: stessa specificità, decide l'ordine nel foglio */
  .specs__txt dd{ font-size:.95rem; line-height:1.6; }
  .specs__txt dd span{ display:block; }
  /* ≤560px: impilate, le due colonne separavano camera e letto (due liste da
     ricombinare a mente, e "1, 2" da solo si legge come un intervallo).
     Qui ogni riga si accoppia — "CAMERA 1 · letto matrimoniale": gli <span>
     delle due dd entrano nella stessa griglia via display:contents e vengono
     piazzati riga per riga; le intestazioni di colonna spariscono perché
     ogni riga si spiega da sola. */
  
  .specs dd small{ display:block; font-family:'Karla',sans-serif; font-size:.8rem; color:var(--ink-soft); margin-top:.1rem; }
  /* ============ Prezzi dentro le card ============ */
  /* Roberto li ha scritti dentro ogni soluzione nel suo documento: ogni card
     porta il proprio listino, invece di un blocco unico staccato. */
  .prezzi{ margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line); }
  .prezzi__tit{ margin:0 0 .7rem; font-size:.66rem; font-weight:700; letter-spacing:.2em;
    text-transform:uppercase; color:var(--ink-soft); }
  .prezzi__tit span{ letter-spacing:.06em; font-weight:500; text-transform:none; font-size:.78rem; }
  .prezzi__list{ list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.3rem .9rem; }
  /* 19/08: la villa intera stava su quattro colonne e con sette fasce la parola
     "persone" andava a capo in ogni cella. Due colonne per tutti: le celle stanno
     su una riga sola e la parola resta scritta per esteso, senza doverla nascondere
     a chi guarda e restituire a chi ascolta. Il blocco cresce di ~74px, misurati.
     La classe .prezzi--wide resta nel markup ma non ha piu' effetto. */
  .prezzi__list li{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem;
    padding-bottom:.28rem; border-bottom:1px solid var(--line); }
  .prezzi__list span{ font-size:.92rem; color:var(--ink-soft); }
  .prezzi__list b{ font-family:'Young Serif',serif; font-weight:400; font-size:1.02rem; color:var(--ink); white-space:nowrap; }
  .prezzi__nota{ margin:.8rem 0 0; font-size:.85rem; color:var(--ink-soft); }
  

  .suite__cta{ margin-top:2.6rem; }
  .suite__cta .icon{ transition:transform .25s var(--ease); }
  .suite__cta:hover .icon{ transform:translateX(3px); }