/*
 * FA3ELHA — slimmer home banner (desktop): one banner at the width of the products section,
 * no side previews, ratio 4:1 instead of 21:9 (mobile web too, so the same image is never cut).
 * Banner images: 1920 x 480 (desktop). Keep text/logos away from the edges.
 */
@media (min-width: 768px) {
  /* less empty space above / below the banner */
  section[aria-labelledby="hero-heading"] {
    padding-top: 1.25rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* The carousel measures this box: make it twice the visible banner width and centred,
     then only show the middle half → exactly one banner, no side previews. */
  section[aria-roledescription="carousel"] > div[dir="ltr"] {
    --fa-hero-w: min(calc(100% - 40px), 1240px);
    width: calc(2 * var(--fa-hero-w)) !important;
    max-width: none !important;
    margin-inline: calc(50% - var(--fa-hero-w)) !important;
    border-radius: 0 !important;
    clip-path: inset(0 25% round 1.5rem);
  }

  /* side fades / shadows are not needed any more */
  section[aria-roledescription="carousel"] > div[dir="ltr"] > div.pointer-events-none {
    display: none !important;
  }

  /* slimmer banner */
  section[aria-roledescription="carousel"] .aspect-21\/9 {
    aspect-ratio: 4 / 1 !important;
  }

  /* every banner looks the same (no dimmed / shrunken neighbours while sliding) */
  section[aria-roledescription="carousel"] article > div {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* no grey shading over the banner image */
  section[aria-roledescription="carousel"] article > div > div.pointer-events-none {
    display: none !important;
  }

  section[aria-roledescription="carousel"] article img {
    object-fit: cover;
    object-position: center;
  }
}

/* Mobile web: same 4:1 image shown whole, one banner, no side previews. */
@media (max-width: 767.98px) {
  section[aria-labelledby="hero-heading"] {
    padding-top: 1rem !important;
    padding-bottom: 0.25rem !important;
  }

  /* slides are 88% of this box: make the box 100/88 of the visible width and show its middle */
  section[aria-roledescription="carousel"] > div[dir="ltr"] {
    --fa-hero-w: calc(100% - 32px);
    width: calc(var(--fa-hero-w) / 0.88) !important;
    max-width: none !important;
    margin-inline: calc(50% - var(--fa-hero-w) / 1.76) !important;
    border-radius: 0 !important;
    clip-path: inset(0 6% round 1rem);
  }

  section[aria-roledescription="carousel"] > div[dir="ltr"] > div.pointer-events-none,
  section[aria-roledescription="carousel"] article > div > div.pointer-events-none {
    display: none !important;
  }

  section[aria-roledescription="carousel"] .aspect-2\/1 {
    aspect-ratio: 4 / 1 !important;
  }

  section[aria-roledescription="carousel"] article > div {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}