/* ═══════════════════════════════════════════════════════════════════════
   OAK STUDIO — Responsive Styles
   Breakpoints: 1400, 1200, 1024, 768, 576, 480
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Desktop Large (≤1400px) ─────────────────────────────────────────── */
@media (max-width: 1400px) {
    .hero__decoration {
        width: 280px;
        height: 280px;
        right: 3%;
    }

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

/* ── Desktop (≤1200px) ───────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

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

    .stats__item:nth-child(4)::before {
        display: none;
    }

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

    .footer__brand {
        grid-column: 1 / -1;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Tablet (≤1024px) ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .navbar__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 400px;
        height: 100vh;
        background: rgba(5, 5, 5, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: var(--space-3xl);
        gap: var(--space-2xl);
        transition: right var(--dur-slow) var(--ease-out);
        border-left: 1px solid var(--color-border);
    }

    .navbar__menu.open {
        right: 0;
    }

    .navbar__links {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-lg);
    }

    .nav-link {
        font-size: var(--fs-h4);
    }

    .navbar__toggle {
        display: flex;
    }

    .hero__decoration {
        width: 200px;
        height: 200px;
        opacity: 0.08;
    }

    .hero__social {
        display: none;
    }

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

    .about__left {
        padding: var(--space-3xl) var(--container-pad) !important;
    }

    .about__right {
        padding: var(--space-3xl) var(--container-pad) !important;
    }

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

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

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

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

/* ── Mobile Large (≤768px) ───────────────────────────────────────────── */
@media (max-width: 768px) {

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

    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero__title {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }

    .hero__decoration {
        display: none;
    }

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

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

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

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

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

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

    .stats__item::before {
        display: none !important;
    }

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

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

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

    .footer__bottom {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }

    .footer__legal {
        gap: var(--space-lg);
    }

    .cta__decoration {
        display: none;
    }

    .about__image-container {
        display: none !important;
    }
}

/* ── Mobile (≤576px) ─────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .hero {
        padding-top: 80px;
    }

    .hero__buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero__buttons .btn {
        width: 100%;
        justify-content: center;
    }

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

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

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

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

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

    .navbar__menu {
        width: 100%;
        max-width: 100%;
    }

    /* Prevent mobile banner overlap by shifting Free Website Popup to vertical center */
    .free-website-popup {
        top: 40% !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        width: calc(100% - 40px) !important;
        max-width: 380px !important;
        transform: translate(-50%, -40%) !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 20px rgba(47, 84, 255, 0.15) !important;
        z-index: 10001 !important;
    }

    .free-website-popup.active {
        transform: translate(-50%, -50%) !important;
    }
}

/* ── Mobile Small (≤480px) ───────────────────────────────────────────── */
@media (max-width: 480px) {
    :root {
        --container-pad: 1.25rem;
    }

    .hero__label {
        font-size: 0.625rem;
    }

    .section-label {
        font-size: 0.625rem;
    }
}

/* ── Cursor hidden on touch ──────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .cursor {
        display: none !important;
    }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .floating-icon,
    .hero__decoration {
        animation: none;
    }

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1;
        transform: none;
    }
}