/* Language2Go — public site overlay: mobile/tablet fixes (loaded LAST, after
   site-content/site-catalog/site-community/site-lead/site-video/site-motion).
   Only touches @media (max-width: 1024px) — must never change desktop layout.
   Do not edit site-community.*, site-motion.*, site-lead.*, site-video.*,
   site-content.*, index.html here — override them from this file instead. */

.l2g-hidden {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* Safety net: never allow horizontal scroll on mobile/tablet.         */
/* NOTE: overflow-x:hidden must NOT be set on html/body/#app — one of  */
/* them is the real scroll container (overflow-y:auto), and setting    */
/* overflow-x there flips overflow-y's UA-computed value in a way that */
/* breaks page scrolling entirely. Clip only specific offenders below  */
/* instead of a blanket rule on the scroll ancestors.                  */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Bug: Bootstrap .row negative margins bleed past the viewport on     */
/* narrow screens (footer nav block, "how-work" steps block on        */
/* /about and /course/<id>). Zeroing the row margin keeps the columns' */
/* own padding as a safe gutter instead of relying on a wider parent.  */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
  footer .row.d-flex.flex-sm-column.flex-lg-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .how-work-container-group,
  .how-work__items {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  .how-work-container-group-card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-bottom: 24px !important;
  }

  /* hide any leftover slick nav artifacts if the native carousel ever
     reinitializes with more than one slide visible on mobile */
  .how-work-container .slick-arrow,
  .how-work-container .slick-dots {
    display: none !important;
  }
}

/* ------------------------------------------------------------------ */
/* Bug: at <=570px native app.css puts EVERY button inside              */
/* ".reviews-carousel-container-top-block" (incl. our .l2g-arrow prev/  */
/* next) at "position:absolute; left:0; right:0; bottom:10px; width:    */
/* 100%" — so both arrows land on the exact same spot as one 260x60     */
/* pill. Forcing them back to static + a fixed compact size puts them   */
/* side by side again and stops them fighting the fixed "up" button.    */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .reviews-carousel-container-top-block .l2g-arrow,
  .news-carousel-container-top-block .l2g-arrow {
    position: static !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
  }

  .reviews-carousel-container-top-block .l2g-reviews-arrows,
  .news-carousel-container-top-block .l2g-reviews-arrows {
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 20px auto 0 !important;
  }

  /* if the top/bottom split variant is deployed, keep only the bottom
     row visible on mobile, same intent as site-community.css already has */
  .l2g-reviews-arrows-top {
    display: none !important;
  }

  .l2g-reviews-arrows-bottom {
    display: flex !important;
  }
}

/* ------------------------------------------------------------------ */
/* "Scroll to top" floating button — compact on mobile so it never     */
/* covers the carousel arrows, footer links or form controls.          */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .anchor {
    width: 40px !important;
    height: 40px !important;
    bottom: 20px !important;
    right: 16px !important;
    z-index: 40;
  }

  .anchor svg,
  .anchor i {
    font-size: 14px;
  }
}

/* ------------------------------------------------------------------ */
/* Lead form (modal + /contacts) — tighten the gap between a helper    */
/* line and the next field label so fields don't look glued together.  */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .l2g-lead-form .l2g-lead-label {
    margin-top: 14px;
  }

  .l2g-lead-form .l2g-lead-label:first-child {
    margin-top: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Section rhythm on mobile: reduce the desktop ~88px section spacing  */
/* to a tighter 48px, only where sections still use large defaults.    */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .l2g-public-section,
  .l2g-catalog-wrap {
    padding-top: 0;
  }
}