/* ==========================================================================
   UB3 — Responsive rules (mobile-first overrides on top of style.css)
   ========================================================================== */

@media (max-width: 1080px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .leaders-grid, .admins-grid { grid-template-columns: repeat(3, 1fr); }
  .community-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav-links { position: fixed; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--bg); border-bottom: 1px solid var(--surface-border); max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
  .nav-links.open { max-height: 470px; }
  .nav-links a { width: 100%; padding: 16px 24px; border-bottom: 1px solid var(--surface-border); }
  .nav-toggle { display: flex; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .navbar .container { padding: 0 16px; }
  .nav-inner { gap: 10px; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn-sm { padding: 9px 14px; font-size: 12.5px; }
  .brand { gap: 8px; }
  .brand-name { font-size: 17px; }
}

  section { padding: 80px 0; }
  .hero { min-height: unset; padding-bottom: 60px; }
  .hero h1 { font-size: clamp(32px, 9vw, 44px); }
  .values-grid, .services-grid, .why-grid, .leaders-grid, .admins-grid, .testimonials-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .modal-head { flex-direction: column; text-align: center; }
  .roadmap-track { padding-left: 26px; }
  .announcement-card { padding: 20px 18px; }
  .announcement-avatar { width: 50px; height: 50px; }
  .announcement-title { font-size: 18px; }
  .announcement-gallery { border-radius: 14px; }
  .gallery-1 .gallery-tile, .gallery-1 .gallery-img { max-height: 420px; }
  .ub3-video-el { max-height: 420px; }
  .ub3-video-controls { padding: 6px 8px; gap: 6px; }
  .ub3-video-volume { width: 40px; }
  .ub3-video-time, .ub3-video-duration { display: none; }
  .img-lightbox-nav { width: 40px; height: 40px; font-size: 24px; }
  .video-lightbox { padding: 0; }
  .video-lightbox-stage .ub3-video-el { max-height: 100vh; }
  .ub3-video-expand { width: 30px; height: 30px; top: 8px; right: 8px; }
  .ub3-video-expand svg { width: 15px; height: 15px; }
  .announcement-actions { max-width: none; }

  /* Header rows on small screens: username keeps priority and is never
     truncated by badges; badges wrap to their own line instead of
     shrinking the name; the "Posted in … • time" line stays one line
     with the time portion always fully visible, never wrapping. */
  .announcement-top { gap: 12px; }
  .announcement-who { gap: 8px; }
  .announcement-name-row { row-gap: 6px; }
  .announcement-name { font-size: 16px; }
  .announcement-submeta { font-size: 12.5px; }
  .announcement-meta-posted,
  .announcement-meta-dot,
  .announcement-meta-time { font-size: 12.5px; }
  .announcement-top-badges { row-gap: 6px; }
}