/* ==========================================================================
   ZeeTech Armouries — responsive enhancements (min-width, mobile-first)
   ========================================================================== */

/* Very small phones (320px) */
@media (max-width: 359px) {
  :root { --gutter: 1rem; }
  .brand-text b { font-size: 1.12rem; }
  .brand-text small { letter-spacing: 0.18em; }
  .brand img { width: 38px; height: 38px; }
  .btn { padding-inline: 1.1rem; width: 100%; }
  .values { grid-template-columns: 1fr; }
}

/* Large phones / small tablets */
@media (min-width: 560px) {
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .form-row { grid-template-columns: 1fr 1fr; }
  .contact-cards { grid-template-columns: 1fr 1fr; }
  .hero__strip ul { grid-template-columns: repeat(3, 1fr); }
  .hero__strip li:not(:last-child) { display: flex; }
}

/* Tablets */
@media (min-width: 768px) {
  :root { --gutter: 2rem; }
  .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .app-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .logo-grid { grid-template-columns: repeat(4, 1fr); }
  .hero__dots { display: flex; }
  .map-box__art { aspect-ratio: 16 / 6; }
}

/* Small desktops — also where split layouts become two-column */
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-text { grid-template-columns: 1.15fr 0.85fr; }
  .split--wide-media { grid-template-columns: 0.85fr 1.15fr; }
  .showcase__row { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
  .showcase__row:nth-child(even) .showcase__media { order: 2; }
  .card-grid--3, .card-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .feature-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .app-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .contact-layout { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
  .contact-cards { grid-template-columns: 1fr; }
  .service-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .service-layout > aside { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* Desktop navigation */
@media (min-width: 1120px) {
  :root { --header-h: 96px; }
  .nav-toggle, .nav-backdrop { display: none !important; }
  .brand img { height: 78px; max-width: 250px; }
  .site-footer .brand img { height: 88px; max-width: 280px; }
  .primary-nav,
  .js .primary-nav,
  .js .nav-open .primary-nav {
    position: static !important;
    inset: auto !important;
    flex-basis: auto;
    width: auto;
    height: auto;
    max-height: none;
    padding: 0;
    margin: 0;
    background: none;
    overflow: visible;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    border: 0;
    box-shadow: none;
    z-index: auto;
  }
  .nav-list { flex-direction: row; align-items: center; gap: 0.15rem; }
  .js .nav-list > li { border: 0; }
  .nav-link { padding: 0.5rem 0.85rem; white-space: nowrap; }
  .nav-link::after { content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.2rem; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
  .nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
  .nav-link:hover { color: var(--gold-light); }
  .nav-cta { margin-left: 0.75rem; }
  .nav-cta .btn { width: auto; margin: 0; min-height: 44px; padding: 0.55rem 1.3rem; }
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .feature-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .steps--4 { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 0.8fr 1.1fr 1.1fr; gap: 3rem; }
  .logo-grid--5 { grid-template-columns: repeat(5, 1fr); }
  .to-top { right: 1.75rem; bottom: 1.75rem; }
}

/* Large desktops */
@media (min-width: 1440px) {
  :root { --container: 1280px; }
}

@media (min-width: 1920px) {
  :root { --container: 1360px; }
  html { font-size: 17px; }
}

/* Print */
@media print {
  .site-header, .to-top, .nav-backdrop, .cta, .hero__strip { display: none !important; }
  body { background: #fff; color: #000; }
  .js .reveal, .js [data-anim] { opacity: 1 !important; transform: none !important; }
  .section { padding: 1.5rem 0; }
}