/* =========================
   BEFORE / AFTER (cards 5→1)
   ========================= */

/* targeta específica del B/A */
.splide-before-after-cards .ba-card{
    background: var(--surface, #fff);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-1);
    overflow: hidden;
  }
  
  /* contenidor de les dues imatges (GRID) */
  .splide-before-after-cards .ba-images{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1);
    align-items: stretch;
  }
  
  /* el link actua com a “marc” i ocupa tota la columna */
  .splide-before-after-cards .ba-images a{
    display: block;
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  
  /* imatges verticals, omplen ample i mantenen proporció */
  .splide-before-after-cards .ba-images img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;           /* canvia-ho a 2/3 si et quadra millor */
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  
  /* llegenda */
  .splide-before-after-cards .ba-caption{
    margin-top: var(--space-1);
    opacity: .85;
  }
  
  /* fletxes/paginació només per aquest slider */
  .splide-before-after-cards .splide__arrow{ background: rgba(0,0,0,.5); }
  .splide-before-after-cards .splide__arrow svg{ fill: #fff; }
  .splide-before-after-cards .splide__pagination__page{ transform: scale(.9); }
  .splide-before-after-cards .splide__pagination__page.is-active{ transform: scale(1); }
  
  /* responsiu: en mòbil, apilat */
/* Mòbil: mantenim 2 columnes (Antes | Después) */
@media (max-width: 560px){
  .splide-before-after-cards .ba-images{
    grid-template-columns: 1fr 1fr !important;
  }
}