/* =================================================================
   FRANJAS DE BANNERS (Savi Safety)
   Portado de `savisafety-static-v2` (`base.css` §5), 06/09/2026.

   Sin esquinas redondeadas ni sombra: eso era la tarjeta de banner de JR
   Implementos. En la referencia los banners son rectángulos a ras, en filas de
   uno (`.jri-banners-secondary`: medios de pago, B2B), dos o tres
   (`.jri-banners-double`, `--triple`), con 30 px de hueco y 26 px de aire
   arriba y abajo. La proporción la manda la plantilla (`--jri-banner-ar`, de la
   imagen subida); el valor fijo de aquí es solo la red.
   ================================================================= */
.jri-banners-secondary,
.jri-banners-double { padding-block: 26px; }

/* Una fila de uno: la franja de medios de pago y el banner B2B. */
.jri-banners-secondary .jri-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.jri-banner-wide { display: block; overflow: hidden; }

.jri-banner-wide picture { display: block; width: 100%; }

.jri-banner-wide img { width: 100%; height: auto; display: block; }

/* Filas de dos o tres. `minmax(0, 1fr)`: una celda cuyo contenido no cabe
   encoge en vez de desbordar. */
.jri-banners-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.jri-banners-triple .jri-banners-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.jri-banner-card {
  display: block;
  overflow: hidden;
  background: #111;
  aspect-ratio: var(--jri-banner-ar, 3 / 2);
}

.jri-banner-card picture { display: block; width: 100%; height: 100%; }

.jri-banner-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.jri-banner-card:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .jri-banner-card img { transition: none; }
}

@media (max-width: 820px) {
  .jri-banners-grid,
  .jri-banners-triple .jri-banners-grid { grid-template-columns: 1fr; gap: 16px; }

  .jri-banner-card { aspect-ratio: var(--jri-banner-ar-movil, var(--jri-banner-ar, 3 / 2)); }

  .jri-banners-secondary,
  .jri-banners-double { padding-block: 16px; }
}