/* ================================================================
   Tecon Clone - Responsive CSS
   Breakpoints: 1400, 1200, 992, 768, 560
   ================================================================ */

/* ── Large Desktop ─────────────────────────────────────────────── */
@media (max-width: 1400px) {
    .wrapper  { padding: 0 20px; }
    .banner-info h3 { font-size: 48px; }
    .banner-info .sub { font-size: 26px; }
    .primary-nav > ul > li > a { padding: 0 16px; font-size: 15px; }
    .stats-grid { gap: 20px; }
}

/* ── Desktop ─────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .products-grid { grid-template-columns: repeat(3, 1fr); }
    .section-title { font-size: 34px; }
    .hero-banner { height: 560px; }
    .banner-info h3 { font-size: 40px; }
    .banner-info .sub { font-size: 22px; }
    .footer-links { grid-template-columns: repeat(2, 1fr); }
    .hp1-item { height: 420px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-number { font-size: 44px; }
    .about-grid { gap: 40px; }
}

/* ── Tablet ──────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    .page-wrapper { padding-top: 70px; }
    .header-inner { height: 70px; }

    /* Hide desktop nav */
    .primary-nav { display: none; }
    .hamburger   { display: flex; }

    /* Banner */
    .hero-banner { height: 450px; }
    .banner-info { padding: 0 30px 40px; }
    .banner-info h3 { font-size: 34px; }
    .banner-info .sub { font-size: 18px; }

    /* Products accordion */
    .hp1-item { height: 350px; }
    .hp1-txt .hp1-title { font-size: 22px; }

    /* About */
    .about-grid { grid-template-columns: 1fr; }
    .about-img  { display: none; }

    /* Services */
    .hp6-item { flex-wrap: wrap; }
    .hp6-list { flex: 0 0 50%; border-bottom: 1px solid rgba(255,255,255,0.1); }

    /* News grid */
    .hp7-item { grid-template-columns: 1fr; }
    .news-grid { grid-template-columns: repeat(2, 1fr); }

    /* Single page */
    .single-layout  { grid-template-columns: 1fr; }
    .contact-grid   { grid-template-columns: 1fr; }
    .products-grid  { grid-template-columns: repeat(2, 1fr); }

    /* Footer */
    .footer-top { grid-template-columns: 1fr; }
}

/* ── Mobile Large ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .section-title { font-size: 28px; }
    .tbox p        { font-size: 16px; }
    .btn           { padding: 12px 22px; font-size: 14px; }

    /* Banner - single slide on mobile */
    .hero-banner { height: 380px; }

    .banner-options {
        position: relative;
    }

    .banner-option {
        position: absolute !important;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        flex: none !important;
        width: 100% !important;
    }

    .banner-option.active {
        opacity: 1;
        pointer-events: auto;
    }

    .banner-info { padding: 0 20px 30px; }
    .banner-info h3 { font-size: 28px; }
    .banner-info .sub { font-size: 16px; }

    /* Products accordion → simple grid on mobile */
    .hp1-item { display: grid; grid-template-columns: 1fr; height: auto; gap: 16px; }

    .hp1-list {
        flex: none !important;
        width: 100% !important;
        height: 200px;
        border-radius: var(--border-radius);
    }

    .hp1-list:not(.active) .hp1-before { writing-mode: horizontal-tb; transform: none; }
    .hp1-list .hp1-txt { display: block !important; }
    .hp1-list .hp1-box { justify-content: flex-end; }

    /* Stats */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .stat-number { font-size: 36px; }

    /* Services */
    .hp6-list { flex: 0 0 100%; }

    /* News */
    .hp7-item  { grid-template-columns: 1fr; }
    .news-grid { grid-template-columns: 1fr; }

    .tab-btn { font-size: 22px; }

    /* Products */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

    /* Footer */
    .footer-links { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }

    /* Page hero */
    .page-hero { height: 220px; }
    .page-hero-title { font-size: 30px; }

    /* Form row */
    .form-row { grid-template-columns: 1fr; }

    /* Contact */
    .contact-grid { grid-template-columns: 1fr; }

    /* Search result */
    .search-result-item { flex-direction: column; }

    /* Social float */
    .social-float { right: 12px; bottom: 80px; }
    .social-float-toggle { width: 46px; height: 46px; font-size: 18px; }
    .social-float-icon   { width: 40px; height: 40px; font-size: 16px; }
    .social-float-label  { display: none; }
}

/* ── Mobile Small ─────────────────────────────────────────────── */
@media (max-width: 560px) {
    .section-title { font-size: 24px; }
    .hero-banner   { height: 320px; }
    .banner-info h3 { font-size: 24px; }
    .banner-info .sub { font-size: 14px; margin-bottom: 16px; }

    .hpart1, .hpart3, .hpart5 { padding: 60px 0; }
    .hpart2, .hpart4 { padding: 50px 0; }

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

    .tab-header { flex-direction: column; gap: 0; }
    .tab-btn    { font-size: 18px; }

    .stat-number { font-size: 32px; }

    .site-logo img { max-height: 45px; }

    .page-hero { height: 180px; }
    .page-hero-title { font-size: 24px; }

    .single-title { font-size: 24px; }
}

/* ── Print ───────────────────────────────────────────────────────── */
@media print {
    .site-header, .social-float, .back-to-top, .mobile-menu,
    .mobile-menu-overlay, .search-modal, .form-popup-overlay { display: none !important; }
    .page-wrapper { padding-top: 0; }
    body { font-size: 12px; }
}