/**
 * Responsive CSS — Breakpoints & Adaptive Layout
 */

/* ─── Tablet (≤1024px) ────────────────────────── */
@media (max-width: 1024px) {
  .container { padding: 0 var(--sp-lg); }

  .logo { font-size: var(--fs-3xl); }

  .download-section,
  .manual-section,
  .results-section { padding: var(--sp-xl) var(--sp-lg); }

  .manual-steps { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* ─── Mobile (≤768px) ─────────────────────────── */
@media (max-width: 768px) {
  :root { font-size: 15px; }

  .container { padding: 0 var(--sp-md); }

  .header { padding: var(--sp-2xl) var(--sp-md) var(--sp-xl); }

  .logo { font-size: var(--fs-2xl); }

  .tagline { font-size: var(--fs-xs); }

  .section-title { font-size: var(--fs-xl); }

  .section-subtitle { font-size: var(--fs-sm); }

  .download-section,
  .manual-section,
  .results-section {
    padding: var(--sp-xl) var(--sp-md);
    border-radius: var(--r-lg);
  }

  .form-wrapper {
    flex-direction: column;
    gap: var(--sp-sm);
  }

  .download-btn {
    width: 100%;
    min-width: unset;
    padding: var(--sp-md) var(--sp-lg);
  }

  .link-input { padding: var(--sp-md); }

  .manual-steps { grid-template-columns: 1fr; gap: var(--sp-lg); }

  .step { gap: var(--sp-md); }

  .step-number {
    width: 44px;
    height: 44px;
    font-size: var(--fs-lg);
  }

  .step-content h3 { font-size: var(--fs-sm); }
  .step-content p  { font-size: var(--fs-xs); }

  .result-item { border-radius: var(--r-md); }

  .result-download {
    padding: var(--sp-xs) var(--sp-md);
    font-size: var(--fs-xs);
  }
}

/* ─── Small Mobile (≤480px) ──────────────────── */
@media (max-width: 480px) {
  :root { font-size: 14px; }

  .container { padding: 0 var(--sp-sm); }

  .header { padding: var(--sp-xl) var(--sp-sm) var(--sp-lg); }

  .logo {
    font-size: var(--fs-xl);
    flex-direction: column;
    gap: var(--sp-sm);
  }

  .section-title { font-size: var(--fs-lg); }

  .download-section,
  .manual-section,
  .results-section { padding: var(--sp-lg) var(--sp-sm); }

  .result-media { min-height: 180px; }

  .result-info { flex-wrap: wrap; gap: var(--sp-sm); }

  main { padding: var(--sp-xl) 0 var(--sp-2xl); }

  section { margin-bottom: var(--sp-xl); }
}

/* ─── Landscape Mobile ────────────────────────── */
@media (max-height: 600px) and (orientation: landscape) {
  .header { padding: var(--sp-lg) var(--sp-xl); }
  .logo { font-size: var(--fs-2xl); }
  .manual-steps { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Print ───────────────────────────────────── */
@media print {
  body { background: #fff; color: #000; }
  .download-btn, .result-download, .message { display: none !important; }
  .header::before, .header::after { display: none; }
}

/* ─── High DPI ────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

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