/* Home slider with SplideJS */
[x-cloak] {
  display: none !important;
}

.home-slider {
  position: relative;
  height: 100vh;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Motion */
  --hs-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --hs-dur: 1000ms;

  /* Mobile defaults */
  --hs-gap: 4px;
  --hs-inactive-w: 175px;
  --hs-inactive-h: 118px;
  --hs-active-w: 275px;
  --hs-active-h: 165px;
  --hs-preview-peek: 45px;
}

/* Desktop: */
@media (min-width: 768px) {
  .home-slider {
    --hs-gap: 8px;
    --hs-inactive-w: 210px;
    --hs-inactive-h: 150px;
    --hs-active-w: 520px;
    --hs-active-h: 315px;
    --hs-preview-peek: 90px;
  }
}

/* =========================
   Background
========================= */
.home-slider__bg {
  position: absolute;
  inset: 0;
  top: -48px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.home-slider__bg-item {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: center;
  opacity: 0;
  filter: blur(10px);
  transition: opacity var(--hs-dur) var(--hs-ease),
              filter var(--hs-dur) var(--hs-ease);
  
}

.home-slider__bg-item.is-active {
  opacity: 1;
  filter: blur(0);
  
}

.home-slider__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-slider__bg-img--mobile {
  display: block;
}
.home-slider__bg-img--desktop {
  display: none;
}

@media (min-width: 768px) {
  .home-slider__bg-img--mobile {
    display: none;
  }
  .home-slider__bg-img--desktop {
    display: block;
  }
}

/* Background animations handled via JS classes */

/* =========================
   Content
========================= */
.home-slider__content {
  position: absolute;
  left: 20px;
  top: 50%;
  margin-top: -156px;
  z-index: 30;
  flex: 1;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}

@media (min-width: 768px) {
  .home-slider__content {
    left: 50%;
    top: 50%;
    margin-top: -200px;
  }
}

.home-slider__content > .container {
  padding: 0;
}

.home-slider__text {
  pointer-events: auto;
}

.home-slider__meta {
  margin-bottom: 16px;
}

.home-slider__city-wrapper {
  margin-bottom: 4px;
  min-height: 18px;
}

.home-slider__space-wrapper {
  margin: 0;
  min-height: 18px;
}

.home-slider__space-wrapper .home-slider__space {
  color: var(--color-dark-grey, #666);
}

/* Сами тексты */
.home-slider__city {
  text-transform: uppercase;
  display: block;
  height: 18px;
  font-size: 13px;
  line-height: 1.3;
}

.home-slider__space {
  color: var(--color-dark-grey, #666);
  display: block;
  height: 18px;
  font-size: 13px;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .home-slider__city,
  .home-slider__space {
    font-size: 14px;
  }
}

.home-slider__title-wrapper {
  position: relative;
  margin-top: 10px;
}

@media (min-width: 768px) {
  .home-slider__title-wrapper {
    margin-top: 10px;
  }
}

.home-slider__title {
  font-size: 48px;
  line-height: 1;
  height: 96px;
  width: auto;
  display: inline-block;
  vertical-align: bottom;
  color: var(--color-brand, #d4a574);
  font-weight: normal;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
}

@media (min-width: 768px) {
  .home-slider__title {
    font-size: 64px;
    height: 128px;
  }
}

/* =========================
   Splide Gallery
========================= */
.home-slider__gallery {
  position: absolute;
  top: 50%;
  height: 315px;
  z-index: 20;
  overflow: hidden;
  width: 100%;
  padding: 0;
  touch-action: pan-y;
}

@media (min-width: 768px) {
  .home-slider__gallery {
    height: var(--hs-active-h);
    padding-right: 10px;
  }
}

.home-slider__splide {
  height: 100%;
  width: 100%;
  padding-left: 20px;
}

@media (min-width: 768px) {
  .home-slider__splide {
    /* padding-left управляется через JS в зависимости от активного слайда */
    padding-left: 50%;
  }
}

.home-slider__splide .splide__track {
  height: 100%;
  position: relative;
  overflow: visible;
}

.home-slider__splide .splide__list {
  height: var(--hs-active-h);
  display: flex;
  align-items: flex-start;
}

.home-slider__splide .splide__slide {
  flex-shrink: 0;
  z-index: 1;
  width: var(--hs-inactive-w);
  height: var(--hs-inactive-h);
  min-width: var(--hs-inactive-w);
  min-height: var(--hs-inactive-h);
}

.home-slider__splide .splide__slide.is-active {
  width: var(--hs-active-w) !important;
  height: var(--hs-active-h) !important;
  min-width: var(--hs-active-w) !important;
  min-height: var(--hs-active-h) !important;
  z-index: 3;
}

.home-slider__gallery-btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}


.home-slider__gallery-btn:focus-visible {
  outline: 2px solid var(--color-brand, #d4a574);
  outline-offset: 4px;
}

.home-slider__gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.02);
  transition: transform var(--hs-dur) var(--hs-ease);
  -webkit-user-drag: none;
  user-select: none;
}

.home-slider__splide .splide__slide.is-active .home-slider__gallery-img {
  transform: scale(1);
}

.home-slider__splide .splide__slide:hover .home-slider__gallery-img {
  transform: scale(1.04);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .home-slider {
    --hs-dur: 0ms;
  }
  .home-slider__bg-enter,
  .home-slider__bg-leave {
    transition: none !important;
  }
  .home-slider__gallery-img {
    transition: none !important;
  }
  .home-slider__splide .splide__slide {
    transition: none !important;
  }
}

header.bg-transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 70;
}

/* ============================================================
   Home slider — Responsive typography (320–1024)
============================================================ */

.home-slider {
  /* City + Space */
  --hs-meta-lh: 1.3;
  --hs-meta-fs: 13px;
  --hs-meta-h: calc(var(--hs-meta-fs) * 1.4);
  --hs-meta-gap: 4px;
  --hs-meta-mb: 16px;

  /* Title */
  --hs-title-lh: 1;
  --hs-title-fs: 48px;
  --hs-title-h: calc(var(--hs-title-fs) * 2);
}

/* ===== 320–767.98 ===== */
@media (max-width: 767.98px) {
  .home-slider {
    --hs-title-fs: clamp(34px, calc(3.125vw + 24px), 48px);
    --hs-meta-fs: clamp(12px, calc(0.22vw + 11.3px), 13px);
    --hs-meta-gap: clamp(2px, 0.8vw, 4px);
    --hs-meta-mb: clamp(12px, 3vw, 16px);
  }
}

/* ===== 768–1023.98 ===== */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .home-slider {
    --hs-title-fs: clamp(52px, calc(4.6875vw + 16px), 64px);
    --hs-meta-fs: clamp(13px, calc(0.3906vw + 10px), 14px);
  }
}

