/* ===== Mobile-first responsive add-on (drop-in) ===== */

/* 1) Make images and videos scale */
img, video { max-width: 100%; height: auto; display: block; }

/* 2) Prevent Safari's font zoom quirks */
html { -webkit-text-size-adjust: 100%; }

/* 3) Container & card helpers (safe defaults) */
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.card { border-radius: 18px; box-shadow: 0 6px 18px rgba(2,6,23,.06); padding: 16px; margin: 16px 0; }

/* 4) Top navigation wraps neatly on small screens */
.nav { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.nav a { padding: 8px 12px; display: inline-block; }

/* 5) Hero/banner image support */
.hero img, .hero-banner {
  width: 100%;
  height: clamp(220px, 35vw, 420px);
  object-fit: cover;
}

/* 6) Side-by-side panels used on the Formula page */
.side-by-side { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel-img { width: 100%; height: 420px; object-fit: cover; border-radius: 14px; }
@media (max-width: 900px) {
  .side-by-side { grid-template-columns: 1fr; }
  .panel-img { height: 260px; }
}

/* 7) Tables scroll instead of breaking on phones */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { min-width: 620px; border-collapse: separate; border-spacing: 0 8px; }

/* 8) Footer text size */
footer { font-size: 14px; color: #475569; }