/* =========================================================
   CAFFÈZERO LOCATIONS CAROUSEL
   Funzioni:
   - filtro città testuale
   - carousel Swiper
   - fade out / fade in al cambio città
   - zoom leggero immagine su hover
   - titolo + sottotitolo sotto la foto
   ========================================================= */

/* ---------- FILTRO CITTÀ ---------- */

.czloc-filter{
  display:flex;
  align-items:center;
  gap:55px;
  margin-bottom:34px;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
}

.czloc-filter::-webkit-scrollbar{
  display:none;
}

.czloc-filter-item{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  flex:0 0 auto;
  padding:0 0 5px 0;
  margin:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:inherit;
  font:inherit;
  text-transform:uppercase;
  cursor:pointer;
}

.czloc-filter-item::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}

.czloc-filter-item:hover::after,
.czloc-filter-item.is-active::after{
  transform:scaleX(1);
}


/* ---------- CONTENITORE CAROUSEL / FADE ---------- */

.czloc-carousel-shell{
  position:relative;
  opacity:1;
  transition:opacity .22s ease;
}

.czloc-carousel-shell.is-switching{
  opacity:0;
}


/* ---------- CAROUSEL ---------- */

.czloc-swiper{
  width:100%;
  overflow:hidden;
}

.czloc-slide{
  height:auto;
}

.czloc-card,
.czloc-card:hover,
.czloc-card:focus,
.czloc-card:visited{
  display:block;
  color:inherit !important;
  text-decoration:none !important;
  background-image:none !important;
  box-shadow:none !important;
}

.czloc-card *,
.czloc-card:hover *,
.czloc-card:focus *{
  text-decoration:none !important;
}


/* ---------- IMMAGINE QUADRATA ---------- */

.czloc-card-image{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
}

.czloc-card-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .45s ease;
}

.czloc-card:hover .czloc-card-image img{
  transform:scale(1.035);
}


/* ---------- TESTI CARD ---------- */

.czloc-card-copy{
  padding-top:14px;
}

.czloc-card-title{
  text-transform:uppercase;
  font-weight:700;
  line-height:1.25;
  text-decoration:none !important;
}

.czloc-card-subtitle{
  margin-top:4px;
  opacity:.68;
  line-height:1.35;
  text-decoration:none !important;
}


/* ---------- FRECCE ---------- */

.czloc-nav{
  position:absolute;
  top:calc(50% - 22px);
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.12);
  cursor:pointer;
  z-index:5;
}

.czloc-nav-prev{
  left:10px;
}

.czloc-nav-next{
  right:10px;
}

.czloc-nav::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:9px;
  height:9px;
  border-top:1.5px solid #111;
  border-right:1.5px solid #111;
}

.czloc-nav-next::before{
  transform:translate(-65%,-50%) rotate(45deg);
}

.czloc-nav-prev::before{
  transform:translate(-35%,-50%) rotate(-135deg);
}

.czloc-nav.swiper-button-disabled{
  opacity:0;
  pointer-events:none;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width:767px){

  .czloc-filter{
    gap:30px;
    margin-bottom:26px;
  }

  .czloc-nav{
    width:38px;
    height:38px;
  }

}


/* =========================================================
   FINE CAFFÈZERO LOCATIONS CAROUSEL
   ========================================================= */