/*
 * What's Included — Figma компонент 33:392 (варіанти: Kitchen 33:391,
 * Bathroom 33:389, Living Room 33:388, Entryway 33:387, Bedroom 33:390),
 * instance на сторінці 33:482; mobile 44:2865.
 * Desktop: py 100, px 48; ліва колонка 600 (heading → таби gap 32),
 *   права — фото flex 1, висота 651, radius 12, кнопка в куті (p 24).
 *   Таби: #f3f8fa p 4 radius 8; таб 18 Medium, py 8, radius 6.
 *   Список: title 30/1.2, gap 16; пункти 24-чекбокс + 18 secondary, gap 8.
 * Mobile: py 70, px 12, все по центру; таби скроляться по горизонталі (14);
 *   title 25, чекбокс 20, текст 16; фото 351; кнопка primary під фото.
 */
.included {
  padding: 100px var(--gutter);
  background: var(--color-white);
}

.included__inner {
  display: flex;
  gap: 32px;
  max-width: 1344px;
  margin: 0 auto;
}

.included__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex-shrink: 0;
  width: 600px;
}

.included__panel-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
}

.included__tabs {
  position: relative;
  display: flex;
  padding: 4px;
  border-radius: 8px;
  background: var(--color-primary-tint);
}

/* «Повзунок» активного табу — їздить між табами (js/included-tabs.js
   виставляє translate і width). Без JS активний таб підсвічується сам. */
.included__tabs-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 6px;
  background: var(--color-primary);
  pointer-events: none;
  transition: translate 0.45s cubic-bezier(.65, 0, .35, 1), width 0.45s cubic-bezier(.65, 0, .35, 1);
}

.included__tab {
  position: relative;
  z-index: 1;
  flex: 1 0 0;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.3s ease;
}

.included__tab[aria-selected='true'] {
  background: var(--color-primary);
  color: var(--color-white);
}

.included__tabs.has-indicator .included__tab[aria-selected='true'] {
  background: transparent;
}

.included__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.included__panel[hidden] {
  display: none;
}

.included__panel-title {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
}

.included__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.included__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-text-secondary);
}

.included__item::before {
  content: '';
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: url('../../images/icons/check-box.svg') center / contain no-repeat;
}

.included__media {
  position: relative;
  flex: 1;
  min-height: 651px;
  overflow: hidden;
  border-radius: 12px;
}

.included__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: blur(20px);
}

/* Фото перетікають одне в одне через розмиття.
   Селектор сильніший за .img-zoom > img, щоб зберегти і зум, і перехід. */
.included__media.img-zoom > .included__photo {
  transition:
    opacity 0.7s ease,
    filter 0.7s ease,
    scale 0.6s cubic-bezier(.22, .61, .36, 1);
}

.included__photo.is-active {
  opacity: 1;
  filter: blur(0);
}

.included__media .btn {
  position: absolute;
  right: 24px;
  bottom: 24px;
}

.included__cta-mobile {
  display: none;
}

@media (max-width: 1199px) {
  .included__content {
    width: 50%;
    flex-shrink: 1;
  }

  .included__tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .included__tabs::-webkit-scrollbar {
    display: none;
  }

  .included__tab {
    flex: 0 0 auto;
  }
}

@media (max-width: 900px) {
  .included {
    padding: 70px var(--gutter);
  }

  .included__inner {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .included__content {
    width: 100%;
  }

  .included__panel-wrap {
    gap: 32px;
  }

  .included__tab {
    padding: 8px 10px;
    font-size: 14px;
  }

  .included__panel-title {
    font-size: 25px;
  }

  .included__item {
    font-size: 16px;
  }

  .included__item::before {
    width: 20px;
    height: 20px;
  }

  .included__media {
    flex: none;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1;
  }

  .included__media .btn {
    display: none;
  }

  .included__cta-mobile {
    display: inline-flex;
  }
}