/* ═══════════════════════════════════════════════════════
   KAYA PEYZAJ — Responsive Styles (Mobile-First)
   ═══════════════════════════════════════════════════════ */

/* ─── Tablet and Below (≤ 1024px) ─── */
@media (max-width: 1024px) {
    .nav-links {
        display: none;
    }

    .nav-cta {
        display: none !important;
    }

    .hamburger {
        display: flex;
    }

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

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }

    .footer-brand {
        grid-column: span 2;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .section {
        padding: 80px 0;
    }

    .wow-section {
        padding: 100px 0;
    }
}

/* ─── Mobile (≤ 768px) ─── */
@media (max-width: 768px) {
    :root {
        --container-padding: 20px;
    }

    .mobile-bottom-bar {
        display: flex;
    }

    body {
        padding-bottom: 72px;
    }

    .whatsapp-sticky {
        bottom: 84px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

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

    .stat-card::after {
        right: 20%;
        top: auto;
        bottom: 0;
        height: 1px;
        width: 60%;
    }

    .stat-card:last-child::after {
        display: none;
    }

    .hero-content {
        padding: var(--space-3xl) var(--container-padding);
    }

    .hero-title {
        font-size: clamp(2rem, 6vw, 3rem);
    }

    .hero-title br {
        display: none;
    }

    .hero-ctas {
        flex-direction: column;
        align-items: center;
    }

    .hero-ctas .btn {
        width: 100%;
        max-width: 320px;
    }

    .trust-badges {
        gap: var(--space-sm);
    }

    .trust-badge {
        padding: 8px 16px;
        font-size: var(--fs-xs);
    }

    .section-header {
        margin-bottom: var(--space-2xl);
    }

    .before-after-container {
        aspect-ratio: 4 / 3;
    }

    .testimonial-card {
        padding: var(--space-lg);
    }

    .testimonial-text::before {
        display: none;
    }

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

    .footer-brand {
        grid-column: span 1;
    }

    .popup-panel {
        width: 100vw;
        padding: var(--space-lg);
    }

    .popup-close.active {
        position: fixed;
    }

    .gallery-filters {
        gap: 6px;
    }

    .filter-btn {
        padding: 8px 16px;
        font-size: var(--fs-xs);
    }

    .contact-ctas {
        flex-direction: column;
    }

    .contact-ctas .btn {
        width: 100%;
    }
}

/* ─── Small Mobile (≤ 480px) ─── */
@media (max-width: 480px) {
    .services-grid {
        grid-template-columns: 1fr;
    }

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

    .hero-scroll-indicator {
        display: none;
    }

    .wow-text {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }

    .stats-section {
        padding: 60px 0;
    }

    .stat-number {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .mobile-menu {
        width: 100vw;
        max-width: 100vw;
    }

    .ba-label {
        font-size: 0.65rem;
        padding: 6px 10px;
    }

    .ba-handle-circle {
        width: 40px;
        height: 40px;
    }

    .contact-form-card {
        padding: var(--space-lg);
    }

    .hero-badge .badge {
        font-size: var(--fs-xs);
        padding: 6px 14px;
    }
}

/* ─── Large Desktop (≥ 1280px) ─── */
@media (min-width: 1280px) {
    .hero-content {
        max-width: 920px;
    }

    .services-grid {
        gap: var(--space-xl);
    }
}

/* ─── Touch Device Optimizations ─── */
@media (hover: none) {
    .gallery-item-overlay {
        opacity: 1;
        background: linear-gradient(
            to top,
            rgba(10, 31, 19, 0.7) 0%,
            transparent 50%
        );
    }

    .service-card:hover {
        transform: none;
    }

    .btn:hover {
        transform: none;
    }
}

/* ─── Safe Areas (Notch devices) ─── */
@supports (padding: env(safe-area-inset-bottom)) {
    .mobile-bottom-bar {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .footer {
        padding-bottom: env(safe-area-inset-bottom);
    }
}