/*
 * assets/css/pages/templates.css — /templates/
 *
 * Только то, чего нет в components.css: раскладка hero с маскотом и карточка шаблона
 * с плейсхолдером вместо фото (--am-grad-nophoto уже несёт свой цвет — здесь просто размер).
 * Только var(--am-*).
 */

.am-templates__hero-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--am-s-6);
}

.am-templates__hero-mascot {
    flex-shrink: 0;
}

.am-templates__hero-inner h1 {
    text-wrap: balance;
}

.am-templates__disclaimer {
    margin-top: var(--am-s-3);
    max-width: 56ch;
}

/* -------------------------------------------------------------------------------------
 * Сетка карточек — auto-fit, без ручных брейкпоинтов (DESIGN_SYSTEM.md §1.6).
 * ----------------------------------------------------------------------------------- */

.am-templates__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--am-s-4);
}

.am-templates__card {
    display: flex;
    flex-direction: column;
    gap: var(--am-s-2);
    padding: 0;
    overflow: hidden;
}

/*
 * aspect-ratio 3/4, не фиксированная высота — превью теперь мокап вертикальной карточки
 * маркетплейса (см. докблок PHP-файла), фиксированная height:120px резала бы её по важному
 * месту (текст заголовка/плашки). object-fit:cover на .am-templates__preview-img остаётся —
 * подстраховка на случай, если реальная картинка не ровно 3:4.
 */
.am-templates__preview {
    aspect-ratio: 3 / 4;
    background: var(--am-grad-nophoto);
    position: relative;
}

.am-templates__preview-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Заголовок карточки-мокапа всегда у самого верха кадра — если реальное соотношение
     * сторон картинки чуть отличается от контейнера, обрезать нужно снизу (нижний ряд
     * мини-фото), а не сверху (текст). */
    object-position: top;
}

.am-templates__preview-badge {
    position: absolute;
    left: var(--am-s-3);
    bottom: var(--am-s-3);
    padding: 4px var(--am-s-2);
    border-radius: var(--am-r-sm);
    font-size: var(--am-fs-2xs);
    font-weight: var(--am-fw-bold);
    /* --tpl-badge-color/--tpl-badge-text — свои локальные custom properties (не токены из
     * tokens.css), способ передать цвет площадки из инлайн-style в это правило; значения
     * внутри них — всегда var(--am-*) из общей палитры. Текст по умолчанию белый, но для
     * магента-варианта (WCAG: белый на --am-magenta ≈3.09:1 < 4.5:1) шаблон передаёт тёмный. */
    color: var(--tpl-badge-text, var(--am-white));
    background: var(--tpl-badge-color, var(--am-navy-600));
}

.am-templates__cat,
.am-templates__accent,
.am-templates__foot {
    padding-inline: var(--am-pad-card);
}

.am-templates__card > h3 {
    padding-inline: var(--am-pad-card);
}

.am-templates__cat {
    margin-top: var(--am-s-4);
    color: var(--am-text-subtle);
    text-transform: uppercase;
    letter-spacing: var(--am-ls-eyebrow);
}

.am-templates__accent {
    color: var(--am-text-muted);
    flex: 1;
}

/*
 * Подвал карточки — колонка, а не строка. В строке рядом стояли длинная подпись
 * «1 240 использований в тестах» и кнопка «Использовать шаблон»: на ширине карточки в сетке
 * из пяти колонок кнопка не помещалась и вылезала за границу карточки с обрезанным текстом.
 * Колонка даёт кнопке всю ширину, а подписи — свою строку.
 */
.am-templates__foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--am-s-2);
    padding-bottom: var(--am-pad-card);
    margin-top: auto;
}

.am-templates__foot .am-templates__cta {
    justify-content: center;
    text-align: center;
}

.am-templates__uses {
    color: var(--am-text-subtle);
}