/* ===== 1024+ ===== */
@media (min-width: 1024px) {
  .home-slider {
    --hs-title-fs: 64px;
    --hs-meta-fs: 14px;
  }
}

.home-slider__meta {
  margin-bottom: var(--hs-meta-mb);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--hs-dur) var(--hs-ease),
              transform var(--hs-dur) var(--hs-ease);
}

.home-slider__meta.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.home-slider__city-wrapper {
  margin-bottom: var(--hs-meta-gap);
  min-height: var(--hs-meta-h);
}

.home-slider__space-wrapper {
  min-height: var(--hs-meta-h);
}

.home-slider__city,
.home-slider__space {
  font-size: var(--hs-meta-fs);
  line-height: var(--hs-meta-lh);
  height: var(--hs-meta-h);
}

.home-slider__title-wrapper {
  min-height: var(--hs-title-h);
  opacity: 0;
  /*transform: translateY(10px);*/
  transition: opacity var(--hs-dur) var(--hs-ease),
              transform var(--hs-dur) var(--hs-ease);
}

.home-slider__title-wrapper.is-visible {
  opacity: 1;
  /*transform: translateY(0);*/
}

.home-slider__title {
  /*font-size: var(--hs-title-fs);
  line-height: var(--hs-title-lh);
  height: var(--hs-title-h);*/
}

/* ============================================================
   ✅ ТОЧНЫЙ ФИКС: опускаем ТОЛЬКО заголовок вплотную к картинке
   (НЕ двигаем весь блок content, не трогаем город/описание)
============================================================ */

.home-slider {
  --hs-title-dock-gap: 1px;
  /*--hs-content-mt: -190px;*/
}

@media (min-width: 768px) {
  .home-slider {
    /*--hs-content-mt: -100px;*/
  }
}

.home-slider__title-wrapper {
  pointer-events: none;
  margin-top: max(
    0px,
    calc(
      (0px - var(--hs-title-dock-gap))
      - var(--hs-content-mt)
      - (var(--hs-meta-h) * 2)
      - var(--hs-meta-gap)
      - var(--hs-meta-mb)
      - var(--hs-title-fs)
    )
  );
}

/* ============================================================
   Drop city + space (fix 1024+ goes too low)
============================================================ */
.home-slider {
 /* --hs-meta-drop-y: clamp(55px, 6vw, 70px);*/
}

@media (min-width: 1024px) {
  .home-slider {
    /*--hs-meta-drop-y: clamp(6px, 0.8vw, 12px);*/
  }
}

.home-slider__city,
.home-slider__space {
  position: relative;
  top: var(--hs-meta-drop-y);
}

.home-slider__bg-item::after {
  content: none !important;
}

/* Скрываем элементы управления Splide, если они не нужны */
.home-slider__splide .splide__arrows,
.home-slider__splide .splide__pagination {
  display: none;
}