/* Blog Mobile Fixes */
@media (max-width: 768px) {
    /* Navigation - hide links, show hamburger */
    .blog-nav {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    .blog-nav .logo {
        font-size: 1rem !important;
        white-space: nowrap;
        max-width: 60%;
    }
    .blog-nav .logo span {
        display: none;
    }
    .blog-nav-links {
        display: none !important;
    }
    .blog-nav .mobile-menu-btn {
        display: flex !important;
    }
    .mobile-menu-btn {
        align-items: center;
        justify-content: center;
        background: none;
        border: 1px solid rgba(201,169,98,0.3);
        color: #C9A962;
        font-size: 1.3rem;
        padding: 6px 10px;
        border-radius: 6px;
        cursor: pointer;
        display: none;
    }
    .blog-nav-links.mobile-open {
        display: flex !important;
        flex-direction: column;
        position: absolute;
        top: 100%;
        right: 0;
        background: #0D0D12;
        border: 1px solid rgba(201,169,98,0.15);
        border-radius: 8px;
        padding: 0.5rem 0;
        min-width: 200px;
        z-index: 1000;
        box-shadow: 0 8px 32px rgba(0,0,0,0.5);
        gap: 0 !important;
    }
    .blog-nav-links.mobile-open a {
        display: block;
        padding: 0.7rem 1.2rem !important;
        font-size: 0.95rem;
        margin: 0 !important;
        border-bottom: 1px solid rgba(201,169,98,0.08);
    }
    .blog-nav-links.mobile-open a:last-child {
        border-bottom: none;
    }

    /* Hero section */
    .article-hero {
        padding: 2rem 1.2rem 1.5rem !important;
    }
    .article-hero h1 {
        font-size: 1.5em !important;
        line-height: 1.3 !important;
    }

    /* Breadcrumb */
    .breadcrumb {
        padding: 0.8rem 1.2rem !important;
        font-size: 0.78rem !important;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Article layout */
    .article-layout {
        grid-template-columns: 1fr !important;
        padding: 0 1.2rem !important;
    }

    /* Sidebar - move BELOW content on mobile */
    .article-sidebar {
        position: static !important;
        order: 2 !important;
        margin-top: 2rem;
    }

    /* Article content */
    .article-main {
        order: 1 !important;
    }
    .article-content {
        padding: 0 !important;
        overflow-x: hidden;
    }
    .article-content h2 {
        font-size: 1.3em !important;
    }
    .article-content h3 {
        font-size: 1.1em !important;
    }
    .article-content p,
    .article-content li {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
    }

    /* Tables scrollable */
    .article-content table,
    .retro-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.82rem !important;
    }

    /* Blockquotes */
    .article-content blockquote,
    .info-box,
    .article-content .highlight-box {
        padding: 1rem !important;
        margin: 1rem 0 !important;
        font-size: 0.92rem !important;
    }

    /* Author meta */
    .article-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Related articles */
    .related-grid {
        grid-template-columns: 1fr !important;
    }

    /* FAQ section */
    .faq-item summary {
        font-size: 0.95rem !important;
    }

    /* Category badge */
    .article-category {
        font-size: 0.7rem !important;
    }

    /* CTA sidebar box */
    .sidebar-cta {
        padding: 1.2rem !important;
    }

    /* Fix any overflow */
    body, html {
        overflow-x: hidden;
    }
    main, article, section, .article-layout {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

@media (max-width: 480px) {
    .article-hero h1 {
        font-size: 1.25em !important;
    }
    .article-hero {
        padding: 1.5rem 1rem 1rem !important;
    }
    .article-layout {
        padding: 0 1rem !important;
    }
    .breadcrumb {
        padding: 0.6rem 1rem !important;
    }
    .blog-nav .logo {
        font-size: 0.9rem !important;
    }
}