/**
 * Hero Component Styles
 * Prefix: hsn (Hela Sverige Ny)
 */

/* ==========================================================================
   Hero Base
   ========================================================================== */

.hsn-hero {
  position: relative;
  width: 100%;
  min-height: 650px;
  height: 73dvh;
  max-height: 900px;
  overflow: hidden;
  margin-top: 100px;
  margin-bottom: 0px;
}

.hsn-hero:not(:has(+ .hsn-cta-bar)) {
  /* margin-bottom: 40px; */
}

/* ==========================================================================
   Hero Media (Image/Video/Slider Container)
   ========================================================================== */

.hsn-hero__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hsn-hero__image,
.hsn-hero__video {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

/* Video poster image overlay */
.hsn-hero__poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 2;
  transition: opacity 0.3s ease;
}

.hsn-hero__poster--hidden {
  opacity: 0;
  pointer-events: none;
}

/* Ensure video poster is visible */
.hsn-hero__video--has-poster {
  background-size: cover;
  background-position: center;
}

.hsn-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
  pointer-events: none;
}

/* ==========================================================================
   Hero Content
   ========================================================================== */

.hsn-hero__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  padding: 50px 5% 50px;
  box-sizing: border-box;
  pointer-events: none;
}

.hsn-hero__text {
  max-width: 600px;
  pointer-events: auto;
}

/* X-axis positioning (per-slide) */
.hsn-hero__content--x-left {
  justify-content: flex-start;
}

.hsn-hero__content--x-left .hsn-hero__text {
  text-align: left;
}

.hsn-hero__content--x-center {
  justify-content: center;
}

.hsn-hero__content--x-center .hsn-hero__text {
  text-align: center;
}

.hsn-hero__content--x-right {
  justify-content: flex-end;
}

.hsn-hero__content--x-right .hsn-hero__text {
  text-align: right;
}

/* Y-axis positioning (per-slide) */
.hsn-hero__content--y-top {
  align-items: flex-start;
}

.hsn-hero__content--y-center {
  align-items: center;
}

.hsn-hero__content--y-bottom {
  align-items: flex-end;
}

/* Slider slide positioning */
.hsn-hero--slider .swiper-slide {
  position: relative;
}
/* ==========================================================================
   Hero Headlines
   ========================================================================== */

.hsn-hero__headline {
  margin: 0;
  padding: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 2;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  margin-bottom: 0.8em;
}

.hsn-hero__headline-line {
  display: inline;
  background-color: #a21a17;
  color: #fff;
  padding: 0.1em 0.35em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Headline background color variants */
.hsn-hero__headline-line.hsn-btn--red {
  background-color: #a21a17;
  color: #fff;
}

.hsn-hero__headline-line.hsn-btn--yellow {
  background-color: #f2c05b;
  color: #1a1a1a;
}

.hsn-hero__headline-line.hsn-btn--blue {
  background-color: #506d7e;
  color: #fff;
}

.hsn-hero__headline-line.hsn-btn--green {
  background-color: #667e44;
  color: #fff;
}

.hsn-hero__headline-line.hsn-btn--gray {
  background-color: #545352;
  color: #fff;
}

.hsn-hero__headline-line::after {
  content: '\A';
  white-space: pre;
}

/* ==========================================================================
   Hero Button
   ========================================================================== */

.hsn-hero__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  /* background-color: #a21a17; */
  /* color: #fff; */
  font-family: 'Oswald', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.875rem 1rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* .hsn-hero__button:hover {
  background-color: #a21a17;
  transform: translateX(5px);
} */

.hsn-hero__button-icon {
  font-size: 1.2em;
  transition: transform 0.3s ease;
}

.hsn-hero__button:hover .hsn-hero__button-icon {
  transform: translateX(3px);
}

/* ==========================================================================
   Slider Specific Styles
   ========================================================================== */

.hsn-hero__slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hsn-hero--slider .swiper {
  width: 100%;
  height: 100%;
}

.hsn-hero--slider .swiper-slide {
  width: 100%;
  height: 100%;
  position: relative;
}

.hsn-hero--slider .swiper-slide .hsn-hero__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hsn-hero--slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ensure active slide and its controls are on top */
.hsn-hero--slider .swiper-slide-active {
  z-index: 10 !important;
}

.hsn-hero--slider .swiper-slide .hsn-hero__video-controls {
  z-index: 25;
  pointer-events: auto;
}

/* Pagination dots */
.hsn-hero__pagination {
  position: absolute;
  bottom: 30px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  text-align: center;
  z-index: 20;
  pointer-events: auto;
}

.hsn-hero__pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
  margin: 0 6px !important;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.hsn-hero__pagination .swiper-pagination-bullet-active {
  background-color: #fff;
  transform: scale(1.2);
}

/* ==========================================================================
   Video Specific Styles
   ========================================================================== */

.hsn-hero--video .hsn-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

/* ==========================================================================
   Video Controls
   ========================================================================== */

.hsn-hero__video-controls {
  position: absolute;
  bottom: 30px;
  right: 30px;
  display: flex;
  gap: 10px;
  z-index: 20;
  pointer-events: auto;
}

.hsn-hero__video-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.hsn-hero__video-btn:hover {
  background: rgba(162, 26, 23, 0.9);
  transform: scale(1.1);
}

.hsn-hero__video-btn:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
  background: rgba(0, 0, 0, 0.5);
}

