/*
  Карточка «этап сопровождения» (components/stage-card.njk). Стеклянная
  плашка поверх светлого фона страницы (backdrop-blur, полупрозрачный
  белый) — та же тень, что у карточек «6 шагов работы» на главной
  (--shadow-step-card), но свой фон (там непрозрачный --color-step-card-bg,
  здесь полупрозрачный + blur, т.к. в макете карточка лежит на абстрактном
  фоне страницы, а не на сплошном цвете).

  min-height, не height: 3-й этап короче (нет тегов) — не должен обрезаться
  при более длинном тексте из будущей WP-админки, просто останется с
  запасом пустого места снизу, как в самом макете.
*/
.stage-card {
  min-height: 372px;
  padding: 30px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: var(--shadow-step-card);
}

.stage-card__number {
  display: block;
  margin: 0 0 10px;
  font-size: var(--fs-step-title);
  line-height: var(--lh-step-title);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
}

.stage-card__title {
  margin: 0 0 10px;
  font-size: var(--fs-step-title);
  line-height: var(--lh-step-title);
  font-weight: var(--fw-bold);
  color: var(--color-heading-dark);
}

.stage-card__description {
  margin: 0;
  font-size: var(--fs-step-desc);
  line-height: var(--lh-step-desc);
  color: var(--color-ink);
  opacity: 0.6;
}

.stage-card__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}

/*
  Мобильная адаптация (600px,
  база 390px). Своя высота на карточку (не формула, у каждого из 3 этапов
  в макете разная): 310px (01), 398px (02, с 4 тегами — самый длинный),
  209px (03, без тегов). min-height, не height — по тому же принципу, что
  на десктопе (длинный текст из будущей WP-админки не должен обрезаться).
*/
@media (max-width: 599.98px) {
  .stage-card {
    min-height: auto;
    padding: min(30px, calc(30 / 390 * 100vw));
    border-radius: min(25px, calc(25 / 390 * 100vw));
  }

  .service-stages__grid .stage-card:nth-child(1) {
    min-height: min(310px, calc(310 / 390 * 100vw));
  }

  .service-stages__grid .stage-card:nth-child(2) {
    min-height: min(398px, calc(398 / 390 * 100vw));
  }

  .service-stages__grid .stage-card:nth-child(3) {
    min-height: min(209px, calc(209 / 390 * 100vw));
  }

  .stage-card__number,
  .stage-card__title {
    font-size: min(16px, calc(16 / 390 * 100vw));
    line-height: min(25px, calc(25 / 390 * 100vw));
  }

  .stage-card__description {
    font-size: min(12px, calc(12 / 390 * 100vw));
    line-height: min(21px, calc(21 / 390 * 100vw));
  }
}