/* ROMEX — AVNZOR STYLE HERO SECTION v3
   Mobile target: 392 × 331 px ratio (1.18429)
   Desktop: wide AVNZOR-style hero
   Keeps EasyOrders' native one-slide carousel/animation.
*/

/* ---------- HERO / SLIDER WRAPPER ---------- */
.ab-slider {
  box-sizing: border-box !important;
  width: min(100%, 1280px) !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Never stack the carousel slides.
   EasyOrders controls the active slide/animation. */
.ab-slider-slide {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Picture must occupy the whole hero. */
.ab-slider-slide > picture,
.ab-slider-slide picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hero image */
.ab-slider-slide picture img,
.ab-slider-slide > img {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Controls stay inside the hero and don't create whitespace. */
.ab-slider-controls {
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- DESKTOP ----------
   Wide AVNZOR-like hero. */
@media (min-width: 769px) {
  .ab-slider {
    width: min(100%, 1280px) !important;
    aspect-ratio: 3 / 1 !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 24px !important;
  }

  .ab-slider-slide,
  .ab-slider-slide > picture {
    height: 100% !important;
    min-height: 0 !important;
  }

  .ab-slider-slide picture img,
  .ab-slider-slide > img {
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* ---------- MOBILE ----------
   AVNZOR reference: 392 × 331.
   The hero scales down/up with the viewport while preserving
   exactly the same 392:331 composition ratio. */
@media (max-width: 768px) {
  .ab-slider {
    box-sizing: border-box !important;
    width: min(100%, 392px) !important;
    max-width: 392px !important;
    aspect-ratio: 392 / 331 !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    border-radius: 24px !important;
  }

  .ab-slider-slide,
  .ab-slider-slide > picture {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .ab-slider-slide picture img,
  .ab-slider-slide > img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* ---------- REMOVE EMPTY SPACE AROUND THE HERO ---------- */
.ab-slider,
.ab-slider + *,
section:has(.ab-slider) {
  box-sizing: border-box;
}

section:has(.ab-slider) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* If the four visual tiles are the section immediately after the hero,
   keep them visually attached to the hero like the AVNZOR layout. */
section:has(.ab-slider) + section {
  margin-top: 0 !important;
  padding-top: 8px !important;
}

section:has(.ab-slider) + section img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* 4 visual cards/tiles on desktop */
@media (min-width: 769px) {
  section:has(.ab-slider) + section {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: min(100%, 1280px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 2 × 2 on mobile, keeping everything inside the 392px composition. */
@media (max-width: 768px) {
  section:has(.ab-slider) + section {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: min(100%, 392px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}