/*
 * responsive.css — Mobile-first responsive overrides for STTech
 * Covers: Navbar, Hero, Products, Contact, Activities, Footer
 * Breakpoints: 480px (phone) · 640px (large phone) · 768px (tablet) · 1024px (laptop)
 */

/* ══════════════════════════════════════
   GLOBAL MOBILE RESETS
══════════════════════════════════════ */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }

    :root { font-size: 15px; }

    .container { padding: 0 18px; overflow-x: hidden; }

    img, video, canvas, svg { max-width: 100%; height: auto; }

    section.section { padding: 64px 0; }

    .page-hero { padding: 120px 0 60px; }
    .page-hero h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
    .page-hero > .container > p { font-size: 0.95rem; }

    .section-header { margin-bottom: 40px; }
    .section-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }

    h1 { font-size: clamp(1.9rem, 7.5vw, 2.8rem); }
    h2 { font-size: clamp(1.5rem, 5.5vw, 2rem); }
    h3 { font-size: clamp(1.1rem, 4vw, 1.4rem); }
}

@media (max-width: 480px) {
    .container { padding: 0 14px; }
    section.section { padding: 52px 0; }
    .page-hero { padding: 100px 0 48px; }
}

/* ══════════════════════════════════════
   NAVBAR & DRAWER
══════════════════════════════════════ */
@media (max-width: 768px) {
    .nav-links, .nav-actions { display: none !important; }
    .menu-toggle { display: flex !important; align-items: center; }

    /* Drawer opens from right, full-height */
    .nav-drawer {
        width: 100%;
        max-width: 300px;
        padding: 80px 24px 32px;
    }
    .nav-drawer a {
        font-size: 1.05rem;
        padding: 13px 16px;
    }
}

/* ══════════════════════════════════════
   HOME PAGE — Hero
══════════════════════════════════════ */
@media (max-width: 768px) {
    .hero-container {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 28px;
    }
    .label-tag { justify-content: center; margin-left: auto; margin-right: auto; }
    .hero-badge, .hero-ctas, .hero-btns { justify-content: center; }
    .hero-ctas, .hero-btns { flex-direction: column; gap: 10px; width: 100%; max-width: 320px; margin: 0 auto; }
    .hero-ctas .btn, .hero-btns .btn { width: 100%; justify-content: center; }
    
    .hero-visual { height: 320px; margin-top: 20px; }
    .hero-trust { justify-content: center; }

    .news-grid { grid-template-columns: 1fr !important; }
    .services-grid { grid-template-columns: 1fr !important; }
    .about-grid { grid-template-columns: 1fr !important; gap: 40px; }
    .about-visual { max-width: 400px; margin: 0 auto; width: 100%; }
    .stats-container { grid-template-columns: repeat(2, 1fr) !important; gap: 24px; }
    .stat-divider { display: none !important; }

    .cta-inner {
        flex-direction: column !important;
        padding: 36px 24px !important;
        text-align: center;
    }
    .cta-btns { justify-content: center; }
    .partner-logos { gap: 20px; }
    .partner-logo { height: 28px; }
}

