/* ============================================================
   Lista attività (inc/attivita_lista.php): filtri a sinistra con
   tipologie in elenco e gruppi apribili, card con foto, tipologia
   e preferiti. Tutto è racchiuso in .vp-att (sul #attivita_box della
   lista), così la mappa e il resto del sito restano come sono.
   ============================================================ */

.vp-att{
  --att-viola:#9d6494;
  --att-viola-testo:#7d4a75;
  --att-viola-scuro:#5c3356;
  --att-bordo:#ddd5db;
  --att-riga:#ebe6ea;
  --att-grigio:#6b6b6b;
  color:#2b2b2b;
}

/* ---------- colonna filtri ---------- */
.vp-att .attivita_title{
  font-size:16px;
  font-weight:700;
  border-bottom:0;
  padding-bottom:0;
  margin-bottom:16px;
}

.vp-att #box_filtri .attivita_sel input[type=text]{
  width:100%;
  height:48px;
  box-sizing:border-box;
  padding:0 16px 0 44px;
  border:1px solid var(--att-bordo);
  border-radius:24px;
  font-size:15px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237a7a7a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center;
}
.vp-att #box_filtri .attivita_sel input[type=text]:focus{
  outline:0;
  border-color:var(--att-viola);
  box-shadow:0 0 0 3px rgba(157,100,148,.18);
}

/* macrocategoria: diventa l'intestazione delle tipologie */
.vp-att #attivita_menu .attivita_menu_item.active{
  border:0;
  padding:6px 0 18px;
}
.vp-att #attivita_menu a{
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--att-grigio);
  padding:4px 0 12px;
}
.vp-att #attivita_menu a img{
  width:22px;
  margin-right:4px;
}
.vp-att #attivita_menu a.active span,
.vp-att #attivita_menu a span{
  background:none;
  color:var(--att-grigio);
  font-size:12px;
  padding:0;
  margin-top:2px;
}

/* tipologie una sotto l'altra, con la casella come negli altri gruppi */
.vp-att #attivita_menu .attivita_sottomenu label{
  display:flex;
  align-items:center;
  gap:10px;
  width:auto;
  padding:7px 0;
  font-size:15px;
  font-weight:400;
  color:#333;
  cursor:pointer;
}
.vp-att #attivita_menu .attivita_sottomenu label input{
  width:18px;
  height:18px;
  margin:0;
  flex-shrink:0;
  accent-color:var(--att-viola);
}
.vp-att #attivita_menu .attivita_sottomenu label span{
  margin-left:auto;
  float:none;
  background:none;
  padding:0;
  font-size:12px;
  color:#7a7a7a;
}
.vp-att #attivita_menu .attivita_sottomenu label.active{
  color:#2b2b2b;
  font-weight:700;
}
.vp-att #attivita_menu .attivita_sottomenu label.active span{
  background:none;
  color:#7a7a7a;
}

/* gruppi di filtri apribili */
.vp-att .attivita_gruppo{
  border-top:1px solid var(--att-riga);
}
.vp-att .attivita_gruppo:last-of-type{
  border-bottom:1px solid var(--att-riga);
}
.vp-att .attivita_gruppo summary{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:52px;
  cursor:pointer;
  list-style:none;
}
.vp-att .attivita_gruppo summary::-webkit-details-marker{display:none;}
.vp-att .attivita_gruppo summary h3{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:#2b2b2b;
}
.vp-att .attivita_gruppo summary em{
  font-style:normal;
  font-size:12px;
  color:#7a7a7a;
}
.vp-att .attivita_gruppo summary::after{
  content:"";
  margin-left:auto;
  width:9px;
  height:9px;
  border-right:2px solid #2b2b2b;
  border-bottom:2px solid #2b2b2b;
  transform:rotate(45deg) translateY(-3px);
  transition:transform .2s;
}
.vp-att .attivita_gruppo[open] summary::after{
  transform:rotate(-135deg) translateX(-3px);
}
.vp-att .attivita_gruppo summary:focus-visible{
  outline:2px solid var(--att-viola);
  outline-offset:2px;
}
.vp-att .attivita_gruppo .attivita_form_dinamico{
  padding:0 0 14px;
}
.vp-att .attivita_form_dinamico label{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 0;
  font-size:15px;
  font-weight:400;
  color:#333;
  cursor:pointer;
}
.vp-att .attivita_form_dinamico label input{
  width:18px;
  height:18px;
  margin:0;
  flex-shrink:0;
  accent-color:var(--att-viola);
}
.vp-att .attivita_form_dinamico label span{
  margin-left:auto;
  float:none;
  background:none;
  padding:0;
  font-size:12px;
  color:#7a7a7a;
}
.vp-att .attivita_form_dinamico label.active{font-weight:700;}

