/* Responsive overrides - additive only, preserves 1512×982 baseline exactly */

:root {
  /* Fluid typography & spacing that won't alter desktop look */
  --fs-base: clamp(14px, 0.9vw + 10px, 16px);
  --fs-h1: clamp(28px, 2.5vw + 12px, 48px);
  --fs-h2: clamp(22px, 1.8vw + 10px, 36px);
  --fs-h3: clamp(18px, 1.2vw + 9px, 28px);
  --space-1: clamp(8px, 0.8vw, 12px);
  --space-2: clamp(12px, 1.2vw, 16px);
  --space-3: clamp(16px, 1.6vw, 24px);
  --container-max: min(100%, 1200px);
  --radius-lg: 14px;
}

html { font-size: var(--fs-base); }
h1 { font-size: var(--fs-h1); line-height: 1.15; }
h2 { font-size: var(--fs-h2); line-height: 1.2; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }

img, video { max-width: 100%; height: auto; display: block; }
iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }

.container { width: var(--container-max); margin-inline: auto; padding-inline: var(--space-2); }
.card { border-radius: var(--radius-lg); }

.card-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Flexible nav defaults; safe for wrapping on smaller screens */
.nav { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.btn { padding: var(--space-1) var(--space-2); }

.table-wrap { overflow-x: auto; }

/* 1440 down: gentle container cap and add headline padding */
@media (max-width: 1440px) {
  :root { --container-max: min(100%, 1100px); }
  .hero-headline-mobile { padding-top: 2rem !important; }
}

/* 1280 down */
@media (max-width: 1280px) {
  :root { --container-max: min(100%, 1000px); }
  .hero-headline-mobile { padding-top: 2.5rem !important; }
}

/* 1152 down (covers 1147×745 pain point) */
@media (max-width: 1152px) {
  :root { --container-max: min(100%, 940px); }
  .hero { min-height: min(60vh, 640px); }
  /* If any header/nav is rigid, allow wrapping */
  .nav { flex-wrap: wrap; row-gap: var(--space-1); }
  .hero-headline-mobile { padding-top: 3rem !important; }
}

/* 1024 down (tablets landscape) */
@media (max-width: 1024px) {
  h1 { font-size: clamp(26px, 2.2vw + 12px, 40px); }
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  /* Prevent fixed-height sections from clipping */
  .section, .panel, .hero { min-height: auto; }
  .hero-headline-mobile { padding-top: 3.5rem !important; }
}

/* 768 down (tablets portrait) */
@media (max-width: 768px) {
  html { font-size: clamp(15px, 1.5vw + 10px, 16px); } /* keep body text readable */
  .container { padding-inline: var(--space-2); }
  .btn { width: 100%; }
  /* Forms stack nicely */
  form .row { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
}

/* 640 down (large phones) */
@media (max-width: 640px) {
  h1 { font-size: clamp(24px, 6vw, 34px); }
  h2 { font-size: clamp(20px, 5vw, 28px); }
  .card-grid { grid-template-columns: 1fr; }
  .container { padding-inline: var(--space-1); }
  /* Make dense nav vertical if needed */
  .nav { flex-direction: column; align-items: stretch; }
}

/* 480 down (small phones) */
@media (max-width: 480px) {
  /* Ensure tap targets & spacing */
  .btn, .nav a, button, input, select { min-height: 44px; }
}

/* Video stats cards - centering only */
/* Center content vertically in all cards */
.video-section-mobile .bg-white\/20 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Prevent line breaks in card text */
.video-section-mobile .text-xl.md\\:text-5xl {
  white-space: nowrap !important;
}

/* Hero video section fix - eliminate all margins that create black gaps */
/* Multiple selectors to ensure this overrides mobile.css !important rules */
section[aria-label="Hero section"] .video-section-mobile,
.video-section-mobile,
div.video-section-mobile {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Additional override for specific breakpoints that cause issues */
@media (min-width: 1024px) and (max-height: 768px) {
  section[aria-label="Hero section"] .video-section-mobile,
  .video-section-mobile,
  div.video-section-mobile {
    margin-top: 0 !important;
  }
}

@media (min-width: 1024px) and (max-height: 600px) {
  section[aria-label="Hero section"] .video-section-mobile,
  .video-section-mobile,
  div.video-section-mobile {
    margin-top: 0 !important;
  }
}

/* Ensure video container position is seamless */
.video-section-mobile {
  position: relative !important;
  top: 0 !important;
}

/* Last-resort safety to avoid accidental horizontal scroll; only if needed */
body { overflow-x: clip; }