/* Travel Gate Hero Slider. Scoped to .tgt-hs throughout, so nothing here can
   reach the header, the category rail, product cards or any other section. */

.tgt-hs {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #061F45;              /* never white while an image loads */
}
.tgt-hs.is-rounded { border-radius: 20px; }

/* Elementor sets its Border Radius on .elementor-widget-container, the parent
   of .tgt-hs. Without inheriting it, this element paints its own square
   corners over the rounded parent, and Swiper's own overflow squares off the
   images again. Inheriting rather than hardcoding keeps the Elementor control
   authoritative: set 0 there and these all return to square. */
.tgt-hs { border-radius: inherit; }

.tgt-hs .swiper,
.tgt-hs .tgt-hs-swiper {
  width: 100%; height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

/* Height is fixed from the widget settings, so nothing shifts as images load. */
.tgt-hs .tgt-hs-slide {
  position: relative;
  height: var(--tgt-hs-h, 560px);
  display: flex; align-items: center;
  box-sizing: border-box;
  padding: 0 clamp(20px, 6vw, 76px);
}
.tgt-hs .tgt-hs-pic,
.tgt-hs .tgt-hs-pic img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
}
.tgt-hs .tgt-hs-ov {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,31,69,.92) 0%, rgba(6,31,69,.55) 48%, rgba(6,31,69,.25) 100%),
    linear-gradient(180deg, rgba(6,31,69,.35) 0%, rgba(6,31,69,.10) 45%, rgba(6,31,69,.55) 100%);
}
.tgt-hs .tgt-hs-slide.is-center .tgt-hs-ov,
.tgt-hs .tgt-hs-slide.is-right .tgt-hs-ov {
  background:
    radial-gradient(120% 95% at 50% 50%, rgba(6,31,69,.86) 0%, rgba(6,31,69,.52) 60%, rgba(6,31,69,.28) 100%),
    linear-gradient(180deg, rgba(6,31,69,.35) 0%, rgba(6,31,69,.10) 45%, rgba(6,31,69,.55) 100%);
}

/* Whole-slide link: above the image and overlay, below the content layer, so
   the buttons, arrows and dots all keep their own click targets. */
