/*
 * ShotCamera — Global Mobile Responsive CSS
 * Covers: header, footer, homepage, single, archive,
 *         about, contact, gear, tutorials, camera-reviews,
 *         lens-reviews, write-for-us, 404
 * Breakpoints: 1024px | 768px | 480px | 360px
 */

/* ============================================================
   0. BASE — Prevent horizontal overflow on ALL pages
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
img, video, iframe, embed { max-width: 100%; height: auto; }
table { width: 100%; overflow-x: auto; display: block; }

/* ============================================================
   1. HEADER — Top Bar + Primary Nav
   ============================================================ */
@media (max-width: 768px) {
    /* Top bar: stack items */
    .sc-topbar .sc-container {
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
        padding: 8px 16px;
    }
    .sc-topbar__tagline { font-size: .78rem; }
    .sc-topbar__links { gap: 12px; flex-wrap: wrap; }
    .sc-topbar__links a { font-size: .78rem; }
    .sc-topbar__wfu { font-size: .78rem !important; }

    /* Header main */
    .sc-header-main { padding: 10px 0; }
    .sc-header-inner { gap: 12px; }

    /* Logo smaller */
    .sc-logo svg { width: 38px !important; height: 38px !important; }
}

@media (max-width: 480px) {
    .sc-topbar { display: none; } /* Hide top bar on very small screens */
    .sc-container { padding: 0 14px; }
}

/* ============================================================
   2. FOOTER
   ============================================================ */
@media (max-width: 1024px) {
    .sc-footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .sc-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .sc-footer__grid { grid-template-columns: 1fr; gap: 28px; }
    .sc-footer__main { padding: 40px 0 30px; }
    .sc-footer__bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    .sc-social__links { justify-content: center; }
    .sc-newsletter { flex-direction: column; gap: 10px; }
    .sc-newsletter__input { border-radius: 8px !important; }
    .sc-newsletter__btn { border-radius: 8px !important; width: 100%; }
}

/* ============================================================
   3. GLOBAL PAGE COMPONENTS
   ============================================================ */

/* Page hero */
@media (max-width: 768px) {
    .sc-page-hero { padding: 40px 0 36px; }
    .sc-page-hero h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
    .sc-page-hero p { font-size: .95rem; }
    .sc-breadcrumb { font-size: .82rem; }
}

/* Section spacing */
@media (max-width: 768px) {
    .sc-section { padding: 50px 0 !important; }
    .sc-section-header h2 { font-size: clamp(1.4rem, 4vw, 2rem); }
    .sc-section-header p { font-size: .93rem; }
}
@media (max-width: 480px) {
    .sc-section { padding: 36px 0 !important; }
}

/* 4-column grid → 2 col → 1 col */
@media (max-width: 900px) {
    .sc-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 500px) {
    .sc-grid-4 { grid-template-columns: 1fr !important; }
}

/* Value cards */
@media (max-width: 500px) {
    .sc-value-card { padding: 22px 18px; }
    .sc-value-card__icon { font-size: 1.8rem; }
    .sc-value-card h3 { font-size: 1rem; }
}

/* CTA Strip */
@media (max-width: 768px) {
    .sc-cta-strip { padding: 40px 0; }
    .sc-cta-strip__inner {
        flex-direction: column !important;
        text-align: center;
        gap: 22px;
    }
    .sc-cta-strip__inner h2 { font-size: 1.3rem; }
    .sc-cta-strip__inner .btn-primary { align-self: center; }
}

