/* responsive.css */

/* ─── Tablet ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .landing-hero-visual { display: none; }
  .site-header { padding: 18px 20px; }

  /* Landing sections stack */
  .landing-main {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 20px 20px 48px;
    min-height: auto;
  }
  .landing-sections { padding: 0 20px; }
  .how-grid  { grid-template-columns: 1fr 1fr; }
  .why-grid  { grid-template-columns: 1fr 1fr; }
  .test-grid { grid-template-columns: 1fr; }
}

/* ─── Mobile ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Quiz header */
  .quiz-steps { display: none; }
  .quiz-header { padding: 10px 14px; gap: 8px; }
  .quiz-back-btn span { display: none; } /* hide "Back" text, keep arrow */
  .progress-bar-wrap { padding: 0 14px 8px; }

  /* Quiz body — no extra padding, let viewport do the work */
  .quiz-body { padding: 16px 14px 76px; } /* extra bottom for sticky nav */

  /* Question text smaller */
  .question-text { font-size: 1.15rem; }
  .question-hint { font-size: .8rem; margin-bottom: 14px; }

  /* ── KEY FIX: choice grid fits viewport without scrolling ── */
  /* Use a dynamic viewport height grid so all options are visible */
  .choice-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  /* Compact buttons — less padding, smaller text, smaller icon */
  .choice-btn {
    padding: 9px 10px;
    font-size: .78rem;
    gap: 6px;
    border-radius: 10px;
  }
  .choice-icon { font-size: 1rem; }

  /* For grids with many options (10 items = 5 rows), shrink further */
  .choice-grid.grid-lg .choice-btn {
    padding: 7px 9px;
    font-size: .73rem;
  }
  .choice-grid.grid-lg .choice-icon { font-size: .9rem; }

  /* Custom input compact */
  .custom-input-wrap { margin-top: 7px; }
  .custom-input-label { font-size: .72rem; margin-bottom: 4px; }
  .q-input-custom { padding: 9px 11px; font-size: .85rem; }

  /* Nav buttons — sticky at bottom, sized well */
  .btn-prev, .btn-next { padding: 11px 18px; font-size: .88rem; flex: 1; justify-content: center; }

  /* Summary page — everything fits on screen */
  .summary-body { padding: 12px 14px 16px; }
  .summary-header-block { margin-bottom: 10px; }
  .summary-icon { font-size: 1.5rem; margin-bottom: 4px; }
  .summary-title { font-size: 1.1rem; margin-bottom: 4px; }
  .summary-sub { font-size: .78rem; }
  .overview-grid { grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 10px; }
  .overview-item { padding: 7px 9px; }
  .overview-value { font-size: .75rem; }
  .overview-label { font-size: .56rem; }
  .btn-generate { font-size: .9rem; padding: 12px 20px; margin-bottom: 6px; }
  .summary-note { font-size: .68rem; }

  /* Result */
  .result-banner { padding: 22px 16px; }
  .result-hero-name { font-size: 1.7rem; }
  .result-sections { padding: 16px; gap: 10px; }
  .result-body { padding: 20px 14px 48px; }

  /* Popup */
  .popup-card { padding: 26px 18px; }

  /* Action buttons stack */
  .result-actions { flex-direction: column; align-items: stretch; }
  .btn-action { min-width: unset; width: 100%; }

  /* Landing */
  .landing-title { font-size: 1.8rem; }
  .landing-sub   { font-size: .9rem; }
  .btn-start     { font-size: .95rem; padding: 13px 22px; width: 100%; justify-content: center; }
  .how-grid, .why-grid { grid-template-columns: 1fr; }
  .social-proof-bar { flex-direction: column; gap: 12px; align-items: center; }
  .landing-sections { padding: 0 14px; }
  .section-block { padding: 40px 0; }
  .faq-item { padding: 16px; }
}

@media (max-width: 380px) {
  .choice-btn { padding: 7px 8px; font-size: .7rem; }
  .choice-icon { font-size: .85rem; }
  .question-text { font-size: 1.05rem; }
}

/* Medium screens — smaller dots */
@media (max-width: 780px) and (min-width: 641px) {
  .quiz-step-dot { width: 24px; height: 24px; font-size: .6rem; }
  .quiz-steps { gap: 3px; }
}