/* Mobile off-canvas nav panel: app.js moves #main-nav (menu links) into
   #main-nav-mobile, and lang-switcher.js additionally moves the AL/EN
   toggle in right after the menu <ul>. Without this rule the toggle (first
   real in-flow element in a display:block container, since the <ul> itself
   is position:absolute per the theme's own mobile nav CSS) renders at the
   very top of the panel, above the logo, instead of below the FAQ link. */
@media (max-width: 1199px) {
  .ux-vault-toggle--mobile-nav {
    position: absolute;
    top: 420px;
    left: 20px;
    display: block;
    margin: 0;
    z-index: 5;
  }
}

/* WOW.js scroll-reveal (fadeInUp etc.) sometimes retriggers or fails to
   settle on mobile, leaving section headings/text visually doubled or
   stuck mid-animation (e.g. "Kërkimet Popullore" heading). Skip the
   animation on mobile only — content shows immediately, no fade-in. */
@media (max-width: 767px) {
  .wow {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* Hero: title and the 4 stat cards are both position:absolute inside a
     fixed-height section, layered over the background image by design on
     desktop. On some slides in mobile this causes the stat cards to overlap
     the title text. Take them out of absolute/fixed-height mode so they
     stack top-to-bottom in normal flow instead. Only touches the hero
     section — does not touch #main-nav-mobile or any nav/menu element. */
  .page-title.page-title-style-1 {
    height: auto !important;
    min-height: 500px;
    display: block !important;
    position: relative;
    padding-top: 32px;
    padding-bottom: 32px;
    background-image: url('/assets/images/page-title/banner-4.jpg');
    background-size: cover;
    background-position: center;
  }
  /* The swiper background layers are unreliable on mobile (swiper.js sizes
     them against JS-calculated dimensions that don't line up here) — hide
     them and rely on the plain background-image set directly on the
     section above instead. Simple, no JS dependency, always visible. */
  .page-title-style-1 .page-title--slider {
    display: none !important;
  }
  .page-title-style-1 .page-title--content {
    position: relative !important;
    z-index: 20;
    width: auto !important;
    left: auto !important;
    bottom: auto !important;
    padding: 0 20px;
  }
  .page-title-style-1 .page-title--post-list {
    position: relative !important;
    z-index: 20;
    height: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 24px;
    padding: 0 20px;
  }

  /* Car card images (e.g. "Popular Searches" cards) use object-fit:cover,
     which crops the sides of wide photos to fill the card's fixed aspect
     ratio — the car often gets cut off. Switch to `contain` on mobile so
     the full photo is visible (letterboxed if needed) instead of cropped. */
  .card-box .image .card--img,
  .card-box-style-9 .image .card--img {
    object-fit: contain;
    background-color: #f2f2f2;
  }
}