/* ===========================================================
   RESPONSIVE.CSS
   =========================================================== */

@media (max-width: 980px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .video-grid { grid-template-columns: repeat(2, 1fr); }
    .video-grid.wide { grid-template-columns: 1fr; }
    .videos-strip { grid-template-columns: 1fr; }
    .videos-strip .vlabel { writing-mode: horizontal-tb; transform: none; }
    .videos-strip .vmain { grid-template-columns: 1fr; }
    .feature-gallery { grid-template-columns: 1fr; }
    .about-gallery { grid-template-columns: 1fr; }
    .about-gallery .side-tall img { min-height: 200px; }
    .figma-showcase { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .main-nav {
        position: fixed; top: 0; right: -100%; height: 100vh; width: min(78vw, 320px);
        background: var(--header-bg); padding: 90px 28px; transition: right .3s ease; z-index: 150;
    }
    .main-nav.open { right: 0; }
    .main-nav ul { flex-direction: column; gap: 22px; }
    .menu-toggle { display: flex; }
    .top-bar .top-pill:not(.lang-pill) { display: none; }
    .project-switch { gap: 6px; }
    .project-switch a { padding: 6px 10px; font-size: .65rem; }
    .card-grid { grid-template-columns: 1fr 1fr; }
    .news-grid { grid-template-columns: 1fr; }
    .video-grid { grid-template-columns: 1fr; }
    .hero-slider { height: clamp(340px, 100vw, 480px); }
    .footer-bottom .container { justify-content: center; text-align: center; }
    .project-banner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .card-grid { grid-template-columns: 1fr; }
}