/* Карточка раздела каталога: обложка на всю карточку, поверх неё затемнение
   снизу, название и описание. Цвет затемнения у разделов разный, поэтому
   он приходит переменной. */

.category-card {
  --scrim: 27, 44, 66;

  position: relative;
  display: block;
  height: 234px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-xs);
}

.category-card__cover {
  position: absolute;
  inset: 0;
  background-image: var(--media-image);
  background-position: center;
  background-size: cover;
}

.category-card__cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 200px;
  background-image: linear-gradient(
    to bottom,
    rgba(var(--scrim), 0) 0%,
    rgba(var(--scrim), 0.85) 55%,
    rgb(var(--scrim)) 100%
  );
}

.category-card__body {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 22px var(--space-5);
}

.category-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--neutral-white);
}

.category-card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, 0.82);
}

/* Круглая кнопка-стрелка в углу обложки. */
.category-card__action {
  position: absolute;
  top: var(--space-4);
  inset-inline-end: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--neutral-white);
  color: var(--action-primary-bg);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.category-card__action .icon { stroke-width: 1.75; }

/* Наведение на карточку: кружок заливается основным синим, стрелка белеет. */
.category-card:hover .category-card__action,
.category-card:focus-visible .category-card__action {
  background: var(--action-primary-bg);
  color: var(--neutral-white);
}

.category-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.category-card--sand { --scrim: 169, 138, 114; }
.category-card--muted { --scrim: 110, 108, 130; }

@media (min-width: 768px) {
  .category-card { height: 300px; }
}