/* ─────────────────────────────────────────────────────────────
   Карточка мастер-класса

   Один компонент на каталог, блок на главной и подборку на странице
   урока. До этого их было две: в каталоге описание на три строки
   обрывалось на полуслове у 77 карточек из 78 и занимало 151px при
   фото в 166px. Вместо описания — метаданные: они считываются, а
   описание нужно читать, и в сетке из 79 карточек это разная работа.
   ───────────────────────────────────────────────────────────── */

.mc-card {
    display: block;
}

/* ── Фото ── */
.mc-card__ph {
    position: relative;
    display: block;
    padding-bottom: 62%;
    border-radius: 16px;
    overflow: hidden;
    background: #EDEBE8;
}

.mc-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* Трансформация фото длиннее, чем смена цвета: на быстрой кривой
       масштабирование крупного снимка выглядит дёрганым. */
    transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}

.mc-card:hover .mc-card__img,
.mc-card:focus-within .mc-card__img {
    transform: scale(1.05);
}

/* Метки на фото: тариф слева сверху, длительность справа снизу.
   Полупрозрачная подложка, а не сплошная, — под ней должно читаться
   фото, иначе метка выглядит наклейкой. */
.mc-card__badge,
.mc-card__time {
    position: absolute;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 100px;
    background: rgba(23, 31, 38, .72);
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
}

.mc-card__badge {
    left: 10px;
    top: 10px;
}

.mc-card__time {
    right: 10px;
    bottom: 10px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}

/* ── Подпись ── */
.mc-card__bd {
    padding: 12px 0 0;
}

.mc-card__eyebrow {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    /* Охра на два шага темнее прежней #9A7434: та давала на фоне страницы
       контраст 3,92 при норме 4,5 для обычного текста, а надстрочная
       строка набрана 11-м кеглем — там запас нужен больше всего.
       У этой 5,8. Тон остался фирменным, читаемость появилась. */
    color: #7A5A28;
}

.mc-card__eyebrow a {
    color: inherit;
    text-decoration: none;
}

.mc-card__eyebrow a:hover {
    color: #171F26;
}

/* Заголовок занимает две строки всегда, даже когда помещается в одну.

   Из 79 названий в каталоге 60 в одну строку, 17 в две, 2 в три — и
   строка с шефом прыгала по вертикали от карточки к карточке. Резерв в
   две строки выравнивает 77 из 79; два самых длинных названия по-прежнему
   сдвигают подпись на строку, но обрезать их ради ровной сетки нельзя —
   в них теряется предмет урока. */

.mc-card__name {
    display: block;
    min-height: 40px;
    color: #171F26;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
    transition: color .18s ease;
}

.mc-card:hover .mc-card__name,
.mc-card__name:focus-visible {
    color: #7A5A28;
}

/* Рамка фокуса: до этого у карточек её не было ни в каталоге, ни в
   подборках — с клавиатуры было не понять, где находишься. */
.mc-card__name:focus-visible,
.mc-card__ph:focus-visible {
    outline: 2px solid #171F26;
    outline-offset: 3px;
    border-radius: 4px;
}

.mc-card__ph:focus-visible {
    border-radius: 16px;
}

.mc-card__meta {
    margin-top: 6px;
    font-size: 13px;
    line-height: 18px;
    color: #78838C;
}

/* При включённом «уменьшить движение» остаётся только смена цвета. */
@media (prefers-reduced-motion: reduce) {
    .mc-card__img {
        transition: none;
    }

    .mc-card:hover .mc-card__img,
    .mc-card:focus-within .mc-card__img {
        transform: none;
    }
}