/* ------------------------------ CSS PER CALENDARIO */
.calendar_sheet {
  width: auto;
  min-width: 110px;
  max-width: 30%;
  background: #eeeeee;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #333;
  text-align: center;
  aspect-ratio: 1 / 1;
  max-width: 180px;
}
/*
 .calendar_sheet {
   position: absolute;
   z-index: 9;
   bottom: 10px;
   left: 10px;
   
 }*/
/* Header colorato per il mese */
.calendar_sheet .cal-month {
  display: block;
  width: 100%;
  padding: 10px;
  background: red;
  color: #fff;
  font-size: 0.7em;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #ddd;
}

/* Giorno in evidenza */
.calendar_sheet .cal-day {
  display: block;
  font-size: 4rem;
  letter-spacing: -0.25rem;
  font-weight: bold;
  line-height: 1;
  padding: 10px;
}
.calendar_sheet .status-text.today {
  display: block;
  font-size: 2rem;
  letter-spacing: -0.1rem;
  font-weight: bold;
  line-height: 1;
  padding: 10px;
}
.calendar_sheet .status-text.past {
  display: block;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
  padding: 10px;
}

/* Anno (opzionale) */
.calendar_sheet .cal-year {
  display: block;
  font-size: 0.75em;
  color: #333;
  letter-spacing: 0.1em;
}

/* ------------------------------ CSS PER CALENDARIO END */
/* ------------------------------ CSS per VISTA EVENTI */

/* 1. Contenitore griglia Flexbox */
.dec-events-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px; /* Spazio tra le card */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 2. Singolo elemento della griglia (la card dell'evento) */
.dec-event-item {
  /* Per default, occupa tutto lo spazio disponibile (1 colonna su mobile) */
  flex: 1 1 100%;
  box-sizing: border-box;
  display: flex; /* Permette al contenuto interno di crescere */
  flex-direction: column;
}

/* Media query per schermi più grandi (tablet e desktop) */
/* 2 colonne su tablet */
@media (min-width: 600px) {
  .dec-event-item {
    /* Occupa il 50% meno il gap */
    flex-basis: calc(50% - 12px);
  }
}

/* 3 colonne su desktop */
@media (min-width: 960px) {
  .dec-event-item {
    /* Occupa il 33.33% meno il gap */
    flex-basis: calc(33.333% - 16px);
  }
}

/* 3. Stili interni della card */
.dec-event-item-inner {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%; /* Occupa tutta l'altezza del genitore .dec-event-item */
  transition: box-shadow 0.2s ease-in-out;
}

.dec-event-item-inner:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dec-event-thumbnail {
  position: relative;
  overflow: hidden;
}

.dec-event-image {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3; /* Proporzioni Locandina (Verticale) */
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease-in-out;
}

.dec-event-item-inner:hover .dec-event-image {
  transform: scale(1.05);
}

.card-top {
  padding: 12px 16px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e0e0e0;
  font-size: 0.9em;
  color: #555;
}

.card-top p {
  margin: 0;
  line-height: 1.4;
}

.card-body {
  padding: 16px;
  flex-grow: 1; /* Fa in modo che il corpo della card si espanda */
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: 1.25rem;
  margin: 0 0 12px 0;
}

.card-title a {
  text-decoration: none;
  color: #333;
}

.card-text {
  margin: 0;
  flex-grow: 1; /* Spinge il bottone (se ci fosse) in fondo */
}

/* ------------------------------ CSS per VIEW EVENTI END */

/* Stili per la vista a lista [vista_eventi view="list"] */

.dec-event-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dec-event-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.dec-event-list-item:last-child {
  border-bottom: none;
}

.dec-event-list-details {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
}

/*  EVENT DETAILS SHORTCODE  */

.dec-event-details ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dec-event-details ul ul.dec-event-dates-list {
  padding-left: 30px;
}

/* #region ---------------------------------------------------- varie condivise */

.dec-icon {
  vertical-align: middle;
}



/* --- FILTRO DUOTONE --- */
.filter-duotone {
  position: relative;
  overflow: hidden;
}

.filter-duotone img {
  filter: grayscale(100%) contrast(1.2);
  mix-blend-mode: multiply;
  display: block;
}

        .dan-fav-btn { cursor: pointer; display: inline-block; }
        .dan-fav-icon { font-size: 2.5em; vertical-align: middle; color: #ccc; transition: color 0.2s ease; }
        .dan-fav-btn:hover .dan-fav-icon { color: var(--wp--preset--color--custom-color-1); } /* Colore al passaggio del mouse */
        .dan-fav-btn.is-favorite .dan-fav-icon { color: var(--wp--preset--color--custom-color-1); } /* Colore quando è preferito (rosso) */
        .dan-fav-btn.is-favorite { animation: fav-bounce 0.3s ease; }
        @keyframes fav-bounce { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
/* #endregion ---------------------------------------------------- varie condivise END */

/* --- GALLERIA EVENTO --- */
.dec-gallery-img {
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: zoom-in;
}
.dec-gallery-img:hover {
    transform: scale(1.03);
    filter: brightness(0.9);
}

/* GLightbox Customization per richiamare lo stile WP */
.goverlay { background: rgba(0, 0, 0, 0.9) !important; }
.gslide-title { font-family: inherit; font-weight: bold; }
.gclose, .gnext, .gprev { background-color: rgba(0,0,0,0.5) !important; border-radius: 50%; }
.gclose:hover, .gnext:hover, .gprev:hover { background-color: rgba(0,0,0,0.8) !important; }