/* ============================================================
   SpeedBlog Pro v2.0 - Responsive Styles
   Tablet (768-1024px) and Mobile (<768px)
   ============================================================ */

/* ============================================================
   LARGE DESKTOP (< 1280px)
   ============================================================ */
@media (max-width: 1280px) {
    .sb-floating-share { left: 10px; }
    .sb-single-layout { grid-template-columns: 1fr 300px; gap: 40px; }
}

/* ============================================================
   TABLET (<= 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }

    .sb-topbar-center { display: none; }

    .sb-main-header { padding: 16px 0; }
    .sb-header-tagline { display: none; }

    .sb-nav-bar { position: relative; }
    .sb-nav-inner { height: 52px; }
    .sb-primary-menu > li > a { padding: 0 14px; font-size: 13px; }

    /* Floating share hidden on tablet */
    .sb-floating-share { display: none; }

    /* Hero */
    .sb-hero-grid { height: 440px; }
    .sb-hero-main .sb-hero-card-content { padding: 24px; }
    .sb-hero-main .sb-hero-card-title { font-size: 1.75rem; }
    .sb-hero-sub .sb-hero-card-title { font-size: 1rem; }
    .sb-hero-sub .sb-hero-card-content { padding: 20px; }

    /* Grids */
    .sb-card-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .sb-card-grid-4 { grid-template-columns: repeat(2, 1fr); }

    /* Single post layout - sidebar below */
    .sb-single-layout { grid-template-columns: 1fr; gap: 40px; }
    .sb-single-sidebar { max-width: 100%; }
    .sb-single-sidebar-inner { position: static; }
    .sb-single-hero { padding: 80px 0 40px; min-height: 420px; }
    .sb-single-hero-title { font-size: 2.25rem; }

    .sb-single-nav { grid-template-columns: 1fr; gap: 12px; }
    .sb-single-nav-next { text-align: left; }

    /* Archive layout */
    .sb-archive-layout { grid-template-columns: 1fr; gap: 40px; }
    .sb-archive-sidebar .sb-sidebar-inner { position: static; }
    .sb-archive-header { padding: 60px 0 50px; }
    .sb-archive-header-title { font-size: 2.25rem; }

    /* Category sections */
    .sb-category-grid { grid-template-columns: 1fr; gap: 24px; }

    /* Search */
    .sb-search-result { grid-template-columns: 200px 1fr; gap: 20px; padding: 20px; }
    .sb-search-header-title { font-size: 2rem; }

    /* 404 */
    .sb-404-number { font-size: 8rem; }
    .sb-404-categories-grid { grid-template-columns: repeat(2, 1fr); }

    /* Footer */
    .sb-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }

    /* Prefooter CTA */
    .sb-prefooter-cta-inner { grid-template-columns: 1fr; text-align: center; gap: 24px; }
    .sb-prefooter-cta-icon { margin: 0 auto; }
    .sb-prefooter-cta .sb-newsletter-form { max-width: 440px; margin: 0 auto; }
    .sb-prefooter-cta .sb-newsletter-form input { min-width: auto; }
}

/* ============================================================
   MOBILE (<= 767px)
   ============================================================ */
