/* ========================================================
   AL AYAMNA - Responsive Stylesheet
   ======================================================== */

/* ── Hero Banner Slider — Responsive & Mobile Perfection ── */
#heroBannerSlider {
  position: relative;
  width: 100%;
  aspect-ratio: 1903 / 826;
  max-height: 826px;
  overflow: hidden;
}

#heroTrack {
  display: flex;
  width: 300%;
  height: 100%;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  transition: transform 0.95s cubic-bezier(0.77,0,0.18,1);
  will-change: transform;
}

.hero-slide {
  width: calc(100% / 3);
  height: 100%;
  position: relative;
  flex-shrink: 0;
}

.hero-slide-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: transform;
}

/* Desktop screen (≥ 992px) */
@media (min-width: 992px) {
  #heroBannerSlider {
    margin-top: 85px !important; /* Clears fixed desktop navbar — moves banner cleanly down */
    width: 100%;
    aspect-ratio: 1903 / 826;
    max-height: 826px;
    height: auto;
  }

  .hero-slide-bg {
    background-size: 100% 100% !important; /* Exact fit, zero cropping */
    background-position: center center !important;
  }

  .core-services-section {
    margin-top: 0 !important;
    padding-top: 80px !important; /* Moves cards comfortably down below banner */
    padding-bottom: 80px !important;
  }
}

/* Tablet & Mobile Screen (≤ 991.98px) */
@media (max-width: 991.98px) {
  #heroBannerSlider {
    height: auto !important;
    min-height: unset !important;
    aspect-ratio: 1903 / 826 !important;
    margin-top: 72px !important; /* Starts cleanly below mobile fixed navbar */
  }

  #heroTrack,
  .hero-slide,
  .hero-slide-bg {
    height: 100% !important;
    min-height: unset !important;
  }

  .hero-slide-bg {
    /* 100% 100% on container with identical aspect-ratio means zero cropping & zero distortion! */
    background-size: 100% 100% !important;
    background-position: center center !important;
    transform: none !important;
  }

  #heroPrev, #heroNext {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.8rem !important;
    left: 8px !important;
  }
  #heroNext {
    right: 8px !important;
    left: auto !important;
  }

  #heroDots {
    bottom: 8px !important;
    gap: 0.35rem !important;
  }
  .hero-dot {
    width: 6px !important;
    height: 6px !important;
  }
  .hero-dot.active {
    width: 18px !important;
  }

  .core-services-section {
    margin-top: 0 !important;
    padding-top: 25px !important;
    padding-bottom: 40px !important;
  }
}

@media (max-width: 575.98px) {
  #heroBannerSlider {
    margin-top: 68px !important;
  }
  #heroPrev, #heroNext {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.72rem !important;
    left: 4px !important;
  }
  #heroNext {
    right: 4px !important;
    left: auto !important;
  }
  #heroDots {
    bottom: 5px !important;
  }
}

/* ── Tablet (≤ 991px) ──────────────────────────────────── */
@media (max-width: 991.98px) {
  .hero-heading {
    font-size: 2.6rem;
  }
  
  .hero-subheading {
    font-size: 1.25rem;
  }

  /* Cards fully below banner — no overlap */
  .core-services-section {
    margin-top: 0;
  }

  .service-card-item {
    margin-bottom: 24px;
  }

  .about-arch-img,
  .catering-arch-img {
    height: 380px;
    margin-top: 2rem;
  }

  .banquet-showcase-img {
    height: 340px;
    margin-bottom: 2rem;
  }

  .navbar-collapse {
    background: rgba(9, 30, 87, 0.98);
    backdrop-filter: blur(16px);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid rgba(216, 174, 101, 0.35);
    margin-top: 1rem;
  }

  .navbar-nav .nav-link {
    padding: 0.65rem 0.5rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .navbar-nav .nav-link::after {
    display: none;
  }

  .nav-cta-btn {
    width: 100%;
    margin-top: 1rem;
  }

  .page-hero-title {
    font-size: 2.4rem;
  }

  .al-form-card {
    padding: 1.6rem;
  }
}

/* ── Mobile (≤ 575px) ──────────────────────────────────── */
@media (max-width: 575.98px) {
  .hero-heading {
    font-size: 2.1rem;
  }

  .hero-desc {
    font-size: 0.98rem;
  }

  .section-title {
    font-size: 1.95rem;
  }

  .about-arch-img,
  .catering-arch-img {
    height: 280px;
  }

  .booking-cta-title {
    font-size: 2rem;
  }
}



/* ── Luxury Hero & Concierge Responsive Overrides ── */
@media (max-width: 991.98px) {
  .al-luxury-hero {
    padding-top: 110px;
    padding-bottom: 70px;
    min-height: 80vh;
  }
  .al-concierge-dock {
    margin-top: -30px;
  }
  .al-concierge-panel {
    padding: 1.2rem;
  }
}

@media (max-width: 767.98px) {
  .al-concierge-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .al-hero-badges-strip {
    gap: 0.4rem;
  }
  .al-hero-mini-pill {
    font-size: 0.72rem;
    padding: 0.25rem 0.65rem;
  }
  .al-triptych-media {
    height: 200px;
  }
}