/* ===================================================================
   banner_seminarios_m1000.css
   - EXCLUSIVO del componente banner_seminarios.php
   - SIN fondo
   - 2 imágenes 1:1
   - Responsive:
       * <= 1024px: stack (1 debajo de otro)
       * >= 1025px: 2 en fila, pero RESPONSIVO (reduce alto al reducir ancho)
   - NOTA: Este CSS NO depende de .banner-seminarios (index),
           solo del componente (.m1000-bsem)
=================================================================== */

.m1000-bsem {
  width: 100%;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* =========================
   DEFAULT (DESKTOP BASE)
   - 2 en fila
========================= */
.m1000-bsem .m1000-bsem__inner {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: stretch;
  justify-content: center;   /* ✅ mejor que space-between para centrar */
  background: transparent;
}

.m1000-bsem .m1000-bsem__item {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  background: transparent;
  text-decoration: none;
  border: 0;
  outline: none;
}

/* 1:1 */
.m1000-bsem .m1000-bsem__ratio {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  background: transparent;
  border-radius: 1.25rem;
}

.m1000-bsem .m1000-bsem__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 0;
  background: transparent;
}

/* Hover sutil */
.m1000-bsem .m1000-bsem__item:hover .m1000-bsem__img {
  transform: scale(1.01);
  transition: transform 0.2s ease;
}

.m1000-bsem .m1000-bsem__item:focus-visible .m1000-bsem__ratio {
  outline: 0.1875rem solid rgba(0, 0, 0, 0.25);
  outline-offset: 0.1875rem;
}

/* =========================================================
   STACK FORZADO (por clase aplicada por JS)
   - Se usa cuando el JS decide apilar (<= 1024px)
========================================================= */
.m1000-bsem.is-stack .m1000-bsem__inner {
  flex-direction: column !important;
  gap: 1rem !important;
  justify-content: flex-start !important;
}

.m1000-bsem.is-stack .m1000-bsem__item {
  width: 100% !important;
  flex: 0 0 auto !important;
}

.m1000-bsem.is-stack .m1000-bsem__ratio {
  border-radius: 1rem;
}

/* =========================================================
   STACK por media query (backup)
   ✅ CAMBIO: apila en <= 1024px
========================================================= */
@media (max-width: 1024px) {
  .m1000-bsem .m1000-bsem__inner {
    flex-direction: column !important;
    gap: 1rem !important;
    justify-content: flex-start !important;
  }

  .m1000-bsem .m1000-bsem__item {
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  .m1000-bsem .m1000-bsem__ratio {
    border-radius: 1rem;
  }
}

/* =========================================================
   DESKTOP RESPONSIVO (>= 1025px)
   - 2 en fila SIEMPRE
   - tamaño RESPONSIVO (reduce alto al reducir ancho)
   - mantiene 1:1
   - centra el conjunto
========================================================= */
@media (min-width: 1025px) {
  .m1000-bsem .m1000-bsem__inner {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: stretch;
    gap: 1.4rem;
  }

  /* ✅ Control real del tamaño de cada cuadrado (RESPONSIVO) */
  .m1000-bsem .m1000-bsem__item {
    flex: 0 1 clamp(560px, 44vw, 780px) !important;
    max-width: clamp(560px, 44vw, 780px) !important;
  }
}