/* ==========================================================================
   index.css — Hero-секция + слайдер
   ФОНД «Дорога жизни»

   Все значения берутся из Figma-экспорта slider.css
   ========================================================================== */

:root {
  --color-text:       #343333;
  --color-green:      #3EA74F;
  --color-yellow:     #FFE74F;
  --color-white:      #FFFFFF;
  --color-muted:      rgba(255, 255, 255, 0.6);
  --color-progress-bg: rgba(255, 255, 255, 0.3);
  --font:             'Roboto', Arial, sans-serif;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(180deg, #FFFFFF 66.74%, #F4F4F4 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 130px;
}

/* ==========================================================================
   HERO CONTENT — H1 + SVG «Дерево рук»
   ========================================================================== */
.hero__content {
  position: relative;
  width: 902px;
  max-width: 100%;
  padding: 0 20px;
  text-align: center;
}

.hero__title {
  font-family: var(--font);
  font-style: normal;
  font-weight: 800;
  font-size: 64px;
  line-height: 120%;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: -20px;
}

.hero__illustration {
  display: flex;
  justify-content: center;
}

.hero__tree {
  width: 400px;
  max-width: 100%;
  height: auto;
}

.hero__tree-group {
  transform-origin: bottom center;
}

/* ==========================================================================
   SUBTITLE
   ========================================================================== */
.hero__subtitle {
  max-width: 500px;
  text-align: center;
  padding: 50px 20px 40px;
}

.hero__subtitle-text {
  font-family: var(--font);
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 100%;
  color: var(--color-text);
}

/* ==========================================================================
   SLIDER SECTION — обёртка
   Figma: flex, row, center, flex-end, gap: 10px
          position: absolute, 1440×460, top: 462px
   ========================================================================== */
.slider-section {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 0 20px;
}

/* ==========================================================================
   SWIPER
   ========================================================================== */
.slider--hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slider--hero .swiper-wrapper {
  display: flex;
  align-items: flex-end;
}

.slider--hero .swiper-slide {
  width: auto;
  height: auto;
  flex-shrink: 0;
}

/* ==========================================================================
   ГРАДИЕНТЫ по краям слайдера
   Figma: 199px, linear-gradient(270deg, #FFF → transparent)
   ========================================================================== */
.slider__gradient {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 199px;
  z-index: 3;
  pointer-events: none;
}

.slider__gradient--left {
  left: 0;
  background: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
}

.slider__gradient--right {
  right: 0;
  background: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
}

/* ==========================================================================
   НАВИГАЦИЯ — стрелки
   ========================================================================== */
.slider-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px 0 0;
}

.slider-navigation .swiper-button-prev,
.slider-navigation .swiper-button-next {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  margin-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
  padding: 0;
}

.slider-navigation .swiper-button-prev::after,
.slider-navigation .swiper-button-next::after {
  display: none;
}

.slider-navigation .swiper-button-prev svg,
.slider-navigation .swiper-button-next svg {
  width: 24px;
  height: 24px;
}

.slider-navigation .swiper-button-prev svg {
  transform: matrix(-1, 0, 0, 1, 0, 0);
}

.slider-navigation .swiper-button-prev:hover,
.slider-navigation .swiper-button-next:hover {
  opacity: 0.6;
}

.slider-navigation .swiper-button-prev.swiper-button-disabled,
.slider-navigation .swiper-button-next.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}

/* ==========================================================================
   SUPPORT BLOCK — Карточка
   Figma help: 320×420, border-radius 10px
     background: linear-gradient(180deg, rgba(255,255,255,0) 59.64%, rgba(255,255,255,0.4) 100%), url(...)
     flex: none, order: N
   Figma digest: 370×460, border-radius 10px
     background: linear-gradient(180deg, rgba(255,255,255,0) 78.34%, rgba(255,255,255,0.4) 100%), url(...)
   ========================================================================== */
.support__block {
  position: relative;
  flex-shrink: 0;
  width: 320px;
  height: 420px;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  isolation: isolate;
}

.support__block:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Белый gradient overlay поверх фото — точно как в Figma */
.support__block::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 59.64%,
    rgba(255, 255, 255, 0.4) 100%
  );
  pointer-events: none;
}

