/* ==========================================================================
   AE Creative — Responsive breakpoints
   Replaces the old JS `applyResp()` (resize listener rewriting inline
   grid-template-columns + display) with real CSS media queries. Every
   breakpoint below reproduces the exact pixel threshold the JS used, so
   the layout tiers switch at identical viewport widths.

   Original JS thresholds (window.innerWidth):
     nav/burger : w < 900            -> mobile
     split      : w > 640 ? 2 : 1
     why/work   : w > 1000 ? 3 : (w > 640 ? 2 : 1)
     services   : w > 1000 ? 5 : (w > 640 ? 3 : 2)
     industries : w > 1000 ? 4 : 2
     numbers    : w > 900 ? 5 : (w > 560 ? 3 : 2)
     testimonials: w > 900 ? 3 : (w > 620 ? 2 : 1)
     footer cols: w > 820 ? 4 : (w > 520 ? 2 : 1)
   ========================================================================== */

/* Nav/burger: JS used a strict "<" comparison (mobile below 900, inclusive
   of fractional widths up to but not touching 900) — 899.98px reproduces
   that exactly; the other breakpoints below use "w > N" comparisons, which
   plain integer max-width values already match exactly. */
@media (max-width:899.98px){
  .desk-nav{display:none}
  .burger{display:flex}
}

@media (max-width:640px){
  .split-grid{grid-template-columns:repeat(1,1fr)}
}

@media (max-width:1000px){
  .why-grid,.work-grid,.placeholder-grid,.portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid,.process-grid{grid-template-columns:repeat(3,1fr)}
  .industries-grid,.gallery-grid{grid-template-columns:repeat(2,1fr)}
  /* At 2 columns, the 3 supporting tiles split 2+1 — span the odd one out
     across both columns so the last row finishes clean instead of leaving
     an empty cell beside it. */
  .gallery-grid__item:last-child{grid-column:1 / -1}
  .solution-timeline{grid-template-columns:repeat(2,1fr);row-gap:36px}
  .solution-timeline__item::after{display:none}
}
@media (max-width:640px){
  .why-grid,.work-grid,.placeholder-grid,.portfolio-grid{grid-template-columns:repeat(1,1fr)}
  .services-grid,.process-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(1,1fr);grid-auto-rows:240px}
  .gallery-grid__item--lg,.gallery-grid__item:last-child{grid-column:span 1;grid-row:span 1}
  .solution-timeline{grid-template-columns:repeat(1,1fr)}
}

@media (max-width:900px){
  .numbers-grid,.numbers-grid--4{grid-template-columns:repeat(3,1fr)}
  .testimonials-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .testimonials-grid{grid-template-columns:repeat(1,1fr)}
}

/* Clients/partners grid breakpoints moved to assets/css/partners.css
   (self-contained with the rest of the .partner-card rules). */
@media (max-width:560px){
  .numbers-grid,.numbers-grid--4{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:820px){
  .footer-cols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .footer-cols{grid-template-columns:repeat(1,1fr)}
}

@media (max-width:860px){
  .service-section{grid-template-columns:1fr}
}

@media (max-width:640px){
  .service-section__image{height:220px}
}

/* ---- Lighter motion on smaller screens ----
   Same reveal/hover mechanisms, smaller distances — mobile devices see
   less physical movement per animation (still transform/opacity only). */
@media (max-width:640px){
  html.cae-js .rv{transform:translateY(12px)}
  .hover-lift-6:hover,.hover-lift-6:focus-visible{transform:translateY(-4px)}
  .work-card:hover .work-card__img,.work-card:focus-visible .work-card__img{transform:scale(1.03)}
  .portfolio-card:hover .portfolio-card__img,.portfolio-card:focus-within .portfolio-card__img{transform:scale(1.03)}
  .gallery-grid__item:hover .gallery-grid__img,.gallery-grid__item:focus-visible .gallery-grid__img{transform:scale(1.03)}
}