/* =====================================================
   IT'S ME UNISEX SALOON — Responsive Styles v2
   ===================================================== */

/* ── Tablet ≤ 1100px ── */
@media (max-width: 1100px) {
  #navbar        { padding: 18px 40px; }
  #navbar.scrolled { padding: 12px 40px; }
  .nav-links     { gap: 26px; }

  .about-preview { padding: 80px 40px; gap: 50px; }

  .services-grid { grid-template-columns: repeat(2,1fr); }
  .service-card.large { grid-row: span 1; height: 370px; min-height: unset; }

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

  .gallery-grid  { grid-template-columns: repeat(2,1fr); grid-template-rows: 260px 260px; }
  .gallery-item.large { grid-column: span 2; }

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

  .insta-strip   { grid-template-columns: repeat(4,1fr); }

  .footer-top    { grid-template-columns: 1fr 1fr; gap: 40px; }

  .hero-fraction { right: 28px; }
}

/* ── Tablet ≤ 768px ── */
@media (max-width: 768px) {
  /* Nav */
  #navbar        { padding: 16px 22px; }
  #navbar.scrolled { padding: 12px 22px; }
  .nav-links     { display: none !important; }
  .hamburger     { display: flex !important; }
  .mobile-nav    { display: flex; }   /* show on mobile */
  .hero-fraction { display: none; }

  /* Hero */
  .hero-content  { padding: 0 22px; max-width: 100%; }
  .hero-title    { font-size: clamp(2.4rem, 8vw, 3.4rem); }
  .hero-subtitle { font-size: 0.92rem; }
  .hero-actions  { gap: 12px; }
  .hero-scroll   { display: none; }

  /* About */
  .about-preview {
    grid-template-columns: 1fr; padding: 60px 22px;
    gap: 50px;
  }
  .about-images  { height: 360px; }
  .about-badge   { width: 88px; height: 88px; top: 20px; right: 20px; }
  .about-badge .num { font-size: 1.5rem; }

  /* Services */
  .services-section { padding: 65px 22px; }
  .services-header  { flex-direction: column; align-items: flex-start; gap: 18px; }
  .services-grid    { grid-template-columns: 1fr; }
  .service-card.large { height: 340px; }
  .service-card     { height: 300px; }

  /* Why */
  .why-section { padding: 65px 22px; }
  .why-grid    { grid-template-columns: 1fr 1fr; gap: 16px; }
  .why-card    { padding: 24px 18px; }

  /* Testimonials */
  .testimonials-section { padding: 65px 22px; }
  .testi-card { padding: 30px 24px; }

  /* Gallery */
  .gallery-intro { padding: 65px 22px 36px; flex-direction: column; align-items: flex-start; gap: 18px; }
  .gallery-grid  {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 200px;
  }
  .gallery-item.large { grid-column: span 2; }

  /* Team */
  .team-section { padding: 65px 22px; }
  .team-grid    { grid-template-columns: 1fr 1fr; }
  .team-card    { height: 320px; }

  /* Insta */
  .insta-strip  { grid-template-columns: repeat(3,1fr); }

  /* CTA */
  .cta-banner   { padding: 65px 22px; }
  .cta-btns     { flex-direction: column; align-items: center; }
  .btn-gold, .btn-outline { width: 100%; max-width: 300px; justify-content: center; }

  /* Footer */
  #footer       { padding: 56px 22px 28px; }
  .footer-top   { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Page hero */
  .page-hero    { padding: 36px 22px; height: 44vh; }
  .page-hero-title { font-size: clamp(2.2rem, 9vw, 3.2rem); }

  /* Services page tabs */
  .services-tabs  { padding: 50px 22px 0; flex-wrap: wrap; gap: 6px; }
  .service-tab    { padding: 11px 18px; font-size: 0.7rem; }
  .services-panels { padding: 40px 22px 70px; }
  .service-panel.services-page-grid { grid-template-columns: 1fr !important; }

  /* About page */
  .about-story-grid { grid-template-columns: 1fr !important; }
  .story-image      { margin-bottom: 0; }
  .story-image img  { height: 320px; }
  .story-image::before { display: none; }
  .vision-grid      { grid-template-columns: 1fr !important; }
  .counters-row     { grid-template-columns: repeat(2,1fr) !important; }
  .team-page-grid   { grid-template-columns: 1fr 1fr !important; }
  .timeline-inner   { grid-template-columns: 1fr; }
  .timeline-line-col, .timeline-event.right { display: none; }
  .timeline-inner > div:nth-child(2) { display: none; }
  .t-spacer { display: none; }

  /* Gallery page */
  .gallery-page-section { padding: 40px 22px 70px; }
  .gallery-filter-bar   { flex-wrap: wrap; gap: 6px; }
  .gallery-filter-btn   { padding: 10px 16px; font-size: 0.7rem; }
  .gallery-masonry      { columns: 2 !important; column-gap: 6px; }
  .ba-grid              { grid-template-columns: 1fr !important; }
  .ba-slider            { height: 300px; }

  /* Contact page */
  .contact-section  { padding: 65px 22px; }
  .contact-grid     { grid-template-columns: 1fr !important; gap: 50px; }
  .book-section     { padding: 65px 22px; }
  .book-form-grid   { grid-template-columns: 1fr !important; }
  .form-row         { grid-template-columns: 1fr !important; gap: 0; }
  .contact-form-wrap { padding: 32px 24px; }
  .map-label        { padding: 20px 22px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .faq-section      { padding: 65px 22px; }
  .faq-grid         { grid-template-columns: 1fr !important; gap: 0; }
  .hours-grid       { grid-template-columns: 1fr !important; }
}

/* ── Mobile ≤ 480px ── */
@media (max-width: 480px) {
  html { font-size: 15px; }

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

  .team-grid    { grid-template-columns: 1fr; }
  .team-card    { height: 360px; }

  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .gallery-item, .gallery-item.large { grid-column: span 1; height: 240px; }

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

  .about-stats  { grid-template-columns: 1fr 1fr; gap: 14px; }

  .mobile-nav a { font-size: 2rem; }

  /* About page counters */
  .counters-row { grid-template-columns: 1fr 1fr !important; }
  .counter-num  { font-size: 3rem; }

  .gallery-masonry { columns: 1 !important; }

  .team-page-grid  { grid-template-columns: 1fr !important; }
  .services-page-grid { grid-template-columns: 1fr !important; }
}

/* ── Very small ≤ 360px ── */
@media (max-width: 360px) {
  #navbar { padding: 14px 16px; }
  .hero-title { font-size: 2.1rem; }
  .nav-logo { font-size: 1.3rem; }
}