/**
 * Responsive Styles
 * All media queries and mobile-specific styles
 */

/* Responsive adjustments for page and post headers */
@media (max-width: 768px) {
    .page-header-with-image,
    .post-header-with-image {
        min-height: 300px;
        background-attachment: scroll;
    }
    
    .page-header-with-image .page-title,
    .post-header-with-image .post-title {
        font-size: 2rem;
    }
    
    .page-header:not(.page-header-with-image) .page-title {
        font-size: 1.8rem;
    }
    
    .post-meta-section .entry-meta {
        gap: 1rem;
    }
}

/* Main Responsive Design */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .main-navigation ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    
    .hero-content {
        margin-left: 0;
        text-align: center;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-content p {
        font-size: 1rem;
    }
    
    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .content-section {
        padding: 3rem 0;
    }
}