/* =====================================================
   RESPONSIVE FIXES - pay.krepling.com
   Tablet (768-1024px) and Mobile (<768px)
   ===================================================== */

/* === HERO SECTION FIXES === */

@media (max-width: 1024px) {
  /* Fix: button right-aligned in hero at tablet/mobile */
  .elementor-element-1f38772 .elementor-button-wrapper {
    text-align: left !important;
  }
  /* Fix: justify-content:space-between creates gap when stacked */
  .elementor-element-dd6bfc8 {
    justify-content: flex-start !important;
  }
  /* Remove excess top margin on hero image container when stacked */
  .elementor-element-307b1de {
    --margin-top: 20px !important;
  }
  /* Ensure hero section height is content-driven, not fixed */
  .elementor-element-a788b58 {
    min-height: unset !important;
    height: auto !important;
  }
  /* Full width columns when stacked */
  .elementor-element-b199af9,
  .elementor-element-307b1de {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Fix: heading widgets have desktop padding: 9px 164px which squeezes
     content to ~184px at tablet with 48px font → word-per-line wrapping.
     Mobile overrides this already; tablet does not. */
  .elementor-element-c6d3e6d > .elementor-widget-container,
  .elementor-element-51a7d29 > .elementor-widget-container,
  .elementor-element-f61dd52 > .elementor-widget-container,
  .elementor-element-b2c9fc2 > .elementor-widget-container,
  .elementor-element-316abd6 > .elementor-widget-container,
  .elementor-element-635625e > .elementor-widget-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* === TABLET ONLY (768px - 1024px) === */
/* Scoped to min-width:768px so mobile Elementor repeat(1,1fr) rule isn't overridden */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Fix: feature cards — 5-col 118px grid is too cramped at tablet; use 3-col */
  .elementor-element-1856e41 {
    --e-con-grid-template-columns: repeat(3, 1fr) !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto !important;
  }
}

/* === MOBILE (<768px) === */
@media (max-width: 767px) {
  /* Hero: prevent mockup overflow, scale down */
  .elementor-element-307b1de {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  /* Constrain mockup image widgets so they don't overflow */
  .elementor-element-307b1de .elementor-widget-image img,
  .elementor-element-307b1de .elementor-widget-image-box img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Nav: ensure hamburger menu visible */
  .elementor-nav-menu--main {
    display: none;
  }
  /* General: prevent horizontal scroll */
  .e-con, .elementor-section {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  /* Reduce excessive section padding on mobile */
  .e-con.e-parent {
    --padding-left: 1rem;
    --padding-right: 1rem;
  }
  /* Ensure feature cards stack to 1-col on mobile */
  .elementor-element-1856e41 {
    --e-con-grid-template-columns: repeat(1, 1fr) !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
}

/* === IPAD PORTRAIT (768px exact) === */
@media (min-width: 768px) and (max-width: 820px) {
  /* Ensure side-by-side hero elements actually stack */
  .elementor-element-dd6bfc8 {
    flex-direction: column !important;
  }
  .elementor-element-b199af9,
  .elementor-element-307b1de {
    --width: 100% !important;
    width: 100% !important;
  }
}

/* === HERO EMAIL+BUTTON OVERFLOW FIX ===
   .banner-input has a hardcoded width:500px. At viewports narrower than ~1109px
   the left column shrinks below 500px and the input overflows right, where the
   iframe (later in DOM) paints over it and covers the Get Started button.
   max-width:100% clamps it to the column width at any viewport. */
.banner-input {
  max-width: 100% !important;
}

/* Left column z-index ensures it always renders above the right iframe column */
.elementor-element-b199af9 {
  position: relative;
  z-index: 2;
}

/* === HELP CENTER RESOURCE CARDS - MOBILE OVERFLOW FIX ===
   Cards have --margin-left:-54px set globally (desktop overlap effect).
   On mobile they wrap to a new flex row, making the negative margin pull them
   54px off the left edge of the screen. Reset to 0 on mobile. */
@media (max-width: 767px) {
  .elementor-element-191fa9b,
  .elementor-element-1028f3a {
    --margin-left: 0px !important;
    margin-left: 0 !important;
  }
}