/* ═══════════════════════════════════════════
   YDUCK MEDIA — Responsive
   ═══════════════════════════════════════════ */

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-video-wrap { width: 100%; }
  .projects-grid { grid-template-columns: 1fr 1fr; }
  .project-card-featured { grid-column: span 2; }
  .podcast-player { grid-template-columns: 1fr; }
  .funzone-grid { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .section-title { font-size: 2.5rem; }
  .hero-headline { font-size: 5rem; }
  :root { --section-py: 3.5rem; }
}

@media (max-width: 768px) {
  .hero-video-wrapper { min-height: 500px; }
  .hero-headline { font-size: 4rem; }
  .hero-buttons { flex-direction: column; align-items: center; }
  .videos-grid { grid-template-columns: 1fr 1fr; }
  .press-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .mobile-menu-btn { display: flex; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; width: 100%;
    flex-direction: column;
    background: var(--header-bg);
    border-bottom: 3px solid var(--cerna);
    padding: 0.5rem 1.5rem;
    z-index: 100;
    backdrop-filter: blur(10px);
  }
  body.dark-mode .nav-links { background: rgba(10,10,10,0.95); }
  .nav-links.active { display: flex; }
  .nav-link { padding: 0.75rem 0; width: 100%; }

  .hero-headline { font-size: 3rem; }
  .hero-tagline { font-size: 0.85rem; }
  .hero-btn { padding: 0.75rem 1.5rem; font-size: 0.9rem; }

  .projects-grid { grid-template-columns: 1fr; }
  .project-card-featured { grid-column: span 1; }
  .videos-grid { grid-template-columns: 1fr; }
  .press-grid { grid-template-columns: 1fr; }

  .funzone-featured { padding: 1.5rem; }
  .funzone-featured-title { font-size: 1.05rem; }
  .funzone-grid { grid-template-columns: 1fr; }
  .funzone-card { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .funzone-card-icon { width: auto; }

  .section-title { font-size: 2rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-main { grid-template-columns: 1fr; gap: 2rem; }
  :root { --section-py: 2.5rem; }
  .container { padding: 0 1.25rem; }

  .chat-window { width: calc(100vw - 2rem); right: -0.5rem; max-height: 60vh; }
  .modal-overlay { padding: 70px 1rem 1rem; }
  .modal { padding: 1.5rem; }
}

@media (max-width: 400px) {
  .hero-headline { font-size: 2.2rem; }
  .hero-tagline { font-size: 0.75rem; letter-spacing: 1px; }
}