@media (max-width: 480px) {
    .mega-title, .hero-title { font-size: 2rem; white-space: normal !important; }
    .mega-title span { white-space: normal !important; }
    .stats-container { grid-template-columns: 1fr 1fr !important; }
    .features-grid { grid-template-columns: 1fr !important; }
    .testimonials-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════
   PRODUCTS PAGE
══════════════════════════════════════ */
@media (max-width: 1024px) {
    .hero-product-section { flex-direction: column !important; gap: 32px; }
    .hero-product-content { max-width: 100%; }
    .hero-product-visual { width: 100%; max-width: 480px; margin: 0 auto; }

    .matrix-grid { grid-template-columns: 1fr !important; gap: 40px; }
    .matrix-visual { max-width: 300px; margin: 0 auto; }

    .showcase-grid { grid-template-columns: 1fr !important; }
    .showcase-card.full-span { grid-column: span 1 !important; }
}

@media (max-width: 768px) {
    .product-filter-bar { flex-wrap: wrap; gap: 6px; justify-content: center; }
    .product-filter-btn { font-size: 0.78rem; padding: 6px 12px; }
    .product-hero-pills { flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
    .dti-features-grid { grid-template-columns: 1fr 1fr !important; }

    .showcase-card { padding: 32px 24px; }
    .showcase-icon-bg { font-size: 6rem !important; right: -20px; bottom: -20px; }
}

@media (max-width: 480px) {
    .dti-features-grid { grid-template-columns: 1fr !important; }
    .showcase-card { padding: 24px 18px; }
    .product-badge { font-size: 0.78rem; }
}

/* ══════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════ */
@media (max-width: 1024px) {
    .contact-layout { grid-template-columns: 1fr !important; }
    .cinfo-cards { grid-template-columns: repeat(2, 1fr) !important; }
    .contact-stat-bar { flex-wrap: wrap; gap: 0; }
    .csb-item { flex: 1 1 50%; border-bottom: 1px solid var(--border); }
    .csb-divider { display: none !important; }
}

@media (max-width: 768px) {
    .hero-contact-pills { flex-wrap: wrap; gap: 8px; justify-content: center; }
    .contact-form-card { padding: 28px 20px; }
    .form-tabs { overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
    .form-tabs::-webkit-scrollbar { display: none; }
    .form-tab { white-space: nowrap; font-size: 0.78rem; }
    .cinfo-cards { grid-template-columns: 1fr !important; }

    /* Apply form (careers section) */
    .apply-card { grid-template-columns: 1fr !important; gap: 32px; padding: 28px 20px !important; }
    .jobs-grid { grid-template-columns: 1fr !important; }
    .job-card { padding: 20px; }
}

@media (max-width: 480px) {
    .csb-item { flex: 1 1 100%; }
    .form-row { grid-template-columns: 1fr !important; }
    .contact-map iframe { height: 240px !important; }
}

/* ══════════════════════════════════════
   ACTIVITIES PAGE
══════════════════════════════════════ */
@media (max-width: 768px) {
    .filter-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 6px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }
    .filter-tabs::-webkit-scrollbar { display: none; }
    .filter-tab { white-space: nowrap; font-size: 0.8rem; padding: 7px 14px; flex-shrink: 0; }

    .activity-grid-wrap { grid-template-columns: 1fr !important; }
    .activity-card { flex-direction: column !important; }
    .ac-icon { width: 44px !important; height: 44px !important; font-size: 1.2rem !important; }
}

@media (max-width: 480px) {
    .filter-tab { font-size: 0.75rem; padding: 6px 12px; }
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 36px;
    }
    .footer-brand { grid-column: span 2; }
}

@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
    }
    .footer-brand { grid-column: span 1; }
    .footer-bottom .container {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    .newsletter-form {
        flex-direction: column;
        padding: 12px;
    }
    .newsletter-form input { padding: 8px 0; }
    .newsletter-form button { width: 100%; }
}

/* ══════════════════════════════════════
   FLOATING CONTACT BUTTONS
══════════════════════════════════════ */
@media (max-width: 768px) {
    .floating-contact {
        bottom: 18px;
        right: 16px;
        gap: 10px;
    }
    .fc-item { width: 48px; height: 48px; font-size: 1.35rem; }
    .fc-item img { width: 26px; height: 26px; }
    .fc-tooltip { display: none; } /* hide tooltip on mobile */
}

/* ══════════════════════════════════════
   GLASS CARD HOVER — disable on touch
══════════════════════════════════════ */
@media (hover: none) {
    .glass-card:hover,
    .surface-card:hover,
    .job-card:hover,
    .showcase-card:hover { transform: none; }
}

/* ══════════════════════════════════════
   CUSTOM CURSOR — hide on mobile/touch
══════════════════════════════════════ */
@media (max-width: 768px) {
    body, a, button, input, select, textarea { cursor: auto !important; }
    .cursor-dot, .cursor-glow { display: none !important; }
}

/* ══════════════════════════════════════
   SECTION PADDING — phone
══════════════════════════════════════ */
@media (max-width: 480px) {
    section.section { padding: 48px 0; }
    .glass-card { border-radius: 16px; }
    .btn-lg { padding: 13px 24px; font-size: 0.95rem; }
}