/* =======================================
   EMGRAND – Momentos ("Hecho para cada momento")
========================================== */

.emg-moments {
  position: relative;
  max-width: 100%;
  padding: 72px 24px 80px;
  color: #03050f;

  /* Fondo por defecto */
  background-color: #e0e7ee;

  /* Fondos desde ACF (CSS vars) */
  background-image: var(--emg-moments-bg-desktop);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  margin-top: 0 !important;
}

.emg-moments__inner {
  max-width: 1240px;
  margin: 0 auto;
}

/* Header */

.emg-moments__header {
  margin-bottom: 40px;
}

.emg-moments__title {
  font-family: var(--font-geely);
  margin: 0 0 24px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 48px;
  line-height: 44px;
  letter-spacing: 0;
  color: #0b0c0c;
}

.emg-moments__description {
  margin: 0;
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: #0b0c0c;
}

/* ===== DESKTOP GRID (5 imágenes) ===== */

.emg-moments__grid {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1.1fr;
  grid-template-rows: 340px 340px;
  gap: 24px;
}

/* Todas las imágenes comparten estilo base */
.emg-moments__item {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  margin: 0;
}

.emg-moments__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.emg-moments__item:hover .emg-moments__image {
  transform: scale(1.03);
}

/* Layout específico Figma (5 ítems) */
.emg-moments__item--1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2; /* alto completo izquierda */
}

/* aquí va la "imagen unida" de las dos filas, en la segunda columna */
.emg-moments__item--2 {
  grid-column: 2 / 3;
  grid-row: 1 / 3; /* arriba centro (la parte superior de la imagen unida) */
}

.emg-moments__item--3 {
  grid-column: 3 / 4;
  grid-row: 1 / 2; /* arriba derecha */
}

.emg-moments__item--4 {
  grid-column: 1 / 2;
  grid-row: 2 / 3; /* abajo centro (la parte inferior de la imagen unida) */
}

.emg-moments__item--5 {
  grid-column: 3 / 4;
  grid-row: 2 / 3; /* abajo derecha */
}

/* ===== MOBILE SLIDER ===== */

.emg-moments__slider--mobile {
  display: none;
  margin-top: 24px;
}

.emg-moments__slide {
  border-radius: 22px;
  overflow: hidden;
}

.emg-moments__image--mobile {
  height: auto;
}

.emg-moments__pagination {
  margin-top: 14px;
  text-align: center;
  /* bottom: var(--swiper-pagination-bottom, -30px) !important; */
}

.emg-moments__mobile .swiper-pagination {
  display: none;
  bottom: 34px !important;
  text-align: center;
}

/* Swiper bullets */
.emg-moments__pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 4px !important;
  opacity: 0.3;
  background: #7f8fa0;
}

.emg-moments__pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: #007bff;
}

/* ==========================
   RESPONSIVE
========================== */

@media (max-width: 1024px) {
  .emg-moments {
    padding: 56px 16px 68px;
  }

  .emg-moments__grid {
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .emg-moments {
    /* En mobile usamos el fondo mobile si existe, o el desktop como fallback */
    background-image: var(
      --emg-moments-bg-mobile,
      var(--emg-moments-bg-desktop)
    );
  }

  .emg-moments__title {
    font-size: 32px;
    line-height: 40px;
    margin: 0 0 24px;
  }

  .emg-moments__description {
    font-size: 16px;
    line-height: 22px;
  }

  /* En mobile ocultamos el mosaico y usamos solo el slider */
  .emg-moments__grid {
    display: none;
  }

  .emg-moments__mobile .swiper-pagination {
    display: block !important;
  }

  .emg-moments__slider--mobile {
    display: block;
    /* overflow: visible; */
  }

  .emg-moments__slider {
    width: 100%;
  }

  .emg-moments__swiper {
    width: 100%;
  }

  .emg-moments__slide {
    height: 240px; /* Ajusta aquí la altura deseada */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .emg-moments__image--mobile {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 22px;
  }
}