/* Home Page Slider – Fluid, dvh-based, zoom-proof */

/* Root slider scales fluidly; header height supplied via ResizeObserver to
   --dynamic-header-height (set outside this stylesheet). */
.hps-slider {
  /* Fluid sizing tokens (no hps-text-min anymore) */
  --hps-pad-inline: clamp(1.8rem, 5vw, 3rem);
  /* side padding */
  --hps-pad-block: clamp(1rem, 4vw, 2rem);
  /* top/bottom padding */
  --hps-icon-size: clamp(2.5rem, 5vw, 4.75rem);
  /* wrapper ⌀ */
  --hps-icon-gap: clamp(0.5rem, 4vw, 2.5rem);
  /* between icons */
  --hps-nav-font: clamp(1.5rem, 3.5vw, 2.5rem);
  /* chevrons */
  --hps-nav-pad: clamp(0.75rem, 2.5vw, 1.5625rem);
  /* ~12px → 25px */
  --hps-btn-pad-y: clamp(0.625rem, 2.2vw, 0.875rem);
  /* ~10px → 14px */
  --hps-btn-pad-x: clamp(0.875rem, 3vw, 1rem);
  /* ~14px → 16px */
  --hps-btn-radius: 0.375rem;
  /* 6px */
  --hps-heading-size: clamp(1.375rem, 3.5vw, 2rem);
  /* fluid H2 */
  --hps-desc-size: clamp(1rem, 2.5vw, 1.125rem);
  /* body */
  --hps-link-size: clamp(0.9375rem, 2.5vw, 1rem);
  /* ~15px → 16px */

  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  height: calc(100dvh - var(--dynamic-header-height, 0px));
  /* dvh minus header */
  min-height: clamp(25rem, 60dvh, 40rem);
  /* avoid collapse */
  overflow: hidden;
}

/* Slide track */
.hps-slides {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
  height: 100%;
}

/* Each slide fills the viewport */
.hps-slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  flex: 0 0 100%;
  position: relative;
  opacity: 0;
  /* JS sets to 1 on image load */
}

/* Fixed overlay uses GRID; bottom rows are icons + text band.
   z-index lowered so nav buttons (z-index: 3) remain clickable. */
.hps-fixed-content {
  position: absolute;
  top: auto;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 1.5rem var(--hps-pad-inline);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  z-index: 10;
}

.hps-fixed-content .hps-text,
.hps-fixed-content .hps-icons {
  opacity: 1;
}

/* Icons row sits above text band */
.hps-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 1.5rem;
  grid-row: auto;
  width: 100%;
  justify-content: flex-start;
  padding-inline: var(--hps-pad-inline);
  box-sizing: border-box;
  font-family: "oswalddemibold", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

.hps-icon-wrap {
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: clamp(0.9rem, 1vw, 1.1 rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.hps-icon {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  transform-origin: center center;
  will-change: transform;
}

.hps-icon-wrap.active {
  color: #fff;
  border-bottom-color: #fff;
}

.hps-icon-wrap:hover {
  color: #fff;
}

/* Bottom text band – grid overlay container; fluid height */
.hps-text {
  grid-row: 3;
  display: grid;
  /* grid overlay container */
  background: transparent;
  color: #fff;
  text-align: left;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: all;

  /* internal padding controls bottom spacing solely */
  padding-inline: var(--hps-pad-inline);
}

/* Optional wrapper if present in markup; change from flex to grid */
.hps-text-container {
  display: grid;
}

/* Stack children into the same grid cell so they overlap;
   container height respects tallest slide (prevents vertical jump). */
.hps-text>*,
.hps-text-container>* {
  grid-area: 1 / 1;
}

/* Text content: top-aligned column with consistent spacing */
.hps-text-content {
  opacity: 0;
  /* inactive hidden but contributes to layout */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* anchor to top */
  align-items: flex-start;
  gap: 1rem;
  /* spacing between title/desc/button */
  transition: transform 0.5s ease, opacity 0.5s ease;
  pointer-events: none;
  z-index: 1;
}

/* animation states */
.hps-text-content.slide-out-left {
  transform: translateX(-100%);
  opacity: 0;
}

.hps-text-content.slide-out-right {
  transform: translateX(100%);
  opacity: 0;
}

.hps-text-content.slide-in-left {
  transform: translateX(-100%);
  opacity: 0;
}

.hps-text-content.slide-in-right {
  transform: translateX(100%);
  opacity: 0;
}

.hps-text-content.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
  z-index: 2;
}

/* Use gap for spacing; neutralize uneven margins */
.hps-text-content .hps-heading,
.hps-text-content .hps-desc,
.hps-text-content .hps-link {
  margin: 0;
}

/* Typography scales */
.hps-heading {
  font-size: var(--hps-heading-size);
  line-height: 1.2;
}

.hps-desc {
  font-size: var(--hps-desc-size);
  line-height: 1.5;
}

.hps-link {
  font-size: var(--hps-link-size);
}

/* Nav controls */
.hps-nav {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  display: flex;
  justify-content: space-between;
  padding-inline: clamp(0.625rem, 2vw, 1.25rem);
  box-sizing: border-box;
  pointer-events: none;
  transform: translateY(-50%);
  z-index: 999;
  /* above fixed content so buttons are always clickable */
}

.hps-prev,
.hps-next {
  color: #fff;
  border: none;
  font-size: var(--hps-nav-font);
  padding: var(--hps-nav-pad) calc(var(--hps-nav-pad) + 0.3125rem);
  cursor: pointer;
  pointer-events: all;
  transition: background 0.3s ease;
  background: transparent;
}

.hps-prev:hover,
.hps-next:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* Buttons (scoped) */
.hps-slider .hps-link,
.hps-slider .red-btn-link {
  display: inline-block;
  font-weight: 600;
  background: #bd0000;
  color: #fff;
  border: 0.0625rem solid #bd0000;
  /* 1px */
  padding: var(--hps-btn-pad-y) var(--hps-btn-pad-x);
  border-radius: var(--hps-btn-radius);
  text-decoration: none;
}

.hps-slider .hps-link:hover,
.hps-slider .red-btn-link:hover {
  background: #a30000;
  border-color: #a30000;
  color: #fff;
  transform: scale(1.01);
}

.hps-slider .hps-link:any-link,
.hps-slider .red-btn-link:any-link {
  color: #fff;
}

.hps-slider .hps-link:focus-visible,
.hps-slider .red-btn-link:focus-visible {
  outline: 0.125rem solid #fff;
  /* 2px */
  outline-offset: 0.125rem;
  /* 2px */
  box-shadow: 0 0 0 0.1875rem rgba(189, 0, 0, 0.35);
  /* 3px */
}

.hps-slider .hps-link:active,
.hps-slider .red-btn-link:active {
  transform: translateY(0.0625rem);
  /* 1px */
}

/* Hide original slide content wrapper (JS already removes it visually) */
.hps-slide-content {
  opacity: 0;
}

@media screen and (min-width: 1025px) {
  .hps-heading {
    display: none !important;
  }
}

@media screen and (max-width: 1024px) {
  .hps-icons {
    display: none;
  }

  .hps-heading {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .hps-prev:hover,
  .hps-next:hover,
  .hps-prev:focus,
  .hps-next:focus {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .hps-prev:active,
  .hps-next:active {
    background-color: rgba(0, 0, 0, 0.5) !important;
    transition: none !important;
  }
}