/* Сторінка «Підтримка» (pidtrymka.html) — Figma 805:8522.
   Hero — повнокадрове фото + горизонтальний 4-стоповий градієнт зліва. */

.pidtrymka-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 360px;
  padding-block: 66px 96px;
  background-color: var(--surface-dark);
}

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

.pidtrymka-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(
    90deg,
    rgba(5, 13, 24, 0.8) 0%,
    rgba(5, 13, 24, 0.576) 42%,
    rgba(5, 13, 24, 0.144) 75%,
    rgba(5, 13, 24, 0) 100%
  );
  pointer-events: none;
}

.pidtrymka-hero__container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pidtrymka-hero__breadcrumbs {
  margin-bottom: var(--space-24);
}

.pidtrymka-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
}

.pidtrymka-hero__title {
  max-width: 780px;
  color: var(--text-inverse);
}

.pidtrymka-hero__description {
  max-width: 480px;
  font-size: var(--font-size-20);
  line-height: var(--line-height-34);
  color: var(--text-inverse);
  opacity: 0.7;
}

@media (max-width: 767px) {
  .pidtrymka-hero {
    min-height: 0;
    padding-block: var(--space-96) var(--space-64);
  }

  .pidtrymka-hero__content {
    gap: var(--space-20);
  }

  .pidtrymka-hero__description {
    max-width: none;
  }
}

/* «02 — Напрямки підтримки» — 4 картки 2×2. Ілюстрація — object-fit:contain
   (не cover: вписаний рендер на прозорому фоні). Фон картки #f6f4f5 — буквально
   з макета, навмисно не токен (--background-secondary дає інший #f6f7f8). */
.support-directions {
  padding-block: 100px 140px;
  background-color: var(--background-primary);
}

.support-directions__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
  margin-block: 0;
  padding-block: 0;
  list-style: none;
}

.support-directions__card {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  height: 100%;
  min-width: 0;
  border-radius: var(--radius-card-large);
  background-color: #f6f4f5;
}

.support-directions__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  width: 412px;
  flex-shrink: 0;
  padding: var(--space-32) 0 var(--space-32) var(--space-32);
}

.support-directions__title {
  font-size: var(--font-size-24);
  line-height: var(--line-height-32);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.support-directions__description {
  color: var(--text-secondary);
}

.support-directions__photo-frame {
  position: relative;
  flex: 1 0 0;
  align-self: stretch;
  min-width: 0;
  min-height: 228px;
}

.support-directions__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

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

  .support-directions__list {
    grid-template-columns: 1fr;
  }

  .support-directions__photo {
    object-position: right center;
  }
}

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

  .support-directions__list {
    gap: var(--space-16);
  }

  .support-directions__card {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0;
  }

  .support-directions__copy {
    width: 100%;
    align-items: center;
    padding: var(--space-24);
    text-align: center;
  }

  .support-directions__photo-frame {
    flex: none;
    min-height: 0;
    height: 140px;
    margin-top: var(--space-24);
  }

  .support-directions__photo {
    object-position: center;
  }

  .support-directions__cta {
    width: 100%;
  }
}