/* ==========================================================================
   AXS — responsive.css
   Layout adjustments for laptop, tablet and mobile
   ========================================================================== */

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1080px) {
  .cards-grid,
  .solutions-showcase { grid-template-columns: repeat(2, 1fr); }
  .solution-card--featured { grid-row: auto; grid-column: 1 / -1; }
  .projects__grid { grid-template-columns: repeat(2, 1fr); }
  .technologies__layout { grid-template-columns: 1fr; gap: 44px; }
  .technology-visual { min-height: 300px; }
  .tech-groups { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .footer__top { grid-template-columns: 1fr 1fr; row-gap: 40px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  section { padding-block: 88px; }

  .hero__layout { grid-template-columns: 1fr; gap: 44px; }
  .hero__panel { max-width: 560px; }

  .about__grid { grid-template-columns: 1fr; gap: 48px; }
  .about__visual { max-width: 260px; margin-inline: auto; }

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

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

/* ---------- Mobile navigation ---------- */
@media (max-width: 768px) {
  .brand__logo { width: 44px; }

  .accessibility-rail {
    right: 12px;
    padding: 8px;
    gap: 6px;
  }
  .rail-toggle { width: 38px; height: 38px; }

  .navbar__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
    padding: 16px 24px 24px;
    display: none;
  }
  .navbar__links.is-open {
    display: flex;
    animation: menu-slide-in 0.25s ease;
  }
  .navbar__links li { width: 100%; }
  .nav-link { display: block; padding-block: 12px; width: 100%; }

  .menu-toggle { display: flex; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  section { padding-block: 72px; }
  .hero {
    min-height: 86svh;
    padding-block: 104px 72px;
  }

  .hero__title { font-size: clamp(2.45rem, 13vw, 3.4rem); }
  .hero__content,
  .hero__panel {
    max-width: calc(100% - 48px);
  }
  .hero__layout { min-height: calc(86svh - 176px); gap: 30px; }
  .hero__description { font-size: 1.04rem; }
  .hero__metrics { grid-template-columns: 1fr; }
  .hero__panel-top { margin-bottom: 24px; }
  .hero__panel-title { font-size: 1.15rem; margin-bottom: 20px; }
  .hero__panel { padding: 22px; }

  .cards-grid,
  .solutions-showcase { grid-template-columns: 1fr; }
  .solution-card--featured { grid-column: auto; }
  .projects__grid { grid-template-columns: 1fr; }
  .technology-visual { min-height: 240px; }
  .technology-visual__node {
    width: 48px;
    height: 48px;
  }
  .technology-visual__node--spark {
    width: 60px;
    height: 60px;
  }
  .tech-groups { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }

  .client-logo { min-width: 142px; }

  .footer__top { grid-template-columns: 1fr; gap: 36px; }

  .final-cta .btn { width: 100%; }
}