/* ============================================================
   RESPONSIVE BANNER CENTERING CSS - VERSIÓ FINAL CORREGIDA
   Centrar els banners/widgets en TOTES les resolucions
   ============================================================ */

/* 
   INSTRUCCIONS D'ÚS:
   Reemplaçar el fitxer anterior responsive-banners.css amb aquest
   
   IMPORTANT: Aquest CSS s'aplica SEMPRE, no només en mòbil
*/

/* ============================================================
   ESTILS BASE - Aplicats sempre (totes les resolucions)
   ============================================================ */

/* Centrar els widgets en TOTES les resolucions */
.widget-layout {
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Assegurar que la imatge del widget es centra bé */
.widget-screen {
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

.widget-screen img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* Centrar el text dels widgets si n'hi ha */
.widget-title {
  text-align: center;
}

.widget-btn {
  text-align: center;
}

/* ============================================================
   DISPOSITIUS MÒBIL (menys de 768px - una columna)
   ============================================================ */
@media (max-width: 767px) {
  
  /* Els col-md-4 es mostren en una columna en mòbil
     Deixar els widget-layout amb els estils base que ja estan aplicats */
  
  .col-md-4 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .widget-layout {
    width: 85%;
    margin-bottom: 20px;
  }
  
}

/* ============================================================
   DISPOSITIUS TABLET EN MODE PORTRAIT (768px a 991px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {
  
  /* En tablets, els widgets es mostren amb 2 columnes
     Els estils base ja les centren correctament */
  
  .widget-layout {
    width: 90%;
  }
  
}

/* ============================================================
   DISPOSITIUS DESKTOP (992px en amunt - tres columnes)
   ============================================================ */
@media (min-width: 992px) {
  
  /* En desktop, els widgets es mostren amb 3 columnes
     Els estils base ja les centren correctament */
  
  .widget-layout {
    width: 95%;
  }
  
}