/* ==========================================================================
   EVER GOLD AND DIAMONDS LLP — responsive.css
   Breakpoints: 320 / 480 / 576 / 768 / 992 / 1200 / 1400
   ========================================================================== */

/* ---------- 320px: smallest phones ---------- */
@media (max-width: 360px) {
  .hero h1 { font-size: 30px; }
  .container { padding: 0 16px; }
  .btn { padding: 12px 20px; font-size: 12px; }
}

/* ---------- 480px ---------- */
@media (min-width: 480px) {
  .about-points { grid-template-columns: 1fr 1fr; }
  .highlights-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 576px ---------- */
@media (min-width: 576px) {
  .hero h1 { font-size: 44px; }
  .section-head h2 { font-size: 34px; }
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 768px: tablets — nav becomes inline for landscape tablets+ ---------- */
@media (min-width: 768px) {
  .collections-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .visit-grid { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 52px; }
}

/* ---------- 992px: desktop nav appears, mobile nav/hamburger hide ---------- */
@media (min-width: 992px) {
  .hamburger { display: none; }
  .main-nav {
    position: static;
    inset: auto;
    background: none;
    transform: none;
    display: flex;
    width: auto;
  }
  .main-nav ul { flex-direction: row; gap: 28px; padding: 0; }
  .nav-link { padding: 8px 0; font-size: 14px; border-bottom: none; }
  .site-header:not(.scrolled) .nav-link { color: var(--white); }
  .site-header.scrolled .nav-link { color: var(--black); }
  .header-actions .btn-call span { display: inline; }

  .about-grid { grid-template-columns: 1fr 1fr; }
  .collections-grid { grid-template-columns: repeat(4, 1fr); }
  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .featured-grid { grid-template-columns: repeat(4, 1fr); }
  .highlights-grid { grid-template-columns: repeat(4, 1fr); }

  section { padding: 110px 0; }
  .hero h1 { font-size: 62px; }
  .hero-sub { font-size: 17px; }
  .section-head h2 { font-size: 40px; }

  .mouse-glow { display: block; }
}

/* ---------- 1200px ---------- */
@media (min-width: 1200px) {
  .hero h1 { font-size: 72px; }
  .container { padding: 0 32px; }
  .about-grid { gap: 80px; }
  .visit-grid { gap: 60px; }
}

/* ---------- 1400px: large desktops ---------- */
@media (min-width: 1400px) {
  :root { --container-w: 1320px; }
  .hero h1 { font-size: 78px; }
  .section-head h2 { font-size: 44px; }
}