/**
 * AEMZ SALON — Responsive Stylesheet
 * Breakpoints tested: 320px, 375px, 430px, 768px, 1024px, 1440px, 1920px
 */

/* ==========================================================================
   TABLET & SMALL DESKTOP (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    .header-nav {
        display: none;
    }

    .mobile-toggle {
        display: flex;
    }

    .editorial-grid {
        gap: 40px;
    }

    .editorial-image-frame img {
        height: 400px;
    }

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

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

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

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

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

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

/* ==========================================================================
   MOBILE & TABLET PORTRAIT (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        --header-height: 70px;
        --topbar-height: 36px;
    }

    body {
        padding-bottom: 60px; /* Space for mobile sticky bottom bar */
    }

    .topbar-brand-pin {
        font-size: 0.72rem;
    }

    .topbar-phone {
        display: none; /* Keep topbar clean on small screens */
    }

    .header-brand .brand-primary {
        font-size: 1.55rem;
    }

    .header-brand .brand-secondary {
        font-size: 1.15rem;
    }

    .header-actions .btn-book-header {
        display: none; /* Handled by mobile drawer & bottom bar */
    }

    .aemz-hero {
        min-height: 80vh;
        padding-top: calc(var(--header-height) + var(--topbar-height) + 20px);
        padding-bottom: 50px;
    }

    .hero-title {
        font-size: 2.35rem;
    }

    .hero-tagline {
        font-size: 1.35rem;
    }

    .hero-desc {
        font-size: 0.98rem;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .section-padding {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .section-title {
        font-size: 1.85rem;
    }

    .editorial-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .editorial-image-frame img {
        height: 320px;
    }

    .services-grid-3 {
        grid-template-columns: 1fr;
    }

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

    .selfcare-grid-4 {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .gallery-item {
        height: 200px;
    }

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

    .insta-item {
        height: 160px;
    }

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

    .map-container {
        height: 320px;
    }

    .location-info-card {
        padding: 24px;
    }

    .cta-banner-title {
        font-size: 2rem;
    }

    .form-grid-2 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-actions-split {
        grid-template-columns: 1fr;
    }

    .booking-form-card {
        padding: 24px 18px;
    }

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

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    /* Floating WhatsApp on mobile */
    .aemz-floating-whatsapp {
        bottom: 74px;
        right: 18px;
    }

    .wa-icon-box {
        width: 50px;
        height: 50px;
    }

    .wa-icon-box svg {
        width: 24px;
        height: 24px;
    }

    .wa-tooltip {
        display: none;
    }

    .aemz-back-to-top {
        bottom: 135px;
        right: 22px;
        width: 38px;
        height: 38px;
    }

    /* Show Mobile Booking Bar */
    .mobile-booking-bar {
        display: flex;
        gap: 8px;
    }

    /* Comparison Slider on mobile */
    .comparison-slider-container {
        aspect-ratio: 4 / 3;
    }

    .slider-handle-circle {
        width: 34px;
        height: 34px;
    }

    .lightbox-prev { left: 10px; }
    .lightbox-next { right: 10px; }
    .lightbox-nav-btn {
        width: 38px;
        height: 38px;
    }
}

/* ==========================================================================
   EXTRA SMALL MOBILE (<= 375px)
   ========================================================================== */
@media (max-width: 375px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-tagline {
        font-size: 1.15rem;
    }

    .section-title {
        font-size: 1.6rem;
    }

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

    .service-card-actions {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   LARGE MONITORS (>= 1440px)
   ========================================================================== */
@media (min-width: 1440px) {
    :root {
        --container-width: 1340px;
    }

    .hero-title {
        font-size: 4rem;
    }

    .editorial-image-frame img {
        height: 520px;
    }
}