/* Модификатор — digest (370×460) */
.support__block--digest {
  width: 370px;
  height: 460px;
}

.support__block--digest::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 78.34%,
    rgba(255, 255, 255, 0.4) 100%
  );
}

/* ==========================================================================
   SUPPORT STATUS — Статус-бейдж
   Figma: absolute, width 91px, height 18px, right: 10px, top: 10px
          bg: #FFFFFF, border-radius: 100px, z-index: 2
          flex: none, order: 2
   ========================================================================== */
.support__status {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 5;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2px 8px;
  gap: 4px;
  background: var(--color-white);
  border-radius: 100px;
  width: 91px;
  height: 18px;
  pointer-events: none;
}

/* Текст статуса
   Figma: 12px, 400, uppercase, line-height 120%, color #343333 */
.support__status-text {
  font-family: var(--font);
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-text);
  width: 65px;
}

/* Зелёная точка
   Figma: 6×6px, bg: #3EA74F, order: 1 */
.support__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-green);
  flex-shrink: 0;
}

/* Модификатор — digest: шире, без зелёной точки */
.support__status--digest {
  width: 116px;
}

.support__status--digest .support__status-dot {
  display: none;
}

/* ==========================================================================
   SUPPORT INFO — Информационный блок (description)
   Figma help:
     flex, column, space-between, flex-start
     padding: 20px, gap: 12px, isolation: isolate
     absolute, height: 160px, left: 10px, right: 10px, bottom: 10px
     bg: #3EA74F, border-radius: 8px
   Figma digest:
     flex, column, flex-start (не space-between!)
     padding: 20px, gap: 29px, isolation: isolate
     absolute, height: 91px, left: 10px, right: 10px, bottom: 10px
     bg: #FFE74F, border-radius: 8px
   ========================================================================== */
.support__info {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  gap: 12px;
  height: 160px;
  background: var(--color-green);
  border-radius: 8px;
  isolation: isolate;
  box-sizing: border-box;
}

/* Модификатор — digest */
.support__info--digest {
  height: 91px;
  gap: 29px;
  background: var(--color-yellow);
}

/* ==========================================================================
   SUPPORT NAME-TEXT — Блок «Имя + Описание»
   Figma (Frame 2087326026):
     flex, column, flex-start, padding: 0, gap: 6px
     margin: 0 auto, width: 260px
     flex: none, order: 0, z-index: 0
   Figma digest: width: 310px
   ========================================================================== */
.support__name-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 6px;
  margin: 0 auto;
  width: 260px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  z-index: 0;
}

.support__name-text--digest {
  width: 310px;
}

/* ==========================================================================
   SUPPORT TITLE — Имя
   Figma: width 260px, height 26px
          font: Roboto, 500, 22px, line-height 120%, uppercase
          color: #FFFFFF
   Figma digest: color: #343333
   ========================================================================== */
