/* Карточки материалов — общие для главной (витрина) и страницы материала
   («Ещё материалы»). Шесть видов: --large, --photo, --quote, --number,
   --compact, --text (рамка, 5.3). Размер карточке задаёт место, куда её поставили. */

.material-card {
  position: relative;
  display: flex;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--color-bg);
  isolation: isolate;
}

.material-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-5);
}

.material-card__rubric {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  overflow: hidden;
  font-size: var(--fs-rubric);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.material-card__rubric::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--radius-round);
  background: var(--color-accent);
}

.material-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.material-card__lead { font-size: var(--fs-small); line-height: var(--lh-text); }

.material-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  opacity: 0.75;
}

[data-show-views="off"] .material-card__views { display: none; }

.material-card__views { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-3); }

.material-card__cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.material-card--large,
.material-card--photo,
.material-card--quote { color: var(--color-on-photo); background: var(--color-dark); }

.material-card--large::after,
.material-card--photo::after,
.material-card--quote::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, var(--color-overlay-top) 0%, var(--color-overlay-soft) 28%),
    linear-gradient(to top, var(--color-overlay) 0%, var(--color-overlay) 18%, var(--color-overlay-soft) 70%);
}

.material-card--quote::after {
  background:
    linear-gradient(to top, var(--color-overlay) 0%, var(--color-overlay-soft) 80%),
    var(--color-overlay-quote);
}

.material-card--large .material-card__body,
.material-card--photo .material-card__body { justify-content: flex-end; }

.material-card--large .material-card__meta,
.material-card--photo .material-card__meta,
.material-card--quote .material-card__meta { margin-top: 0; }

.material-card--large .material-card__rubric,
.material-card--photo .material-card__rubric,
.material-card--quote .material-card__rubric { order: -1; }

.material-card--large .material-card__body > .material-card__rubric,
.material-card--photo .material-card__body > .material-card__rubric { margin-bottom: auto; }

.material-card:hover .material-card__cover { transform: scale(1.03); }

.material-card--large .material-card__title { font-size: var(--fs-card-large); }

.material-card--large .material-card__lead { color: var(--color-on-photo-muted); max-width: 34rem; }

.material-card--quote .material-card__body { justify-content: flex-end; }

.material-card--quote .material-card__body > .material-card__rubric { margin-bottom: auto; }

.material-card__quote {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  text-wrap: balance;
  font-weight: var(--fw-bold);
  line-height: var(--lh-lead);
}

.material-card__quote::before {
  content: "«";
  display: block;
  height: 0.55em;
  margin-bottom: var(--space-2);
  font-size: var(--fs-quote-mark);
  line-height: 1;
  color: var(--color-accent);
}

.material-card__quote::after { content: "»"; }

.material-card__quote-by { display: grid; font-size: var(--fs-small); }

.material-card__quote-author { font-weight: var(--fw-medium); }

.material-card__quote-role { color: var(--color-on-photo-muted); }

.material-card--number {
  background: linear-gradient(145deg, var(--brand-grad-1) 0%, var(--brand-grad-2) 51%, var(--brand-grad-3) 100%);
  color: var(--color-accent-text);
}

.material-card--number .material-card__rubric::before { background: var(--color-accent-text); }

.material-card__fact-value {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: var(--fs-fact);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: var(--tracking-display);
}

.material-card__fact-text { font-size: var(--fs-body); line-height: var(--lh-text); max-width: 16rem; }

.material-card--number .material-card__meta { margin-top: var(--space-4); }

.material-card--compact,
.material-card--text {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-line);
}

.material-card--compact { align-items: stretch; }

.material-card__thumb {
  flex: none;
  width: var(--mat-thumb);
  align-self: stretch;
  min-height: var(--mat-thumb);
  object-fit: cover;
}

.material-card--compact .material-card__body { padding: var(--space-3) var(--space-4); gap: var(--space-1); }

.material-card--compact .material-card__title { font-size: var(--fs-card-compact); }

.material-card--compact .material-card__rubric,
.material-card--text .material-card__rubric { color: var(--color-text-muted); }

.material-card--text { background: var(--color-surface); }

.material-card--text .material-card__body { padding: var(--space-3) var(--space-4); gap: var(--space-1); }

.material-card--text .material-card__title { font-size: var(--fs-card-compact); }

.material-card--text .material-card__lead { color: var(--color-text-muted); }

@media (min-width: 1200px) {
  .material-card--large .material-card__body { padding: var(--space-6); }
  .material-card--text .material-card__lead { display: none; }
}

.material-card__title,
.material-card__lead,
.material-card__quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.material-card__title { -webkit-line-clamp: 3; line-clamp: 3; }

.material-card--compact .material-card__title,
.material-card--text .material-card__title { -webkit-line-clamp: 2; line-clamp: 2; }

.material-card__lead { -webkit-line-clamp: 3; line-clamp: 3; }

.material-card__quote { -webkit-line-clamp: 3; line-clamp: 3; }

.material-card__quote::before { display: none; }

.material-card--quote .material-card__body > .material-card__rubric::after {
  content: "«";
  margin-left: auto;
  font-family: var(--font-display);
  font-size: var(--fs-quote-mark);
  line-height: 0.6;
  color: var(--color-accent);
}

.material-card--quote .material-card__rubric { overflow: visible; width: 100%; }

@media (min-width: 1200px) {
  .material-card--quote .material-card__body { padding: var(--space-4) var(--space-5); gap: var(--space-1); }
  .material-card--quote .material-card__meta { display: none; }
  .material-card__quote { flex: none; font-size: var(--fs-quote-desk); }
  .material-card--photo .material-card__body,
  .material-card--number .material-card__body { padding: var(--space-4) var(--space-5); }
}

@media (min-width: 1200px) {
  .material-card__body,
  .material-card--photo .material-card__body,
  .material-card--number .material-card__body,
  .material-card--quote .material-card__body { padding: var(--mat-card-pad) calc(var(--mat-card-pad) * 1.3); }
  .material-card--large .material-card__body { padding: calc(var(--mat-card-pad) * 1.4); }
  .material-card--compact .material-card__body,
  .material-card--text .material-card__body { padding: calc(var(--mat-card-pad) * 0.8) var(--mat-card-pad); }
}

/* Цитата без обложки — на светлом фоне: тёмный текст, оранжевая кавычка
   (решение 06.10). Вид тот же, сервер просто не выводит обложку. */
.material-card--quote:not(:has(.material-card__cover)) {
  color: var(--color-text);
  background: var(--color-sheet);
}
.material-card--quote:not(:has(.material-card__cover))::after { content: none; }
.material-card--quote:not(:has(.material-card__cover)) .material-card__quote-role { color: var(--color-text-muted); }

/* Просмотры — глаз и число (решение 09.10) */
.views-eye { flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; }