/* ===== Responsive Styles ===== */

@media (max-width: 1024px) {
    .content-area { grid-template-columns: 1fr; gap: 30px; }
    .hero-grid { gap: 12px; }
    .hero-card.large { min-height: 320px; }
    .article-card { grid-template-columns: 200px 1fr; gap: 16px; }
}

@media (max-width: 768px) {
    .top-bar .container { flex-direction: column; gap: 8px; text-align: center; }
    .site-header .container { flex-direction: column; text-align: center; }
    .slogan-divider { display: none; }
    .site-slogans { align-items: center; }
    
    /* Hamburger menu */
    .menu-toggle { display: block; margin: 0 auto; }
    .main-navigation ul {
        display: none;
        flex-direction: column;
        align-items: center;
        padding: 10px 0;
    }
    .main-navigation ul.active { display: flex; }
    .main-navigation a { padding: 10px 20px; }

    .hero-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .hero-card.large { grid-row: auto; min-height: 260px; }
    .hero-card { min-height: 180px; }

    .article-card { grid-template-columns: 1fr; }
    .article-thumb { aspect-ratio: 16/9; }
    .article-info .entry-title { font-size: 16px; }

    .footer-nav { flex-direction: column; gap: 12px; }

    .single-post-content .entry-title { font-size: 24px; }
    .share-buttons { flex-wrap: wrap; }
}

@media (max-width: 480px) {
    html { font-size: 15px; }
    .site-title { font-size: 22px; }
    .hero-card.large .entry-title { font-size: 18px; }
    .hero-card .entry-title { font-size: 14px; }
    .main-navigation a { font-size: 12px; padding: 8px 16px; }
}