/* ==========================================================================
   MLB LOYAL FAN v3.0.0 — RESPONSIVE
   Mobile / tablet overrides. Loaded LAST.
   Breakpoints: 1200 (desktop-small) · 1024 (tablet-lg) · 768 (tablet) · 480 (phone)
   ========================================================================== */

/* ==========================================================================
   ≤ 1200px — Desktop small
   ========================================================================== */
@media (max-width: 1200px) {

    /* Shrink container padding */
    .mlb-v3-container { padding-left: 20px; padding-right: 20px; }

    /* Blog grid → narrower sidebar */
    .mlb-v3-blog-grid,
    .mlb-v3-single-grid { grid-template-columns: 1fr 280px; gap: 32px; }

    /* About hero */
    .mlb-v3-about-hero-inner { gap: 28px; grid-template-columns: 1fr 220px; }
    .mlb-v3-about-badge { width: 200px; height: 200px; }
    .mlb-v3-about-mission-grid { grid-template-columns: 1fr 380px; gap: 40px; }

    /* Related 3 → keep */
}

/* ==========================================================================
   ≤ 1024px — Tablet landscape
   ========================================================================== */
@media (max-width: 1024px) {

    /* Blog / single → 1 col (sidebar stacks under) */
    .mlb-v3-blog-grid,
    .mlb-v3-single-grid { grid-template-columns: 1fr; gap: 40px; }
    .mlb-v3-sidebar { position: static; }

    /* Contact grid */
    .mlb-v3-contact-grid { grid-template-columns: 1fr; gap: 32px; }
    .mlb-v3-contact-info { position: static; grid-template-columns: repeat(2, 1fr); }
    .mlb-v3-contact-info-card.mlb-v3-contact-info-trust { grid-column: 1 / -1; }

    /* About hero 1 col */
    .mlb-v3-about-hero-inner { grid-template-columns: 1fr; text-align: center; }
    .mlb-v3-about-hero-copy { margin: 0 auto; }
    .mlb-v3-about-hero-cta { justify-content: center; }
    .mlb-v3-about-hero-visual { order: -1; }
    .mlb-v3-about-mission-grid { grid-template-columns: 1fr; gap: 32px; }
    .mlb-v3-about-mission-visual { max-width: 420px; margin: 0 auto; }

    /* Stats + values 2 col */
    .mlb-v3-about-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .mlb-v3-values-grid { grid-template-columns: repeat(2, 1fr); }

    /* About CTA stacked */
    .mlb-v3-about-cta-inner { flex-direction: column; text-align: center; align-items: stretch; }
    .mlb-v3-about-cta-actions { justify-content: center; }

    /* Related 2 col */
    .mlb-v3-related-grid { grid-template-columns: repeat(2, 1fr); }

    /* Shop / cart / checkout — reinforce */
    .mlb-v3-shop-layout { grid-template-columns: 1fr !important; }
    .mlb-v3-shop-sidebar { position: static !important; }

    .mlb-v3-cart-layout,
    .mlb-v3-checkout-layout { grid-template-columns: 1fr !important; }
    .mlb-v3-cart-summary,
    .mlb-v3-checkout-sidebar { position: static !important; }

    /* Account sidebar */
    .mlb-v3-account-layout { grid-template-columns: 1fr !important; }
    .mlb-v3-account-nav { position: static !important; }

    /* Product single */
    .mlb-v3-product-layout { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   ≤ 768px — Tablet portrait / phone landscape
   ========================================================================== */
@media (max-width: 768px) {

    :root {
        --mlb-header-h: 60px;
    }

    /* Header / mobile toggles (handled in header CSS — keep hooks) */
    .mlb-v3-nav-primary { display: none; }

    /* Announcement shorter */
    .mlb-v3-announcement p { font-size: 12px; padding: 6px 0; }

    /* Kill any float */
    .mlb-v3 img, .mlb-v3 video { max-width: 100%; }

    /* Blog card — stack */
    .mlb-v3-post-card { grid-template-columns: 1fr; }
    .mlb-v3-post-thumb { aspect-ratio: 16 / 10; }
    .mlb-v3-post-body { padding: 20px 22px 22px !important; }
    .mlb-v3-post-title { font-size: 21px; }

    /* Blog hero */
    .mlb-v3-blog-title { font-size: 32px; }
    .mlb-v3-blog-desc { font-size: 15px; }

    /* Single */
    .mlb-v3-single-meta { gap: 14px; }
    .mlb-v3-single-share { order: 2; flex-wrap: wrap; }
    .mlb-v3-single-featured img { max-height: 360px; border-radius: var(--mlb-radius-lg); }
    .mlb-v3-prose { font-size: 16px; line-height: 1.7; }
    .mlb-v3-prose h2 { font-size: 24px; }
    .mlb-v3-prose h3 { font-size: 19px; }
    .mlb-v3-author-card { grid-template-columns: 60px 1fr; gap: 14px; padding: 18px; }
    .mlb-v3-post-nav { grid-template-columns: 1fr; gap: 10px; }
    .mlb-v3-post-nav-item:only-child { grid-column: 1 / -1 !important; }

    /* Related → 1 col */
    .mlb-v3-related-grid { grid-template-columns: 1fr; gap: 16px; }
    .mlb-v3-related-head h2 { font-size: 26px; }

    /* About */
    .mlb-v3-about-hero-title { font-size: clamp(32px, 9vw, 48px); }
    .mlb-v3-about-badge { width: 160px; height: 160px; }
    .mlb-v3-about-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .mlb-v3-values-grid { grid-template-columns: 1fr; }
    .mlb-v3-about-mission { padding: 56px 0; }
    .mlb-v3-about-values { padding: 56px 0; }

    /* Contact */
    .mlb-v3-contact-info { grid-template-columns: 1fr; }
    .mlb-v3-contact-form-wrap { padding: 22px; }
    .mlb-v3-contact-form-row { grid-template-columns: 1fr; gap: 0; }
    .mlb-v3-contact-form-row label { margin-bottom: 16px; }
    .mlb-v3-contact-form-foot { flex-direction: column; align-items: stretch; }
    .mlb-v3-contact-form-foot .mlb-v3-btn { width: 100%; justify-content: center; }
    .mlb-v3-faq-item summary { font-size: 15px; padding: 16px 18px; }

    /* Comments */
    .mlb-v3-comment-body { grid-template-columns: 44px 1fr; gap: 12px; padding: 16px; }
    .mlb-v3-comment-avatar img { width: 40px; height: 40px; }
    .mlb-v3-comment-form { padding: 20px; }

    /* Home sections (safety) */
    .mlb-v3-hero-inner { padding: 40px 0 !important; }
    .mlb-v3-featured-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }

    /* Shop — product grid 2 col already handled in shop css */
    .mlb-v3-products-grid,
    ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }

    /* Cart actions stacked */
    .mlb-v3-cart-actions { flex-direction: column; align-items: stretch; gap: 10px; }

    /* Checkout stepper smaller */
    .mlb-v3-checkout-stepper .step-label { font-size: 11px; }

    /* Thank you info cards 2 col */
    .mlb-v3-thankyou-cards { grid-template-columns: repeat(2, 1fr) !important; }

    /* Account */
    .mlb-v3-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .mlb-v3-orders-row { grid-template-columns: 1fr !important; }
    .mlb-v3-orders-row > div { display: flex; justify-content: space-between; }
    .mlb-v3-orders-row > div::before { content: attr(data-label); font-weight: 700; color: var(--mlb-gray-500); text-transform: uppercase; font-size: 11px; }

    /* 404 */
    .mlb-v3-404-hero-grid { grid-template-columns: 1fr !important; text-align: center; }
    .mlb-v3-404-visual { order: -1; max-width: 220px; margin: 0 auto; }

    /* Back-to-top smaller */
    .mlb-v3-to-top { width: 42px; height: 42px; right: 14px; bottom: 14px; }
}

