/* ============================================================
   SLIDE MONITOR — Layout 4 colonne (v2 corretta)
   ============================================================
   
   USO:
   1. Sul form in Gravity Forms -> Form Settings -> "CSS Class Name"
      è già presente:  slide-monitor-form
   2. Questo CSS va caricato via functions.php (lo è già).
   
   FIX rispetto a v1:
   - .promo-grid ora ha width:100% (prima non lo era, e i calc(25%) 
     calcolavano su una larghezza-contenuto invece che sul container)
   ============================================================ */


/* === IL CONTAINER DELLA GRID === */
.slide-monitor-form .promo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  /* Il parent .gform_fields è un CSS Grid: forziamo .promo-grid 
     a coprire tutte le colonne del grid parent */
  grid-column: 1 / -1;
  margin: 16px 0;
  box-sizing: border-box;
}

/* Decorazioni (separatori grafici, GIF "NEW") assorbite dentro la grid:
   le nascondiamo visivamente per non spezzare la griglia 4 colonne */
.slide-monitor-form .promo-grid .promo-decoration-in-grid,
.slide-monitor-form .promo-grid .promo-attenzione-passthrough {
  display: none !important;
}


/* === LE CELLE (gruppo di 4 elementi verticali) === */
.slide-monitor-form .promo-group {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(25% - 12px);
  max-width: calc(25% - 12px);
  box-sizing: border-box;
  padding: 8px;
  margin: 0;
}

/* I campi all'interno della cella prendono tutta la larghezza */
.slide-monitor-form .promo-group > .gfield {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 6px !important;
  padding: 0;
  flex: none;
}

/* Campi NON-promo (testata, separatori, section): tutta larghezza */
.slide-monitor-form .gform_fields > .gfield:not(.promo-cell) {
  display: block;
  width: 100%;
  grid-column: 1 / -1;     /* fix per CSS Grid del parent */
  margin: 16px 0 8px;
}


/* === STILE INTERNO ALLE CELLE === */

/* Immagini e video: 100% della cella */
.slide-monitor-form .promo-group .gfield_html img,
.slide-monitor-form .promo-group .gfield_html video {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/* Padding container HTML: minimo */
.slide-monitor-form .promo-group .gfield_html {
  padding: 0;
  margin: 4px 0;
}

/* Label compatte */
.slide-monitor-form .promo-group .gfield_label {
  font-size: 0.85em;
  margin: 4px 0 2px;
  font-weight: normal;
  color: #555;
  display: block;
}

/* Input date piene larghezza, compatti */
.slide-monitor-form .promo-group input[type="text"],
.slide-monitor-form .promo-group input[type="date"] {
  width: 100%;
  font-size: 0.9em;
  padding: 5px 6px;
  box-sizing: border-box;
}

/* Checkbox della promo */
.slide-monitor-form .promo-group .gfield--type-checkbox .gfield_label {
  display: none;
}
.slide-monitor-form .promo-group .gfield--type-checkbox .gchoice label {
  font-weight: bold;
  font-size: 0.95em;
  cursor: pointer;
}
.slide-monitor-form .promo-group .gfield--type-checkbox .gfield_checkbox {
  margin: 0 0 4px;
}


/* === BADGE "NEW" === */

.slide-monitor-form .promo-group .gfield.promo-new-badge {
  order: 999;
  margin: 8px 0 0;
  padding: 0;
  text-align: center;
}

.slide-monitor-form .promo-group .gfield.promo-new-badge .gfield_label {
  display: none;
}

.slide-monitor-form .promo-group .gfield.promo-new-badge .gfield_html {
  margin: 0;
  padding: 0;
  text-align: center;
}

.slide-monitor-form .promo-group .gfield.promo-new-badge .gfield_html p {
  margin: 0;
  padding: 0;
}

/* La GIF non deve prendere il 100% della cella come le altre immagini */
.slide-monitor-form .promo-group .gfield.promo-new-badge .gfield_html img {
  display: inline-block !important;
  width: 134px !important;
  max-width: 60px !important;
  height: 87px;
  margin: 0 auto;
}

/* Fallback: se un badge non finisce in nessun gruppo, nascondilo */
.slide-monitor-form .gform_fields > .gfield.promo-new-badge {
  display: none;
}


/* === RESPONSIVE === */

/* Tablet (≤1024px): 2 colonne */
@media (max-width: 1024px) {
  .slide-monitor-form .promo-group {
    flex: 0 0 calc(50% - 8px);
    max-width: calc(50% - 8px);
  }
}

/* Mobile (≤640px): 1 colonna */
@media (max-width: 640px) {
  .slide-monitor-form .promo-group {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .slide-monitor-form .promo-group .gfield_html img,
  .slide-monitor-form .promo-group .gfield_html video {
    max-width: 260px;
    margin: 0 auto;
  }
}