/* ============================================================
   Responsive — All media queries
   Mobile-first: styles above are mobile defaults
   ============================================================ */

/* --- 480px+ — Large phones, small tablets --- */
@media (min-width: 480px) {
  .file-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .controls-actions {
    flex-wrap: nowrap;
  }
}

/* --- 768px+ — Tablets --- */
@media (min-width: 768px) {
  .site-main {
    padding: 2rem 1.5rem 2rem;
  }

  .tool-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    align-items: start;
  }

  .tool-layout__sidebar {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
  }

  .file-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- 1024px+ — Desktop --- */
@media (min-width: 1024px) {
  .site-main {
    padding: 2rem 2rem 2rem;
  }

  .tool-layout {
    grid-template-columns: 220px 1fr 180px;
    gap: 2rem;
  }

  .file-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .upload-zone {
    padding: 3rem 2rem;
  }
}

/* --- Large desktop --- */
@media (min-width: 1280px) {
  .tool-layout {
    grid-template-columns: 240px 1fr 200px;
    gap: 2rem;
  }

  .file-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* --- Print --- */
@media print {
  .site-header,
  .site-footer,
  .ad-wrapper,
  .cookie-consent,
  .theme-toggle,
  .upload-zone,
  .controls-panel,
  .btn {
    display: none !important;
  }

  .preview-panel__comparison {
    grid-template-columns: 1fr 1fr;
  }
}