/* ══ EUAICHECK — MOBILE RESPONSIVE ══ */

/* ── GLOBAL ── */
*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; height: auto; }

/* ── NAV ── */
@media (max-width: 768px) {
  #mainNav {
    padding: 0.75rem 1rem !important;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .nav-links {
    display: none !important;
  }

  .nav-cta {
    font-size: 0.8rem !important;
    padding: 0.5rem 1rem !important;
  }

  .logo-img { width: 22px !important; height: 22px !important; }

  #langBar {
    top: 10px !important;
    right: 120px !important;
  }

  .lang-btn {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.5rem !important;
  }
}

/* ── HERO ── */
@media (max-width: 768px) {
  #hero {
    min-height: 90vh;
    padding-top: 80px;
  }

  .hero-inner {
    padding: 1.5rem !important;
    text-align: center;
  }

  .hero-title {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    line-height: 1.2 !important;
  }

  .hero-sub {
    font-size: 0.95rem !important;
  }

  .hero-btn {
    width: 100% !important;
    justify-content: center !important;
    font-size: 1rem !important;
    padding: 1rem !important;
  }
}

/* ── STORY SECTIONS ── */
@media (max-width: 768px) {
  .story-section {
    padding: 3.5rem 1.25rem !important;
  }

  .split {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    direction: ltr !important;
  }

  .split.reverse {
    direction: ltr !important;
  }

  .stat-trio {
    grid-template-columns: 1fr !important;
  }

  .why-grid {
    grid-template-columns: 1fr !important;
  }

  .honest-split {
    grid-template-columns: 1fr !important;
  }

  .report-pages {
    grid-template-columns: 1fr !important;
  }

  .comparison-bar {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .rednblue-banner {
    flex-direction: column !important;
    text-align: center !important;
  }

  .story-title {
    font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
  }

  .price-ladder { width: 100% !important; }

  .anxiety-list { gap: 0.5rem !important; }

  canvas.radar {
    max-width: 280px !important;
  }
}

/* ── CONTACT ── */
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .section-panel {
    padding: 2rem 1.25rem !important;
  }
}

/* ── FOOTER ── */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .footer-full {
    padding: 2.5rem 1.25rem !important;
  }
}

/* ── QUIZ OVERLAY ── */
@media (max-width: 768px) {
  #quizOverlay {
    padding: 0 !important;
  }

  .quiz-top {
    padding: 1rem !important;
  }

  .quiz-body {
    padding: 1rem !important;
  }

  .q-text {
    font-size: 1.1rem !important;
  }

  .options {
    gap: 0.65rem !important;
  }

  .option {
    padding: 0.85rem 1rem !important;
    font-size: 0.9rem !important;
  }

  .btn-next, .btn-back {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.95rem !important;
  }

  .q-nav {
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
  }
}

/* ── RESULT OVERLAY ── */
@media (max-width: 768px) {
  #resultOverlay {
    padding: 1rem !important;
  }

  .result-container {
    padding: 1.5rem 1rem !important;
  }

  .price-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .gap-list {
    gap: 0.5rem !important;
  }

  .gap-row {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .cta-card {
    padding: 1.25rem !important;
  }

  .feat-list {
    font-size: 0.85rem !important;
  }

  #payEmail {
    font-size: 16px !important; /* prevent iOS zoom */
  }
}

/* ── FORM INPUTS ── */
@media (max-width: 768px) {
  .form-input {
    font-size: 16px !important; /* prevent iOS zoom on focus */
  }

  .form-row {
    flex-direction: column !important;
    gap: 0.65rem !important;
  }

  .q-input {
    font-size: 16px !important;
  }
}

/* ── SMALL SCREENS ── */
@media (max-width: 380px) {
  .hero-title {
    font-size: 1.8rem !important;
  }

  .nav-cta {
    display: none !important;
  }

  #langBar {
    right: 70px !important;
  }
}