/* ────────────────────────────────────────────────────────────────
   2026-07-23 — Mobile polish for newly-added elements.
   Additive-only: no overrides of existing rules, purely supplemental
   media queries for elements introduced in this deploy (team pages,
   LinkedIn button, expanded contact CTA grid, animated AI Lead SVG).
   Loaded LAST so it wins any specificity ties on narrow viewports.
   ──────────────────────────────────────────────────────────────── */

/* Multi-button hero action bars (Email / Call / LinkedIn) — enforce
   wrap and give buttons room at narrow widths so text doesn't overflow. */
@media (max-width: 560px) {
  .actions, .tp-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .actions .btn, .tp-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    text-align: center;
    padding: 12px 14px !important;
    font-size: 13px !important;
  }
}

/* At true small widths, stack each button to full width for tap comfort. */
@media (max-width: 400px) {
  .actions, .tp-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .actions .btn, .tp-actions .btn {
    width: 100%;
  }
}

/* Contact page 4-card grid — with the new LinkedIn card, 4-across only
   makes sense on wide desktops. At mid-tablet let the fourth card sit
   full-width beneath a 3-across row (visually intentional). */
@media (min-width: 720px) and (max-width: 1000px) {
  .section.grid3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Team AI Lead animated SVG — ensure the emblem doesn't shrink below
   readable size on tiny viewports. Trace pulses stay visible. */
@media (max-width: 560px) {
  .tp-portrait { min-height: 320px; }
  .tp-circuit .trace { stroke-width: 1.5; }
  .tp-circuit .pulse { stroke-width: 2.5; }
}

/* Team grid on very narrow screens — collapse to single column earlier
   than the base 980px breakpoint so cards don't get too compressed. */
@media (max-width: 720px) {
  .ti-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .ti-headline { font-size: clamp(40px, 12vw, 72px) !important; }
}

/* Footer with new LinkedIn + Games links — prevent overly wide "Direct"
   column when there are now 3 items in it. */
@media (max-width: 720px) {
  .footer-grid > div { min-width: 0; }
  .footer-grid a { word-break: break-word; }
}

/* LinkedIn button (in-hero + card variants) — keep the label from
   forcing horizontal scroll at 375px width. */
@media (max-width: 400px) {
  a.btn[href*="linkedin.com"] {
    font-size: 12px !important;
    letter-spacing: .08em;
  }
}

/* Games frame — Cloudflare Pages will serve m_runner.html; make sure
   the 16:7 canvas doesn't create horizontal scroll on portrait phones. */
@media (max-width: 720px) {
  .game-frame {
    aspect-ratio: 16 / 10;
    max-width: 100%;
  }
  .game-meta {
    justify-content: center !important;
    text-align: center;
  }
}

/* Header — with 6 nav items now (Home / Capabilities / Delivery / About /
   Team / Contact), give nav a bit more breathing room at desktop-tablet
   boundary so items don't crowd the brand mark. */
@media (min-width: 900px) and (max-width: 1100px) {
  .header-inner { gap: 20px; }
  .nav { gap: 4px; }
  .nav a { padding: 8px 10px; font-size: 13px; }
}