/* ============================================================
   RESPONSIVE.CSS — Breakpoint overrides
   Mobile-first: base styles target mobile; these scale UP,
   plus targeted small-screen fixes per section as they land.

   Breakpoints:
     --bp-sm:  480px   (large phones)
     --bp-md:  768px   (tablets)
     --bp-lg:  1024px  (small laptops)
     --bp-xl:  1440px  (desktops)
   ============================================================ */

/* ---------- ≥ 768px (tablet) ---------- */
@media (min-width: 48em) {
  :root {
    --container-pad: 2rem;
  }
}

/* ---------- ≥ 1024px (laptop) ---------- */
@media (min-width: 64em) {
  :root {
    --container-pad: 2.5rem;
  }
}

/* ---------- ≥ 1440px (desktop) ---------- */
@media (min-width: 90em) {
  /* Full-width layout: reserve a left channel for the fixed section rail so
     content clears it with a clear gap. Scoped to main + footer — the top nav
     keeps its normal left edge (the rail runs below the header). */
  .home .header .container,
  .home .main .container,
  .home .footer .container {
    padding-left: 10.5rem;
  }
}

/* ---------- ≥ 1920px (large desktop) — a touch more edge breathing room ---------- */
@media (min-width: 120em) {
  :root {
    --container-pad: 3.5rem;
  }
}

/* ---------- ≤ 480px (small phones) — per-section fixes ---------- */
@media (max-width: 30em) {
  .section {
    padding-block: var(--space-10);
  }
}

/* ============================================================
   HERO — tablet & mobile
   ============================================================ */

/* Below 1280px there isn't room for 3 columns — drop the aside, keep content + visual */
@media (max-width: 80em) {
  .hero__inner {
    grid-template-columns: 1.05fr 1fr;
  }

  .hero__aside { display: none; }
}

@media (max-width: 64em) {
  .hero {
    min-height: 0;
    padding-block: 8rem var(--space-16);
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .hero__visual {
    max-width: 30rem;
    margin-inline: auto;
    order: -1;          /* artwork first on small screens */
  }

  .hero__scroll { display: none; }
}

@media (max-width: 30em) {
  .hero { padding-top: 6.5rem; }

  .hero__actions .btn { width: 100%; }

  .hero__visual { max-width: 22rem; }

  .hero__chip--status { top: 6%; right: -2%; }
  .hero__chip--model  { bottom: 4%; left: -2%; }

  .hero__logos { gap: var(--space-3) var(--space-6); }

  .hero__logo { font-size: 0.9375rem; }

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

  /* 2-column layout: separator only before the right-hand item */
  .hero-stat:nth-child(4n + 1) {
    padding-left: var(--space-3);
    border-left: 1px solid var(--clr-border);
  }
  .hero-stat:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

/* ============================================================
   SERVICES — tablet & mobile
   ============================================================ */

/* Below 1280px the single row of 5 gets too tight — stack the intro and wrap */
@media (max-width: 80em) {
  .services__inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .services__intro {
    position: static;
    max-width: 34rem;
  }

  .services__grid {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }
}

@media (max-width: 40em) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 26em) {
  .services__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PROCESS TIMELINE — tablet & mobile
   ============================================================ */

@media (max-width: 64em) {
  .process__steps {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--space-12);
  }

  /* Line only makes sense as a single run — switch to vertical layout cue */
  .process__line { display: none; }
}

@media (max-width: 48em) {
  .process__steps {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .process-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-5);
    padding-bottom: var(--space-8);
    position: relative;
  }

  .process-step__node {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  /* Vertical connector between stacked nodes */
  .process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 1.375rem;
    top: 2.75rem;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: var(--clr-border);
  }

  .process-step__text { max-width: none; }
}

/* ============================================================
   FEATURED PROJECTS — tablet & mobile
   ============================================================ */

/* Below 1280px the single row of 4 gets too tight — stack the intro and wrap */
@media (max-width: 80em) {
  .projects__inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .projects__intro {
    position: static;
    max-width: 34rem;
  }

  .projects__grid {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

@media (max-width: 40em) {
  .projects__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WHY CHOOSE US — tablet & mobile
   ============================================================ */

@media (max-width: 64em) {
  .why__inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .why__content { max-width: 34rem; }
}

@media (max-width: 30em) {
  .why__visual { grid-template-columns: 1fr; }

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

  .why__cta { width: 100%; }
}

/* ============================================================
   TEAM — tablet & mobile
   ============================================================ */

@media (max-width: 64em) {
  .team__inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .team__intro { max-width: 34rem; }
}

@media (max-width: 48em) {
  .team__grid {
    grid-template-columns: 1fr;
    max-width: 22rem;
    margin-inline: auto;
  }
}

/* ============================================================
   TESTIMONIALS — tablet & mobile
   ============================================================ */

/* Below 1280px the single row of 4 gets too tight — stack the intro and wrap */
@media (max-width: 80em) {
  .testimonials__inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .testimonials__intro {
    grid-column: auto;
    grid-row: auto;
    max-width: 34rem;
  }

  .testimonials__grid {
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

@media (max-width: 40em) {
  .testimonials__grid { grid-template-columns: 1fr; }

  .testimonials__cta { width: 100%; }
}

/* ============================================================
   LATEST ARTICLES — tablet & mobile
   ============================================================ */

/* Below 1280px the single row of 4 gets too tight — stack the intro and wrap */
@media (max-width: 80em) {
  .blog__inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .blog__intro {
    position: static;
    max-width: 34rem;
  }

  .blog__grid {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

@media (max-width: 40em) {
  .blog__grid { grid-template-columns: 1fr; }

  .blog__cta { width: 100%; }
}

/* ============================================================
   CTA — mobile
   ============================================================ */

@media (max-width: 34em) {
  .cta__field {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }

  .cta__field-icon { display: none; }

  .cta__input {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--clr-fill-ghost);
    text-align: center;
  }

  .cta__submit { width: 100%; }
}

/* ============================================================
   FOOTER — tablet & mobile
   ============================================================ */

@media (max-width: 64em) {
  .footer__top {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-10) var(--space-8);
  }

  .footer__brand,
  .footer__newsletter { grid-column: 1 / -1; }

  .footer__newsletter { max-width: 30rem; }
}

@media (max-width: 40em) {
  .footer__top { grid-template-columns: 1fr 1fr; }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }
}

@media (max-width: 30em) {
  .footer { padding-top: var(--space-16); }

  .footer__legal { flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
}

/* ============================================================
   NAVIGATION — mobile (≤ 1024px)
   ============================================================ */

@media (max-width: 64em) {

  .nav__burger { display: flex; }

  .nav__cta { display: none; }

  .nav__actions { margin-left: auto; }

  /* Full-screen glass panel */
  .nav__menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-24) var(--container-pad) var(--space-16);
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--dur-med) var(--ease-out),
      visibility var(--dur-med);
  }

  .nav__menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav__item { width: 100%; text-align: center; }

  .nav__link {
    width: 100%;
    justify-content: center;
    padding: var(--space-4);
    font-size: 1.375rem;
    text-transform: none;
    letter-spacing: var(--ls-tight);
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    color: var(--clr-text);
  }

  .nav__link::after { display: none; }

  /* Dropdown becomes inline accordion */
  .nav__dropdown {
    position: static;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0 0 var(--space-2);
  }

  .nav__item--dropdown.is-open .nav__dropdown { display: block; }

  .nav__dropdown-link {
    padding: var(--space-2);
    font-size: var(--fs-body);
    color: var(--clr-text-muted);
  }
}