/* ==========================================================================
   Asia Finest — Responsive Breakpoints (Mobile-First)
   ==========================================================================
   Breakpoints:
   - max-width: 599px  — Small phones (overrides)
   - min-width: 600px  — Tablets portrait
   - min-width: 900px  — Tablets landscape / small desktop
   - min-width: 1100px — Desktop
   - min-width: 1440px — Large desktop
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mobile menu overlay (hidden by default)
   -------------------------------------------------------------------------- */

.af-mobile-menu {
  display: none;
}

.af-mobile-menu--open {
  display: block;
  position: fixed;
  inset: 0;
  top: 76px;
  background: rgba(16, 16, 16, .96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 29;
  padding: 24px;
  overflow-y: auto;
  border-bottom: 1px solid rgba(248, 248, 248, .08);
}

.af-mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}

.af-mobile-menu li a {
  display: block;
  padding: 14px 16px;
  font-size: 18px;
  border-radius: 12px;
  color: var(--af-ivory);
  text-decoration: none;
  transition: background .2s ease;
}

.af-mobile-menu li a:hover,
.af-mobile-menu li a:focus {
  background: rgba(248, 248, 248, .06);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   max-width: 599px — Small phones
   -------------------------------------------------------------------------- */

@media (max-width: 599px) {

  .af-nav {
    height: 64px;
  }

  .af-menu {
    display: none;
  }

  .af-mobile-toggle {
    display: flex;
  }

  .af-header-cta {
    display: none;
  }

  .af-hero-grid {
    grid-template-columns: 1fr;
  }

  .af-row {
    grid-template-columns: 1fr;
  }

  .af-grid-3 {
    grid-template-columns: 1fr;
  }

  .af-grid-2 {
    grid-template-columns: 1fr;
  }

  .af-footer-grid {
    grid-template-columns: 1fr;
  }

  .af-guide {
    grid-template-columns: 1fr;
  }

  .af-cta-band {
    flex-direction: column;
    text-align: center;
  }

  .af-scroll-indicator {
    display: none;
  }

  .af-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  h1 {
    font-size: clamp(32px, 8vw, 46px);
  }

  .af-mobile-menu--open {
    top: 64px;
  }

}

/* --------------------------------------------------------------------------
   min-width: 600px — Tablets portrait
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {

  .af-row {
    grid-template-columns: 1fr 1fr;
  }

  .af-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .af-grid-2 {
    grid-template-columns: 1fr 1fr;
  }

}

/* --------------------------------------------------------------------------
   min-width: 900px — Tablets landscape / small desktop
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {

  .af-menu {
    display: flex;
  }

  .af-mobile-toggle {
    display: none;
  }

  .af-header-cta {
    display: inline-flex;
  }

  .af-hero-grid {
    grid-template-columns: 1.1fr .9fr;
  }

  .af-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .af-footer-grid {
    grid-template-columns: 1.2fr .8fr .8fr;
  }

  .af-guide {
    grid-template-columns: 1fr 1fr;
  }

  .af-scroll-indicator {
    display: flex;
  }

}

/* --------------------------------------------------------------------------
   min-width: 1100px — Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) {

  /* Full spacing and font sizes are the defaults.
     Add any desktop-specific overrides here. */

}

/* --------------------------------------------------------------------------
   min-width: 1440px — Large desktop
   -------------------------------------------------------------------------- */

@media (min-width: 1440px) {

  /* Container remains at max 1200px.
     Add any large-screen refinements here. */

}