* { box-sizing: border-box; }
body {margin: 0;}
/* Card "cerchio" delle località (sezione "Scegli la tua zona" in home): foto
   rotonda dentro un anello sabbia staccato di 6px, nome in una targhetta al
   centro. All'hover l'anello diventa giallo, il cerchio sale di 4px, la foto
   si ingrandisce e un velo colorato (6 colori a giro) la copre in parte.
   Anello, distanza, giallo e tempi vengono dal modello "temi" del 05/10.
   La foto non è un link (uno solo per card, quello del titolo): il ritaglio
   rotondo sta sul campo stesso e l'anello sono due box-shadow, una sabbia
   (lo stacco di 6px) e una #EADFC9 (3px). Non un outline: Safari prima di
   iOS 16.4 lo disegna quadrato e Chrome Android lo curva male; l'ombra segue
   il bordo rotondo ovunque. Il margine di 9px (6 + 3) tiene le misure. */
#env-card-locc-image{position:relative;width:calc(100% - 18px);aspect-ratio:1 / 1;margin:9px;border-radius:50%;overflow:hidden;isolation:isolate;box-shadow:0 0 0 6px rgb(246,240,228),0 0 0 9px #EADFC9;transition:box-shadow 0.3s ease,transform 0.3s ease;}
#env-card-locc-image img{display:block;width:100%;height:100%;aspect-ratio:1 / 1;object-fit:cover;transition:transform 0.5s ease;}
/* Il velo è un ::after e non un filtro sull'immagine: un filtro scurirebbe
   anche la targhetta col nome, che sta sopra. Copre solo la foto: l'anello
   è fuori dal campo. */
#env-card-locc-image::after{content:"";position:absolute;inset:0;border-radius:50%;background:#183354;opacity:0;pointer-events:none;transition:opacity 0.5s ease;}
#env-card-locc-title{display:block;margin:12px auto 0;text-align:center;}
#env-card-locc-title a{display:inline-block;font-size:13px;font-weight:600;letter-spacing:0.78px;line-height:1.15;text-transform:uppercase;color:#ffffff;background:rgb(184,82,27);border-radius:3px;padding:6px 10px;text-decoration:none;}
/* Dentro il Carosello la slide diventa il riferimento della targhetta, che si
   centra sul cerchio. La slide ha di suo la proporzione 16/9 (pensata per le
   foto): qui l'altezza la dà il cerchio. Il padding lascia spazio al
   sollevamento, che il carosello (overflow:hidden) altrimenti taglierebbe.
   Fuori dal carosello - nell'editor della card - la targhetta resta sotto il
   cerchio. La targhetta si centra con la griglia (cerchio e titolo nella
   stessa cella) e non con position:absolute: così il ::after del suo link
   copre tutta la slide e si clicca anche sulla foto. */
.env-carousel-slide:has(> #env-card-locc-image){position:relative;display:grid;grid-template-columns:minmax(0px, 1fr);aspect-ratio:auto;height:auto;padding:26px;}
.env-carousel-slide #env-card-locc-image{grid-row-start:1;grid-column-start:1;}
.env-carousel-slide #env-card-locc-title{grid-row-start:1;grid-column-start:1;place-self:center;z-index:1;max-width:calc(100% - 18px);margin:0;}
.env-carousel-slide #env-card-locc-title a::after{content:"";position:absolute;inset:0;}
.env-carousel-slide:hover #env-card-locc-image,.env-carousel-slide:has(a:focus-visible) #env-card-locc-image{box-shadow:0 0 0 6px rgb(246,240,228),0 0 0 9px #FFCC00;transform:translateY(-4px);}
.env-carousel-slide:hover #env-card-locc-image::after,.env-carousel-slide:has(a:focus-visible) #env-card-locc-image::after{opacity:0.8;}
.env-carousel-slide:hover #env-card-locc-image img,.env-carousel-slide:has(a:focus-visible) #env-card-locc-image img{transform:scale(1.08);}
/* Colori del velo a giro sulle slide. Il carosello in loop copia alcune slide
   ai bordi: nell'istante del salto una slide sotto il mouse può cambiare
   colore. A riposo non si vede, il colore c'è solo all'hover. */
.env-carousel-slide:nth-child(6n+1) #env-card-locc-image::after{background:#2B93B5;}
.env-carousel-slide:nth-child(6n+2) #env-card-locc-image::after{background:#D9C49E;}
.env-carousel-slide:nth-child(6n+3) #env-card-locc-image::after{background:#C6773A;}
.env-carousel-slide:nth-child(6n+4) #env-card-locc-image::after{background:#E8A35B;}
.env-carousel-slide:nth-child(6n+5) #env-card-locc-image::after{background:#7B8A50;}
.env-carousel-slide:nth-child(6n+6) #env-card-locc-image::after{background:#0D3A4E;}
@media (prefers-reduced-motion: reduce){#env-card-locc-image,#env-card-locc-image img,#env-card-locc-image::after{transition:none;}.env-carousel-slide:hover #env-card-locc-image,.env-carousel-slide:has(a:focus-visible) #env-card-locc-image,.env-carousel-slide:hover #env-card-locc-image img,.env-carousel-slide:has(a:focus-visible) #env-card-locc-image img{transform:none;}}