/* ==========================================================================
   ≤ 480px — Small phone
   ========================================================================== */
@media (max-width: 480px) {

    :root { font-size: 15px; }

    .mlb-v3-container { padding-left: 14px; padding-right: 14px; }

    /* Huge display titles soften */
    .mlb-v3-blog-title,
    .mlb-v3-single-title,
    .mlb-v3-about-hero-title,
    .mlb-v3-contact-title,
    .mlb-v3-page-title { font-size: clamp(28px, 8vw, 36px); }

    /* 1-col product grid on tiny phones */
    .mlb-v3-products-grid,
    ul.products { grid-template-columns: 1fr !important; }

    /* Button default full width on forms */
    .mlb-v3-btn { padding: 12px 18px; font-size: 14px; }
    .mlb-v3-btn-lg { padding: 14px 22px; font-size: 15px; }

    /* Single share buttons smaller */
    .mlb-v3-share-btn { width: 32px; height: 32px; }

    /* Author card stacked */
    .mlb-v3-author-card { grid-template-columns: 1fr; text-align: center; }
    .mlb-v3-author-avatar { margin: 0 auto; }

    /* Stats 1 col */
    .mlb-v3-about-stats-grid { grid-template-columns: 1fr; }

    /* Thank you cards 1 col */
    .mlb-v3-thankyou-cards { grid-template-columns: 1fr !important; }

    /* Account stat tiles 1 col */
    .mlb-v3-stat-grid { grid-template-columns: 1fr !important; }

    /* Breadcrumbs wrap */
    .mlb-v3-single-crumbs { font-size: 12px; }
}

/* ==========================================================================
   Motion-reduce — respect preference
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .mlb-v3-about-badge,
    .mlb-v3-about-badge-ring { animation: none !important; }
}

/* ==========================================================================
   Print styles
   ========================================================================== */
@media print {
    .mlb-v3-header,
    .mlb-v3-footer,
    .mlb-v3-announcement,
    .mlb-v3-to-top,
    .mlb-v3-single-share,
    .mlb-v3-related-posts,
    .mlb-v3-comments-wrap,
    .mlb-v3-sidebar,
    .mlb-v3-cart-empty-hero,
    .mlb-v3-cart-actions,
    .mlb-v3-post-nav { display: none !important; }

    body.mlb-v3 {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }
    .mlb-v3-single-title,
    .mlb-v3-blog-title { color: #000; }
    .mlb-v3-container { max-width: 100%; padding: 0; }
    a { color: #000; text-decoration: underline; }
}

/* ==========================================================================
   Accessibility polish — focus visible
   ========================================================================== */
.mlb-v3 :focus-visible {
    outline: 3px solid var(--mlb-red);
    outline-offset: 2px;
    border-radius: 2px;
}
.mlb-v3 button:focus-visible,
.mlb-v3 .mlb-v3-btn:focus-visible {
    outline-offset: 3px;
}

/* High-contrast text override */
@media (prefers-contrast: more) {
    .mlb-v3-prose { color: #000; }
    .mlb-v3-post-excerpt,
    .mlb-v3-blog-desc { color: #1a1a1a; }
}