/* Шаблон детальної сторінки рішення (rishennya-dim/-biznes/-promyslovist/-nakopychennya.html).
   Hero — .rishennya-hero з css/pages/rishennya.css без змін. Docs: docs/pages/rishennya-detail.md */

/* Figma «02 — Енергія будинку» (755:6989) — 50/50 спліт: текст+CTA-кнопка
   (відкриває попап, не посилання) зліва, фото-картка справа */
.house-energy {
  padding-block: 140px;
  background-color: var(--background-primary);
}

.house-energy__container {
  display: flex;
  align-items: center;
  gap: var(--space-80);
}

.house-energy__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  width: 560px;
  flex-shrink: 0;
}

.house-energy__title {
  color: var(--text-primary);
}

.house-energy__description {
  font-size: var(--font-size-18);
  line-height: var(--line-height-30);
  color: var(--text-secondary);
}

.house-energy__photo-frame {
  position: relative;
  overflow: hidden;
  flex: 1 0 0;
  aspect-ratio: 800 / 460;
  border-radius: var(--radius-card-large);
}

.house-energy__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

@media (max-width: 1199px) {
  .house-energy {
    padding-block: var(--space-96);
  }

  .house-energy__container {
    gap: var(--space-48);
  }

  .house-energy__copy {
    width: 440px;
  }
}

@media (max-width: 1024px) {
  .house-energy__container {
    flex-direction: column;
    align-items: stretch;
  }

  .house-energy__copy {
    width: 100%;
  }

  .house-energy__photo-frame {
    order: -1;
    flex: none;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .house-energy {
    padding-block: var(--space-64);
  }

  .house-energy__container {
    gap: var(--space-32);
  }

  .house-energy__copy {
    gap: var(--space-24);
  }

  .house-energy__cta {
    width: 100%;
  }
}

/* Figma «03 — Що може вирішувати система» (755:7002) — 5 «скляних» плиток,
   не інтерактивні (ховера немає за макетом). Іконки — наявний спрайт,
   див. docs/pages/rishennya-detail.md */
.system-tasks {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-dark);
}

.system-tasks__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.system-tasks::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(5, 13, 24, 0.7);
}

.system-tasks__container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-64);
  padding-block: 140px;
}

.system-tasks__title {
  color: var(--text-inverse);
  text-align: center;
}

.system-tasks__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-20);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.system-tasks__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  height: 220px;
  padding: var(--space-28);
  border-radius: var(--radius-card-large);
  border: 1px solid rgba(255, 255, 255, 0.11);
  background-color: rgba(16, 34, 53, 0.8);
  backdrop-filter: blur(4.5px);
}

.system-tasks__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  color: var(--text-accent);
}

.system-tasks__text {
  margin: 0;
  font-size: var(--font-size-16);
  line-height: 1.4;
  color: var(--text-inverse);
  text-align: center;
}

/* Горизонтальний скрол замість колонки на адаптиві — плитки фіксованої ширини;
   повнокадровий скрол через від'ємний margin-inline контейнера */
@media (max-width: 1199px) {
  .system-tasks__container {
    gap: var(--space-48);
    padding-block: var(--space-96);
  }

  .system-tasks__list {
    display: flex;
    overflow-x: auto;
    width: calc(100% + var(--container-gutter) * 2);
    margin-inline: calc(var(--container-gutter) * -1);
    padding-inline: var(--container-gutter);
    padding-bottom: var(--space-16);
  }

  .system-tasks__tile {
    flex: 0 0 272px;
    height: auto;
    min-height: 200px;
  }
}

@media (max-width: 767px) {
  .system-tasks__container {
    gap: var(--space-32);
    padding-block: var(--space-64);
  }

  .system-tasks__list {
    gap: var(--space-16);
  }

  .system-tasks__tile {
    flex: 0 0 240px;
    min-height: 0;
  }
}

/* Figma «06 — Резервне живлення» (772:13246) — секція повністю перевикористовує
   .attention (produkt-kategoriya.css), нового CSS немає; розмітка — <section class="attention"> */

/* Figma «05 — Обладнання для цього рішення» (757:7192) — .product-card і рушій .slider
   без змін; лише фіксована ширина слайда 336px через .equipment-products__slide. */
.equipment-products {
  padding-block: 140px;
  background-color: var(--background-primary);
}

.equipment-products__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-56);
}

.equipment-products__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-32);
  width: 100%;
}

.equipment-products__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 760px;
}

.equipment-products__title {
  color: var(--text-primary);
}

.equipment-products__controls {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-12);
}

.equipment-products__slider {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  width: 100%;
}

.equipment-products__slide {
  flex: 0 0 336px;
  max-width: 336px;
  min-width: 0;
}

@media (max-width: 1199px) {
  .equipment-products {
    padding-block: var(--space-96);
  }

  .equipment-products__container {
    gap: var(--space-40);
  }

  .equipment-products__slider {
    gap: var(--space-40);
  }
}

@media (max-width: 767px) {
  .equipment-products {
    padding-block: var(--space-64);
  }

  .equipment-products__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-20);
  }

  .equipment-products__slider {
    gap: var(--space-32);
  }

  .equipment-products__cta {
    width: 100%;
  }
}

/* .solution-track — треки рішень на rishennya-nakopychennya.html (Figma 795:14999,
   828:16702 — назви шарів у Figma застарілі й вмісту не відповідають). Аналог .attention,
   але без checklist і з дзеркальним варіантом .solution-track--reverse — власний блок,
   бо .attention не вміє віддзеркалити бік бринькання фото. */
.solution-track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 700px;
  background-color: var(--background-secondary);
}

.solution-track__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-32);
  padding-block: 100px;
  padding-right: var(--space-64);
  padding-left: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter)));
}

.solution-track__title {
  color: var(--text-primary);
}

.solution-track__photo-frame {
  position: relative;
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 24px 56px -16px rgba(23, 33, 41, 0.18);
}

.solution-track__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solution-track--reverse .solution-track__copy {
  order: 2;
  padding-right: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter)));
  padding-left: var(--space-64);
}

.solution-track--reverse .solution-track__photo-frame {
  order: 1;
}

@media (max-width: 1024px) {
  .solution-track {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .solution-track__copy {
    padding: var(--space-64) var(--container-gutter);
  }

  .solution-track__photo-frame,
  .solution-track--reverse .solution-track__photo-frame {
    order: -1;
    height: 420px;
  }

  .solution-track--reverse .solution-track__copy {
    order: 0;
    padding-inline: var(--container-gutter);
  }
}

@media (max-width: 767px) {
  .solution-track__copy {
    gap: var(--space-24);
    padding: var(--space-48) var(--container-gutter);
  }

  .solution-track__cta {
    width: 100%;
  }
}