.tgt-hs .tgt-hs-link {
  position: absolute; inset: 0; z-index: 1;
  display: block; text-indent: -9999px; overflow: hidden;
}
.tgt-hs .tgt-hs-link:focus-visible { outline: 3px solid #46E8F5; outline-offset: -6px; }

.tgt-hs .tgt-hs-in {
  position: relative; z-index: 2;
  width: 100%; max-width: 620px;
  color: #fff;
}
.tgt-hs .is-center .tgt-hs-in { margin: 0 auto; text-align: center; }
.tgt-hs .is-right  .tgt-hs-in { margin-left: auto; text-align: right; }

.tgt-hs .tgt-hs-badge {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 16px; margin-bottom: 16px;
  background: var(--tgt-hs-badge-bg, rgba(6, 31, 69, .62));
  border: 1px solid var(--tgt-hs-badge-bd, rgba(0, 149, 169, .55));
  border-radius: 999px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tgt-hs-badge-fg, #E6FBFF);
  backdrop-filter: blur(4px);
}
.tgt-hs .tgt-hs-h {
  margin: 0 0 14px;
  font-family: 'Sora', sans-serif;
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 700; line-height: 1.08; letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
.tgt-hs .tgt-hs-hl { color: #46E8F5; }
.tgt-hs .tgt-hs-t {
  margin: 0 0 24px;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.55;
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

.tgt-hs .tgt-hs-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.tgt-hs .is-center .tgt-hs-cta { justify-content: center; }
.tgt-hs .is-right  .tgt-hs-cta { justify-content: flex-end; }
.tgt-hs .tgt-hs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  padding: 0 var(--tgt-hs-btn-p, 28px);
  border-radius: var(--tgt-hs-btn-r, 12px);
  font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.tgt-hs .tgt-hs-btn-p {
  background: var(--tgt-hs-btn-bg, #0095A9);
  color: var(--tgt-hs-btn-fg, #fff);
  border: 1px solid var(--tgt-hs-btn-bd, rgba(127, 216, 226, .45));
}
/* Brighter on hover rather than darker, with a small lift and a restrained
   teal shadow - no glow, no glass. */
.tgt-hs .tgt-hs-btn-p:hover {
  background: var(--tgt-hs-btn-bg-h, #00AFC6);
  color: var(--tgt-hs-btn-fg, #fff);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 149, 169, .32);
}
.tgt-hs .tgt-hs-btn-p:focus-visible { outline: 2px solid #46E8F5; outline-offset: 3px; }

.tgt-hs .tgt-hs-arrow { font-size: 17px; line-height: 1; transition: transform .18s ease; }
.tgt-hs .tgt-hs-btn-p:hover .tgt-hs-arrow { transform: translateX(3px); }

.tgt-hs .tgt-hs-btn-s {
  background: rgba(255, 255, 255, .10); color: #fff;
  border: 1px solid rgba(127, 216, 226, .45);
}
.tgt-hs .tgt-hs-btn-s:hover {
  border-color: rgba(127, 216, 226, .85);
  background: rgba(255, 255, 255, .16);
  transform: translateY(-2px);
}

/* ---- navigation ---- */
.tgt-hs .tgt-hs-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  background: rgba(6,31,69,.55); border: 1px solid rgba(255,255,255,.22);
  color: #fff; font-size: 26px; line-height: 1;
  transition: background .18s ease, border-color .18s ease;
}
.tgt-hs .tgt-hs-nav:hover { background: rgba(0,149,169,.85); border-color: #0095A9; }
.tgt-hs .tgt-hs-nav:focus-visible { outline: 2px solid #46E8F5; outline-offset: 2px; }
.tgt-hs .tgt-hs-prev { left: 16px; }
.tgt-hs .tgt-hs-next { right: 16px; }

.tgt-hs .tgt-hs-dots { position: absolute; bottom: 18px; left: 0; right: 0; z-index: 5; }
.tgt-hs .tgt-hs-dots .swiper-pagination-bullet {
  width: 9px; height: 9px; background: rgba(255,255,255,.5); opacity: 1; margin: 0 5px;
  transition: width .2s ease, background .2s ease;
}
.tgt-hs .tgt-hs-dots .swiper-pagination-bullet-active { width: 26px; border-radius: 999px; background: #46E8F5; }

/* Swiper's own layout primitives, supplied here rather than depended on.
   We take Swiper's SCRIPT from Elementor but never its stylesheet, and the
   handle for that stylesheet differs across Elementor versions. Without these
   three rules the wrapper is not a flex row, so every slide stacks and the
   hero grows to the height of all of them - which is exactly what happened
   when initialisation started succeeding in 1.77.7.

   Scoped to .tgt-hs, so no other Swiper on the page is affected. No height is
   set here: the outer box keeps its approved aspect-ratio sizing. */
.tgt-hs .swiper {
  overflow: hidden;
}

.tgt-hs .swiper-wrapper {
  display: flex;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
}

.tgt-hs .swiper-slide {
  flex-shrink: 0;
  width: 100%;
  position: relative;
}

/* Swiper absent: show the first slide only, as a static banner. */
.tgt-hs.is-static .swiper-wrapper { display: block; }
.tgt-hs.is-static .swiper-slide:not(:first-child) { display: none; }
.tgt-hs.is-static .tgt-hs-nav,
.tgt-hs.is-static .tgt-hs-dots { display: none; }

/* Compact whole-banner treatment. Runs from 1024px down - Elementor's
   own default tablet breakpoint - because the unqualified desktop rules
   above were forcing 560px with object-fit:cover at tablet widths, cropping
   a wide banner hard. */
@media (max-width: 1024px) {
  /* The banner sets the height. aspect-ratio rather than height:auto because
     the slides are Swiper flex children: one auto-height slide makes the
     carousel jump between slides, while a shared ratio keeps them level. */
  /* A promotional banner card, not a hero section. The outer element owns the
     ratio, so the box has an intrinsic height rather than being sized by
     whatever the slides happen to resolve to. */
  .tgt-hs {
    width: 100%;
    margin: 8px 0 12px;
    aspect-ratio: var(--tgt-hs-ar, 2 / 1);
    height: auto !important;
    border-radius: 14px;
    overflow: hidden;
    background: #061F45;
  }

  /* The whole chain must release its height, or Swiper's own stylesheet -
     which sets height:100% on .swiper-slide and loads after this file -
     reinstates the old box. !important is doing real work here. */
  /* .swiper-wrapper and .swiper-slide were removed from this group in 1.77.9.
     It dates from when the mobile hero was a single static banner and the whole
     chain had to collapse; pinning the wrapper to width:100% leaves a carousel
     nowhere to translate to, so swipe and autoplay did nothing on mobile. Their
     flex sizing now comes from the shared primitives above, at every width. */
  .tgt-hs .tgt-hs-swiper,
  .tgt-hs .swiper,
  .tgt-hs .tgt-hs-slide,
  .tgt-hs .tgt-hs-pic,
  .tgt-hs picture {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
  }

  /* display:block, not flex. The desktop rule makes the slide a flex
     container; once the picture left absolute positioning it became a flex
     item and shrank to its own content, which is why the banner appeared
     small and left-aligned inside a tall navy box. */
  /* The card supplies the height now, so the slide simply fills it. */
  .tgt-hs .tgt-hs-slide {
    display: block;
    padding: 0;
  }

  .tgt-hs .tgt-hs-pic,
  .tgt-hs picture.tgt-hs-pic {
    position: static;
    display: block;
    width: 100%; height: 100%;
  }
  .tgt-hs .tgt-hs-pic img {
    position: static;
    display: block;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center center;
  }

  /* The slide is no longer a flex container, so overlay content is centred
     from its own layer instead. Slides using the hide switch never render
     this, and the whole-slide link is a separate sibling either way. */
  .tgt-hs .tgt-hs-in {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 0 18px;
    box-sizing: border-box;
  }

  /* Artwork that already carries its own text and call to action. The
     whole-slide link sits outside this stack, so it keeps working. */
  /* Overlay text must not swallow a tap meant for the slide link; the buttons
     inside it keep their own. */
  .tgt-hs .tgt-hs-in { pointer-events: none; }
  .tgt-hs .tgt-hs-in .tgt-hs-btn { pointer-events: auto; }

  .tgt-hs .tgt-hs-slide.hide-overlay-m .tgt-hs-in { display: none; }
  .tgt-hs .tgt-hs-slide.hide-overlay-m .tgt-hs-ov { display: none; }
  /* Removed in 1.75.8: this biased the crop to 62% for the old cover-based
     mobile treatment. It sat after the centring rule at identical specificity
     and therefore won, offsetting the banner so only its middle and right
     showed. The current behaviour shows the whole image, so centre is correct. */

  /* A purpose-built mobile image is already composed for this shape, so it is
     centred rather than re-cropped toward one side. */
  .tgt-hs .tgt-hs-slide.has-mobile-img .tgt-hs-pic img { object-position: center center; }

  /* Opt-in per slide: show the whole image, letterboxing against the hero
     background rather than cropping artwork with text near the edges. */
  .tgt-hs .tgt-hs-slide.mobile-fit-contain .tgt-hs-pic img {
    object-fit: contain;
    object-position: center center;
  }
  .tgt-hs .tgt-hs-in { max-width: 100%; text-align: center; margin: 0 auto; }
  .tgt-hs .tgt-hs-cta { flex-direction: column; gap: 9px; justify-content: center; }
  .tgt-hs .tgt-hs-btn { width: 100%; min-height: 48px; }
  .tgt-hs .tgt-hs-nav { width: 38px; height: 38px; font-size: 21px; }
  .tgt-hs .tgt-hs-prev { left: 8px; }
  .tgt-hs .tgt-hs-next { right: 8px; }
  .tgt-hs.is-rounded { border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .tgt-hs .swiper-wrapper { transition-duration: 0ms !important; }
  .tgt-hs .tgt-hs-btn { transition: none; }
  .tgt-hs .tgt-hs-btn-p:hover,
  .tgt-hs .tgt-hs-btn-s:hover { transform: none; }
  .tgt-hs .tgt-hs-arrow { transition: none; }
}