@media (max-width: 767px) {
    h1 { font-size: 1.875rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    body { font-size: 16px; }

    .sb-container { padding: 0 16px; }
    .sb-section { padding: 40px 0; }

    /* Hide top bar on mobile */
    .sb-topbar { display: none; }

    /* Main header */
    .sb-main-header { padding: 14px 0; }
    .sb-main-header-inner { justify-content: center; }
    .sb-logo img { max-height: 44px; }
    .sb-logo a { font-size: 1.5rem; }
    .sb-header-right { display: none; }

    /* Nav bar - show hamburger */
    .sb-nav-inner { height: 52px; justify-content: space-between; }
    .sb-mobile-toggle { display: flex; }
    .sb-nav-menu-wrap { display: none; }
    .sb-nav-actions { gap: 4px; }

    /* Ticker - smaller */
    .sb-ticker { height: 38px; }
    .sb-ticker-inner { height: 38px; }
    .sb-ticker-label { padding: 0 14px; font-size: 10px; height: 38px; }
    .sb-ticker-item { font-size: 12px; }

    /* Hero - stack vertically */
    .sb-hero-section { padding: 24px 0 0; }
    .sb-hero-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        height: auto; gap: 12px;
    }
    .sb-hero-main { grid-row: auto; aspect-ratio: 4/3; }
    .sb-hero-sub { aspect-ratio: 16/9; min-height: 180px; }
    .sb-hero-main .sb-hero-card-title { font-size: 1.4rem; }
    .sb-hero-sub .sb-hero-card-title { font-size: 1rem; }
    .sb-hero-main .sb-hero-card-content { padding: 20px; }

    /* Trending strip */
    .sb-trending-strip-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
    .sb-trending-strip-tags { overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }

    /* Grids - single column */
    .sb-card-grid { gap: 20px; }
    .sb-card-grid-3,
    .sb-card-grid-4 { grid-template-columns: 1fr; }

    /* Section titles */
    .sb-section-title h2 { font-size: 1.4rem; }

    /* Single post */
    .sb-single-hero { padding: 50px 0 30px; min-height: 340px; }
    .sb-single-hero-title { font-size: 1.625rem; }
    .sb-single-hero-excerpt { font-size: 1rem; }
    .sb-single-hero-meta { gap: 16px; padding-top: 18px; }
    .sb-single-hero-meta-details { gap: 14px; font-size: 12px; }

    .sb-article-body { font-size: 1.0625rem; line-height: 1.75; }
    .sb-article-body > p:first-of-type::first-letter { font-size: 3.5rem; padding-right: 8px; }
    .sb-article-body h2 { font-size: 1.5rem; }
    .sb-article-body h3 { font-size: 1.2rem; }
    .sb-article-body blockquote { padding: 18px 20px; font-size: 1.15rem; }

    /* Tags section */
    .sb-single-tags { margin: 30px 0; padding: 18px 0; }

    /* Share bar */
    .sb-single-share-bar { flex-direction: column; align-items: flex-start; padding: 20px; }
    .sb-single-share-bar-buttons { width: 100%; }
    .sb-single-share-bar .sb-share-btn span { display: none; }

    /* Author box - stacked */
    .sb-author-box { flex-direction: column; padding: 24px; text-align: center; }
    .sb-author-box-avatar img { width: 90px; height: 90px; margin: 0 auto; }
    .sb-author-box-footer { flex-direction: column; gap: 14px; text-align: center; }
    .sb-author-box-social { justify-content: center; }

    /* Archive header */
    .sb-archive-header { padding: 40px 0 30px; }
    .sb-archive-header-title { font-size: 1.75rem; }
    .sb-archive-header-desc { font-size: 0.95rem; }
    .sb-archive-author { flex-direction: column; text-align: center; }
    .sb-archive-author img { width: 96px; height: 96px; }

    /* Search */
    .sb-search-header { padding: 40px 0 30px; }
    .sb-search-header-title { font-size: 1.625rem; }
    .sb-search-result { grid-template-columns: 1fr; gap: 14px; }
    .sb-search-result-thumb { aspect-ratio: 16/9; }
    .sb-search-result-title { font-size: 1.25rem; }

    /* 404 */
    .sb-404-section { padding: 50px 0; }
    .sb-404-number { font-size: 5.5rem; }
    .sb-404-title { font-size: 1.75rem; }
    .sb-404-desc { font-size: 1rem; }
    .sb-404-categories-grid { grid-template-columns: 1fr; }
    .sb-404-actions .sb-btn { width: 100%; justify-content: center; }

    /* Page */
    .sb-page-header { padding: 40px 0 30px; }
    .sb-page-header-with-image { padding: 70px 0 30px; min-height: 280px; }
    .sb-page-header-title { font-size: 1.875rem; }

    /* Comments */
    .sb-comment-body { padding: 16px; gap: 12px; flex-direction: column; }
    .sb-comment-avatar img { width: 40px; height: 40px; }
    .sb-comment-list .children { padding-left: 20px; }

    /* Footer */
    .sb-footer { padding: 50px 0 0; }
    .sb-footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 30px; }
    .sb-footer-bottom-inner { flex-direction: column; text-align: center; }

    /* Prefooter CTA */
    .sb-prefooter-cta { padding: 40px 0; }
    .sb-prefooter-cta .sb-newsletter-form { flex-direction: column; background: transparent; padding: 0; }
    .sb-prefooter-cta .sb-newsletter-form input { background: #fff; margin-bottom: 10px; border-radius: var(--sb-radius-sm); }

    /* Newsletter CTA section */
    .sb-newsletter-cta-section { padding: 50px 0; }
    .sb-newsletter-cta-inner h2 { font-size: 1.75rem; }
    .sb-newsletter-form-large { flex-direction: column; background: transparent; padding: 0; }
    .sb-newsletter-form-large input {
        background: #fff; border-radius: var(--sb-radius-sm);
        margin-bottom: 10px; padding: 14px 18px;
    }
    .sb-newsletter-form-large button { width: 100%; }

    /* Back to top button - smaller */
    .sb-back-to-top-btn { bottom: 20px; right: 20px; width: 42px; height: 42px; }

    /* Pagination */
    .sb-pagination a,
    .sb-pagination span { min-width: 40px; height: 40px; font-size: 0.8125rem; }
}

/* ============================================================
   SMALL MOBILE (<= 420px)
   ============================================================ */
@media (max-width: 420px) {
    h1 { font-size: 1.625rem; }
    .sb-single-hero-title { font-size: 1.375rem; }
    .sb-hero-main .sb-hero-card-title { font-size: 1.2rem; }
    .sb-single-hero-author img { width: 40px; height: 40px; }
}

/* ============================================================
   HOVER — disable on touch
   ============================================================ */
@media (hover: none) {
    .sb-card:hover { transform: none; }
    .sb-card:hover .sb-card-image img { transform: none; }
    .sb-hero-card:hover .sb-hero-card-image { transform: none; }
    .sb-btn-primary:hover { transform: none; }
}