/* Buttons */
@media (max-width: 480px) {
    .btn-primary, .btn-secondary {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ============================================================
   4. HOMEPAGE (index.php)
   ============================================================ */
@media (max-width: 768px) {
    /* Hero */
    .hero-section {
        min-height: 85vh;
        background-attachment: scroll !important;
    }
    .hero-content { padding: 0 18px; }
    .hero-title { font-size: clamp(2.2rem, 7vw, 3.8rem) !important; }
    .hero-description { font-size: 1rem; }
    .hero-buttons { flex-direction: column; align-items: center; gap: 12px; }
    .btn-hero-primary, .btn-hero-secondary {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    .hero-stats { padding: 14px 22px; gap: 16px; flex-wrap: wrap; }
    .stat-num { font-size: 1.3rem; }

    /* Sections */
    .reviews-section, .trends-section, .articles-section { padding: 60px 0 !important; }

    /* Categories */
    .categories-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
    .categories-banner { padding: 50px 0; }

    /* Articles */
    .articles-grid { grid-template-columns: 1fr !important; }
    .article-card-image { height: 200px; }

    /* CTA */
    .cta-inner { flex-direction: column !important; text-align: center; gap: 28px; }
    .cta-text h2 { font-size: 1.4rem; }
    .cta-form { flex-direction: column; width: 100%; min-width: unset !important; }
    .cta-input, .cta-btn { width: 100%; }
}

@media (max-width: 480px) {
    .hero-section { min-height: 92vh; }
    .hero-badge { font-size: .73rem; padding: 8px 14px; letter-spacing: .8px; }
    .hero-stats { flex-direction: column; gap: 12px; }
    .stat-divider { width: 50px; height: 1px; }
    .categories-grid { gap: 10px; }
    .cat-card__icon-wrap { padding: 20px 16px 16px; font-size: 2rem; }
    .cat-card__body { padding: 14px 16px 18px; }
    .cat-card h3 { font-size: .93rem; }
}

@media (max-width: 360px) {
    .categories-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   5. SINGLE POST (single.php)
   ============================================================ */
@media (max-width: 900px) {
    .single-layout {
        grid-template-columns: 1fr !important;
    }
    .single-sidebar { display: none; } /* Hide sidebar on mobile */
    .single-post-main { max-width: 100%; }
}

@media (max-width: 768px) {
    .single-title { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
    .single-featured-image { border-radius: 10px; margin-bottom: 24px; }
    .single-meta { flex-wrap: wrap; gap: 10px; font-size: .82rem; }
    .single-content { font-size: .97rem; line-height: 1.75; }
    .single-content h2 { font-size: 1.3rem; }
    .single-content h3 { font-size: 1.1rem; }
    .single-tags { flex-wrap: wrap; gap: 8px; }
    .single-cats { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 480px) {
    .single-article { padding: 0; }
    .single-header { margin-bottom: 20px; }
    .single-meta-item { font-size: .8rem; }
}

/* ============================================================
   6. ARCHIVE (archive.php)
   ============================================================ */
@media (max-width: 900px) {
    .sc-archive-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px; }
}

@media (max-width: 600px) {
    .sc-archive-grid { grid-template-columns: 1fr !important; }
    .sc-archive-card__img { height: 200px; }
    .sc-archive-card__body { padding: 18px; }
    .sc-archive-card__title a { font-size: 1rem; }
    .sc-pagination { flex-wrap: wrap; gap: 6px; justify-content: center; }
}

/* ============================================================
   7. ABOUT PAGE (page-about.php)
   ============================================================ */
@media (max-width: 900px) {
    .sc-split {
        grid-template-columns: 1fr !important;
        gap: 28px;
    }
    .sc-split__image { order: -1; }
    .sc-split__image img { border-radius: 12px; width: 100%; max-height: 320px; object-fit: cover; }
    .sc-team-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px; }
    .sc-stats-row { flex-wrap: wrap; gap: 16px; }
}

@media (max-width: 580px) {
    .sc-team-grid { grid-template-columns: 1fr !important; }
    .sc-team-card { text-align: center; }
    .sc-team-card__img { margin: 0 auto 16px; }
    .sc-split__text h2 { font-size: 1.4rem; }
    .sc-stats-row { justify-content: center; }
    .sc-stat { text-align: center; min-width: 80px; }
}

/* ============================================================
   8. CONTACT PAGE (page-contact.php)
   ============================================================ */
@media (max-width: 900px) {
    .sc-contact-grid { grid-template-columns: 1fr !important; gap: 32px; }
    .sc-contact-cards { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
    .sc-contact-form-wrap { padding: 24px 20px; }
    .sc-form-row--2col { grid-template-columns: 1fr !important; gap: 0; }
    .sc-contact-card { flex-direction: row; align-items: center; gap: 14px; padding: 18px; }
    .sc-contact-card__icon { width: 44px; height: 44px; font-size: 1.2rem; flex-shrink: 0; }
}

@media (max-width: 480px) {
    .sc-contact-form input,
    .sc-contact-form select,
    .sc-contact-form textarea { font-size: 16px; } /* Prevent iOS zoom */
    .sc-form-submit { width: 100%; }
}

/* ============================================================
   9. CAMERA REVIEWS, LENS REVIEWS, GEAR, TUTORIALS PAGES
   ============================================================ */
@media (max-width: 900px) {
    /* Filter bars */
    .sc-filter-bar,
    [class*="filter-bar"],
    [class*="sc-filters"] {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
    [class*="filter-select"],
    [class*="sc-select"] { width: 100% !important; }

    /* Review grids */
    [class*="sc-reviews-grid"],
    [class*="sc-gear-grid"],
    [class*="sc-tutorials-grid"],
    [class*="sc-lens-grid"],
    [class*="sc-camera-grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }
}

@media (max-width: 600px) {
    [class*="sc-reviews-grid"],
    [class*="sc-gear-grid"],
    [class*="sc-tutorials-grid"],
    [class*="sc-lens-grid"],
    [class*="sc-camera-grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Rating/score badges */
    [class*="sc-rating"],
    [class*="sc-score"] { font-size: .85rem !important; }
}

/* Page-specific hero filter */
@media (max-width: 768px) {
    .sc-archive-controls,
    [class*="sc-page-controls"] {
        flex-direction: column;
        gap: 12px;
    }
    [class*="sc-sort"],
    [class*="sc-filter"] { width: 100%; }
}

/* ============================================================
   10. WRITE FOR US PAGE (page-write-for-us.php)
   ============================================================ */
@media (max-width: 768px) {
    .sc-wfu-split { grid-template-columns: 1fr !important; }
    .sc-guidelines-grid { grid-template-columns: 1fr 1fr !important; }
    .sc-process-steps { flex-direction: column; gap: 0; }
    .sc-process-arrow { transform: rotate(90deg); padding: 6px 0 6px 14px; }
    .sc-wfu-form__footer { flex-direction: column; gap: 14px; }
    .sc-wfu-submit { width: 100%; }
    .sc-wfu-email-cta {
        flex-direction: column;
        text-align: center;
        padding: 28px 20px;
        gap: 18px;
    }
    .sc-faq-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 500px) {
    .sc-guidelines-grid { grid-template-columns: 1fr !important; }
    .sc-wfu-form input,
    .sc-wfu-form select,
    .sc-wfu-form textarea { font-size: 16px; } /* Prevent iOS zoom */
}

/* ============================================================
   11. 404 PAGE
   ============================================================ */
@media (max-width: 480px) {
    [class*="sc-404"],
    [class*="not-found"] {
        padding: 60px 20px !important;
        text-align: center;
    }
    [class*="sc-404"] h1,
    [class*="not-found"] h1 { font-size: clamp(2.5rem, 12vw, 5rem); }
}

/* ============================================================
   12. SINGLE REVIEW TEMPLATE (AutoScribe plugin)
   ============================================================ */
@media (max-width: 900px) {
    .tp-review-grid,
    .tp-specs-grid,
    .tp-sub-ratings { grid-template-columns: 1fr 1fr !important; }

    .tp-review-score-card { flex-direction: column !important; }
    .tp-score-main { width: 100% !important; text-align: center; border-right: none !important; border-bottom: 1px solid #eee; padding-bottom: 20px; margin-bottom: 20px; }
    .tp-sub-ratings { width: 100% !important; }
}

@media (max-width: 640px) {
    .tp-review-grid,
    .tp-specs-grid { grid-template-columns: 1fr !important; }

    .tp-pros-cons { flex-direction: column !important; gap: 16px; }
    .tp-pros, .tp-cons { width: 100% !important; }

    .tp-review-header { padding: 20px 16px; }
    .tp-review-title { font-size: clamp(1.3rem, 5vw, 1.8rem) !important; }

    .tp-single-review,
    .tp-review-container { padding: 0 !important; }

    .tp-review-meta-pills { flex-wrap: wrap; gap: 6px; }
}

/* ============================================================
   13. TYPOGRAPHY — Global Mobile Refinements
   ============================================================ */
@media (max-width: 768px) {
    body { font-size: 15px; }
    h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
    h2 { font-size: clamp(1.3rem, 4.5vw, 2rem); }
    h3 { font-size: clamp(1.05rem, 3.5vw, 1.4rem); }
    p  { font-size: .95rem; line-height: 1.7; }
}

/* ============================================================
   14. UTILITY — Touch-Friendly Tap Targets
   ============================================================ */
@media (max-width: 768px) {
    a, button, input[type="submit"],
    input[type="button"], .btn-primary,
    .sc-nav__list li a {
        min-height: 44px;
    }

    /* Form inputs larger for touch */
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    select, textarea {
        font-size: 16px !important; /* Prevents iOS auto-zoom */
        padding: 12px 14px !important;
    }
}

/* ============================================================
   15. PRINT — Hide decorative elements
   ============================================================ */
@media print {
    .sc-topbar, .sc-header-main, .sc-footer,
    .sc-cta-strip, .cta-section, .hero-scroll-indicator { display: none !important; }
    body { font-size: 12pt; color: #000; }
    a { color: #000; text-decoration: underline; }
}