/* ================================================
   CUSTOM HERO SLIDER — Full-Width, Aspect-Ratio-Driven
   Width : 100vw (edge-to-edge, no margins)
   Height: auto — set by the image's intrinsic aspect ratio
   ================================================ */

/* ---- Break out of any parent width constraints ---- */
.hs-hero-slider {
  position: relative;
  /* Edge-to-edge: override any parent padding/margin */
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  /* Height is determined by the image — never force a fixed height */
  height: auto;
  overflow: hidden;
  /* No background needed — image fills the full frame */
  background: #061B45;
  /* Eliminate any browser default spacing */
  margin: 0;
  padding: 0;
  display: block;
}

/* ---- Slides Track ---- */
.hs-track {
  position: relative;
  width: 100%;
  /* height auto so the sizer image inside drives the height */
  height: auto;
  margin: 0;
  padding: 0;
}

/* ---- Sizer slide (slide 1 is rendered in-flow to set height) ---- */
/* All slides share the same space; slide-1 acts as a height anchor */
.hs-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #061B45;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  z-index: 0;
  margin: 0;
  padding: 0;
}

/* The FIRST slide is also rendered in normal flow to set container height */
.hs-slide:first-child {
  position: relative;  /* in-flow → drives container height */
  inset: auto;
  height: auto;        /* let the image's aspect ratio set the height */
  width: 100%;
}

/* Active slide is fully visible */
.hs-slide.hs-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* When the first slide is NOT active, keep it visible but underneath */
/* (it still acts as a height anchor) */
.hs-slide:first-child:not(.hs-active) {
  opacity: 0;
  z-index: 0;
}

/* ---- Banner image — 100% width, aspect-ratio preserved, zero crop ---- */
.hs-slide img {
  display: block;
  width: 100%;
  height: auto;            /* Let height follow the natural aspect ratio */
  object-fit: fill;        /* Not needed since w=100%/h=auto, but safe fallback */
  object-position: center top;
  /* Crisp pixel rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  margin: 0;
  padding: 0;
  vertical-align: bottom;  /* Kill inline ghost spacing */
}

/* ---- Arrow Navigation ---- */
.hs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(6, 27, 69, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, 0.30);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s;
  user-select: none;
  outline: none;
}

.hs-arrow:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-50%) scale(1.08);
}

.hs-arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.hs-arrow svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hs-prev { left: 20px; }
.hs-next { right: 20px; }

/* ---- Dot Indicators ---- */
.hs-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hs-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.50);
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease, border-color 0.3s ease;
  padding: 0;
  outline: none;
}

.hs-dot:hover {
  background: rgba(255, 255, 255, 0.65);
}

.hs-dot.hs-dot-active {
  background: #fff;
  border-color: #fff;
  width: 28px;
  border-radius: 6px;
}

.hs-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---- Responsive: Tablet ---- */
@media (max-width: 1024px) {
  .hs-arrow {
    width: 42px;
    height: 42px;
  }

  .hs-arrow svg {
    width: 18px;
    height: 18px;
  }
}

/* ---- Responsive: Mobile ---- */
@media (max-width: 768px) {
  .hs-arrow {
    width: 36px;
    height: 36px;
  }

  .hs-arrow svg {
    width: 16px;
    height: 16px;
  }

  .hs-prev { left: 10px; }
  .hs-next { right: 10px; }

  .hs-dots {
    bottom: 12px;
    gap: 8px;
  }

  .hs-dot {
    width: 8px;
    height: 8px;
  }

  .hs-dot.hs-dot-active {
    width: 22px;
  }
}