/* ==========================================================================
   Á CHÂU ELECTRIC — BRAND DESIGN SYSTEM
   07 · RESPONSIVE (§17)
   Verified at 360 · 390 · 414 · 768 · 1024 · 1366 · 1440 · 1920
   Requirements: no horizontal scroll · no clipped logo · no clipped CTA ·
   readable typography · ≥44px touch targets · usable navigation.
   ========================================================================== */

/* Large desktop (≥1800) — a little more breathing room, same grid */
@media (min-width: 1800px) {
  :root {
    --ae-container: 1320px;
  }
  /* the header may use more width than the content grid so the 8-item
     navigation + hotline + CTA are never squeezed */
  .ae-hdr__inner {
    max-width: 1520px;
  }
}

@media (min-width: 1600px) {
  .ae-hdr__inner {
    max-width: 1460px;
  }
  .ae-nav > li > a {
    font-size: 0.8125rem;
    padding-inline: 8px;
    letter-spacing: 0.04em;
  }
}

/* 1440 and below — tighten navigation rhythm before the mobile breakpoint */
@media (max-width: 1599px) {
  .ae-nav > li > a {
    font-size: 0.75rem;
    padding-inline: 8px;
    letter-spacing: 0.03em;
  }
}

/* 1439 and below */
@media (max-width: 1439px) {
  .ae-nav > li > a {
    padding-inline: 6px;
  }
}

/* 1399 and below — the brand lockup is carried by the logo plate alone */
@media (max-width: 1599px) {
  .ae-hdr__brand-text {
    display: none;
  }
}
@media (max-width: 1399px) {
  .ae-nav > li > a {
    padding-inline: 6px;
    letter-spacing: 0.02em;
  }
}

/* 1279 and below — MOBILE / TABLET HEADER: logo + call button + menu toggle.
   The 8-item navigation, the hotline and the CTA need roughly 1 400 px of
   horizontal room, so below 1280 px they move into the drawer instead of being
   squeezed or clipped. */
@media (max-width: 1279px) {
  .ae-hdr__inner {
    justify-content: space-between;
    gap: var(--ae-space-3);
  }
  .ae-hdr__nav,
  .ae-hdr__hotline {
    display: none;
  }
  .ae-icon-btn {
    display: inline-flex;
  }
  .ae-btn--sm {
    padding-inline: 12px;
    font-size: 0.6875rem;
  }
}

/* 1366 and below — timeline re-flows, footer goes two-up */
@media (max-width: 1365px) {
  .ae-timeline {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: var(--ae-space-5);
  }
  .ae-timeline__step:nth-child(5)::after {
    display: none;
  }
  .ae-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 1023 and below — content grids re-flow */
@media (max-width: 1023px) {
  .ae-logo-plate img {
    height: 44px;
  }
  .ae-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .ae-hero__visual {
    order: 2;
  }
  .ae-hero__strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ae-services,
  .ae-solutions,
  .ae-capabilities,
  .ae-knowledge,
  .ae-why {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ae-space-4);
  }
  .ae-timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--ae-space-5);
  }
  .ae-timeline__step:nth-child(3n)::after,
  .ae-timeline__step:last-child::after {
    display: none;
  }
  .ae-cta--split {
    grid-template-columns: minmax(0, 1fr);
  }
  .ae-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ae-space-6);
  }
}

/* 767 and below — single-column reading flow */
@media (max-width: 767px) {
  .ae-section {
    padding: clamp(40px, 9vw, var(--ae-space-8)) 0;
  }
  .ae-hero__strip {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ae-space-3);
  }
  .ae-services,
  .ae-solutions,
  .ae-capabilities,
  .ae-knowledge,
  .ae-why {
    grid-template-columns: minmax(0, 1fr);
  }
  .ae-timeline {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ae-space-4);
  }
  .ae-timeline__step {
    padding: 0 0 0 52px;
  }
  .ae-timeline__step::before {
    top: 0;
  }
  .ae-timeline__step::after {
    top: 34px;
    left: 17px;
    right: auto;
    bottom: -16px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--ae-line-strong), transparent);
  }
  .ae-timeline__step:nth-child(3n)::after {
    display: block;
  }
  .ae-footer__top {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: var(--ae-space-6);
  }
  .ae-btn-row {
    flex-direction: column;
    align-items: stretch;
  }
  .ae-btn-row .ae-btn {
    width: 100%;
  }
  .ae-cta {
    border-radius: var(--ae-radius);
  }
}

/* 479 and below — 360/390/414 px phones */
@media (max-width: 479px) {
  :root {
    --ae-gutter: 16px;
  }
  .ae-hdr__inner {
    min-height: var(--ae-header-h);
  }
  .ae-logo-plate {
    padding: 6px 8px;
  }
  .ae-logo-plate img {
    height: 38px;
  }
  .ae-hero__logo img {
    width: 148px;
  }
  .ae-h2,
  .ae-home .ae-section h2 {
    font-size: 1.3825rem;
  }
  .ae-card {
    padding: var(--ae-space-4);
  }
  .ae-drawer {
    width: 100%;
  }
  .ae-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Respect reduced-motion preferences (accessibility) */
@media (prefers-reduced-motion: reduce) {
  .ae-card,
  .ae-nav > li > a::after,
  .ae-drawer,
  .ae-drawer__scrim,
  .ae-btn {
    transition: none !important;
  }
  .ae-card:hover {
    transform: none;
  }
}