/* =========================================================
   Karat-Boutique — Responsive Layouts
   ========================================================= */

@media (max-width: 1024px) {
  .section { padding: 5rem 0; }
  .intro { grid-template-columns: 1fr; gap: 3rem; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .test-grid { grid-template-columns: 1fr; }
  .showcase { grid-template-columns: 1fr 1fr; height: auto; }
  .showcase .stack { grid-template-rows: 280px 280px; }
  .showcase > div:first-child { grid-column: 1 / -1; height: 400px; }
  .social-grid { grid-template-columns: repeat(4, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .values-grid { grid-template-columns: 1fr; }
  .masonry { column-count: 2; }
}

@media (max-width: 768px) {
  .container { padding: 0 1.4rem; }
  .nav-links {
    position: fixed; top: 0; right: -100%; width: 80%; max-width: 360px;
    height: 100vh; background: var(--black-2);
    flex-direction: column; justify-content: center;
    padding: 2rem; gap: 1.8rem; transition: right .5s ease;
    border-left: 1px solid var(--line);
  }
  .nav-links.open { right: 0; }
  .nav-links a { font-size: 1rem; }
  .menu-toggle { display: block; }

  .hero { background-attachment: scroll; min-height: 90vh; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .scroll-cue { display: none; }

  .cards { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .showcase { grid-template-columns: 1fr; }
  .showcase > div:first-child { height: 320px; }
  .showcase .stack { grid-template-rows: 220px 220px; }

  .social-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1fr; gap: 2rem; }
  .foot-bottom { flex-direction: column; text-align: center; }

  .news-form { flex-direction: column; }
  .form-row { grid-template-columns: 1fr; }
  .hours { grid-template-columns: 1fr; }
  .timeline::before { left: 30px; }
  .tl-item { grid-template-columns: 60px 1fr; gap: 1rem; }
  .tl-year { font-size: 1.1rem; }

  .masonry { column-count: 1; }
  .filters { gap: .4rem; }
  .filter-btn { padding: .5rem 1rem; font-size: .7rem; }
}

@media (max-width: 480px) {
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.8rem; }
  .section { padding: 4rem 0; }
  .news-card { padding: 2.5rem 1.4rem; }
  .contact-form { padding: 1.6rem; }
}