/* ==========================================================================
   MEL THE MASTER BARBER — RESPONSIVE MEDIA QUERIES & MOBILE REFINEMENT
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MOBILE NAVBAR exact layout requirement:
   [ LOGO ]        [ THEME TOGGLE ] [ MENU ]
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .section-padding {
    padding: var(--section-padding-mobile) 0;
  }

  .navbar-floating-container {
    padding: 0.5rem 1.15rem;
    width: 95%;
  }

  .mobile-nav-controls {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
  }

  .mobile-slide-menu,
  .navbar-collapse-custom {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    background-color: var(--bg-card);
    border-left: 1px solid var(--border-subtle);
    padding: 5.5rem 2rem 2rem 2rem;
    transition: right var(--transition-smooth);
    z-index: 999;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
  }

  .mobile-slide-menu.show,
  .navbar-collapse-custom.show {
    right: 0;
  }

  .nav-link-custom {
    display: block;
    margin: 1.25rem 0;
    font-size: 1.05rem;
  }

  .hero-side-nav {
    padding: 0 0.5rem;
  }

  .hero-side-btn {
    width: 38px;
    height: 38px;
  }

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

  .gallery-item-large, .gallery-item-small {
    grid-column: span 6;
  }

  .footer-brand-statement {
    font-size: 1.75rem;
  }
}

/* --------------------------------------------------------------------------
   2. SMALL MOBILE BREAKPOINTS (320px, 360px, 375px, 390px, 414px)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .hero-headline {
    font-size: 1.95rem;
    line-height: 1.2;
  }

  .hero-description {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }

  .hero-cta-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  .btn-gold-primary, .btn-gold-outline {
    width: 100%;
    padding: 0.85rem 1.25rem;
    font-size: 0.78rem;
  }

  .testimonial-card {
    padding: 1.75rem 1.25rem;
  }

  .footer-brand-statement {
    font-size: 1.5rem;
    text-align: left !important;
  }

  /* Footer Mobile Alignment Fix (320px - 430px) */
  .footer-custom,
  .footer-custom .text-center {
    text-align: left !important;
  }

  .footer-custom .justify-content-center,
  .footer-custom .footer-social-links {
    justify-content: flex-start !important;
  }
}

/* --------------------------------------------------------------------------
   3. DESKTOP & LARGE BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .gallery-item-large {
    grid-column: span 8;
  }
  
  .gallery-item-small {
    grid-column: span 4;
  }

  .hero-cta-group {
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }
}