/* Centralized mobile responsive rules.
   Loaded by every Convrt page. Desktop (≥901px) is untouched —
   all rules are gated behind media queries.
   Naming: leverages existing class names per page.  */

/* ───────── Tablet (≤900px) ───────── */
@media (max-width: 900px) {
  body { font-size: 14px; }

  .container {
    padding: 20px 14px !important;
    max-width: 100% !important;
  }

  /* Headings */
  h1 { font-size: 22px !important; }
  h2 { font-size: 15px !important; }
  .page-title { font-size: 22px !important; }
  .page-sub   { font-size: 13px !important; }

  /* Generic cards */
  .card,
  .upload-card { padding: 18px !important; border-radius: 12px !important; }

  /* Drop zones */
  .drop-zone {
    padding: 28px 14px !important;
    border-radius: 10px !important;
  }
  .drop-icon { font-size: 32px !important; }
  .drop-title { font-size: 14px !important; }
  .drop-hint { font-size: 11px !important; }

  /* Primary action buttons fill width */
  .btn-merge,
  .btn-split,
  .btn-compress,
  .btn-convert,
  .btn-add { width: 100%; }

  /* Two-column layouts collapse */
  .two-col,
  .grid-2,
  .col-grid { display: block !important; }
  .col-main, .col-side { width: 100% !important; }
  .col-side { margin-top: 16px; }

  /* File list rows wrap */
  .file-item,
  .file-row {
    flex-wrap: wrap;
    gap: 8px !important;
  }

  /* Footer */
  footer { padding: 16px 12px !important; font-size: 11px !important; }

  /* Modals fill viewport */
  .modal-content,
  .video-modal-content {
    width: 96% !important; max-width: 96% !important;
    max-height: 90vh !important;
    margin: 4vh auto !important;
  }

  /* Hide cosmetic side ornaments on small screens */
  .header-ornament,
  .side-decoration { display: none !important; }
}

/* ───────── Phone (≤600px) ───────── */
@media (max-width: 600px) {
  .container { padding: 16px 10px !important; }

  .page-title { font-size: 19px !important; }
  .page-sub   { font-size: 12px !important; }

  .card,
  .upload-card { padding: 14px !important; }

  .drop-zone { padding: 22px 10px !important; }
  .drop-icon { font-size: 28px !important; }

  /* Make resolution chips wrap nicely */
  .res-grid { gap: 6px !important; }
  .res-chip { padding: 6px 12px !important; font-size: 12px !important; }

  /* Job cards: stack labels and actions */
  .job-card,
  .conv-card {
    padding: 12px !important;
  }
  .job-top { flex-wrap: wrap !important; gap: 6px !important; }
  .job-name { max-width: 100% !important; font-size: 13px !important; }

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

  /* PDF Editor empty state — handled in pdf_editor.html via @media */
}

/* ───────── Touch device niceties ───────── */
@media (hover: none) and (pointer: coarse) {
  .drop-zone:hover { background: inherit; }
  /* Bigger tap targets */
  button, .btn, a.btn, .res-chip, .file-item button, .nav-drop-menu a {
    min-height: 36px;
  }
}