/* ============================================================
   12-responsive.css
   Mobile-first breakpoints, mobile menu, hamburger, grids stack.
   v2.4.0 — enhanced for new components
   ============================================================ */

/* Tablet and below */
@media (max-width: 960px) {
        .ss-footer__grid { grid-template-columns: 1fr 1fr; }

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

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

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

        .ss-project-results,
        .ss-benefits { grid-template-columns: 1fr; }

        .ss-web-express { grid-template-columns: 1fr; }

        .ss-funnel { grid-template-columns: 1fr; }

        .ss-scope { grid-template-columns: 1fr; }

        .ss-service-hero__grid { grid-template-columns: 1fr; }

        .ss-project-hero__grid { grid-template-columns: 1fr; }

        /* Contact grid */
        .ss-contact-grid { grid-template-columns: 1fr; }
        .ss-contact-sidebar { position: static; }

        /* Blog grid */
        .ss-blog-grid { grid-template-columns: repeat(2, 1fr); }

        /* Service cards v2 */
        .ss-services-overview-grid__list { grid-template-columns: repeat(2, 1fr); }

        /* Comparison table scroll */
        .ss-services-compare__scroll {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                margin: 0 calc(-1 * var(--ss-gutter));
                padding: 0 var(--ss-gutter);
        }
}

/* Mobile */
@media (max-width: 720px) {
        /* Hide desktop nav, show toggle */
        .ss-nav { display: none; }
        .ss-nav-toggle { display: inline-flex; }

        /* Hero stacks */
        .ss-hero__grid { grid-template-columns: 1fr; }
        .ss-hero__title { font-size: clamp(2rem, 9vw, 3rem); }

        /* Grids become single column */
        .ss-grid--2,
        .ss-grid--3,
        .ss-grid--4,
        .ss-services-grid,
        .ss-projects-grid,
        .ss-blog-grid,
        .ss-form__grid,
        .ss-project-gallery {
                grid-template-columns: 1fr;
        }

        .ss-process { grid-template-columns: 1fr; }

        /* Floater positioning cleanup */
        .ss-floater--web,
        .ss-floater--wa,
        .ss-floater--crm,
        .ss-floater--ia {
                display: none;
        }

        /* Footer stacks */
        .ss-footer__grid { grid-template-columns: 1fr; }
        .ss-footer__bottom { flex-direction: column; align-items: flex-start; }

        /* Section spacing */
        .ss-section { padding-block: var(--ss-space-7); }

        /* Type */
        .ss-section__title { font-size: var(--ss-fs-2xl); }

        /* Forms */
        .ss-form { padding: var(--ss-space-4); }

        /* Hero actions stack on mobile */
        .ss-archive-hero__actions,
        .ss-service-hero__actions,
        .ss-services-overview-hero__actions,
        .ss-service-cta__actions {
                flex-direction: column;
                align-items: stretch;
        }
        .ss-service-cta__actions {
                text-align: center;
        }
        .ss-archive-hero__trust,
        .ss-service-hero__trust,
        .ss-services-overview-hero__trust {
                flex-direction: column;
                gap: var(--ss-space-2);
        }
        .ss-contact-form-head {
                text-align: center;
        }
        .ss-contact-form-head .ss-section__subtitle {
                margin-inline: auto;
        }

        /* Service scope grid */
        .ss-service-scope__grid { grid-template-columns: 1fr; }
        .ss-service-packages__grid { grid-template-columns: 1fr; }
        .ss-service-benefits__grid { grid-template-columns: 1fr; }

        /* Article content width */
        .ss-container--narrow {
                max-width: 720px;
                margin-inline: auto;
        }

        /* Blog hero category chips */
        .ss-blog-chips { justify-content: center; }
        .ss-blog-hero__actions { flex-direction: column; }
}

/* ---- Mobile menu: stack panels vertically on small screens ---- */
@media (max-width: 767px) {
        .ss-mobile-menu {
                flex-direction: column;
        }
        .ss-mobile-menu__panel-left {
                flex: none;
                height: 60%;
                border-right: none;
                border-bottom: 1px solid rgba(247, 245, 242, 0.1);
        }
        .ss-mobile-menu__panel-right {
                flex: none;
                height: 40%;
        }
        .ss-mobile-menu__nav-link {
                font-size: 1.5rem;
        }
        .ss-mobile-menu__brand-desc {
                font-size: var(--ss-fs-sm);
        }
}

/* Lock scroll when mobile menu open */
body.ss-menu-open {
        overflow: hidden;
}

/* Very small phones */
@media (max-width: 380px) {
        .ss-hero__title { font-size: 1.85rem; }
        .ss-section__title { font-size: var(--ss-fs-xl); }
}

/* Print */
@media print {
        .ss-header,
        .ss-footer,
        .ss-mobile-menu,
        .ss-nav-toggle,
        .ss-cta--whatsapp,
        .ss-final-cta {
                display: none !important;
        }

        body { background: #fff; color: #000; }
        .ss-card, .ss-service-card, .ss-package, .ss-post-card, .ss-project-card {
                box-shadow: none; border-color: #ccc;
        }
}

/* prefers-contrast */
@media (prefers-contrast: more) {
        .ss-cta { box-shadow: 0 0 0 2px var(--ss-black); }
        .ss-card, .ss-service-card, .ss-package { border-width: 2px; }
}