/* punti: CSS delle composizioni, portato dallo <style> dei componenti Astro (src/sezioni/punti/) e limitato alla classe della sezione. */

/* punti/Vasca.astro → .b-punti-vasca */
  .b-punti-vasca .vasca-scena {
    position: relative; height: 100svh; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(20px, 5vw, 80px); align-items: center;
    padding: calc(var(--testata) + 24px) var(--margine) 40px; overflow: hidden;
  }
  .b-punti-vasca .vasca-casi { display: flex; flex-direction: column; justify-content: space-between; height: min(70svh, 640px); }
  .b-punti-vasca .vasca-casi .etichetta { color: var(--testo-secondario); }
  .b-punti-vasca .caso { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: center; }
  .b-punti-vasca .caso > :not(.bolla) { grid-column: 2; }
  .b-punti-vasca .caso .bolla { grid-row: span 2; width: clamp(64px, 8vw, 112px); aspect-ratio: 1; }
  .b-punti-vasca .caso .bolla img { object-position: 50% 40%; }
  .b-punti-vasca .caso h3 { font-size: clamp(1.5rem, 3vw, var(--scala-3)); color: var(--titoli); }
  .b-punti-vasca .caso p { max-width: 34ch; color: var(--testo-secondario); }

  /* Spento finché l'acqua non lo passa: solo con l'effetto attivo. */
  .vasca.fissata.b-punti-vasca .caso { opacity: .32; transition: opacity .5s var(--ease-entrata); }
  .vasca.fissata.b-punti-vasca .caso.acceso { opacity: 1; }
  .vasca.fissata.b-punti-vasca .caso .bolla { transform: translateY(12px); filter: grayscale(1); transition: transform .6s var(--ease-entrata), filter .6s; }
  .vasca.fissata.b-punti-vasca .caso.acceso .bolla { transform: none; filter: none; }

  .b-punti-vasca .vasca-cornice {
    position: relative; justify-self: center; height: min(70svh, 640px); aspect-ratio: 3 / 4; max-width: 100%;
    border: 2px solid var(--extra-salvia); border-top: 0; border-radius: 6px 6px 46% 46% / 6px 6px 22% 22%;
    background: var(--fondo-alt); overflow: hidden;
  }
  .b-punti-vasca .vasca-acqua, .b-punti-vasca .vasca-piena { background: var(--fondo-scuro) var(--acqua-img) center / cover; background-blend-mode: soft-light; }
  .b-punti-vasca .vasca-acqua { position: absolute; inset: 0; }
  .b-punti-vasca .vasca-piena { position: absolute; inset: 0; z-index: 3; pointer-events: none; visibility: hidden; }

  /* Fra le sezioni: con la vasca fissata i servizi salgono sopra l'ultimo schermo, col bordo dell'acqua.
     L'effetto fissa la sezione intera, che ScrollTrigger avvolge in .pin-spacer: i servizi sono fratelli di quello. */
  .vasca.fissata + .servizi, .pin-spacer:has(> .vasca.fissata) + .servizi { margin-top: -100svh; }
  .vasca.fissata + .servizi.onda, .pin-spacer:has(> .vasca.fissata) + .servizi.onda { --onda-h: 40px; }

  @media (max-width: 700px) {
    .b-punti-vasca .vasca-scena { grid-template-columns: 1fr 34vw; gap: 14px; }
    .b-punti-vasca .caso { grid-template-columns: 44px 1fr; gap: 2px 12px; align-items: start; }
    .b-punti-vasca .caso .bolla { width: 44px; }
    .b-punti-vasca .caso h3 { font-size: 1.12rem; }
    .b-punti-vasca .caso p { font-size: .85rem; line-height: 1.4; }
    .b-punti-vasca .vasca-cornice { height: 62svh; aspect-ratio: auto; width: 100%; }
  }

