/**
 * Kuwin Clone SEO — Responsive Overrides
 * Supplementary media queries to complement style.css
 * @package kuwin-clone-seo
 * @version 1.0.0
 */

/* ========================================
   Extra Small Devices (max 575.98px)
   ======================================== */
@media (max-width: 575.98px) {
    /* Navbar */
    .navbar-kuwin .brand-logo-main { height: 28px; }
    .navbar-kuwin .brand-logo-sub  { height: 22px; }
    .navbar-kuwin .brand-divider   { height: 22px; width: 2px; }
    .btn-kuwin-download.btn-sm { font-size: .78rem; padding: 5px 12px; }

    /* Hero */
    .hero-section { padding: 28px 0 36px; }
    .hero-logo-wrap img { height: 36px; }
    .hero-divider { height: 32px; }
    .hero-tagline { font-size: .88rem; }
    .hero-promo-banner { font-size: .85rem; padding: 10px 18px; }

    /* Slot grid — single column */
    .slot-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 20px 0;
    }

    /* Action grid — 2 columns */
    .action-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 20px 0;
    }
    .action-btn { padding: 14px 8px; font-size: .75rem; }
    .action-btn svg, .action-btn i { font-size: 1.5rem; }

    /* App download */
    .app-download-section { padding: 36px 0; }
    .app-download-section h2 { font-size: 1.2rem; }
    .btn-app-dl { font-size: .82rem; padding: 9px 20px; }

    /* Single post */
    .single-content-section .article-title { font-size: 1.25rem; }
    .single-content-section .article-body h2 { font-size: 1.15rem; }
    .single-content-section .article-body h3 { font-size: 1rem; }

    /* Footer */
    .site-footer { padding: 32px 0 0; }
    .trust-badge-item { font-size: .72rem; padding: 6px 12px; }

    /* Floating elements */
    .floating-lucky-btn { font-size: .78rem; padding: 8px 14px; bottom: 14px; left: 14px; }
    #backToTop { bottom: 72px; right: 14px; width: 40px; height: 40px; font-size: 1rem; }

    /* Share bar */
    .share-bar { gap: 6px; }
    .share-btn { font-size: .75rem; padding: 5px 10px; }

    /* SEO content */
    .seo-content-area { padding: 24px 0; }
    .seo-content-area h2 { font-size: 1.15rem; }
}

/* ========================================
   Small Devices — Landscape (576px – 767.98px)
   ======================================== */
@media (min-width: 576px) and (max-width: 767.98px) {
    .slot-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .action-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .hero-section { padding: 36px 0 44px; }
    .single-content-section .article-title { font-size: 1.45rem; }
}

/* ========================================
   Medium Devices (768px – 1023.98px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .navbar-kuwin .brand-logo-main { height: 32px; }
    .navbar-kuwin .brand-logo-sub  { height: 26px; }

    .slot-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
    .action-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .article-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-section { padding: 44px 0 52px; }
    .app-download-section { padding: 48px 0; }
}

/* ========================================
   Large Devices (1024px – 1279.98px)
   ======================================== */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .slot-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .action-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    .article-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   Extra Large Devices (1280px+)
   ======================================== */
@media (min-width: 1280px) {
    .container-lg { max-width: 1260px; }
    .article-card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .navbar-kuwin,
    .site-footer,
    #backToTop,
    .floating-lucky-btn,
    .floating-social,
    .share-bar,
    .app-download-section,
    .seo-content-area { display: none !important; }
    body { background: #fff; color: #000; }
    .single-content-section { padding: 0; }
    .article-title { font-size: 1.5rem !important; color: #000 !important; }
}