/* metalguy.app — responsive.css
   Mobile-first. Breakpoints: 480 (phone wide), 768 (tablet), 1024 (desktop). */

/* ============== Mobile baseline (default rules apply) ============== */

/* Search form stacks vertically on mobile */
.search-form { display: grid; gap: var(--space-3); }
.search-form .btn { width: 100%; }

/* Hide nav-link labels on tiny screens, show icons only — handled per-element */

/* ============== >= 480px (phone wide) ============== */
@media (min-width: 480px) {
  h1 { font-size: var(--size-4xl); }
}

/* ============== >= 768px (tablet) ============== */
@media (min-width: 768px) {
  :root { --gutter: var(--space-5); }

  .search-form {
    grid-template-columns: 140px 1fr auto;
    align-items: end;
  }

  .actions { flex-wrap: nowrap; }
}

/* ============== >= 1024px (desktop) ============== */
@media (min-width: 1024px) {
  :root { --gutter: var(--space-6); }

  main { padding-block: var(--space-7) var(--space-8); }
}

/* ============== Print ============== */
@media print {
  .masthead, .footer, .actions, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  .table th, .table td { border-color: #999; }
}