/* ============================================================
   AURA BEAUTY LOUNGE — Responsive Layer (mobile-first refinements)
   Breakpoints:  1080px (laptop) · 860px (tablet) · 620px (mobile)
   Base styles are desktop-optimized in style.css; here we
   progressively reflow for narrower panels.
   ============================================================ */

/* ---------- ≤ 1080px : laptop / small desktop ---------- */
@media (max-width: 1080px) {
  :root { --header-h: 76px; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why__grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-5); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__grid > :nth-child(4) { grid-column: 1 / -1; }
  .gallery-grid { columns: 2; }
  .ig-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- ≤ 860px : tablet ---------- */
@media (max-width: 860px) {
  :root { --header-h: 64px; }              /* slightly reduced header on mobile */
  .nav__links, .nav .btn { display: none; }
  .nav-toggle { display: flex; }
  .header { padding-block: 13px; }

  .hero { min-height: auto; padding-top: calc(var(--header-h) + 3rem); padding-bottom: var(--sp-6); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero__media { order: -1; max-width: 480px; }
  .hero__media img { aspect-ratio: 16/12; }
  .hero__scroll { display: none; }

  .trust__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .trust__div { display: none; }

  .bridal__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .bridal__media { order: -1; max-width: 480px; }

  .ba-wrap { grid-template-columns: 1fr; }

  .booking__grid { grid-template-columns: 1fr; gap: var(--sp-5); }

  .map__grid { grid-template-columns: 1fr; }
  .map__embed iframe { min-height: 320px; }

  .pkg--featured { transform: none; }
  .pkg--featured:hover { transform: translateY(-8px); }

  /* Touch devices can't hover — always show service descriptions */
  .service-card__body p { max-height: none; opacity: 1; margin-bottom: 1rem; }

  .section { padding-block: var(--sp-7); }
}

/* ---------- ≤ 620px : mobile ---------- */
@media (max-width: 620px) {
  :root { --gutter: 1.25rem; }

  body { padding-bottom: 68px; } /* room for sticky mobile CTA */

  .services-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 380px; }
  .service-card__body p { max-height: 120px; opacity: 1; margin-bottom: 1rem; } /* always show on touch */

  .why__grid { grid-template-columns: 1fr; }

  .hero__title { font-size: clamp(2.7rem, 12vw, 3.6rem); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__media .float-card { left: 50%; transform: translateX(-50%); bottom: -20px; }

  .trust__num { font-size: 2rem; }

  .bridal__stats { gap: var(--sp-4); }
  .bridal__stats b { font-size: 1.9rem; }

  .form-row { grid-template-columns: 1fr; }
  .booking__panel { padding: var(--sp-4) var(--sp-3); }

  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .footer__grid > :nth-child(4) { grid-column: auto; }
  .footer__bottom { flex-direction: column; text-align: center; }

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

  .testi__quote { font-size: 1.4rem; }

  /* Tighter vertical rhythm on small screens */
  .section { padding-block: var(--sp-6); }

  /* Larger, comfortable touch targets for inline CTAs */
  .link-arrow { min-height: 44px; }

  /* ---- TASK 2: Packages → horizontal swipe carousel (mobile only) ---- */
  .pkg-grid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 82%;                 /* partial next card peeks in */
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* bleed edge-to-edge, then pad so first card aligns to the gutter */
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.75rem var(--gutter) 1.5rem;
    scroll-padding-left: var(--gutter);
    scrollbar-width: none;                   /* Firefox */
    -ms-overflow-style: none;                /* old Edge */
  }
  .pkg-grid::-webkit-scrollbar { display: none; } /* WebKit */
  .pkg-grid > .pkg { scroll-snap-align: start; height: 100%; }
  /* keep every card the same size in the carousel (no scaled featured) */
  .pkg-grid > .pkg--featured { transform: none; }
  .pkg-grid > .pkg--featured:hover { transform: translateY(-8px); }

  /* Show sticky mobile CTA + hide desktop WA float */
  .mobile-cta { display: grid; }
  .wa-float { display: none; }
  .to-top { bottom: 84px; right: 16px; }
}

/* ---------- Print ---------- */
@media print {
  .header, .mobile-cta, .wa-float, .to-top, .hero__scroll { display: none !important; }
}