/* =====================================================================
   NOVA SPORTS — responsive.css
   Breakpoints mirror the React (Tailwind) build:
     sm = 640px, md = 768px, lg = 1024px
   ===================================================================== */

/* ---------- sm and up (>=640px) ---------- */
@media (min-width: 640px) {
  .hero-content { padding-top: 3.5vh; padding-bottom: 3.5vh; }

  .header-accent { display: flex; }
  .header-logo { gap: 1rem; }

  .building-chevs-right { display: flex; }

  .player { height: 86%; }

  .nv-tag-1, .nv-tag-2 { font-size: 14px; }
}

/* ---------- md and up (>=768px) ---------- */
@media (min-width: 768px) {
  .monogram-watermark { display: block; }
  .streaks { display: block; }

  .hero-main { max-width: 56%; }

  .player { height: 94%; }

  /* Footer becomes three columns with centered tagline */
  .hero-footer { grid-template-columns: 1fr 1fr 1fr; align-items: center; }
  .footer-center { display: block; }
}

/* ---------- lg and up (>=1024px) ---------- */
@media (min-width: 1024px) {
  .hero-main { max-width: 52%; }
  .player { height: 100%; }
}

/* ---------- Short/landscape safety ---------- */
@media (max-height: 560px) {
  .hero-content { padding-top: 2vh; padding-bottom: 2vh; }
}