/* ════════════════════════════════════════════════
   LIDERAVTO — Донор: листинг /donors/ (представление card)
   D-91: донор CSS. Стилизует Views lider_donors_list
   (row_class: donor-card, style: unformatted list) — без Twig (D-122).
   Соответствует content/donor/donor.md §4, мокапу mockups/card.html.
   Версия: 1.0.0
════════════════════════════════════════════════ */

.view-lider-donors-list .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  padding: 20px 0 32px;
}

.donor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}
.donor-card:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 12px rgba(0,0,0,.09);
}

/* Фото */
.donor-card-photo {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--gray-100);
  overflow: hidden;
}
.donor-card-photo .field-content,
.donor-card-photo a,
.donor-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
}
.donor-card-photo img { object-fit: cover; }

/* Статус — бейдж поверх фото */
.donor-card-status {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: #dcfce7;
  color: var(--success);
  font-size: var(--caption);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.donor-card-status:empty { display: none; }

/* Заголовок */
.donor-card-title {
  margin: 0;
  padding: 12px 14px 0;
  font-size: var(--body);
  font-weight: 800;
  color: var(--navy);
}
.donor-card-title a { color: inherit; }

/* Факты — пробег / цвет */
.donor-card-fact {
  display: flex;
  gap: 4px;
  padding: 3px 14px 0;
  font-size: var(--caption);
  color: var(--gray-500);
}
.donor-card-fact-label { white-space: nowrap; }
.donor-card-fact .field-content { font-weight: 600; color: var(--gray-700); }

/* VIN */
.donor-card-vin {
  padding: 6px 14px 10px;
  font-size: var(--caption);
  color: var(--gray-400);
  font-family: monospace;
}

/* CTA */
.donor-card-cta {
  display: block;
  margin: auto 14px 14px;
  text-align: center;
  height: 38px;
  line-height: 38px;
  background: var(--sky);
  color: var(--blue);
  font-weight: 700;
  font-size: var(--small);
  border-radius: var(--radius, 8px);
}
.donor-card-cta:hover { background: var(--blue); color: #fff; }

/* 2026-08-10 (аудит): было 600px — не канонический брейкпоинт (layout-standard.md §5:
   1199.98/991.98/767.98/575.98). По смыслу вёрстки это МОБИЛЬНЫЙ приём: auto-fill
   minmax(260px,1fr) на ширинах ≤575.98 не вмещает даже 1 колонку в 260px (проверено:
   320-414px контент ýже 260px+паддинги), без этого override карточки были бы в 1
   колонку на телефоне — override форсирует 2 узкие колонки. На 576-767 auto-fill и
   без override даёт те же 2 колонки (проверено рендером, 260*2+20=540px помещается) —
   перенос границы с 600 на 575.98 визуально ничего не меняет, просто снимает магическое
   число. */
@media (max-width: 575.98px) {
  .view-lider-donors-list .view-content { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .donor-card-title { font-size: var(--small); }
}