/* Home Page Slider - Styles */

/* NOTE: Pure CSS to stay CSP-safe. No JS-set style variables. */

/* Default (desktop & global): define shared min-height for the black box */
.hps-slider {
  --hps-text-min: 225px; /* desktop default; overridden per breakpoint and orientation */
}

@media screen and (min-width: 1024px) {
  .hps-slider {
    height: calc(100vh - var(--dynamic-header-height, 107px)) !important;
  }
}

.hps-slider {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  min-height: 600px;
  overflow: hidden;
}

.hps-slide-content {
  opacity: 0;
}

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

.hps-slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 600px;
  height: 100%;
  width: 100%;
  flex: 0 0 100%;
  position: relative;
  opacity: 0;
}

.hps-fixed-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;

  /* remove side padding so the black box can hit both edges */
  padding: 0;

  /* reserve space for the bottom black box (kept in sync with .hps-text) */
  padding-bottom: var(--hps-text-min);

  box-sizing: border-box;
  pointer-events: none;
  z-index: 10;
}

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

.hps-icons {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  order: 1;
  pointer-events: all;
  margin-bottom: 1.5rem;
}

.hps-icon-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  transform-origin: center center;
  will-change: transform;
}

/* background layer removed to eliminate colored circles */
.hps-icon-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: transparent;
  z-index: 0;
}

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

.hps-icon-wrap.active {
  transform: scale(1.5);
}

.hps-icon-wrap.active::before {
  transform: scale(1.3);
}

.hps-icon-wrap:hover {
  transform: scale(1.2);
}

/* === Black box full-width === */
.hps-text {
  background: rgba(0, 0, 0, 0.7);

  /* side padding */
  padding: 30px 60px;

  /* remove rounding to touch edges */
  border-radius: 0;
  color: white;

  /* synced with reserved space via CSS variable */
  min-height: var(--hps-text-min);

  text-align: left;

  /* Fill the slider width */
  width: 100%;
  max-width: none;
  box-sizing: border-box;

  order: 2;
  overflow: hidden;
  pointer-events: all;

  /* pin to the bottom and stretch to both edges */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  /* keep stacking below icons/nav that sit in the flow */
  z-index: 1;
}

/* Absolutely-positioned text block aligned to the TOP of the black box
   by placing its top edge at 100% - the black box height reserved above. */
.hps-text-content {
  opacity: 0;
  position: absolute;

  /* top-aligned to the black-box region */
  top: calc(100% - var(--hps-text-min));
  bottom: auto;

  left: 0;

  /* keep clear of CookieYes banner on desktop */
  right: max(520px, 25vw);

  width: auto;

  /* match .hps-text side padding */
  padding: 30px 60px;

  box-sizing: border-box;
  transition: transform 0.5s ease, opacity 0.5s ease;
  pointer-events: none;
  z-index: 1;
}

.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;
}

.hps-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  pointer-events: none;
  transform: translateY(-50%);
  z-index: 3;
}

.hps-prev,
.hps-next {
  color: white;
  border: none;
  font-size: 2.5rem;
  padding: 20px 25px;
  cursor: pointer;
  pointer-events: all;
  transition: background 0.3s ease;
}

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

.hps-heading,
.hps-desc,
.hps-link { transition: opacity 0.3s ease; }

.hps-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: bold;
}

/* === Tablet (≤1024px width): generalized portrait default === */
@media (max-width: 1024px) {
  .hps-slider {
    /* portrait tablet black-box height */
    --hps-text-min: 210px;
    min-height: 500px;
  }

  .hps-slide { padding: 1rem 0.5rem; }

  .hps-slide-content { gap: 1rem; max-width: 90%; }

  .hps-text { padding: 20px 32px; }

  .hps-text-content { padding: 20px 32px; right: 0; }

  .hps-fixed-content { padding-bottom: var(--hps-text-min); }

  .hps-icon { width: 35px; height: 35px; }

  .hps-nav { padding: 0 10px; }

  .hps-prev, .hps-next { font-size: 24px; padding: 15px 20px; }
}

/* === Phones (≤480px width): portrait default (XR-safe) === */
@media (max-width: 480px) {
  .hps-slider {
    --hps-text-min: 260px;
    min-height: 400px;
  }

  .hps-slide { padding: 0.5rem; }

  .hps-slide-content { gap: 0.75rem; }

  .hps-text { padding: 15px 24px; font-size: 0.9rem; }

  .hps-text-content { padding: 15px 24px; right: 0; }

  .hps-fixed-content { padding-bottom: var(--hps-text-min); }

  /* MOBILE ICON SIZE: 50×50px button wrapper */
  .hps-icon-wrap { width: 50px; height: 50px; }

  .hps-icon { width: 30px; height: 30px; }

  .hps-icons { gap: 8px; }

  .hps-prev, .hps-next { font-size: 20px; padding: 12px 16px; }
}

/* === Orientation-aware landscape rules =============================== */

/* Landscape phones and small devices (shorter viewport heights) */
@media (orientation: landscape) and (max-height: 500px) {
  .hps-slider {
    /* grow relative to the reduced height, but keep sensible bounds */
    --hps-text-min: clamp(220px, 42vh, 300px);
  }

  .hps-fixed-content { padding-bottom: var(--hps-text-min); }
}

/* Landscape tablets (taller heights), including iPad Air/Pro landscape */
@media (orientation: landscape) and (max-width: 1368px) and (min-height: 501px) {
  .hps-slider {
    /* scale with tablet viewport height in landscape */
    --hps-text-min: clamp(210px, 35vh, 300px);
  }

  .hps-fixed-content { padding-bottom: var(--hps-text-min); }
}

/* === Minimal, necessary device-specific overrides ==================== */

/* Nest Hub Max (commonly reports 1280×800; orientation can be ambiguous) */
@media (width: 1280px) and (height: 800px) {
  .hps-slider { --hps-text-min: 260px; }
}

/* Nest Hub (commonly reports 1024×600) */
@media (width: 1024px) and (height: 600px) {
  .hps-slider { --hps-text-min: 240px; }
}

/* Surface Duo (portrait ~540×720) */
@media (orientation: portrait) and (min-width: 520px) and (max-width: 560px) and (min-height: 700px) {
  .hps-slider { --hps-text-min: 265px; }
}

/* Surface Duo (landscape ~720×540) — increase so text fits */
@media (orientation: landscape) and (min-width: 700px) and (max-width: 760px) and (min-height: 520px) and (max-height: 560px) {
  .hps-slider { --hps-text-min: 260px; }
}

/* iPad Mini (portrait 768×1024) — your copy needs slightly more space here */
@media (width: 768px) and (height: 1024px) {
  .hps-slider { --hps-text-min: 250px; }
}