/* Карточка курса с ценой и кнопкой (28.10.2026): витрина школы
   (core/storefront.html) и «Курсы школы» в кабинете ученика
   (students/home.html). Один файл на оба места, чтобы карточка
   выглядела одинаково и снаружи, и внутри. Разметка — core/_shop_card.html. */
.sf-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.sf-course { display: flex; flex-direction: column; overflow: hidden; height: 100%; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.sf-course:hover { box-shadow: var(--bs-box-shadow-lg); transform: translateY(-2px); }
.sf-course-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--gray-100); }
.sf-course > .card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.sf-course h3 { margin: 0; color: var(--bs-heading-color); font-size: var(--fs-lg); line-height: 1.35; font-weight: 600; }
.sf-course-desc {
  margin: 0;
  color: var(--bs-body-color);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-course-meta { margin: auto 0 0; padding-top: var(--sp-2); color: var(--bs-secondary-color); font-size: var(--fs-dense); }
.sf-course-meta b { color: var(--primary-text); font-weight: var(--fw-medium); }
/* Поверх ссылки-растяжки карточки (stretched-link у названия), чтобы кнопка нажималась сама. */
.sf-buy { position: relative; z-index: 2; display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-5); border-top: 1px solid var(--bs-border-color); }
.sf-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); font-variant-numeric: tabular-nums; }
.sf-price b { color: var(--bs-heading-color); font-size: var(--fs-2xl); line-height: 1.15; font-weight: 700; }
.sf-price s { color: var(--bs-secondary-color); font-size: var(--fs-base); }
.sf-price small { color: var(--bs-secondary-color); font-size: var(--fs-dense); }
.sf-off { align-self: center; padding: var(--sp-0-5) var(--sp-2); border-radius: var(--radius-pill); background: rgba(var(--bs-primary-rgb), 0.14); color: var(--primary-text); font-size: var(--fs-sm); font-weight: 600; }
.sf-plan { margin: calc(var(--sp-2) * -1) 0 0; color: var(--bs-secondary-color); font-size: var(--fs-dense); }
.sf-buy .btn { min-height: 2.75rem; font-weight: 600; }
.sf-free { color: var(--bs-success-text-emphasis); }
@media (prefers-reduced-motion: reduce) {
  .sf-course, .sf-course:hover { transform: none; transition: none; }
}