/* ============================================
   RESPONSIVE — mobile-first overrides
   ============================================ */

@media (max-width: 900px) {
  .hero .container {
    grid-template-columns: 1fr;
  }
  .hero-visual { height: 160px; order: -1; }
  .site-footer .container { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .main-nav {
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    background: var(--parchment);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .main-nav.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-toggle {
    display: inline-flex;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.4rem 0.6rem;
    font-family: var(--font-body);
    cursor: pointer;
  }
  .form-grid { grid-template-columns: 1fr; }
  .site-footer .container { grid-template-columns: 1fr; gap: var(--space-3); }
  .footer-bottom { flex-direction: column; gap: 0.4rem; }
}

@media (max-width: 520px) {
  h1 { font-size: 2rem; }
  section { padding: var(--space-4) 0; }
  .hero .container { padding-top: var(--space-4); padding-bottom: var(--space-4); }
}

/* Admin shell responsiveness */
@media (max-width: 860px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    overflow-x: auto;
  }
  .admin-sidebar nav { display: flex; gap: var(--space-2); }
}