/* ==========================================================================
   VitaAvanza — Mobile Optimization Layer
   Production-grade mobile fixes applied globally across all pages.
   ========================================================================== */

/* ── Base resets ── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ── iOS safe area support ── */
@supports (padding: env(safe-area-inset-bottom)) {
  .va-nav-drawer {
    padding-bottom: env(safe-area-inset-bottom);
  }
  #site-nav {
    padding-top: env(safe-area-inset-top);
  }
}

/* ── Touch targets — minimum 44x44px ── */
@media (max-width: 767px) {
  /* Ensure all interactive pill/tag elements have adequate tap height */
  a[class*="rounded-full"],
  button[class*="rounded-full"] {
    min-height: 2.75rem;
  }
}

/* ── Typography floor — ensure readability ── */
@media (max-width: 767px) {
  /* Hero headings scale */
  h1[class*="text-[3"],
  h1[class*="text-[4"],
  h1[class*="text-[5"],
  h1[class*="text-[6"],
  h1[class*="text-[7"] {
    font-size: clamp(2rem, 8vw, 4.5rem) !important;
    line-height: 1.05 !important;
  }

  /* Section headings */
  h2[class*="text-4xl"],
  h2[class*="text-5xl"],
  h3[class*="text-4xl"],
  h3[class*="text-5xl"],
  h3[class*="text-6xl"] {
    font-size: clamp(1.75rem, 7vw, 3rem) !important;
    line-height: 1.1 !important;
  }

  /* Body text minimum */
  p, li, span:not([class*="text-["]):not([class*="tracking-"]) {
    font-size: max(var(--tw-font-size, inherit), 0.875rem);
  }
}

/* ── Layout collapse — grids to single column ── */
@media (max-width: 767px) {
  /* Force multi-column grids to single column */
  .grid[class*="sm:grid-cols-2"][class*="lg:grid-cols-3"],
  .grid[class*="sm:grid-cols-2"][class*="lg:grid-cols-4"],
  .grid[class*="sm:grid-cols-2"][class*="xl:grid-cols-4"] {
    grid-template-columns: 1fr !important;
  }

  /* Stats row — 2x2 on small phones */
  .grid[class*="sm:grid-cols-2"]:not([class*="lg:grid-cols-3"]):not([class*="lg:grid-cols-4"]):not([class*="xl:grid-cols-4"]) {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Side-by-side hero/feature layouts stack */
  .grid[class*="lg:grid-cols-2"],
  .grid[class*="lg:grid-cols-["] {
    grid-template-columns: 1fr !important;
  }

  /* Recognition strip wraps naturally */
  section[class*="py-5"] > div[class*="flex-wrap"] {
    gap: 0.5rem;
    justify-content: center;
  }

  /* Full-width CTAs on small phones */
  a[class*="px-8"][class*="py-4"],
  a[class*="magnetic-btn"] {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ── Small phone specific (< 480px) ── */
@media (max-width: 479px) {
  /* CTA buttons full width */
  .flex[class*="sm:flex-row"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .flex[class*="sm:flex-row"] > a,
  .flex[class*="sm:flex-row"] > button {
    width: 100%;
  }

  /* Reduce side padding */
  .max-w-7xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Glass panels need adequate padding */
  .glass-panel {
    padding: 1.25rem !important;
  }

  /* Founder card image smaller on tiny screens */
  .founder-card .w-44 {
    width: 9rem !important;
    height: 9rem !important;
  }
}

/* ── Table responsiveness ── */
@media (max-width: 767px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Touch devices — persistent hover states ── */
@media (hover: none) {
  .glass-panel {
    transform: none !important;
  }

  .va-site-nav-link::before,
  .va-site-nav-link::after {
    display: none;
  }
}

/* ── Performance — reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Canvas touch interaction ── */
canvas {
  touch-action: pan-y;
}

/* ── Prevent iOS zoom on form focus ── */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ── Cookie banner mobile constraints ── */
@media (max-width: 767px) {
  [data-cookie-banner],
  .cookie-banner {
    max-height: 40vh;
    overflow-y: auto;
  }
}

/* ── Footer mobile stacking ── */
@media (max-width: 767px) {
  .va-footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Hero mobile padding reduction ── */
@media (max-width: 767px) {
  header[class*="pt-40"],
  header[class*="pt-44"] {
    padding-top: 7rem !important;
    padding-bottom: 2rem !important;
  }

  header[class*="min-h-[90vh]"],
  header[class*="min-h-screen"] {
    min-height: 80vh !important;
  }
}

/* ── Models page stats grid — 2x2 on mobile ── */
@media (max-width: 767px) {
  .model-stats[class*="grid-cols-4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .model-stats[class*="grid-cols-3"],
  div[class*="grid-cols-3"][class*="mt-8"]:not([class*="md:"]):not([class*="lg:"]) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Model cards — stack on mobile ── */
@media (max-width: 767px) {
  .grid.grid-cols-1.lg\:grid-cols-2[class*="gap-6"] {
    gap: 2rem !important;
  }
}

/* ── Pricing cards equal height on mobile ── */
@media (max-width: 767px) {
  .grid.grid-cols-1.lg\:grid-cols-3 {
    gap: 1.5rem !important;
  }
}

/* ── DVI dimension cards ── */
@media (max-width: 479px) {
  .grid.grid-cols-1.md\:grid-cols-2[class*="gap-5"] {
    gap: 1rem !important;
  }
}

/* ── Team grid — single column on mobile ── */
@media (max-width: 767px) {
  .grid[class*="md:grid-cols-2"][class*="lg:grid-cols-3"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Nav bar overflow prevention ── */
@media (max-width: 767px) {
  nav .grid-cols-\[minmax\(0\,1fr\)_auto_minmax\(0\,1fr\)\] {
    gap: 0.25rem !important;
  }

  nav .whitespace-nowrap {
    font-size: 12px !important;
    padding: 0.4rem 0.75rem !important;
  }
}

/* ── Recognition strip scroll on small screens ── */
@media (max-width: 479px) {
  section[class*="py-5"] > div[class*="flex-wrap"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
  }

  section[class*="py-5"] > div[class*="flex-wrap"] > a,
  section[class*="py-5"] > div[class*="flex-wrap"] > span {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* ── Contact form mobile padding ── */
@media (max-width: 767px) {
  form[class*="glass-panel"] {
    padding: 1.5rem !important;
  }
}

/* ── About page timeline vertical on mobile ── */
@media (max-width: 767px) {
  .grid[class*="lg:grid-cols-[1fr_1.05fr]"],
  .grid[class*="lg:grid-cols-[1.2fr_1fr]"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* ── Spec bars full width on mobile ── */
@media (max-width: 767px) {
  .spec-bar {
    width: 100% !important;
  }
}

/* ── Organizations stats grid ── */
@media (max-width: 479px) {
  .grid[class*="grid-cols-2"][class*="lg:grid-cols-4"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
}

/* ── Prevent horizontal scroll from absolute elements ── */
@media (max-width: 767px) {
  .orb1, .orb2, .orb3 {
    display: none !important;
  }
}

/* ── Landscape phone optimization ── */
@media (max-height: 500px) and (orientation: landscape) {
  header[class*="min-h-[90vh]"],
  header[class*="min-h-screen"] {
    min-height: auto !important;
    padding-top: 5rem !important;
    padding-bottom: 2rem !important;
  }
}

/* ── Print: hide non-essential elements ── */
@media print {
  #site-nav, canvas, .va-nav-drawer, .va-nav-overlay {
    display: none !important;
  }
}