/* punti/Scalini.astro → .b-punti-scalini */
  .scalini.b-punti-scalini {
    --alzata: clamp(64px, 9vw, 150px);
    --spazio: clamp(24px, 3.4vw, 56px);
    --pedata: 24px;
    position: relative; padding: clamp(96px, 16vh, 180px) var(--margine) clamp(96px, 16vh, 180px);
    display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: minmax(var(--alzata), auto) auto;
    column-gap: var(--spazio);
  }
  .b-punti-scalini h2 { grid-column: 2 / -1; grid-row: 1; align-self: start; padding-bottom: calc(var(--pedata) + 16px); font-size: clamp(2.6rem, 5vw, var(--scala-5)); color: var(--titoli); }
  .scalini:not(:has(h2)).b-punti-scalini { grid-template-rows: auto; }
  /* La lista non fa da griglia: i casi stanno nella griglia della sezione. */
  .b-punti-scalini .casi { display: contents; }
  .b-punti-scalini .caso { position: relative; grid-row: 2; margin-top: calc((var(--i) - 1) * var(--alzata)); }
  .b-punti-scalini .caso:first-child { grid-row: 1 / span 2; margin-top: 0; }
  .scalini:not(:has(h2)).b-punti-scalini .caso { grid-row: 1; margin-top: calc(var(--i) * var(--alzata)); }

  /* Il gradino: pedata sopra il caso, alzata a sinistra che scende dalla pedata di prima. */
  .b-punti-scalini .caso::before {
    content: ""; position: absolute; pointer-events: none;
    top: calc(-1 * (var(--pedata) + var(--alzata))); height: var(--alzata);
    left: calc(var(--spazio) / -2); width: calc(100% + var(--spazio));
    border-left: 2px solid var(--extra-salvia); border-bottom: 2px solid var(--extra-salvia); border-bottom-left-radius: 16px;
  }
  .b-punti-scalini .caso:first-child::before { left: 0; width: calc(100% + var(--spazio) / 2); border-left: 0; border-radius: 0; }
  .b-punti-scalini .caso:last-child::before { width: calc(100% + var(--spazio) / 2 + var(--margine)); }

  .b-punti-scalini .caso .foto { aspect-ratio: 4 / 5; border-radius: var(--raggio); }
  .b-punti-scalini .caso h3 { margin-top: 22px; font-size: clamp(1.45rem, 2.2vw, var(--scala-2)); color: var(--titoli); }
  .b-punti-scalini .caso p { margin-top: .5em; max-width: 30ch; color: var(--testo-secondario); }
  .b-punti-scalini .caso p a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }

  /* Su fondo scuro titoli e testo prendono i colori chiari. */
  .scalini[data-fondo="scuro"].b-punti-scalini h2, .scalini[data-fondo="scuro"].b-punti-scalini .caso h3 { color: var(--testo-su-scuro); }
  .scalini[data-fondo="scuro"].b-punti-scalini .caso p { color: var(--salvia-chiara); }

  @media (max-width: 700px) {
    .scalini.b-punti-scalini { --alzata: 0px; --gradino: 12vw; display: block; }
    .b-punti-scalini h2 { padding-bottom: 0; margin-bottom: 48px; }
    .b-punti-scalini .casi { display: flex; flex-direction: column; gap: 56px; }
    .b-punti-scalini .caso, .scalini:not(:has(h2)).b-punti-scalini .caso { margin: 0 0 0 calc(var(--i) * var(--gradino)); width: calc(100% - (var(--n) - 1) * var(--gradino)); }
    .b-punti-scalini .caso::before, .b-punti-scalini .caso:first-child::before, .b-punti-scalini .caso:last-child::before {
      top: calc(-1 * var(--pedata)); height: 0; left: calc(-1 * var(--gradino)); width: calc(var(--gradino) + 64px);
      border-left: 0; border-radius: 0;
    }
    .b-punti-scalini .caso:first-child::before { left: 0; width: 64px; }
  }