/* ======================================
   RESPONSIVE CSS FOR SINGLE POST
   Mobile Optimization
   ====================================== */

/* Tablet and Mobile (768px and below) */
@media (max-width: 768px) {
    /* Hero Section */
    .post-header {
        padding: 40px 0 !important;
    }
    
    .post-header h1 {
        font-size: 1.8rem !important;
        margin-bottom: 15px !important;
        line-height: 1.3 !important;
    }
    
    .post-header > .container > div {
        padding: 0 20px !important;
    }
    
    .post-header div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 10px !important;
        font-size: 0.85rem !important;
    }
    
    /* Main Layout - Change to Single Column */
    section[style*="padding: 60px 0"] {
        padding: 30px 0 !important;
    }
    
    section > .container > div[style*="grid-template-columns: 1fr 300px"] {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    /* Main Article */
    article[style*="background: white"] {
        padding: 25px !important;
        border-radius: 8px !important;
    }
    
    /* Featured Image - Remove negative margins */
    article div[style*="margin: -40px"] {
        margin: -25px -25px 25px -25px !important;
    }
    
    /* Post Content */
    .post-content {
        font-size: 1rem !important;
    }
    
    /* Author Box */
    article > div[style*="display: flex; gap: 20px"] {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    /* Share Buttons */
    article div[style*="display: flex; justify-content: center"] {
        flex-wrap: wrap !important;
    }
    
    /* Sidebar - Move to Bottom & Full Width */
    aside {
        order: 2;
    }
    
    article {
        order: 1;
    }
    
    /* Sidebar Boxes */
    aside > div {
        padding: 20px !important;
        margin-bottom: 20px !important;
    }
    
    /* Related Posts Grid */
    div[style*="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    /* Hero Section */
    .post-header {
        padding: 30px 0 !important;
    }
    
    .post-header h1 {
        font-size: 1.5rem !important;
    }
    
    .post-header div[style*="padding: 8px 20px"] {
        padding: 6px 15px !important;
        font-size: 0.8rem !important;
    }
    
    /* Article Padding */
    article[style*="background: white"] {
        padding: 20px !important;
    }
    
    /* Content */
    .post-content {
        font-size: 0.95rem !important;
    }
    
    .post-content h2 {
        font-size: 1.3rem !important;
    }
    
    .post-content h3 {
        font-size: 1.1rem !important;
    }
    
    /* Share Buttons - Smaller */
    article a[style*="width: 50px; height: 50px"],
    article button[style*="width: 50px; height: 50px"] {
        width: 45px !important;
        height: 45px !important;
    }
    
    /* Sidebar */
    aside > div {
        padding: 15px !important;
    }
    
    aside h3 {
        font-size: 1.1rem !important;
    }
    
    /* Container Padding */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Extra Small (360px and below) */
@media (max-width: 360px) {
    .post-header h1 {
        font-size: 1.3rem !important;
    }
    
    article[style*="background: white"] {
        padding: 15px !important;
    }
    
    .post-content {
        font-size: 0.9rem !important;
    }
}

/* Landscape Mobile (Small Height) */
@media (max-width: 768px) and (max-height: 500px) {
    .post-header {
        padding: 20px 0 !important;
    }
}