/* ==========================================================================
   Cloudycap — responsive.css
   Breakpoint overrides (loaded AFTER style.css so it wins the cascade)
   Breakpoints: 1200 / 992 / 768 / 576
   ========================================================================== */

/* ---- Large laptops (< 1200px) ---- */
@media (max-width: 1199.98px) {
    :root { --section-y: 100px; }
    .container-x { max-width: 992px; }
    .hero-float.f1 { left: 1%; }
    .hero-float.f3 { left: 3%; }
}

/* ---- Tablets (< 992px) ---- */
@media (max-width: 991.98px) {
    :root { --section-y: 88px; }

    /* Collapse desktop nav into a slide-down mobile menu */
    .nav-toggle { display: inline-flex; }
    .nav-menu {
        position: fixed;
        top: 76px;
        left: 16px;
        right: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 16px;
        border-radius: var(--radius-lg);
        background: rgba(10, 12, 20, 0.96);
        backdrop-filter: blur(20px);
        border: 1px solid var(--border-soft);
        box-shadow: var(--shadow-card);
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    }
    .nav-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
    .nav-link-x { padding: 13px 16px; font-size: 1rem; }

    .nav-actions .btn-x { display: none; }
    .nav-menu .btn-x { display: inline-flex; margin-top: 8px; }

    /* Footer becomes 2 columns */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .footer-brand { grid-column: 1 / -1; }

    /* Hide decorative floating cards on smaller screens */
    .hero-float { display: none; }

    /* Bento -> 2 columns; featured tile spans full width, one row */
    .services-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(200px, auto); }
    .bento-lg   { grid-column: span 2; grid-row: span 1; }
    .bento-wide { grid-column: span 2; }
    .bento-lg { padding: 32px; }
}

/* ---- Mobile landscape / small tablets (< 768px) ---- */
@media (max-width: 767.98px) {
    :root { --section-y: 72px; }

    .hero { padding: 150px 0 80px; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn-x { width: 100%; }

    .section-head { margin-bottom: 44px; }
    .glass-card { padding: 26px; }

    /* Stats band tighter padding + row gap for 2x2 layout */
    .stats-band { padding: 40px 24px; }
    .stats-band .row { row-gap: 32px !important; }

    /* Admin: collapse sidebar to a top bar */
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar {
        position: static; height: auto; flex-direction: row; align-items: center;
        gap: 8px; padding: 14px 18px; border-right: 0; border-bottom: 1px solid var(--border-soft);
    }
    .admin-brand { margin-bottom: 0; margin-right: auto; }
    .admin-nav { flex-direction: row; }
    .admin-logout { margin-top: 0; }
    .admin-nav-link { padding: 9px 12px; }
    .admin-main { padding: 26px 18px; }
    .contact-form-wrap, .contact-info { padding: 26px; }

    .footer-bottom { flex-direction: column; text-align: center; }

    /* About mini-stats stack vertically */
    .mv-stats { flex-direction: column; gap: 22px; padding: 26px; }
    .mv-stats .mv-stat + .mv-stat { border-left: 0; border-top: 1px solid var(--border-soft); padding-top: 22px; }
    .logo-item { font-size: 1.02rem; padding: 13px 22px; }
}

/* ---- Mobile portrait (< 576px) ---- */
@media (max-width: 575.98px) {
    .container-x { padding: 0 18px; }
    .brand { font-size: 1.2rem; }
    .brand-mark { width: 34px; height: 34px; }

    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .hero-trust .avatars span { width: 34px; height: 34px; }

    /* Bento -> single column on phones */
    .services-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .bento-lg, .bento-wide { grid-column: span 1; }
    .service-link { opacity: 1; transform: none; } /* tap devices: always show */
}

/* ---- Reduce heavy blur on low-power / small devices for perf ---- */
@media (max-width: 767.98px) {
    .hero-glow { filter: blur(60px); opacity: .4; }
    body::before { opacity: .7; }
}