/* ============================================================
   MAMI TRAVEL — Responsive Styles
   Mobile-first breakpoints: 1024px / 768px / 480px
   ============================================================ */

/* ---- LARGE TABLET: 1024px ---- */
@media (max-width: 1024px) {
  .services-grid        { grid-template-columns: repeat(2,1fr); }
  .fleet-grid           { grid-template-columns: repeat(2,1fr); }
  .why-grid             { grid-template-columns: repeat(2,1fr); }
  .destinations-grid    { grid-template-columns: repeat(2,1fr); }
  .values-grid          { grid-template-columns: repeat(2,1fr); }
  .about-story          { grid-template-columns: 1fr; gap: 3rem; }
  .about-story-img img  { height: 380px; }
  .fleet-item           { grid-template-columns: 1fr; direction: ltr !important; }
  .fleet-item:nth-child(even) > * { direction: ltr; }
  .fleet-item-img       { height: 300px; }
  .footer-inner         { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .contact-layout       { grid-template-columns: 1fr; gap: 3rem; }
  .testimonials-full-grid { grid-template-columns: 1fr; }
}

/* ---- TABLET / MOBILE: 768px ---- */
@media (max-width: 768px) {
  :root {
    --header-h: 92px;
  }

  .logo img { height: 68px; }

  /* Nav — mobile drawer */
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    /* #header carries backdrop-filter, which makes it the containing block for
       fixed-position descendants — so `inset:0` resolved against the 92px header
       box and the drawer collapsed to a 97px strip while its links spilled out
       over the page. Size it against the viewport explicitly instead. */
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));   /* accounts for mobile browser chrome */
    overflow-y: auto;
    overscroll-behavior: contain;
    /* fully opaque: at 0.99 the hero still ghosted through and read as overlap */
    background: var(--black);
    flex-direction: column;
    /* plain `center` pushes the first link above the scroll origin on short
       screens, making it unreachable; `safe` falls back to flex-start when the
       links overflow. Older browsers ignore the second declaration. */
    justify-content: center;
    justify-content: safe center;
    align-items: center;
    gap: 2.25rem;
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.4,0,0.2,1);
    padding: 3rem 2rem;
    border-top: 1px solid var(--gold-border);
  }
  .nav-links.open  { transform: translateX(0); }
  .nav-links a     { font-size: 1.05rem; letter-spacing: 0.14em; }
  .nav-links .btn-outline { padding: 0.72rem 2rem; font-size: 0.88rem; }

  /* Hero */
  .hero-stats .container { gap: 2rem; flex-wrap: wrap; }
  .hero-stat .number     { font-size: 1.9rem; }
  .scroll-indicator      { display: none; }
  .hero-content          { padding-top: calc(var(--header-h) + 3.5rem); padding-bottom: 8rem; }

  /* Grids */
  .services-grid          { grid-template-columns: 1fr; }
  .fleet-grid             { grid-template-columns: 1fr; }
  .why-grid               { grid-template-columns: repeat(2,1fr); }
  .destinations-grid      { grid-template-columns: repeat(2,1fr); }
  .gallery-grid           { columns: 2; }
  .blog-grid              { grid-template-columns: 1fr; }
  .testimonials-grid      { grid-template-columns: 1fr; }
  .form-row               { grid-template-columns: 1fr; }
  .values-grid            { grid-template-columns: repeat(2,1fr); }
  .certifications         { gap: 1rem; }
  .fleet-specs            { grid-template-columns: 1fr; }

  /* Footer */
  .footer-inner           { grid-template-columns: 1fr; }
  .footer-bottom .container { flex-direction: column; text-align: center; }
  .footer-bottom-links    { justify-content: center; }

  /* Page hero */
  .page-hero              { height: 280px; }

  /* About */
  .about-story-img img    { height: 300px; }
}

/* ---- SMALL MOBILE: 480px ---- */
@media (max-width: 480px) {
  .why-grid               { grid-template-columns: 1fr; }
  .destinations-grid      { grid-template-columns: 1fr; }
  .gallery-grid           { columns: 1; }
  .hero-cta               { flex-direction: column; align-items: flex-start; }
  .hero-cta .btn          { width: 100%; justify-content: center; }
  .cta-banner-btns        { flex-direction: column; align-items: center; }
  .cta-banner-btns .btn   { width: 100%; max-width: 320px; justify-content: center; }
  .values-grid            { grid-template-columns: 1fr; }
  .contact-form-col       { padding: 2rem 1.5rem; }
  .certifications         { flex-direction: column; align-items: center; }
  .fleet-item-body        { padding: 2rem 1.5rem; }
  .whatsapp-float         { bottom: 1.25rem; right: 1.25rem; }
  .whatsapp-float-btn     { width: 52px; height: 52px; }
  .btn                    { padding: 0.78rem 1.75rem; }
}