.hsn-hero__video-btn:active {
  background: rgba(162, 26, 23, 0.9);
}

.hsn-hero__video-icon {
  display: none;
  line-height: 1;
  font-style: normal;
}

/* Play/Pause states */
.hsn-hero__video-btn--playpause .hsn-hero__video-icon--pause {
  display: block;
}

.hsn-hero__video-btn--playpause.is-paused .hsn-hero__video-icon--pause {
  display: none;
}

.hsn-hero__video-btn--playpause.is-paused .hsn-hero__video-icon--play {
  display: block;
}

/* Mute states - starts muted */
.hsn-hero__video-btn--mute .hsn-hero__video-icon--muted {
  display: block;
}

.hsn-hero__video-btn--mute.is-unmuted .hsn-hero__video-icon--muted {
  display: none;
}

.hsn-hero__video-btn--mute.is-unmuted .hsn-hero__video-icon--unmuted {
  display: block;
}

/* ==========================================================================
   Video Poster Play Button
   ========================================================================== */

.hsn-hero__video-poster-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: rgba(162, 26, 23, 0.9);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  pointer-events: auto;
}

.hsn-hero__video-poster-play svg {
  width: 36px;
  height: 36px;
  margin-left: 4px; /* Optical centering for play icon */
}

.hsn-hero__video-poster-play:hover {
  background: rgba(130, 20, 18, 1);
  transform: translate(-50%, -50%) scale(1.1);
}

.hsn-hero__video-poster-play:focus {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.hsn-hero__video-poster-play--hidden {
  display: none;
}

/* Hidden controls for videos with poster (shown after play) */
.hsn-hero__video-controls--hidden {
  display: none;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 1024px) {
  .hsn-hero {
    min-height: 620px;
    height: 75dvh;
  }

  .hsn-hero__content {
    padding: 180px 5% 40px;
  }
}

@media (max-width: 1000px) {
  .hsn-hero__headline {
    font-size: clamp(1.8rem, 6vw, 2.2rem) !important;
    line-height: 2 !important;
  }
}

@media (max-width: 768px) {
  .hsn-hero {
    min-height: 570px;
    height: 78dvh;
  }

  .hsn-hero__content {
    padding: 30px 20px 30px;
  }

  .hsn-hero__text {
    max-width: 100%;
  }

  .hsn-hero__headline {
    font-size: clamp(2rem, 7vw, 2rem) !important;
    line-height: 2.2 !important;
    margin-bottom: 0.6em;
  }

  .hsn-hero__headline-line {
    display: inline;
    width: fit-content;
    padding: 0.08em 0.3em;
    margin-bottom: 0.3em;
  }

  .hsn-hero__button {
    font-size: 1rem;
    padding: 0.5em 1em;
  }

  .hsn-hero__pagination {
    bottom: 15px !important;
  }

  .hsn-hero__pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
  }

  .hsn-hero__video-controls {
    bottom: 15px;
    right: 15px;
  }

  .hsn-hero__video-btn {
    width: 38px;
    height: 38px;
    font-size: 0.9rem;
  }

  .hsn-hero__video-poster-play {
    width: 64px;
    height: 64px;
  }

  .hsn-hero__video-poster-play svg {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 480px) {
  .hsn-hero {
    min-height: min(55vh, 400px);
    height: calc(100vh - 60px);
    max-height: 550px;
  }

  .hsn-hero__content {
    padding: 110px 15px 25px;
  }

  .hsn-hero__headline {
    font-size: clamp(1.7rem, 7vw, 2.1rem) !important;
    line-height: 2;
  }

  .hsn-hero__headline-line {
    margin-bottom: 0.25em;
  }

  .hsn-hero__button {
    font-size: 1rem;
  }

  .hsn-hero__overlay {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 100%);
  }
}