/* ==========================================================================
   Responsive — Breakpoints & Touch
   Ōntóφys · The Mirror
   Mobile-first adjustments, touch ergonomics, landscape handling.
   ========================================================================== */

/* ── Tablet & below (768px) ─────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* Layout */
  .view {
    padding: var(--space-xl) var(--space-md);
  }

  .global-header {
    padding-top: var(--space-2xl);
  }

  #view-landing {
    gap: var(--space-lg);
  }

  #view-question {
    gap: 20px;
  }

  #view-email {
    gap: var(--space-md);
  }

  /* Typography */
  h1 {
    font-size: clamp(24px, 6vw, 32px);
  }

  h2 {
    font-size: clamp(20px, 5vw, 26px);
  }

  .lead,
  p.lead {
    font-size: clamp(15px, 3.8vw, 17px);
  }

  /* Buttons — full width on mobile */
  .btn {
    width: 100%;
    padding: 16px 32px;
    justify-content: center;
  }

  .btn-back,
  .btn-next {
    width: auto;
    min-width: 120px;
    flex: 1;
  }

  .question-nav {
    gap: var(--space-sm);
  }

  /* Textarea */
  .textarea {
    min-height: 130px;
    padding: 16px;
  }

  /* Email input */
  .input-email {
    max-width: 100%;
    padding: 14px 16px;
  }

  /* Language switcher */
  .language-switcher {
    top: var(--space-md);
    right: var(--space-md);
  }

  .language-btn {
    padding: 6px 14px;
    font-size: var(--fs-label);
  }
}

/* ── Small phone (480px) ────────────────────────────────────────────────── */

@media (max-width: 480px) {

  /* Layout — tighter padding */
  .view {
    padding: var(--space-lg) var(--space-md);
  }

  .global-header {
    padding-top: var(--space-xl);
  }

  #view-landing {
    gap: 20px;
  }

  #view-question {
    gap: var(--space-md);
  }

  /* Typography — floor sizes */
  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 18px;
  }

  .lead,
  p.lead {
    font-size: 15px;
  }

  /* Touch targets — minimum 44px */
  .btn {
    min-height: 48px;
    padding: 14px 24px;
    font-size: var(--fs-label);
  }

  .btn-back,
  .btn-next {
    min-height: 44px;
    padding: 12px 20px;
  }

  .language-btn {
    min-height: 36px;
    padding: 8px 12px;
  }

  /* Textarea */
  .textarea {
    min-height: 120px;
    padding: 14px;
    font-size: 16px;        /* prevents iOS zoom on focus */
  }

  /* Email input */
  .input-email {
    font-size: 16px;        /* prevents iOS zoom on focus */
    padding: 14px;
  }

  /* Progress text */
  .progress-text {
    font-size: 11px;
  }

  /* Section label */
  .section-label {
    font-size: 10px;
  }

  /* Language switcher — smaller */
  .language-switcher {
    top: var(--space-sm);
    right: var(--space-sm);
  }
}

/* ── Landscape on small screens ─────────────────────────────────────────── */

@media (max-height: 500px) and (orientation: landscape) {

  #view-landing {
    min-height: auto;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    gap: var(--space-md);
  }

  #view-confirmation {
    min-height: auto;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  #view-email {
    min-height: auto;
  }

  .view {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  /* Reduce textarea height in landscape */
  .textarea {
    min-height: 100px;
  }
}

/* ── Touch devices ──────────────────────────────────────────────────────── */

@media (hover: none) and (pointer: coarse) {

  /* Remove hover elevations on touch (they stick) */
  .btn-primary:hover,
  .btn-next:hover {
    transform: none;
  }

  /* Tap highlight */
  a,
  button,
  .btn,
  .language-btn {
    -webkit-tap-highlight-color: transparent;
  }

  /* Slightly larger touch targets */
  .btn {
    min-height: 48px;
  }

  .btn-back,
  .btn-next {
    min-height: 44px;
  }
}

/* ── High-DPI screens ──────────────────────────────────────────────────── */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {

  /* Sharper thin borders */
  .progress-bar {
    height: 2px;
  }
}

/* ── Dark mode hint (respects system preference) ────────────────────────── */
/* Uncomment if/when dark mode is desired.
   Keeping it here as a scaffold.

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:        #1a1918;
    --color-surface:   #242220;
    --color-text:      #e8e4df;
    --color-muted:     #9a9590;
    --color-border:    rgba(255, 255, 255, 0.1);
    --color-divider:   rgba(255, 255, 255, 0.06);
  }
}
*/