/* Карточка аудитории: снимок слева, название, описание и ссылка,
   прижатая к низу карточки. */

.persona-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: 0 8px 24px -4px rgba(156, 141, 128, 0.1);
}

.persona-card__photo {
  flex: none;
  width: 100%;
  height: 230px;
  border-radius: var(--radius-lg);
  background-image: var(--media-image);
  background-position: center;
  background-repeat: no-repeat;
  /* Фигура вписывается в слот целиком: карточки в ряду разной высоты, и при
     `cover` у более высоких обрезались бы края рисунка. */
  background-size: contain;
}

.persona-card__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;
}

.persona-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.persona-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--text-strong);
}

.persona-card__text {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* Ссылка в карточке отбита от текста на 4: так в макете. */
.persona-card .link-arrow { padding-top: var(--space-1); }

/* На планшете снимок чуть выше, чем на мобильном. */
@media (min-width: 768px) {
  .persona-card__photo { height: 250px; }
}

@media (min-width: 1024px) {
  .persona-card {
    flex-direction: row;
    gap: var(--space-5);
  }

  .persona-card__photo {
    width: 128px;
    height: auto;
  }
}

/* Карточка во всю ширину ряда возвращает горизонтальную раскладку.
   На мобильном ряд один, поэтому там она такая же, как остальные. */
@media (min-width: 768px) {
  .persona-card--wide {
    flex-direction: row;
    gap: var(--space-5);
  }

  .persona-card--wide .persona-card__photo {
    width: 292px;
    height: auto;
  }
}

/* Правило шириной 292 выше задано для планшета и стоит в файле после
   десктопного блока, поэтому десктоп возвращает слот 128 отдельным правилом
   в конце: в макете широкая карточка держит ту же колонку, что и соседние,
   иначе рисунок стоит по центру полосы и не совпадает с соседом. */
@media (min-width: 1024px) {
  .persona-card--wide .persona-card__photo { width: 128px; }
}