/* ==========================================================================
   AURELIA HEELS — RESPONSIVE RULES
   Mobile-first overrides layered on top of style.css. Breakpoints:
   1080px (small desktop / large tablet), 860px (tablet), 600px (mobile).
   ========================================================================== */

/* ------------------------------ ≤1080px ------------------------------ */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .value-strip ul { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-col:nth-child(4) { grid-column: 1 / -1; }
}

/* ------------------------------- ≤860px ------------------------------- */
@media (max-width: 860px) {
  .nav-list {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 340px);
    height: 100vh;
    background: var(--ivory);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 3rem clamp(1.5rem, 6vw, 3rem);
    gap: 1.6rem;
    box-shadow: -18px 0 40px -20px rgba(58, 44, 50, 0.35);
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease);
    z-index: 940;
  }
  .nav-list.is-open {
    transform: translateX(0);
  }
  .nav-list a {
    font-size: 1rem;
  }
  .nav-toggle {
    display: flex;
  }
  .nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(58, 44, 50, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: all var(--dur-med) var(--ease);
    z-index: 930;
  }
  .nav-scrim.is-open {
    opacity: 1;
    visibility: visible;
  }

  .hero .container,
  .split,
  .split.reverse,
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .split.reverse .split-visual {
    order: 0;
  }
  .hero-visual {
    order: -1;
  }
  .hero {
    text-align: left;
    min-height: auto;
    padding-block: 8rem 4rem;
  }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }

  .form-row { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------- ≤600px ------------------------------- */
@media (max-width: 600px) {
  section { padding: 3rem 0; }

  .grid-4,
  .grid-3 { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: repeat(2, 1fr); }
  .value-strip ul { grid-template-columns: 1fr 1fr; }

  .hero-visual .ribbon-tag {
    left: 50%;
    transform: translateX(-50%);
    bottom: -18px;
    width: max-content;
  }

  .stat-row { gap: 1.6rem; }

  .footer-grid { grid-template-columns: 1fr; text-align: left; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .back-to-top,
  .whatsapp-float {
    width: 44px;
    height: 44px;
    right: 1.1rem;
    left: 1.1rem;
    bottom: 1.1rem;
  }
  .whatsapp-float { left: 1.1rem; right: auto; }
  .back-to-top { left: auto; right: 1.1rem; }

  .framed::before,
  .framed::after {
    width: 28px;
    height: 28px;
  }
}