/**
 * Airway Connect — responsive overrides.
 *
 * Holds ALL of the theme's media queries: header/footer chrome, blog
 * listing/detail, and the homepage builder sections. Desktop styles (1025px+)
 * live in style.css; this file is enqueued AFTER it, so equal-specificity rules
 * here win where they apply.
 *
 * Breakpoints (desktop-first — ordered largest → smallest so the later matching
 * block wins, letting Mobile override Tablet override Laptop):
 *   Laptop and below : ≤1024px
 *   Tablet and below : ≤768px
 *   Mobile           : ≤480px
 */

/* ============================================================
   LAPTOP AND BELOW (≤1024px)
   ============================================================ */
@media screen and (max-width: 1024px) {

  /* ----- Header / nav: off-canvas mobile drawer -----
   * Breakpoint lines up with Tailwind's `lg:` prefix on the nav (`lg:hidden`
   * toggle / `hidden lg:block` menu). iPad Pro 12.9" portrait is exactly 1024px;
   * `lg:hidden` hides the toggle at ≥1024px, so re-show it at the 1024 edge. */
  #menu-toggle {
    display: inline-flex !important;
    z-index: 1001;
  }

  #mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    width: 80%;
    max-width: 400px;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding: 2rem;
    transition: transform 0.5s ease-in-out;
    z-index: 1000;
    overflow-y: auto;
  }

  #mobile-menu.active {
    transform: translateX(0);
  }

  #mobile-menu ul {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 4rem;
    width: 100%;
  }

  /* Drawer CTA buttons (Log In / Register): the desktop bar keeps them side by
   * side (min-width 139), which overflows the 80%-wide off-canvas panel. In the
   * drawer, stack them full-width so both show and stay tappable. */
  #mobile-menu .desktop-menu>li:last-child {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    margin-left: 0;
  }

  #mobile-menu .desktop-menu>li:last-child>a {
    display: block;
    width: 100%;
    margin-left: 0;
  }

  #mobile-menu .primary-button,
  #mobile-menu .outline-button {
    width: 100%;
    min-width: 0;
  }

  /* ----- Footer: stack columns ----- */
  footer .footer-container {
    flex-direction: column;
  }

  footer .footer-container .left-content,
  footer .footer-container .right-content {
    width: 100%;
    margin-bottom: 20px;
  }

  footer .social-container .social-icons {
    justify-content: center;
  }

  /* ----- Blog detail: 25px horizontal gutters (desktop is gutter-less) -----
   * Each region uses a different wrapper (container / body-wrap / feat-img).
   * feat-img is centered via max-width + auto margins with an absolutely-
   * positioned <img>, so inset it with side margins, not padding. */
  .single-blog>header.header {
    padding-left: 0;
    padding-right: 0;
  }

  .single-blog .container,
  .single-blog .body-wrap {
    padding-left: 25px;
    padding-right: 25px;
  }

  .single-blog .feat-cap {
    padding-left: 25px;
    padding-right: 25px;
  }

  .single-blog .feat-img {
    margin-left: 25px;
    margin-right: 25px;
  }

  /* ----- Blog listing / detail: grids collapse, hero shrinks ----- */
  .nav-links {
    display: none;
  }

  .blog-hero h1 {
    font-size: 36px;
  }

  .blog-hero .inner {
    padding: 56px 24px 50px;
  }

  .toolbar {
    position: static;
  }

  .toolbar-inner {
    padding: 14px 16px;
  }

  .filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

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

  .feature .media {
    min-height: 220px;
    aspect-ratio: 16/9;
  }

  .feature .body {
    padding: 30px 26px;
  }

  .feature h2 {
    font-size: 24px;
  }

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

  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .art-head h1 {
    font-size: 32px;
  }

  .body-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .rail {
    display: none;
  }

  .art-title {
    font-size: 34px;
  }

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

  .feat-img {
    aspect-ratio: 16/9;
    border-radius: var(--r-lg);
  }

  /* ----- Homepage builder ----- */
  .home-hero h1 {
    font-size: 40px;
  }

  .feature-grid.cols-3,
  .feature-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

  .ic-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .home-ic.img-right .ic-media {
    order: 0;
  }

  .ic-body .home-h2 {
    text-align: center;
  }
}

/* ============================================================
   TABLET AND BELOW (≤768px)
   ============================================================ */
@media screen and (max-width: 768px) {

  /* ----- Blog listing / detail ----- */
  .blog-hero h1 {
    font-size: 32px;
  }

  .blog-hero p {
    font-size: 16px;
  }

  .page-template-page-blog>header>.container {
    padding-left: 0;
    padding-right: 0;
  }

  .blog-hero .inner {
    padding: 100px 25px 50px;
  }

  .feature .body {
    padding: 24px 22px;
  }

  .feature h2 {
    font-size: 22px;
  }

  .art-title {
    font-size: 30px;
  }

  .grid-head {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* ----- Homepage builder ----- */
  .home-hero {
    padding: 88px 0 72px;
  }

  .home-hero h1 {
    font-size: 34px;
  }

  .home-h2 {
    font-size: 28px;
  }

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

  .home-latest-head {
    flex-wrap: wrap;
    gap: 12px;
  }

  .home-features,
  .home-testimonials,
  .home-latest,
  .home-ic,
  .home-faq {
    padding: 56px 0;
  }
}

/* ============================================================
   MOBILE (≤480px)
   ============================================================ */
@media screen and (max-width: 480px) {

  /* ----- Blog listing / detail ----- */
  .nav-inner {
    padding: 14px 20px;
  }

  .blog-hero h1 {
    font-size: 30px;
  }

  .blog-hero p {
    font-size: 16px;
  }

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

  .cta-card {
    padding: 40px 24px;
  }

  .cta-card h2 {
    font-size: 26px;
  }

  .article p,
  .article li {
    font-size: 17px;
  }

  .art-title {
    font-size: 28px;
  }

  .callout {
    padding: 24px;
  }

  /* ----- Flexible content: gallery ----- */
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  /* ----- Homepage builder ----- */
  .home-hero {
    padding: 72px 0 64px;
  }

  .home-hero h1 {
    font-size: 30px;
  }

  .home-h2 {
    font-size: 26px;
  }

  .feature-grid.cols-2,
  .feature-grid.cols-3,
  .feature-grid.cols-4 {
    grid-template-columns: 1fr;
  }

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

  /* Hero CTAs stack full-width so they don't crowd on narrow screens. */
  .home-hero-btns {
    flex-direction: column;
    align-items: stretch;
  }

  .home-hero-btns .btn {
    width: 100%;
  }

  .home-hero p {
    font-size: 16px;
  }

  .stat-value {
    font-size: 36px;
  }

  .logos-row {
    gap: 28px;
  }
}