/* ===== Mobile Responsive Overrides ===== */
/* Breakpoints: 768px (primary), 480px (small phones) */

/* Prevent horizontal overflow on mobile */
html, body {
  overflow-x: hidden;
}

/* Hide mobile-only badge on desktop */
.hero-badge-mobile {
  display: none;
}

/* ---------- 768px Breakpoint ---------- */
@media (max-width: 768px) {

  /* === GLOBAL: Footer === */
  .site-primary-footer-inner-wrap.ast-builder-grid-row {
    flex-direction: column !important;
    gap: 32px !important;
    padding: 0 20px !important;
    align-items: center !important;
    text-align: center !important;
  }
  /* Footer: logo + tagline row — smaller logo, keep side-by-side */
  .site-footer-section-1 div[style*="display:flex"][style*="gap:15px"] {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  .site-footer-section-1 div[style*="display:flex"][style*="gap:15px"] img {
    height: 40px !important;
  }
  .site-footer-section-1 div[style*="font-size:16px"] {
    font-size: 11px !important;
  }

  /* === GLOBAL: Book a Demo modal — visible close button on mobile === */
  .book-demo-close {
    background: transparent !important;
    width: 36px !important;
    height: 36px !important;
    right: 8px !important;
  }
  .book-demo-close svg {
    display: none !important;
  }
  .book-demo-close::after {
    content: "\00d7";
    font-size: 28px;
    font-weight: 300;
    color: #374151;
    line-height: 1;
  }

  /* === GLOBAL: Section padding === */
  div[style*="padding:60px"],
  div[style*="padding:64px 20px"] {
    padding: 40px 16px !important;
  }

  /* === GLOBAL: Large headings === */
  h2[style*="font-size:36px"] {
    font-size: 28px !important;
  }
  p[style*="font-size:18px"] {
    font-size: 16px !important;
  }

  /* === GLOBAL: Smaller logos on mobile === */
  .custom-logo {
    height: 40px !important;
  }
  .site-primary-footer-wrap img[alt="VisoFlow logo"] {
    height: 50px !important;
  }

  /* === HOME: Hero — reorder: badge(1), video(2), text+button(3) === */
  .hero-badge-mobile {
    display: block !important;
    order: 1 !important;
    margin-top: 60px !important;
    margin-bottom: -8px !important;
  }
  .hero-badge-mobile span {
    font-size: clamp(8px, 2vw, 13px) !important;
    letter-spacing: clamp(0.8px, 0.2vw, 1.5px) !important;
    padding: 3px 8px !important;
  }
  .hero-badge-desktop {
    display: none !important;
  }
  .hero-video-wrap {
    order: 2 !important;
    padding: 10px 0 20px !important;
    width: 100% !important;
  }
  .uagb-block-5cb4b1bf {
    order: 3 !important;
  }

  /* === HOME: Center Book a Demo button === */
  .latepoint-book-button-wrapper {
    text-align: center !important;
  }
  .latepoint-book-button-wrapper.latepoint-book-button-align-left {
    text-align: center !important;
  }
  .hero-video-carousel {
    gap: 4px !important;
  }
  .hero-video-arrow {
    width: 24px !important;
    height: 24px !important;
  }

  /* === GLOBAL: Override all UAGB containers' 426px mobile width constraint === */
  .uagb-is-root-container > .uagb-container-inner-blocks-wrap {
    --inner-content-custom-width: 100% !important;
    max-width: 100% !important;
  }

  /* === HOME: Hero === */
  .uagb-block-0510ccec {
    min-height: auto !important;
    padding: 30px 20px 40px !important;
  }
  .uagb-block-0510ccec > .uagb-container-inner-blocks-wrap {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .uagb-block-5cb4b1bf {
    max-width: 100% !important;
    padding-right: 0 !important;
    text-align: center !important;
  }
  .hero-video-wrap {
    padding: 10px 0 0 !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }
  .hero-video-arrow svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* === HOME: Pills section === */
  .vf-pill-wrap {
    width: 100% !important;
    max-width: 400px;
  }
  .vf-pill {
    font-size: 15px !important;
    padding: 12px 20px !important;
    white-space: normal !important;
  }
  div[style*="flex-wrap:wrap"][style*="gap:30px"][style*="max-width:1100px"] {
    gap: 16px !important;
    margin: 24px auto !important;
    padding: 0 16px !important;
  }

  /* === HOME: "Designed to Reduce Risk" cards (3-col to 1-col) === */
  div[style*="calc(33.333%"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  /* === HOME: "Prove Value" timeline — stack vertically === */
  div[style*="max-width:900px"][style*="position:relative"] {
    flex-direction: column !important;
    gap: 32px !important;
    align-items: center !important;
  }
  /* Hide horizontal connecting line */
  div[style*="max-width:900px"][style*="position:relative"] > div[style*="position:absolute"][style*="height:2px"] {
    display: none !important;
  }

  /* === PRODUCT: "How VisoFlow Helps" grid (3-col to 1-col) === */
  .uagb-block-a85bf556 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* === PRODUCT: "Who Is VisoFlow For?" cards === */
  div[style*="flex-wrap:nowrap"][style*="gap:48px"] {
    flex-wrap: wrap !important;
    gap: 24px !important;
  }
  div[style*="flex-wrap:nowrap"][style*="gap:48px"] > div[style*="flex:1 1 300px"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  /* === ABOUT: Info cards row === */
  .uagb-block-d904cbea {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    margin-top: 0 !important;
    padding: 7px 16px !important;
  }
  .uagb-block-d904cbea > .uagb-container-inner-blocks-wrap {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    --inner-content-custom-width: 100% !important;
  }
  /* Each card child — override theme's 33% max-width */
  .uagb-block-d904cbea > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* === ABOUT: "What We Offer" card — force column layout === */
  .uagb-block-bb6ae8ac {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  /* === ABOUT: Accordion + image === */
  .uagb-block-47c5e8d5 {
    flex-direction: column !important;
  }
  .uagb-block-47c5e8d5 > .uagb-container-inner-blocks-wrap {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    --inner-content-custom-width: 100% !important;
  }
  .uagb-block-47c5e8d5 > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
    max-width: 100% !important;
    width: 100% !important;
  }
  .uagb-block-9c40ba52 {
    height: 250px !important;
    min-height: 250px !important;
  }
}

/* ---------- 480px Breakpoint ---------- */
@media (max-width: 480px) {

  /* === GLOBAL: Footer === */
  .site-primary-footer-inner-wrap.ast-builder-grid-row {
    gap: 24px !important;
    padding: 0 12px !important;
  }

  /* === GLOBAL: Headings === */
  h2[style*="font-size:36px"] {
    font-size: 24px !important;
  }

  /* === HOME: Pills === */
  .vf-pill-wrap {
    max-width: 100% !important;
  }
  .vf-pill {
    font-size: 14px !important;
    padding: 10px 16px !important;
  }

  /* === HOME: Hero video === */
  .hero-video-wrap iframe {
    max-height: 220px;
  }

  /* === PRODUCT: "What You Get" rows === */
  div[style*="gap:24px"][style*="padding:28px 0"] {
    gap: 16px !important;
    padding: 20px 0 !important;
  }
  div[style*="gap:24px"][style*="padding:28px 0"] svg {
    width: 36px !important;
    height: 36px !important;
  }

  /* === ABOUT: Accordion image === */
  .uagb-block-9c40ba52 {
    height: 200px !important;
    min-height: 200px !important;
  }
}