.support__title {
  width: 260px;
  height: 26px;
  font-family: var(--font);
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 120%;
  text-transform: uppercase;
  color: var(--color-white);
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.support__title--digest {
  width: 310px;
  color: var(--color-text);
}

/* ==========================================================================
   SUPPORT TEXT — Описание потребности
   Figma: width 260px, height 19px (или 38px для длинного)
          font: Roboto, 400, 16px, line-height 120%
          color: #FFFFFF
   Figma digest: color: #343333
   ========================================================================== */
.support__text {
  width: 260px;
  font-family: var(--font);
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 120%;
  color: var(--color-white);
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.support__text--digest {
  width: 310px;
  color: var(--color-text);
}

/* ==========================================================================
   SUPPORT PROGRESS AREA — Контейнер «Прогресс + Суммы»
   Figma (Frame 2087326189):
     flex, column, flex-end, flex-start, padding: 0, gap: 12px
     margin: 0 auto, width: 260px, height: 38px
     flex: none, order: 1, z-index: 1
   ========================================================================== */
.support__progress-area {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0;
  gap: 12px;
  margin: 0 auto;
  width: 260px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  z-index: 1;
}

/* ==========================================================================
   SUPPORT PROGRESS — Прогресс-бар
   Figma (Frame 2087325686):
     flex, column, flex-start, padding: 0
     width: 260px, height: 6px
     bg: rgba(255,255,255,0.3), border-radius: 100px
   ========================================================================== */
.support__progress {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  width: 260px;
  height: 6px;
  background: var(--color-progress-bg);
  border-radius: 100px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  overflow: hidden;
}

/* Заполнение (Rectangle 50)
   Figma: width: 80px, height: 6px, bg: #FFE74F, border-radius: 100px */
.support__bar {
  height: 6px;
  background: var(--color-yellow);
  border-radius: 100px;
  transition: width 0.6s ease;
  min-width: 0;
}

/* ==========================================================================
   SUPPORT SUMS — Суммы сбора
   Figma (Frame 2087325687):
     flex, row, wrap, space-between, center, flex-start
     padding: 0, gap: 10px 91.8775px
     width: 260px, height: 20px
     flex: none, order: 1
   ========================================================================== */
.support__sums {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;
  padding: 0;
  gap: 10px 91.8775px;
  width: 260px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

/* Левая часть (Frame 2087326025):
   flex, row, center, padding: 0, gap: 4px, width: ~140px, height: 20px */
.support__sums-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 4px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* Иконка рубля — 20×20px */
.support__ruble-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.support__ruble-icon svg {
  width: 20px;
  height: 20px;
}

/* «Собрано: X ₽»
   Figma: 500, 14px, line-height 16px, letter-spacing: -0.02em, color: #FFFFFF */
.support__collected {
  font-family: var(--font);
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.02em;
  color: var(--color-white);
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* «Цель: X ₽»
   Figma: 500, 14px, line-height 16px, text-align: right, letter-spacing: -0.02em
          color: rgba(255,255,255,0.6) */
.support__goal {
  font-family: var(--font);
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  text-align: right;
  letter-spacing: -0.02em;
  color: var(--color-muted);
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ---- ≤ 1200px ---- */
@media (max-width: 1200px) {
  .hero__title {
    font-size: 48px;
  }
  .hero__tree {
    width: 320px;
  }
}

/* ---- ≤ 768px ---- */
@media (max-width: 768px) {
  .hero {
    padding-top: 100px;
    min-height: auto;
  }
  .hero__title {
    font-size: 36px;
  }
  .hero__tree {
    width: 260px;
  }
  .hero__subtitle-text {
    font-size: 16px;
  }
  .hero__subtitle {
    padding: 30px 20px 30px;
  }

  .slider-navigation {
    display: none;
  }
  .slider__gradient {
    width: 60px;
  }

  .support__block {
    width: 280px;
    height: 370px;
  }
  .support__block--digest {
    width: 320px;
    height: 400px;
  }
  .support__info {
    height: 140px;
    padding: 16px;
  }
  .support__info--digest {
    height: 80px;
    padding: 16px;
  }
  .support__name-text,
  .support__title,
  .support__text,
  .support__progress,
  .support__progress-area,
  .support__sums {
    width: 100%;
  }
  .support__title,
  .support__title--digest {
    width: auto;
  }
  .support__text,
  .support__text--digest {
    width: auto;
  }
  .support__name-text--digest {
    width: 100%;
  }
}

/* ---- ≤ 480px ---- */
@media (max-width: 480px) {
  .hero {
    padding-top: 80px;
  }
  .hero__title {
    font-size: 28px;
    margin-bottom: -10px;
  }
  .hero__tree {
    width: 220px;
  }
  .hero__subtitle {
    padding: 20px 16px 24px;
  }
  .hero__subtitle-text {
    font-size: 14px;
  }

  .support__block {
    width: 260px;
    height: 340px;
  }
  .support__block--digest {
    width: 290px;
    height: 370px;
  }
  .support__info {
    height: 130px;
    padding: 14px;
  }
  .support__info--digest {
    height: 75px;
    padding: 14px;
  }
  .support__title {
    font-size: 18px;
    height: auto;
  }
  .support__text {
    font-size: 14px;
  }
  .support__collected,
  .support__goal {
    font-size: 12px;
  }
  .slider__gradient {
    width: 40px;
  }
  .slider-section {
    padding: 10px 0 10px;
  }
}