/* ============================================================
   ATONIX ENGINEERING — Responsive Stylesheet
   Breakpoints:
     - Large tablet / small laptop: ≤ 1024px
     - Tablet:                       ≤ 880px
     - Mobile:                       ≤ 640px
     - Small mobile:                 ≤ 420px
   ============================================================ */

/* ==== Large tablet / small laptop ==== */
@media (max-width: 1024px) {
  :root { --container-pad: 20px; }

  .section { padding-block: 80px; }

  .about__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .services__pillars {
    grid-template-columns: 1fr;
    gap: 20px;
  }

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

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

  .contact__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer__col--brand { grid-column: 1 / -1; }
}

/* ==== Tablet ==== */
@media (max-width: 880px) {

  /* Nav: hamburger menu */
  .nav__menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--atonix-navy);
    flex-direction: column;
    justify-content: flex-start;
    padding: 40px 24px;
    transform: translateX(100%);
    transition: transform 400ms var(--ease-out);
    overflow-y: auto;
  }

  .nav__menu.is-open { transform: translateX(0); }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    margin: 0 0 24px;
  }

  .nav__link {
    padding: 16px 20px;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav__link::after { display: none; }
  .nav__link:hover { color: var(--atonix-orange); }

  .nav__cta {
    width: 100%;
    justify-content: center;
    padding: 16px;
  }

  .nav__toggle { display: flex; }

  /* Navbar background solid when menu open (so backdrop doesn't bleed) */
  .nav.menu-open { background: var(--atonix-navy); }

  /* Hero */
  .hero { min-height: auto; padding-block: calc(var(--nav-height) + 60px) 80px; }

  .hero__accent { width: 100%; opacity: 0.35; }

  .hero__title { font-size: clamp(2.5rem, 11vw, 4.5rem); }

  .hero__cta { gap: 12px; }

  .hero__trust { gap: 10px; font-size: 0.7rem; }

  .hero__scroll { display: none; }

  /* Section heads */
  .section { padding-block: 70px; }

  .section__title { font-size: clamp(1.75rem, 6vw, 2.5rem); }

  .section__head { margin-bottom: 40px; }

  /* Services */
  .service-pillar { padding: 32px 24px; }
  .service-pillar__title { font-size: 1.4rem; }

  /* Why us */
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .why-slogan {
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    text-align: center;
  }
  .why-slogan__bolt:last-child { display: none; }

  /* Contact form */
  .form__row { grid-template-columns: 1fr; gap: 16px; }
  .form__actions { grid-template-columns: 1fr; }

  .contact__form-wrap { padding: 28px 24px; }
  .contact__info { padding: 32px 28px; }

  /* Footer */
  .footer { padding-top: 56px; }
  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}

/* ==== Mobile ==== */
@media (max-width: 640px) {

  :root {
    --container-pad: 18px;
    --nav-height: 68px;
  }

  /* Slightly tighter brand on small screens */
  .nav__brand-sub { font-size: 0.55rem; letter-spacing: 0.22em; }

  /* Hero adjustments */
  .hero__eyebrow { font-size: 0.7rem; letter-spacing: 0.2em; }

  .hero__title { font-size: clamp(2.25rem, 13vw, 3.5rem); gap: 2px; }

  .hero__subtitle { font-size: 1rem; margin-bottom: 32px; }

  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }

  .hero__trust {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .hero__trust-divider { display: none; }

  /* About pillars */
  .pillar-card { padding: 24px; }
  .pillar-card__num { font-size: 2rem; top: 16px; right: 22px; }
  .pillar-card__text { max-width: 100%; }

  /* Categories: one column on smallest */
  .cat-grid { grid-template-columns: 1fr; }

  /* Why us: one column */
  .why-grid { grid-template-columns: 1fr; gap: 14px; }
  .why-card { padding: 28px 20px; }

  /* Service pillar lists: smaller font */
  .service-pillar__list li { font-size: 0.88rem; }

  /* Contact info */
  .contact__info { padding: 28px 22px; }
  .contact__item { gap: 12px; }
  .contact__icon { width: 36px; height: 36px; }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .footer__col--brand { grid-column: auto; }

  /* WhatsApp button — slightly smaller on mobile */
  .wa-float {
    width: 54px;
    height: 54px;
    bottom: 18px;
    right: 18px;
  }
  .wa-float svg { width: 26px; height: 26px; }
}

/* ==== Small mobile ==== */
@media (max-width: 420px) {
  .btn { padding: 12px 20px; font-size: 0.9rem; }
  .btn--lg { padding: 14px 22px; font-size: 0.95rem; }

  .nav__brand-name { font-size: 1.1rem; }
  .nav__logo-mark { width: 32px; height: 32px; }

  .contact__form-wrap { padding: 22px 18px; }
}

/* ==== Logo sizing on small screens ==== */
@media (max-width: 640px) {
  .nav__logo-img { height: 36px; }
  .footer__logo-img { height: 36px; }
  .hero__dots { bottom: 20px; right: 20px; flex-direction: row; gap: 7px; }
}

/* ==== Gallery + service media responsive ==== */
@media (max-width: 1024px) {
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
  }

  /* Reset alternating span pattern on tablet */
  .gallery__item:nth-child(1),
  .gallery__item:nth-child(4),
  .gallery__item:nth-child(6) {
    grid-column: span 1;
  }

  /* Compensate for tablet pillar padding (32px 24px) */
  .service-pillar__media {
    margin: -32px -24px 24px;
  }

  .about__img-wrap {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 880px) {
  .service-pillar__media {
    height: 180px;
  }
}

@media (max-width: 640px) {
  .gallery__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 200px;
  }

  .gallery__overlay {
    opacity: 1; /* always show on mobile (no hover) */
  }

  .gallery__zoom {
    transform: scale(1) rotate(0deg); /* always visible on mobile */
  }

  .lightbox {
    padding: 16px 56px;
  }

  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
}

/* ==== Reduced motion ==== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1 !important; transform: none !important; }

  .hero__slide img { animation: none !important; }
}