/* Responsive Styles - Media Queries */

@media (max-width: 900px) {
    /* Show mobile tabs */
    .mobile-tabs {
        display: flex;
    }
    
    /* Hide all tab content by default on mobile */
    .mobile-tab-content {
        display: none;
    }
    
    /* Only show active tab content on mobile */
    .mobile-tab-content.active {
        display: block;
    }
    
    /* Force single column layout on mobile */
    .content-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* Remove the 50-50 split on mobile */
    .content-wrapper.index-page-layout {
        grid-template-columns: 1fr;
    }
    
    /* Ensure blog section shows first by default */
    .blog-section {
        order: 1;
    }
    
    .patreon-section {
        order: 2;
    }
    
    /* Make sure only one section takes full width */
    .blog-section,
    .patreon-section {
        width: 100%;
    }
    
    /* Hide patreon section by default on mobile if not active */
    .patreon-section:not(.active) {
        display: none;
    }
    
    /* Show blog section by default on mobile */
    .blog-section.active {
        display: block;
    }
    
    /* Mobile: Normal scrolling for Patreon section */
    .patreon-section.active {
        display: block;
    }
}

@media (max-width: 600px) {
    .container {
        padding: 20px 15px;
    }
    
    .header-content {
        flex-direction: column;
        align-items: flex-start;
    }
    
    header h1 {
        font-size: 1.5em;
    }
    
    .header-title-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .coming-soon-badge {
        font-size: 0.75em;
        padding: 5px 14px;
    }
    
    .social-nav {
        margin-top: 10px;
        flex-wrap: wrap;
    }
    
    .become-member-btn {
        font-size: 0.72em;
        padding: 6.8px 13.6px;
    }
    
    .consulting-btn {
        font-size: 0.72em;
        padding: 6.8px 13.6px;
    }
    
    .member-modal-content {
        padding: 30px 20px;
        max-width: 95%;
    }
    
    .member-modal-title {
        font-size: 1.5em;
    }
    
    .post-title {
        font-size: 1.3em;
    }
    
    .section-title {
        font-size: 1.2em;
    }
    
    .section-title-highlight {
        font-size: 0.7em;
    }
    
    .patreon-posts-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}