/* ==========================================================================
   GROVE STAR BEAUTY SALON — responsive.css
   Tablet and mobile behaviour. Desktop-first overrides:
     · ≤1100px  small desktop / landscape tablet
     · ≤991px   tablet
     · ≤767px   mobile
     · ≤480px   small mobile
   ========================================================================== */

/* --------------------------------------------------------------------------
   Small desktop / landscape tablet
   -------------------------------------------------------------------------- */
/* wide-laptop band: the full phone number + brand text + nav is too wide */
@media (max-width: 1280px) {
  .header__call span { display: none; }        /* keep only the phone icon */
}

@media (max-width: 1100px) {

  /* the logo artwork already contains the full wordmark — drop the
     duplicate text so the full nav row fits without squeezing */
  .header__brand-text { display: none; }

  /* 2 columns: tall hair card keeps its double-row span, so the five
     cards fill a balanced 2×3 grid with no orphan cell */
  .services__grid { grid-template-columns: repeat(2, 1fr); }

  .why__grid { grid-template-columns: repeat(2, 1fr); }

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

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {

  :root { --header-h: 74px; }

  /* ---- Header: collapse nav into a slide-in drawer ---- */
  .hamburger { display: flex; }
  .header__book { display: none; }             /* booking lives in drawer + sticky bar */
  .header__brand-text { display: block; }      /* nav is gone, so there is room again */

  .nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    width: min(340px, 86vw);
    height: calc(100dvh - var(--header-h));
    background: var(--white);
    box-shadow: -18px 0 40px rgba(51, 47, 45, .14);
    padding: 2rem 1.8rem;
    transform: translateX(105%);
    transition: transform .4s var(--ease);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }

  .nav__list {
    flex-direction: column;
    gap: .4rem;
    margin-bottom: 2rem;
  }
  .nav__link {
    display: block;
    font-size: 1.1rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--line);
  }
  .nav__link::after { display: none; }

  .nav__mobile-actions {
    display: grid;
    gap: .8rem;
  }

  /* ---- Hero slider: shorter, arrows hidden (swipe instead) ---- */
  .hero-swiper { height: clamp(540px, 84vh, 760px); }
  .hero-swiper__arrow { display: none; }
  .hero__scroll { display: none; }

  /* ---- About ---- */
  .about__grid { grid-template-columns: 1fr; gap: 3rem; }
  .about__media { max-width: 560px; margin-inline: auto; width: 100%; }

  /* ---- Team ---- */
  .team__grid { grid-template-columns: 1fr; gap: 3rem; }
  .team__media { max-width: 560px; margin-inline: auto; width: 100%; }

  /* ---- Inner pages: service rows stack (image first) ---- */
  .svc-row { grid-template-columns: 1fr; gap: 2rem; }
  .svc-row--flip .svc-row__media { order: 0; }
  .svc-row__media { max-width: 560px; margin-inline: auto; width: 100%; }

  /* ---- Reviews page grid ---- */
  .reviews-grid { grid-template-columns: 1fr; }

  /* ---- Bridal ---- */
  .bridal__grid { grid-template-columns: 1fr; gap: 3rem; }
  .bridal__media { max-width: 420px; margin-inline: auto; width: 100%; }

  /* ---- Gallery ---- */
  .gallery__masonry { columns: 2; }

  /* ---- Offers ---- */
  .offers__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }

  /* ---- Contact ---- */
  .contact__grid { grid-template-columns: 1fr; }
  .contact__media { grid-template-columns: 1fr; }
  .contact__map iframe { height: 340px; }
  /* panel sits below the form: blocks in two columns, no dividers */
  .contact__info {
    grid-template-columns: repeat(2, 1fr);
    gap: .4rem 2.4rem;
  }
  .contact__block + .contact__block { border-top: none; }

  /* ---- Footer ---- */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  body { font-size: 1rem; }

  .section { padding-block: 3.8rem; }

  /* ---- Header ---- */
  .header__call {
    width: 42px; height: 42px;
    justify-content: center;
    border: 1.5px solid var(--blush);
    border-radius: 50%;
  }
  .header__brand-name { font-size: 1.15rem; }
  .header__logo { width: 60px; height: 60px; }

  /* ---- Hero slider ---- */
  .hero-swiper { height: clamp(520px, 88svh, 680px); }
  .hero-slide__title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hero-slide__text { font-size: 1rem; margin-bottom: 1.8rem; }
  /* strengthen the overlay when text sits over the image centre */
  .hero-slide__overlay {
    background:
      linear-gradient(0deg,
        rgba(43, 27, 30, .82) 0%,
        rgba(43, 27, 30, .55) 45%,
        rgba(43, 27, 30, .28) 75%,
        rgba(43, 27, 30, .18) 100%);
  }
  .hero-swiper__pagination.swiper-pagination { bottom: 16px; }
  .hero-trust__list { flex-direction: column; align-items: center; gap: .55rem; }

  /* ---- Sections stack ---- */
  .section-head--row { flex-direction: column; align-items: flex-start; gap: 1.2rem; }

  .services__grid { grid-template-columns: 1fr; }
  .service-card--tall { grid-row: span 1; }
  .service-card--tall .service-card__media img { height: 235px; min-height: 0; }

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

  .transform__card img { aspect-ratio: 3 / 3.6; }

  /* ---- Gallery: single column keeps images generous ---- */
  .gallery__masonry { columns: 1; }
  .tour-video__play { width: 64px; height: 64px; }
  .tour-video__caption { font-size: .85rem; padding: 1.8rem 1.1rem .8rem; }
  .lightbox { padding: 1rem; }
  .lightbox__arrow { display: none; }          /* swipe-sized screens: tap image edges instead */

  /* ---- Forms ---- */
  .form-row { grid-template-columns: 1fr; gap: 0; }

  .contact__info { grid-template-columns: 1fr; }
  .contact__block + .contact__block { border-top: 1px dashed var(--blush); }
  .contact__map iframe { height: 300px; }

  .insta__grid { grid-template-columns: repeat(2, 1fr); }

  /* ---- Footer ---- */
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; padding-block: 3rem 2rem; }

  /* ---- Sticky mobile action bar ---- */
  .mobile-bar { display: flex; }
  body { padding-bottom: 56px; }               /* keep content clear of the bar */
  .footer__bar { padding-bottom: 1.2rem; }
}

/* --------------------------------------------------------------------------
   Small mobile
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

  .container { width: calc(100% - 2.2rem); }

  .hero-slide__cta .btn { width: 100%; }
  .bridal__cta .btn { width: 100%; }
  .team__cta .btn { width: 100%; }

  .offer-card { padding: 1.9rem 1.5rem; }
  .offer-card__list { grid-template-columns: 1fr; }

  .insta__grid { gap: .6rem; }

  .header__brand-sub { display: none; }
}