.debug {display: none;}
.modal {
  --bs-modal-zindex: 99999999;
}
.modal-backdrop {
  --bs-backdrop-zindex: 99999;
}

/* =========================================================
   RESET-COL (generico)
   - ignora le col-* generate dal sistema
   - usa col-lg-* messa sul "modulo root" (qualunque tag/classe)
   - equal height
   - immagini: cover, no stretch, full height
   ========================================================= */

.reset-col > .row{
  align-items: stretch;
}

/* 1) Le colonne generate dal sistema non contano: default mobile = 100% */
.reset-col > .row > [class*="col-"]{
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;

  display: flex !important; /* per equal height */
}

/* 2) Il “modulo root” (il primo figlio dentro la colonna) riempie tutta la colonna */
.reset-col > .row > [class*="col-"] > *{
  flex: 1 1 auto !important;
  width: 100% !important;

  display: flex;
  flex-direction: column;
}

/* 3) Se tu metti col-lg-* sul modulo root, Bootstrap gli aggiunge width/padding:
      lo neutralizziamo SOLO in questo punto (sicuro) */
.reset-col > .row > [class*="col-"] > [class*="col-"]{
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 4) Equal height interno (supporta panel-body/modulo_content ma non dipende da essi) */
.reset-col :where(.panel-body, .modulo_content){
  flex: 1 1 auto;
  display: flex;
}
.reset-col :where(.panel-body, .modulo_content) > *{
  flex: 1 1 auto;
}

/* 5) La card interna deve occupare tutta l’altezza */
.reset-col .border.overflow-hidden.rounded{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.reset-col .border.overflow-hidden.rounded > .row{
  flex: 1 1 auto;
  height: 100%;
}

/* 6) Fix immagine: niente stretch, piena altezza (desktop) */
.object-fit-cover{
  object-fit: cover !important;
  object-position: center !important;
}

.reset-col img.img-fluid{
  display: block;
  width: 100% !important;
}

/* Desktop: col dell’immagine diventa flex così l’img può fare h:100% */
@media (min-width: 992px){
  .reset-col .border.overflow-hidden.rounded > .row > [class*="col-"]{
    display: flex;
    align-items: stretch;
  }

  .reset-col .border.overflow-hidden.rounded > .row > [class*="col-"] > img{
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* Mobile: non forzare h-100 (evita crop aggressivo quando si impila) */
@media (max-width: 991.98px){
  .reset-col img.h-100{ height: auto !important; }
}

/* =========================================================
   7) Mapping colonne: legge col-lg-* sul modulo root
   (richiede :has, supportato dai browser moderni)
   ========================================================= */
@media (min-width: 992px){
  @supports selector(.x:has(.y)){
    .reset-col > .row > *:has(> .col-lg-1)  { width: 8.333333% !important;  max-width: 8.333333% !important; }
    .reset-col > .row > *:has(> .col-lg-2)  { width: 16.666667% !important; max-width: 16.666667% !important; }
    .reset-col > .row > *:has(> .col-lg-3)  { width: 25% !important;        max-width: 25% !important; }
    .reset-col > .row > *:has(> .col-lg-4)  { width: 33.333333% !important; max-width: 33.333333% !important; }
    .reset-col > .row > *:has(> .col-lg-5)  { width: 41.666667% !important; max-width: 41.666667% !important; }
    .reset-col > .row > *:has(> .col-lg-6)  { width: 50% !important;        max-width: 50% !important; }
    .reset-col > .row > *:has(> .col-lg-7)  { width: 58.333333% !important; max-width: 58.333333% !important; }
    .reset-col > .row > *:has(> .col-lg-8)  { width: 66.666667% !important; max-width: 66.666667% !important; }
    .reset-col > .row > *:has(> .col-lg-9)  { width: 75% !important;        max-width: 75% !important; }
    .reset-col > .row > *:has(> .col-lg-10) { width: 83.333333% !important; max-width: 83.333333% !important; }
    .reset-col > .row > *:has(> .col-lg-11) { width: 91.666667% !important; max-width: 91.666667% !important; }
    .reset-col > .row > *:has(> .col-lg-12) { width: 100% !important;       max-width: 100% !important; }
  }
}

/* Focus visibile (AGID): NON rimuovere outline */
:focus{ outline: none; }
:focus-visible{
  outline: 3px solid rgba(152, 0, 0, .55);
  outline-offset: 2px;
  border-radius: .25rem;
}

/* Riduzione animazioni se richiesto dall’utente */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =========================================================
   FULL (flush ai lati) automatico per moduli in:
   .wrapper-section -> (.custom | .container-fluid)
   Copre annidamenti fino a 3 livelli.
   Non influenza i div successivi: scope super ristretto.
   ========================================================= */

/* 1) Se il figlio è container-fluid, azzera il suo padding laterale
      (solo quando sta nella wrapper-section e solo a quei livelli) */
.wrapper-section > .container-fluid,
.wrapper-section > * > .container-fluid,
.wrapper-section > * > * > .container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Pattern principale: la “row wrapper” (quella che contiene 1 sola colonna)
      -> azzera il padding della colonna unica, così TUTTO dentro va a filo
      (senza toccare row interne a più colonne) */
.wrapper-section > :where(.custom, .container-fluid) > .row > :first-child:last-child,
.wrapper-section > * > :where(.custom, .container-fluid) > .row > :first-child:last-child,
.wrapper-section > * > * > :where(.custom, .container-fluid) > .row > :first-child:last-child{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) Nella tua struttura c'è spesso .panel-body.modulo_content che introduce padding:
      lo azzeriamo SOLO dentro wrapper-section per permettere contenuti davvero full.
      (i contenuti che devono avere respiro usano già classi tipo p-4, container, ecc.) */
.wrapper-section :where(.panel-body.modulo_content, .panel-body, .modulo_content){
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 4) Evita micro scrollbar orizzontale dovuta a trasform/slider/negative margins */
.wrapper-section{
  overflow-x: clip;
}
@supports not (overflow: clip){
  .wrapper-section{ overflow-x: hidden; }
}

/* Full width (full-bleed) per elementi dentro container */
.full-width{
  width: 99.60vw !important;
  max-width: 99.60vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.img-fit-cover {
  object-fit: cover;
  height: 480px;
  width: 100%;
}