/* Карточка каталога (PortalCard): оболочка, ховер и нажатие по всей карточке — одни для сообществ, афиши,
   опросов и новостей. Содержимое слотов модуль красит сам; здесь только --mud-palette-*, чтобы работало везде. */
.portal-card.mud-paper {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  color: inherit;
  box-shadow: 0 3px 16px rgb(0 0 0 / 3%);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

/* Рамка в цвет акцента видна и в тёмной теме, где тень почти не читается; подъём — только там, где есть
   наведение и человек не просил убрать движение. :focus-within подсвечивает карточку с клавиатуры. */
.portal-card.mud-paper:hover,
.portal-card.mud-paper:focus-within {
  border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, var(--mud-palette-lines-default));
  box-shadow: 0 10px 28px rgb(0 0 0 / 9%);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .portal-card.mud-paper:hover {
    transform: translateY(-3px);
  }
}

.portal-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Крупная карточка: обложка слева, текст справа; на телефоне — столбиком, как остальные (брейкпоинт MudBlazor 600). */
.portal-card-wide .portal-card-inner {
  display: grid;
  grid-template-columns: 1.06fr 1fr;
}

@media (max-width: 599.98px) {
  .portal-card-wide .portal-card-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

.portal-card-cover {
  display: block;
  position: relative;
  height: 150px;
  overflow: hidden;
  background: linear-gradient(120deg, color-mix(in srgb, var(--mud-palette-tertiary) 30%, var(--mud-palette-surface)), color-mix(in srgb, var(--mud-palette-primary) 22%, var(--mud-palette-surface)) 55%, color-mix(in srgb, var(--mud-palette-secondary) 35%, var(--mud-palette-surface)));
  color: var(--mud-palette-white) !important;
}

/* Только сама картинка обложки — прямой ребёнок ссылки; иконки бейджей поверх неё не трогаем. display не задаём:
   заглушки новостей (cover-light/cover-dark) показывает и прячет тема, а зазор под строкой снимает vertical-align. */
.portal-card-cover > img,
.portal-card-cover > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: top;
}

.portal-card-body {
  min-width: 0;
  padding: 16px 20px 14px;
}

.portal-card-title {
  margin: 8px 0 12px;
  font-size: 20px;
  overflow-wrap: anywhere;
}

/* Нажимается вся карточка: ссылка заголовка растянута на неё. */
.portal-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.portal-card-footer {
  border-top: 1px solid var(--mud-palette-lines-default);
  padding-top: 14px;
  font-size: 14px;
}

/* Ссылки и кнопки низа — поверх растянутой ссылки, иначе их нажатие открывало бы карточку. */
.portal-card-footer :is(a, .mud-button-root) {
  position: relative;
  z-index: 1;
}