/* ==========================================================================
   Aerialytic site: responsive layer
   Appended after the main stylesheet. It adds tablet and mobile behaviour
   and leaves desktop alone: every rule sits inside a max-width query. The one
   exception is a narrow-desktop fix (1025–1099px) for the Lite step cards;
   screens 1100px and wider render exactly as before.

   Breakpoints
     Desktop / large  1025px and up  (unchanged, no rules here)
     Tablet           768px – 1024px
     Mobile           under 768px
   The main stylesheet already stacks layouts at 880px, 600px and 480px;
   this layer fills the 881–1024px gap and adds touch sizing.
   ========================================================================== */

/* ---------- Tablet and below (≤1024px) ---------- */
@media (max-width: 1024px) {

  /* Media never causes sideways scrolling */
  img, video { max-width: 100%; height: auto; }
  .hero-media video, .media.has-media img, .media.has-media video { max-width: 100%; }

  /* Products: Lite and Plug & Play stack their cards above the preview
     instead of squeezing a narrow card column beside it */
  .product-panel .lite-stage,
  #lite .lite-stage,
  #plug-and-play .lite-stage { grid-template-columns: minmax(0, 1fr); }
  #lite .step-preview { align-self: stretch; }
  #lite .step-pointer { display: none; }

  /* Touch targets: at least 44px tall for links and controls */
  .nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-links .btn { min-height: 44px; }
  .logo { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-col a, .footer-col span { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-col { gap: 0; }
  .slide-btn, .slide-pause { width: 44px; height: 44px; }
  .slide-dot { height: 44px; }
  .post-back { min-height: 44px; }
}

/* ---------- Tablet only, 881–1024px (wider tablets / small laptops) ---------- */
@media (min-width: 881px) and (max-width: 1024px) {

  /* Four step / point cards in one row above the full-width preview */
  #lite .lite-stage .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; }
  #lite .lite-stage .step-card { padding-right: 16px; }
  #plug-and-play .pp-stage .pp-points { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; }

  /* Hero: give the headline a little more of the row */
  .xl-hero .wrap { gap: 32px; }
}

/* ---------- Narrow desktop, 1025–1099px ---------- */
/* The Lite step descriptions wrapped to a third line here, making the card
   column taller than the preview beside it. Slightly tighter card text keeps
   the side-by-side layout with both columns the same height. */
@media (min-width: 1025px) and (max-width: 1099px) {
  #lite .lite-stage .step-card { padding-right: 22px; padding-left: 14px; }
  #lite .lite-stage .step-title { font-size: 16px; }
  #lite .lite-stage .step-desc { font-size: 12.5px; line-height: 1.35; }
  #lite .step-pointer { display: none; }
}

/* ---------- Mobile (under 768px) ---------- */
@media (max-width: 767px) {

  /* Keep the side gutter and stop any wide element from pushing the page */
  .wrap { padding-inline: 16px; }
  body { overflow-x: hidden; }

  /* Buttons stretch to a comfortable tap width when they wrap */
  .btn-row { gap: 10px; }
  .btn { min-height: 44px; }

  /* Footer columns stack two-up with the brand block full width */
  .footer-top { gap: 24px; }
  .footer-bottom .wrap { flex-direction: column; gap: 6px; }
}