/**
 * SoleQuest — Responsive Styles
 * Mobile-first: base styles are mobile, these are progressive enhancements
 *
 * @package SoleQuest
 */

/* ========================================
   Tablet (768px+)
   ======================================== */

@media (min-width: 768px) {
    :root {
        --container-padding: var(--space-6);
    }

    /* Layout */
    .content-layout {
        grid-template-columns: 1fr 280px;
    }

    /* Header */
    .site-nav {
        display: block;
    }

    .site-header__menu-toggle {
        display: none;
    }

    .site-header__finder-cta {
        display: inline-flex;
    }

    .site-header__inner {
        height: 72px;
    }

    /* Hero */
    .hero {
        padding: var(--space-20) 0 var(--space-24);
    }

    .hero__title {
        font-size: var(--text-5xl);
    }

    /* Shoe Hero */
    .shoe-hero__grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Page Header */
    .page-header {
        padding: var(--space-10) 0 var(--space-12);
    }

    .page-header__title {
        font-size: var(--text-4xl);
    }

    /* Section */
    .section__title {
        font-size: var(--text-3xl);
    }

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

    /* Footer */
    .site-footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    /* Single Post */
    .single-post__title {
        font-size: var(--text-4xl);
    }

    /* Finder */
    .finder__options--radio,
    .finder__options--checkbox {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }
}

/* ========================================
   Desktop (1024px+)
   ======================================== */

@media (min-width: 1024px) {
    /* Layout */
    .content-layout {
        grid-template-columns: 1fr 320px;
    }

    /* Shoe Grid: 3 columns */
    .shoe-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Post Grid: 3 columns */
    .post-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Category Grid: 5 items in one row */
    .category-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    /* Quick Specs: all in one row */
    .quick-specs {
        grid-template-columns: repeat(6, 1fr);
    }

    /* Comparison selector */
    .compare-selector__slots {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Finder */
    .finder__options--radio {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* ========================================
   Wide Desktop (1280px+)
   ======================================== */

@media (min-width: 1280px) {
    .hero__title {
        font-size: 3.5rem;
    }

    .shoe-hero__title {
        font-size: var(--text-4xl);
    }
}

/* ========================================
   Small Mobile (max-width: 480px)
   ======================================== */

@media (max-width: 480px) {
    .hero__title {
        font-size: var(--text-3xl);
    }

    .hero__actions {
        flex-direction: column;
        align-items: center;
    }

    .hero__actions .btn {
        width: 100%;
    }

    /* Pros/Cons stack */
    .pros-cons {
        grid-template-columns: 1fr;
    }

    /* Shoe card actions */
    .shoe-card__actions {
        flex-direction: column;
        gap: var(--space-2);
    }

    /* Compare selector: stack on very small */
    .compare-selector__slots {
        grid-template-columns: 1fr;
    }

    /* Buttons full width */
    .btn--lg {
        width: 100%;
    }

    /* Footer bottom stack */
    .site-footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    .site-footer__nav {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ========================================
   Print
   ======================================== */

@media print {
    .site-header,
    .site-footer,
    .site-header__menu-toggle,
    .compare-bar,
    .affiliate-cta,
    .finder-cta,
    .newsletter-cta,
    .shoe-card__actions,
    .pagination,
    .search-form {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
        font-size: 12pt;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    .container {
        max-width: 100%;
    }
}