/* Block: Offer
   Финальный CTA-блок: фото девушки с ДНК-тестом + заголовок, описание,
   кнопка «Заказать» и цена со скидкой.

   Раскладка:
   ≤575       — рамка-карточка (border-radius 32), фон BG mobile,
                контент центрирован у нижнего края (vertical bottom + horizontal center).
   576-767    — то же, BG tablet.
   768-1099   — то же, но Headline L (40/48) и заголовок в 2 фикс. строки.
   ≥1100      — баннер «во всю ширину» без border-radius; BG desktop,
                девушка слева, CTA-блок справа (align-items: flex-end),
                заголовок выровнен по левому краю.
   ≥1440      — pr-64 у баннера, шире CTA-колонка (648), title-ширина 504. */

.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-block-start: var(--spacing-20);
  padding-inline: 0;
}

/* === Banner === */
.offer__banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: var(--offer-banner-height);
  padding-block-end: var(--spacing-40);
  padding-inline: var(--spacing-20);
  border-radius: var(--radius-32);
  background-image: url("../../assets/Offer_Mobile.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* === CTA wrapper (заголовок + кнопка с ценой) === */
.offer__cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-20);
  width: 100%;
}

/* === Content (title + subtitle) === */
.offer__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-12);
  width: 100%;
  max-width: 530px;
  color: var(--color-on-surface);
  text-align: center;
}

.offer__title {
  margin: 0;
  width: 100%;
  font-size: var(--font-headline-s-size);
  font-weight: 600;
  line-height: var(--font-headline-s-line);
  letter-spacing: -0.4px;
}

.offer__subtitle {
  margin: 0;
  width: 100%;
  font-size: var(--font-body-xs-size);
  font-weight: 400;
  line-height: var(--font-body-xs-line);
  letter-spacing: var(--font-body-xs-tracking);
}

/* === Action (кнопка + цена) === */
.offer__action {
  display: flex;
  align-items: center;
  gap: 15px;
}

.offer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-16) var(--spacing-32);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-on-surface);
  color: var(--color-surface-bright);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.offer__action.offer__action--pending {
  visibility: hidden;
  pointer-events: none;
}

.offer__price-meta[hidden],
.offer__price-old[hidden],
.offer__price-badge[hidden] {
  display: none;
}

.offer__btn:hover {
  background-color: #ea187e;
}

.offer__btn:focus-visible {
  outline: 2px solid var(--color-primary-2);
  outline-offset: 2px;
}

/* === Price === */
.offer__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 98px;
}

.offer__price-current {
  font-size: var(--font-title-l-size);
  font-weight: 600;
  line-height: var(--font-title-l-line);
  letter-spacing: var(--font-title-l-tracking);
  color: var(--color-on-surface);
  white-space: nowrap;
}

.offer__price-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.offer__price-old {
  font-size: var(--font-body-xs-size);
  font-weight: 400;
  line-height: var(--font-body-xs-line);
  letter-spacing: var(--font-body-xs-tracking);
  color: var(--color-on-surface);
  text-decoration: line-through;
  text-decoration-color: #ea187e;
  white-space: nowrap;
}

.offer__price-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px var(--spacing-4);
  border-radius: var(--radius-24);
  background: var(--color-tertiary-4);
  color: var(--color-surface-bright);
  font-size: var(--font-body-xs-size);
  font-weight: 400;
  line-height: var(--font-body-xs-line);
  letter-spacing: var(--font-body-xs-tracking);
  white-space: nowrap;
}

/* ============================================ */
/* ≥576 — фон tablet                              */
/* ============================================ */
@media (min-width: 576px) {
  .offer__banner {
    background-image: url("../../assets/Offer_Tablet.png");
  }
}

/* ============================================ */
/* ≥768 — Headline L, заголовок в 2 фикс. строки */
/* ============================================ */
@media (min-width: 768px) {
  .offer__title {
    font-size: var(--font-headline-l-size);
    line-height: var(--font-headline-l-line);
    letter-spacing: var(--font-headline-l-tracking);
  }
}

/* ============================================ */
/* ≥1100 — фон desktop, баннер во всю ширину,    */
/* CTA-колонка справа, контент по левому краю    */
/* ============================================ */
@media (min-width: 1100px) {
  .offer {
    padding-block-start: var(--spacing-80);
    padding-inline: 0;
  }

  .offer__banner {
    align-items: flex-end;
    justify-content: center;
    padding-block-end: 0;
    padding-inline: var(--spacing-20);
    border-radius: 0;
    background-image: url("../../assets/Offer_Desktop.png");
    background-position: center;
  }

  .offer__cta {
    align-items: flex-start;
    width: 526px;
    max-width: 100%;
  }

  .offer__content {
    align-items: flex-start;
    max-width: none;
    text-align: left;
  }

  .offer__title {
    width: 485px;
    max-width: 100%;
  }

  .offer__subtitle {
    font-size: var(--font-title-m-size);
    line-height: var(--font-title-m-line);
    letter-spacing: var(--font-title-m-tracking);
  }
}

/* ============================================ */
/* ≥1440 — pr-64, более широкий CTA-блок          */
/* ============================================ */
@media (min-width: 1440px) {
  .offer__banner {
    padding-inline: 0;
    padding-right: var(--spacing-64);
  }

  .offer__cta {
    width: 648px;
  }

  .offer__title {
    width: 504px;
  }
}