/* ============================================
   KITLY — RESPONSIVE BREAKPOINTS
   Mobile-first overrides
   ============================================ */

/* ---- Below 1024px: tighten footer, workspace ---- */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .container { padding: 0 var(--space-4); }
}

/* ---- Below 900px: hide desktop nav, show hamburger ---- */
@media (max-width: 900px) {
  .main-nav { display: none; }
  .hamburger { display: flex; align-items: center; justify-content: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}

/* ---- Below 768px: stack tool workspace, tighten spacing ---- */
@media (max-width: 768px) {
  section { padding: var(--space-7) 0; }
  .hero { padding: var(--space-7) 0 var(--space-6); }
  .hero-stats { gap: var(--space-5); }
  .tool-panel { padding: var(--space-4); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .result-row { flex-direction: column; align-items: stretch; }
  .result-row .btn { width: 100%; }
}

/* ---- Below 768px: stack two-column tool layouts into a single column ---- */
@media (max-width: 768px) {
  #gradient-layout,
  #bs-layout,
  #cc-layout,
  #rp-layout,
  .responsive-grid {
    grid-template-columns: 1fr !important;
  }
  .responsive-grid-uc {
    grid-template-columns: 1fr !important;
  }
  .responsive-grid-uc > button {
    justify-self: center;
    transform: rotate(90deg);
  }
  #rp-layout > div:last-child { margin-top: var(--space-5); }
}

@media (max-width: 375px) {
  h1 { font-size: 2rem; }
  .container { padding: 0 var(--space-3); }
  .hero-actions .btn { width: 100%; }
}