/* ============================================================
   ALEXANDRIA UNITED FC - Mobile polish (phones only)
   Loaded after each page's own styles so these win on small screens.
   ============================================================ */

@media (max-width: 640px) {

  /* ── Shared rhythm ─────────────────────────────────────── */
  section { padding: 3rem 0; }
  .container { padding: 0 1.25rem; }
  h2 { font-size: 2.1rem; }

  .section-header { text-align: left; margin-bottom: 1.75rem; }
  .section-header p { margin: 0.6rem 0 0; font-size: 0.95rem; }

  .section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.68rem;
    margin-bottom: 0.6rem;
  }
  .section-label::before {
    content: '';
    width: 18px; height: 2px;
    background: currentColor;
    border-radius: 2px;
  }

  /* ── Page titles ───────────────────────────────────────── */
  .page-hero { padding: 6.75rem 0 2.5rem; border-bottom: 1px solid rgba(255,182,18,0.18); }
  .page-hero::before {
    background: radial-gradient(ellipse 90% 70% at 0% 100%, rgba(255,182,18,0.14) 0%, transparent 70%);
  }
  .page-hero .container { text-align: left; }
  .page-hero h1 { font-size: 3rem; line-height: 1; }
  .page-hero p { margin: 0.85rem 0 0; font-size: 0.95rem; line-height: 1.65; }
  .page-hero .gold-line { margin: 1.25rem 0 0; width: 44px; height: 3px; }
  .page-hero .btn { margin-top: 1.25rem !important; }

  /* Home hero */
  .home-hero { min-height: 88vh; align-items: flex-end; padding-bottom: 3rem; }
  .home-hero .container { text-align: left; }
  .home-hero h1 { font-size: 3.4rem; line-height: 0.95; margin-bottom: 1rem; }
  .home-hero p { margin: 0 0 1.75rem; font-size: 0.98rem; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 0.65rem; }
  .hero-actions .btn { justify-content: center; }

  /* ── Buttons ───────────────────────────────────────────── */
  .btn { padding: 0.8rem 1.4rem; font-size: 0.8rem; border-radius: 999px; }

  /* ── Cards: shared look ────────────────────────────────── */
  .contact-card, .product-card,
  .player-card, .staff-card, .scorer-card {
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 6px 18px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.05);
  }
  .product-card:hover, .player-card:hover { transform: none; }

  /* ── Home: season strip in one row ─────────────────────── */
  .season-strip { padding: 1.75rem 0; }
  .season-inner { grid-template-columns: repeat(4, 1fr); gap: 0.25rem; }
  .season-stat .stat-num { font-size: 2.1rem; }
  .season-stat .stat-label { font-size: 0.58rem; letter-spacing: 0.1em; }
  .season-note { margin-top: 1rem; font-size: 0.72rem; }

  /* Home: about teaser */
  .teaser-grid { gap: 1.5rem; }
  .teaser-img { border-radius: 16px; }
  .teaser-img img { height: 300px; }

  /* Home: explore tiles as a 2x2 grid */
  .quick-grid { grid-template-columns: 1fr 1fr; gap: 0.65rem; border-top: none; }
  .quick-card,
  .quick-card:first-child,
  .quick-card:nth-child(n) {
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 16px;
    background: rgba(255,255,255,0.035);
    padding: 1.1rem 1rem 1rem;
    gap: 0.4rem;
  }
  .quick-num { font-size: 1.5rem; }
  .quick-card h4 { font-size: 1.15rem; }
  .quick-card p { font-size: 0.78rem; line-height: 1.45; }
  .quick-arrow { font-size: 0.66rem; padding-top: 0.35rem; }

  .sponsor-cta { padding: 3.5rem 0; text-align: left; }
  .sponsor-cta p { margin: 0 0 1.5rem; font-size: 0.95rem; }

  /* ── About ─────────────────────────────────────────────── */
  .about-hero-block { padding: 3rem 0; }
  .about-hero-grid img { height: 280px; border-radius: 16px; }
  .photo-strip { gap: 0.5rem; padding: 0.5rem; }
  .mission-section { text-align: left; padding: 3.5rem 0; }
  .mission-section h2 { font-size: 2rem; }
  .mission-section p { margin: 1rem 0 0; }

  .section-dark { text-align: left; }
  .section-dark p { margin-left: 0 !important; }

  /* ── Get Involved ──────────────────────────────────────── */
  .contact-section { padding: 3rem 0; }
  .contact-grid { gap: 0.75rem; }
  .contact-card { padding: 1.4rem; }
  .contact-card h3 { font-size: 1.5rem; margin-bottom: 1rem; }
  .contact-form-card { margin-top: 0.75rem; }

  /* ── Ticker + numbered lists ───────────────────────────── */
  .ticker-stage { padding: 2rem 0; }
  .ticker { padding: 0.75rem 0; }
  .ticker-item { font-size: 1.85rem; padding: 0 0.85rem; }
  .ticker-track { animation-duration: 26s; }
  .ticker.reverse .ticker-track { animation-duration: 30s; }
  .line-row { grid-template-columns: 44px 1fr; gap: 0 0.9rem; padding: 1.35rem 0; }
  .line-num { font-size: 1.8rem; }
  .line-row h3 { font-size: 1.6rem; margin-bottom: 0.35rem; }
  .line-row p { font-size: 0.9rem; line-height: 1.6; }

  /* ── Merch: 2-up shop grid ─────────────────────────────── */
  .sizing-strip { padding: 1.1rem 0; }
  .sizing-inner { flex-direction: column; align-items: flex-start; gap: 0.6rem; text-align: left; }
  .sizing-item span { font-size: 0.8rem; }
  .products-section { padding: 1.5rem 0 3rem; }
  .products-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .product-img { aspect-ratio: 4 / 5; }
  .product-img .photo-placeholder span { display: none; }
  .product-img .photo-placeholder svg { width: 32px; height: 32px; }
  .product-badge { top: 0.6rem; left: 0.6rem; font-size: 0.56rem; padding: 0.2rem 0.55rem; }
  .product-body { padding: 0.85rem 0.9rem 0.95rem; }
  .product-cat { font-size: 0.58rem; margin-bottom: 0.2rem; }
  .product-name { font-size: 1.05rem; margin-bottom: 0.6rem; }
  .product-desc { display: none; }
  .product-footer { flex-direction: column; align-items: stretch; gap: 0.55rem; }
  .product-price { font-size: 1.1rem; }
  .product-price.tbd { font-size: 0.85rem; }
  .product-cta { text-align: center; padding: 0.55rem 0.5rem; font-size: 0.66rem; border-radius: 999px; }
  .custom-section { padding: 3.5rem 0; text-align: left; }
  .custom-section p { margin: 0 0 1.5rem; }

  /* Filter chips scroll sideways instead of wrapping */
  .filter-bar { padding: 0.9rem 0; }
  .filter-inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0.5rem; }
  .filter-inner::-webkit-scrollbar { display: none; }
  .filter-label { display: none; }
  .filter-btn { flex-shrink: 0; white-space: nowrap; }

  /* ── Team ──────────────────────────────────────────────── */
  .roster-section { padding: 1.5rem 0 3rem; }
  .roster-grid { gap: 0.75rem; }
  .player-photo { aspect-ratio: 4 / 5; }
  .player-info { padding: 0.75rem 0.85rem 0.9rem; }

  /* ── Staff ─────────────────────────────────────────────── */
  .owner-section { padding: 3rem 0; }
  .owner-card { border-radius: 16px; }
  .owner-photo, .owner-photo .photo-placeholder { min-height: 220px !important; }
  .owner-body { padding: 1.5rem; }
  .owner-body .staff-name { font-size: 2.3rem; }
  .dept-section, .dark-section { padding: 2.5rem 0; }
  .dept-label { margin-bottom: 1.25rem; }
  .dept-label .line:first-child { display: none; }
  .staff-row { padding: 0.85rem 0.25rem; gap: 0.9rem; }
  .staff-row-photo { width: 46px; height: 46px; }

  /* ── Sponsors ──────────────────────────────────────────── */
  .reason-row { gap: 1rem; padding: 1.35rem 0; }
  .reason-num { width: 36px; font-size: 1.5rem; }
  .sponsor-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    border: none;
    margin-top: 1.5rem;
  }
  .sponsor-name,
  .sponsor-name:first-child {
    display: flex; align-items: center; justify-content: center;
    min-height: 72px;
    padding: 1rem;
    font-size: 0.72rem;
    text-align: center;
    border: 1px solid var(--gray-light);
    border-radius: 14px;
    background: var(--off-white);
  }
  .sponsor-name:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* ── Newsletter + footer ───────────────────────────────── */
  .newsletter-strip { padding: 2.5rem 0; }
  .newsletter-inner { text-align: left; align-items: stretch; gap: 1.25rem; }
  .newsletter-strip h3 { font-size: 1.8rem; }
  .newsletter-form button { border-radius: 999px; }
  .newsletter-form input { border-radius: 999px; }

  footer { padding: 3rem 0 1.75rem; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
  .footer-brand, .footer-top .footer-col:last-child { grid-column: 1 / -1; }
  .footer-brand .logo-mark { width: 44px; height: 58px; margin-bottom: 1rem; }
  .footer-bottom { text-align: left; align-items: flex-start; gap: 0.35rem; }
}