/* ==========================================================================
   FootballIQ — Responsive Rules
   Mobile-first overrides for tablet and desktop breakpoints.
   ========================================================================== */

/* Tablet and below (<=1024px) */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero__panel { max-width: 460px; margin-inline: auto; width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-5); }
}

/* Nav collapses into a mobile drawer (<=880px) */
@media (max-width: 880px) {
  .container { padding-inline: var(--space-4); }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-soft);
    padding: var(--space-4);
    gap: var(--space-1);
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease-out);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }
  .nav a { padding: 0.95rem 1rem; font-size: 1rem; }

  .menu-toggle {
    display: grid;
  }

  .hero__stats { gap: var(--space-4); flex-wrap: wrap; }
}

/* Mobile (<=640px) */
@media (max-width: 640px) {
  :root { --space-8: 3.6rem; --space-7: 2.8rem; }

  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }

  .section-head { flex-direction: column; align-items: flex-start; }

  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }

  .newsletter { padding: var(--space-6) var(--space-4); }
  .newsletter-form { flex-direction: column; }

  .footer-bottom { flex-direction: column; gap: var(--space-3); align-items: flex-start; }

  .trend-card { width: 78vw; }

  .ai-panel__teams { gap: var(--space-3); }
  .team-chip img { width: 44px; height: 44px; }
}

/* Small phones (<=380px) */
@media (max-width: 380px) {
  .brand__name { font-size: 0.95rem; }
  .confidence-ring { width: 108px; height: 108px; }
  .confidence-ring__label b { font-size: 1.35rem; }
}