/* ---------- barra dei risultati ---------- */
.vp-att .vp-att-barra{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.vp-att .vp-att-totale{
  font-size:22px;
  font-weight:300;
}
.vp-att .vp-att-totale b{
  font-weight:900;
  color:var(--att-viola);
}
.vp-att a.button_map{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:40px;
  padding:0 18px;
  box-sizing:border-box;
  border:1px solid #2b2b2b;
  border-radius:20px;
  font-size:14px;
  font-weight:700;
  color:#2b2b2b;
}
.vp-att a.button_map:hover{
  border:1px solid #2b2b2b;
  background:#2b2b2b;
  color:#fff;
}

/* filtri attivi */
.vp-att .attivita_sel .div_100{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.vp-att .attivita_sel .item_filtro{
  margin:0;
  height:34px;
  display:inline-flex;
  align-items:center;
  padding:0 34px 0 14px;
  border:1px solid var(--att-viola);
  border-radius:17px;
  background-color:var(--att-viola);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  background-size:12px 12px;
  background-position:right 13px center;
  color:#fff;
  font-size:14px;
  font-weight:700;
}
.vp-att .attivita_sel a.item_filtro{
  background:none !important;
  border:0 !important;
  color:var(--att-viola-testo) !important;
  padding:0 6px;
  text-decoration:underline;
}

/* ---------- card ---------- */
.vp-att .vp-att-griglia{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:24px;
  padding-top:22px;
  border-top:1px solid var(--att-riga);
}
.vp-att .vp-att-card{
  float:none;
  width:auto;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.06);
  transition:box-shadow .2s, transform .2s;
}
.vp-att .vp-att-card:hover{
  box-shadow:0 2px 4px rgba(0,0,0,.08), 0 12px 28px rgba(0,0,0,.1);
  transform:translateY(-2px);
}
.vp-att .vp-att-card .attivita_item_img{
  height:220px;
  margin:0;
}
.vp-att .vp-att-card .attivita_item_img::after{display:none;}
.vp-att .vp-att-card .attivita_item_img > a{
  display:block;
  height:100%;
}
.vp-att .vp-att-card .attivita_item_img img{
  height:100%;
  width:100%;
  object-fit:cover;
  display:block;
}
.vp-att .vp-att-card:hover .attivita_item_img img{transform:scale(1.05);}

.vp-att .vp-att-cat{
  position:absolute;
  left:12px;
  top:12px;
  z-index:2;
  padding:6px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.95);
  color:#6e3f67;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.vp-att .vp-att-card .preferiti{
  position:absolute;
  right:10px;
  top:10px;
  z-index:2;
}
.vp-att .vp-att-card .preferiti a.vp-att-fav{
  float:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border-radius:22px;
  background:rgba(255,255,255,.95);
  color:#6e3f67;
  text-decoration:none;
}
.vp-att .vp-att-card .preferiti a.vp-att-fav:hover{background:#fff;color:var(--att-viola-scuro);}
.vp-att .vp-att-card .preferiti a.vp-att-fav.active{color:var(--att-viola);}
.vp-att .vp-att-card .preferiti a.vp-att-fav.active svg{fill:currentColor;}

.vp-att .vp-att-card .attivita_item_text{
  flex-grow:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px 18px 18px;
  background:#fff;
}
.vp-att .vp-att-nome{
  font-size:19px;
  font-weight:700;
  line-height:1.25;
  color:#2b2b2b;
}
.vp-att .vp-att-nome:hover{color:var(--att-viola-testo);}
.vp-att .vp-att-card .attivita_item_vai{
  position:static;
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--att-viola-testo);
}
.vp-att .vp-att-card .attivita_item_vai:hover{color:var(--att-viola-scuro);}

/* ---------- desktop: due colonne affiancate ---------- */
@media only screen and (min-width:1024px){
  /* le due colonne restano float come in style.css: #bg_home ha un'altezza
     fissa e il footer scende sotto la lista solo grazie ai float */
  .vp-att#attivita_box{
    padding:40px 44px;
  }
  .vp-att #attivita_box_sx{
    width:300px;
  }
  .vp-att #attivita_box_dx{
    width:calc(100% - 344px);
    margin-left:44px;
  }
  .vp-att .vp-att-griglia{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
@media only screen and (min-width:1024px) and (max-width:1279px){
  .vp-att .vp-att-griglia{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

/* ---------- mobile: pannello filtri a tutto schermo ---------- */
@media only screen and (max-width:1023px){
  /* "Filtri" fisso in basso al centro, sempre a portata di pollice
     mentre si scorrono le card (il pannello dei filtri, z-index 200, lo copre) */
  .vp-att .apri_filtri{
    position:fixed;
    left:50%;
    bottom:20px;
    transform:translateX(-50%);
    z-index:150;
    width:auto;
    min-width:150px;
    height:52px;
    padding:0 26px;
    border-radius:26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:700;
    box-shadow:0 6px 20px rgba(0,0,0,.25);
    cursor:pointer;
    transition:opacity .2s, transform .2s;
  }
  /* finita la lista (footer) si toglie: lo script è in inc/attivita_lista.php */
  .vp-att .apri_filtri.vp-att-nascosto{
    opacity:0;
    pointer-events:none;
    transform:translate(-50%, 20px);
  }
  /* spazio in fondo perché il pulsante non copra l'ultima card */
  .vp-att #attivita_box_dx{padding-bottom:70px;}
  .vp-att .chiudi_filtri .button{
    border-radius:24px;
  }
  .vp-att .vp-att-totale{font-size:18px;}

  /* sul telefono i filtri in uso non si elencano: il numero sta sul
     pulsante "Filtri" e si tolgono dal pannello */
  .vp-att #attivita_box_dx > .attivita_sel,
  #box_bread_maps{display:none;}
  #button_apri_filtri_mobile{width:auto;padding:10px 18px;border-radius:24px;}
}

/* numero dei filtri in uso sul pulsante "Filtri" (lista e mappa) */
.apri_filtri .vp-att-n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  margin-left:6px;
  padding:0 6px;
  box-sizing:border-box;
  border-radius:11px;
  background:#fff;
  color:#7d4a75;
  font-size:13px;
  font-weight:900;
  line-height:1;
  vertical-align:middle;
}
@media only screen and (max-width:599px){
  .vp-att .vp-att-griglia{grid-template-columns:1fr;}
  .vp-att .vp-att-card .attivita_item_img{height:200px;}
}