/*
 * БОЛЬШАЯ КАРТОЧКА С ФОТО (главная страница).
 *
 * ЧТО ИЗМЕНИЛОСЬ ПО СРАВНЕНИЮ С ПРЕЖНИМ styles/card_container.css
 *
 * Было: у каждой карточки был СВОЙ класс, названный по имени страницы —
 * .dentistry-in-china__url-margin-alignment, .visas-to-china__url-margin-alignment
 * и так далее. В каждом таком классе повторялись одни и те же пять свойств,
 * различались только картинка и сторона. Добавить пятую карточку означало
 * дописать в CSS ещё один блок, да ещё продублировать его в медиазапросе.
 *
 * Стало: класс один, а различия передаются переменными прямо в разметке:
 *   --hero-card-image  картинка фона
 *   --hero-card-side   с какой стороны стоит текст (start или end)
 *   --hero-card-ml / --hero-card-mr   отступы
 * Сторона задаётся атрибутом data-side="left" или "right", остальное
 * подставляется само. Новая карточка теперь НЕ требует правки CSS.
 *
 * Подключается общим списком в components/assets.php.
 */

.hero-card {
  width: 1000px;
  margin: 0 auto;
  padding: 0;
}

.hero-card__background {
  min-height: 245px;
  align-content: center;

  background-image: var(--hero-card-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  /* именно это ставит текст влево или вправо: свойство работает и у блока,
     проверено на живом рендере — карточки 2 и 4 действительно уезжают вправо */
  justify-items: var(--hero-card-side, start);
}

.hero-card__holder {
  display: flex;
  width: 281px;
  height: 210px;
  margin-left: var(--hero-card-ml, 20px);
  margin-right: var(--hero-card-mr, 0);
}

/* Карточка с текстом справа */
.hero-card[data-side="right"] {
  --hero-card-side: end;
  --hero-card-ml: 0;
  --hero-card-mr: 20px;
}

.hero-card__link {
  text-decoration: none;
  width: 200px;
  height: 200px;
}

.hero-card__text {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-family: SB-Sans, sans-serif;
  font-size: 13px;
  width: 281px;
  height: 210px;
  background-color: rgb(7%, 37%, 55%, 0.9);
  padding: 0.5rem 0.75rem;
  border-radius: 0.3rem;
  color: #fff;
}

.hero-card__heading {
  letter-spacing: 2px;
}

.hero-card__link:hover .hero-card__text {
  background-color: rgb(7%, 37%, 55%, 1);
}

.hero-card__link:hover .hero-card__more {
  color: #00a6ed;
}

/* Адаптация для узких экранов */
@media (max-width: 1015px) {
  .hero-card {
    width: 100%;
    max-width: 1000px;
  }
}

/* Мобильная версия — карточки прижаты влево.
   Для правой карточки отступ задаём отдельно: у неё своё значение
   переменной, и без этой строки правило ниже её бы не перебило. */
@media (max-width: 600px) {
  .hero-card {
    padding-left: 0;
    --hero-card-ml: 20px;
  }

  .hero-card[data-side="right"] {
    --hero-card-ml: 20px;
  }
}

/* Для очень узких экранов — текст по центру.
   Сторону приходится задавать и правой карточке тоже: у неё своё значение
   переменной (end), и по специфичности оно перебивает общее правило выше.
   Без этой строки правая карточка осталась бы справа, а в прежней вёрстке
   на узком экране все четыре вставали по центру. */
@media (max-width: 480px) {
  .hero-card {
    --hero-card-side: center;
    --hero-card-ml: 0;
  }

  .hero-card[data-side="right"] {
    --hero-card-side: center;
    --hero-card-ml: 20px;
  }
}