@charset "UTF-8";
/* SCSS source for Webstar History — nested structure */
.wh {
  position: relative;
  overflow: hidden;
  min-height: min(80vh, 720px);
  display: flex;
  align-items: flex-end;
}
@media (max-width: 767px) {
  .wh {
    min-height: min(70vh, 400px);
  }
}
.wh__bg, .wh__content, .wh__overlay {
  position: absolute;
  inset: 0;
}
.wh__bg {
  z-index: 1;
}
.wh__bg .swiper-slide {
  position: relative;
}
.wh__bg .wh__bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
}
.wh__overlay {
  z-index: 2;
  pointer-events: none;
}
.wh__content {
  z-index: 3;
}
.wh__slide {
  display: flex;
  align-items: flex-end;
}
.wh__slide-inner {
  position: relative;
  width: 100%;
  max-width: 1400px;
  padding: 0px 10px;
  margin: 0 auto;
}
.wh__label {
  display: block;
  position: relative;
}
.wh__slide-title {
  margin: 0;
  display: block;
  position: relative;
}
.wh__slide-content {
  display: block;
  position: relative;
}
.wh {
  /* Pagination (labels) */
}
.wh__pagination {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1400px;
  padding: 0 10px;
  margin: 0 auto 50px;
}
.wh__pagination .wh__pag-row {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wh__pagination .wh__pag-row::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}
@media (max-width: 1023px) {
  .wh__pagination .wh__pag-row {
    flex-wrap: nowrap;
  }
}
@media (max-width: 767px) {
  .wh__pagination .wh__pag-row {
    flex-wrap: nowrap;
  }
}
.wh__pagination .wh__pag-row {
  scroll-snap-type: x mandatory;
}
.wh__pagination .wh__pag-item {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  cursor: pointer;
  scroll-snap-align: start;
}
@media (max-width: 1023px) {
  .wh__pagination .wh__pag-item {
    flex: 0 0 calc((100% - 20px) / 6);
    min-width: calc((100% - 20px) / 6);
  }
}
@media (max-width: 767px) {
  .wh__pagination .wh__pag-item {
    flex: 0 0 calc((100% - 20px) / 4);
    min-width: calc((100% - 20px) / 4);
  }
}
.wh__pagination .wh__pag-item:hover .wh__pag-label {
  opacity: 0.3;
}
.wh__pagination .wh__pag-label {
  transition: var(--transition);
}
.wh__pagination .wh__pag-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
}
.wh__pagination .wh__pag-track--base {
  position: absolute;
  inset: 0;
  background: var(--color-black-30);
}
.wh__pagination .wh__pag-track--active {
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-duration, 0.3s) ease;
}
.wh__pagination .wh__pag-progress {
  position: absolute;
  inset: 0;
  background: var(--color-coral);
  transform-origin: left;
  width: 0%;
}
.wh__pagination .wh__pag-item.is-active .wh__pag-track--active {
  transform: scaleX(1);
}
.wh {
  /* Navigation (arrows) */
}
.wh__nav {
  flex-wrap: wrap;
  z-index: 3;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto 50px;
  padding: 0 10px;
  display: flex;
  gap: 20px;
  align-items: stretch;
}
.wh__nav .wh__nav-btn {
  pointer-events: all;
  border: 2px solid var(--color-white-20);
  border-radius: 50px;
  width: 60px;
  height: 60px;
  background-image: url("data:image/svg+xml;utf8,<svg width='12' height='19' viewBox='0 0 12 19' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M10 16.7132L2 9.35661L10 2' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: 48% 48%;
  background-color: transparent;
  padding: 0;
  transition: var(--transition);
}
.wh__nav .wh__nav-btn:hover, .wh__nav .wh__nav-btn:focus, .wh__nav .wh__nav-btn:active {
  background-image: url("data:image/svg+xml;utf8,<svg width='12' height='19' viewBox='0 0 12 19' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M10 16.7132L2 9.35661L10 2' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: 48% 48%;
}
.wh__nav .wh__nav-btn:hover {
  background-color: var(--color-white-20);
}
.wh__nav .wh__nav-btn.wh__nav-next {
  transform: rotate(180deg);
}
.wh__nav .wh__nav-cta {
  pointer-events: all;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9em 2.1em;
  border-radius: 999px;
  border: 2px solid var(--color-white-20);
  background-color: transparent;
  transition: var(--transition);
  font-family: var(--font--circular-medium);
  font-weight: 600;
  font-size: 17px;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.4em;
  transition: var(--transition);
  line-height: 1.4em;
}
@media (max-width: 1023px) {
  .wh__nav .wh__nav-cta {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .wh__nav .wh__nav-cta {
    font-size: 15px;
  }
}
.wh__nav .wh__nav-cta:hover, .wh__nav .wh__nav-cta:focus {
  background-color: var(--color-white-20);
  color: #000;
}

/*# sourceMappingURL=style.css.map */