/* ==========================================================================
   Algo Resize — Responsive rules
   Mobile-first base lives in style.css; this file layers refinements
   for larger viewports and adjusts density for smaller ones.
   ========================================================================== */

/* Small phones */
@media (max-width: 420px) {
  .container { padding: 0 var(--sp-4); }
  .hero { padding: var(--sp-6) 0 var(--sp-5); }
  .uploader { padding: var(--sp-5) var(--sp-4); margin-top: var(--sp-6); }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .panel { padding: var(--sp-4); }
  .brand__tagline { display: none; }
  .toast-stack { left: var(--sp-4); right: var(--sp-4); }
  .toast { max-width: none; }
}

/* Tablet portrait and up */
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

/* Tablet landscape / small laptop */
@media (min-width: 860px) {
  .layout-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--sp-6);
    align-items: start;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .hero h1 { font-size: var(--fs-3xl); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* Laptop and up */
@media (min-width: 1280px) {
  .hero h1 { font-size: var(--fs-4xl); }
}

/* Landscape phones — keep hero compact so controls are reachable */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding: var(--sp-5) 0 var(--sp-4); }
  .uploader { margin-top: var(--sp-5); padding: var(--sp-5); }
}

/* High contrast preference */
@media (prefers-contrast: more) {
  :root, [data-theme="light"] { --c-border: currentColor; }
  .btn-ghost, .icon-btn, .uploader, .card, .panel { border-width: 1.5px; }
}