/* ============================================================================
   YAZME 2026 | РЕКОМЕНДАЦИИ — единый вид во всех разделах
   Файл: assets/css/yz-recs.css
   ----------------------------------------------------------------------------
   Пять форматов одной карточки:
     full    — крупная, с медиа (лента, стена профиля, паблик)
     compact — горизонтальная, миниатюра 88×88 (витрины, сайдбар, разделы)
     tile    — плитка в горизонтальной карусели (витрины книг и рассказов)
     row     — строка списка, аватар 52 (мессенджер, списки контактов)
     inline  — тонкая плашка без медиа (читалка, между главами)

   Всё построено на токенах assets/css/yazme-theme.css, поэтому карточка
   одинаково корректна в «Янтаре», «Cloud Dancer» и «Полночи». Фолбэки после
   запятой нужны для страниц, куда дизайн-система не подключена (виджеты книг,
   отдельные мини-аппы) — там карточка не разваливается, а берёт терракоту.

   ВАЖНО (анти-адблок): в классах нет ad/ads/banner/promo/sponsor — префикс yzr.
   ========================================================================== */

.yzr-wrap { margin: 14px 0; }
.yzr-wrap:empty { display: none; margin: 0; }

.yzr {
    --yzr-accent: var(--yz-accent, #d97757);
    --yzr-soft: var(--yz-accent-soft, rgba(217, 119, 87, .14));
    --yzr-line: var(--yz-accent-line, rgba(217, 119, 87, .42));
    --yzr-surface: var(--yz-surface, #22211F);
    --yzr-text: var(--yz-text, #faf9f5);
    --yzr-dim: var(--yz-dim, #b9b4a7);
    --yzr-border: var(--yz-border, rgba(250, 249, 245, .08));
    --yzr-ease: var(--yz-ease, cubic-bezier(.22, 1, .36, 1));
    --yzr-spring: var(--yz-spring, cubic-bezier(.34, 1.45, .5, 1));

    position: relative;
    box-sizing: border-box;
    font-family: var(--yz-font-ui, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    color: var(--yzr-text);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.yzr *, .yzr *::before, .yzr *::after { box-sizing: border-box; }

/* Карточка живёт внутри чужих страниц с их собственными стилями ссылок —
   без этого заголовок в ленте приходил подчёркнутым и фиолетовым «посещённым». */
.yzr a { color: inherit; text-decoration: none; }
.yzr a:visited { color: inherit; }

/* Тонкая тёплая подложка вместо рамки-«баннера»: карточка читается как часть
   ленты, а не как вставка. Градиент гасится на фиксированных 72 пикселях, а не
   в процентах высоты: иначе низкая компактная карточка заливалась целиком. */
.yzr-card {
    display: block;
    background:
        linear-gradient(180deg, var(--yzr-soft) 0, transparent 72px),
        var(--yzr-surface);
    border: 1px solid var(--yzr-border);
    border-radius: var(--yz-r-lg, 22px);
    overflow: hidden;
    transition: transform .34s var(--yzr-spring), border-color .3s var(--yzr-ease), box-shadow .3s var(--yzr-ease);
}
.yzr-card:hover {
    border-color: var(--yzr-line);
    box-shadow: var(--yz-shadow-md, 0 10px 30px -12px rgba(0, 0, 0, .5));
}

/* ---------- ШАПКА: кто рекомендует ---------- */
.yzr-top { display: flex; align-items: center; gap: 11px; }
.yzr-ava {
    width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: 13px;
    background: var(--yz-grad, linear-gradient(135deg, #e2885f, #b3552e));
    background-size: cover; background-position: center;
    display: grid; place-items: center;
    color: #fff; font-size: 15px; font-weight: 800;
    text-decoration: none;
    box-shadow: 0 0 0 1px var(--yzr-border) inset;
}
.yzr-who { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.yzr-nm {
    font-weight: 750; font-size: 14.5px; line-height: 1.15;
    color: var(--yzr-text) !important; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yzr-nm:hover { color: var(--yzr-accent) !important; }

/* ---------- ПОДПИСЬ «Рекомендуем» ---------- */
.yzr-label {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 700; line-height: 1;
    letter-spacing: .02em;
    color: var(--yzr-accent);
    white-space: nowrap;
}
.yzr-label svg { width: 11px; height: 11px; flex: 0 0 11px; }
.yzr-label[data-b="accent"] {
    padding: 4px 9px; border-radius: var(--yz-r-pill, 999px);
    background: var(--yzr-soft); color: var(--yzr-accent);
}
.yzr-label[data-b="none"] { display: none; }

/* ---------- ТЕЛО ---------- */
/* Заголовок и текст рисуются то тегом, то <span> внутри ссылки — display
   задаём явно, иначе в компактных форматах строка схлопывается в одну. */
.yzr-h {
    display: block;
    font-family: var(--yz-font-display, var(--yz-font-ui, 'Inter', sans-serif));
    font-weight: 700; font-size: 17px; line-height: 1.28;
    letter-spacing: -.01em;
    margin: 0 0 6px;
}
.yzr-x {
    display: block;
    font-size: 14.5px; line-height: 1.55;
    color: var(--yzr-dim);
    margin: 0;
    overflow-wrap: anywhere;
}
/* Кликабельная зона крупной карточки: заголовок, текст и медиа целиком. */
.yzr-lnk { display: block; color: inherit; text-decoration: none; }

/* ---------- МЕДИА ---------- */
.yzr-media {
    display: block; width: 100%;
    border-radius: var(--yz-r-md, 16px);
    max-height: 420px; object-fit: cover;
    background: rgba(0, 0, 0, .25);
    aspect-ratio: 16 / 9;
}

/* ---------- КНОПКА ---------- */
.yzr-go {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px;
    border-radius: var(--yz-r-pill, 999px);
    font-size: 14px; font-weight: 700; line-height: 1;
    text-decoration: none;
    background: var(--yz-grad, linear-gradient(135deg, #e2885f, #b3552e));
    color: #fff !important;
    border: none; cursor: pointer;
    transition: transform .3s var(--yzr-spring), filter .25s var(--yzr-ease);
}
.yzr-go:hover { filter: brightness(1.08); transform: translateY(-1px); }
.yzr-go:active { transform: scale(.97); }
.yzr-go svg { width: 14px; height: 14px; }
.yzr-go--ghost {
    background: transparent; color: var(--yzr-accent) !important;
    border: 1px solid var(--yzr-line); padding: 9px 16px;
}
.yzr-go--ghost:hover { background: var(--yzr-soft); filter: none; }

/* ---------- КРЕСТИК «скрыть» ---------- */
.yzr-x-btn {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    border: none; cursor: pointer;
    background: var(--yz-glass, rgba(15, 14, 13, .78));
    color: var(--yzr-dim);
    opacity: 0; transform: scale(.8);
    transition: opacity .25s var(--yzr-ease), transform .25s var(--yzr-spring), color .2s;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.yzr:hover .yzr-x-btn, .yzr-x-btn:focus-visible { opacity: 1; transform: scale(1); }
.yzr-x-btn:hover { color: var(--yzr-text); }
@media (hover: none) { .yzr-x-btn { opacity: .55; transform: scale(1); } }

/* ---------- МАРКИРОВКА платных размещений ---------- */
/* Своих рекомендаций это не касается: сервер отдаёт disc пустым и блока нет. */
.yzr-disc { margin-top: 10px; font-size: 10.5px; line-height: 1.4; color: var(--yz-muted, #8d8878); }
/* В компактных форматах маркировка лежит вне ссылки — выравниваем по карточке. */
.yzr > .yzr-disc { margin: -4px 0 0; padding: 0 15px 12px; }
.yzr[data-f="row"] > .yzr-disc { padding: 0 12px 8px 76px; }
.yzr-disc--inline { opacity: .75; }
.yzr-disc--chip { display: flex; }
.yzr-disc--chip > button {
    all: unset; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 600;
    color: var(--yz-muted, #8d8878);
    padding: 3px 8px; border-radius: var(--yz-r-pill, 999px);
    border: 1px solid var(--yzr-border);
    transition: color .2s, border-color .2s;
}
.yzr-disc--chip > button:hover { color: var(--yzr-text); border-color: var(--yzr-line); }
.yzr-disc--chip.is-open > button { display: none; }
.yzr-disc--chip > span { display: none; }
.yzr-disc--chip.is-open > span { display: block; opacity: .75; }

/* Карточка часто стоит прямо в ленте, рядом с обычными постами, а не в слоте
   с собственным отступом — иначе соседний пост прилипал бы к ней вплотную.
   Внутри .yzr-wrap отступы схлопнутся в один: у обёртки нет ни рамки, ни
   паддинга, так что двойного зазора не будет. */
.yzr[data-f="full"], .yzr[data-f="compact"] { margin-bottom: 14px; }

/* ============================ ФОРМАТ: FULL ============================== */
.yzr[data-f="full"] .yzr-card { padding: 16px 16px 18px; }
.yzr[data-f="full"] .yzr-top { margin-bottom: 13px; }
.yzr[data-f="full"] .yzr-media { margin: 13px 0 0; }
.yzr[data-f="full"] .yzr-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.yzr[data-f="full"] .yzr-go { flex: 1; }

/* ============================ ФОРМАТ: COMPACT =========================== */
.yzr[data-f="compact"] .yzr-card {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 15px 13px 13px;
    border-radius: var(--yz-r-md, 16px);
}
.yzr[data-f="compact"] .yzr-thumb {
    width: 74px; height: 74px; flex: 0 0 74px;
    border-radius: 15px;
    background: var(--yz-grad, linear-gradient(135deg, #e2885f, #b3552e));
    background-size: cover; background-position: center;
    display: grid; place-items: center; color: #fff; font-size: 20px;
}
.yzr[data-f="compact"] .yzr-body { min-width: 0; flex: 1; }
.yzr[data-f="compact"] .yzr-h { font-size: 15px; margin-bottom: 3px; }
.yzr[data-f="compact"] .yzr-x {
    font-size: 13px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yzr[data-f="compact"] .yzr-label { margin-bottom: 5px; }
.yzr[data-f="compact"] .yzr-arrow {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--yzr-soft); color: var(--yzr-accent);
    transition: transform .3s var(--yzr-spring);
}
.yzr[data-f="compact"] .yzr-card:hover .yzr-arrow { transform: translateX(3px); }

/* ============================ ФОРМАТ: TILE ============================== */
.yzr-strip { margin: 18px 0; }
.yzr-strip-hd {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 12px; padding: 0 2px;
}
.yzr-strip-hd b {
    font-family: var(--yz-font-display, inherit);
    font-size: 15px; font-weight: 700; letter-spacing: -.01em;
}
.yzr-strip-hd .ln { flex: 1; height: 1px; background: var(--yz-border, rgba(250, 249, 245, .08)); }
.yzr-strip-row {
    display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 2px 2px 8px;
    -ms-overflow-style: none; scrollbar-width: none;
}
.yzr-strip-row::-webkit-scrollbar { display: none; }

.yzr[data-f="tile"] { flex: 0 0 188px; width: 188px; scroll-snap-align: start; }
.yzr[data-f="tile"] .yzr-card { padding: 0; height: 100%; display: flex; flex-direction: column; }
.yzr[data-f="tile"] .yzr-cover {
    width: 100%; aspect-ratio: 4 / 3;
    background: var(--yz-grad, linear-gradient(135deg, #e2885f, #b3552e));
    background-size: cover; background-position: center;
    display: grid; place-items: center; color: #fff; font-size: 22px;
}
.yzr[data-f="tile"] .yzr-body { padding: 11px 12px 13px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.yzr[data-f="tile"] .yzr-h {
    font-size: 14px; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yzr[data-f="tile"] .yzr-x {
    font-size: 12px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yzr[data-f="tile"] .yzr-label { font-size: 9.5px; margin-top: auto; padding-top: 6px; }
.yzr[data-f="tile"] .yzr-card:hover { transform: translateY(-3px); }

/* ============================ ФОРМАТ: ROW =============================== */
/* Строка списка: живёт внутри чужих контейнеров (мессенджер), поэтому
   ведёт себя как обычная ячейка и не тащит свой фон. */
.yzr[data-f="row"] { display: block; }
.yzr[data-f="row"] .yzr-card {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: transparent; border: none; border-radius: var(--yz-r-md, 16px);
}
.yzr[data-f="row"] .yzr-card:hover { background: var(--yzr-soft); box-shadow: none; }
.yzr[data-f="row"] .yzr-ava { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 17px; }
.yzr[data-f="row"] .yzr-body { min-width: 0; flex: 1; }
.yzr[data-f="row"] .yzr-line1 { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.yzr[data-f="row"] .yzr-nm { font-size: 15px; font-weight: 700; }
.yzr[data-f="row"] .yzr-x {
    font-size: 13px; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yzr[data-f="row"] .yzr-label { font-size: 9.5px; }
.yzr[data-f="row"] .yzr-arrow { color: var(--yzr-accent); opacity: .6; flex: 0 0 auto; }
.yzr[data-f="row"] .yzr-x-btn { top: 50%; margin-top: -14px; right: 6px; }

/* ============================ ФОРМАТ: INLINE ============================ */
/* Читалка и «между главами»: карточка не должна выбивать из чтения. */
.yzr[data-f="inline"] .yzr-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--yzr-soft);
    border: 1px solid transparent;
    border-radius: var(--yz-r-md, 16px);
}
.yzr[data-f="inline"] .yzr-card:hover { border-color: var(--yzr-line); box-shadow: none; }
.yzr[data-f="inline"] .yzr-spark {
    flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--yz-grad, linear-gradient(135deg, #e2885f, #b3552e));
    color: #fff;
}
.yzr[data-f="inline"] .yzr-body { min-width: 0; flex: 1; }
.yzr[data-f="inline"] .yzr-label { font-size: 9.5px; margin-bottom: 2px; }
.yzr[data-f="inline"] .yzr-h {
    font-size: 14px; margin: 0 0 1px; font-family: var(--yz-font-ui, inherit); font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yzr[data-f="inline"] .yzr-x {
    font-size: 12.5px; line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yzr[data-f="inline"] .yzr-go { padding: 8px 14px; font-size: 13px; flex: 0 0 auto; }

/* ====================== КАРТОЧКА ВНУТРИ ЛЕНТЫ =========================== */
/* Лента нарисована «журнальным разворотом»: посты без рамок, во всю ширину
   колонки, разделённые одной линией. Карточка-коробка среди них не просто
   выглядит вставкой — она встаёт вплотную к нижней границе предыдущего поста,
   и та читается как полоса, приклеенная сверху. Поэтому в ленте карточка
   берёт геометрию поста: те же отступы, тот же разделитель, никакой рамки.
   Класс yf-post дописывает feed-engine через YzRecs.html(u, fmt, {cls}). */
.yzr.yf-post[data-f] { margin: 0; }
.yzr.yf-post[data-f] > .yzr-card {
    background: none; border: none; border-radius: 0;
    overflow: visible; padding: 0;
    /* Тень на прозрачном блоке во всю ширину рисует светлый прямоугольник —
       в «Cloud Dancer» он читался как лишняя плашка вокруг рекомендации. */
    box-shadow: none;
}
.yzr.yf-post[data-f] > .yzr-card:hover { box-shadow: none; }
.yzr.yf-post .yzr-media { max-height: 340px; margin-top: 14px; }
.yzr.yf-post .yzr-foot { margin-top: 16px; }
/* Кнопка во всю ширину в ленте кричит громче самого поста — оставляем по размеру текста. */
.yzr.yf-post .yzr-foot .yzr-go { flex: 0 0 auto; }
.yzr.yf-post > .yzr-x-btn { top: 18px; right: 10px; }

/* ============================ ПОЯВЛЕНИЕ ================================= */
.yzr-in { animation: yzr-rise .5s var(--yz-ease, cubic-bezier(.22, 1, .36, 1)) both; }
@keyframes yzr-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.yzr-out { animation: yzr-fade .28s ease forwards; }
@keyframes yzr-fade {
    to { opacity: 0; transform: scale(.97); max-height: 0; margin: 0; padding: 0; }
}

/* Скелет на время загрузки — чтобы блок не «прыгал» под пальцем. */
.yzr-skel {
    border-radius: var(--yz-r-md, 16px);
    background: linear-gradient(90deg,
        var(--yz-surface, #22211F) 0%,
        var(--yz-surface-2, #2E2C29) 45%,
        var(--yz-surface, #22211F) 90%);
    background-size: 220% 100%;
    animation: yzr-shine 1.3s linear infinite;
    min-height: 88px;
}
@keyframes yzr-shine { to { background-position: -220% 0; } }

/* ============================ АДАПТИВ =================================== */
@media (max-width: 560px) {
    .yzr[data-f="full"] .yzr-card { padding: 14px 14px 16px; border-radius: var(--yz-r-md, 16px); }
    .yzr[data-f="full"] .yzr-h { font-size: 16px; }
    .yzr[data-f="full"] .yzr-x { font-size: 14px; }
    .yzr[data-f="compact"] .yzr-thumb { width: 62px; height: 62px; flex-basis: 62px; border-radius: 13px; }
    .yzr[data-f="compact"] .yzr-arrow { display: none; }
    .yzr[data-f="tile"] { flex-basis: 162px; width: 162px; }
    .yzr[data-f="inline"] .yzr-card { flex-wrap: wrap; }
    .yzr[data-f="inline"] .yzr-go { width: 100%; margin-top: 4px; }
}

/* Светлая тема: мягкая подложка вместо прозрачности, иначе карточка теряется. */
html[data-yz-theme="cloud"] .yzr-card {
    box-shadow: var(--yz-shadow-sm, 0 2px 8px rgba(60, 50, 35, .08));
}
html[data-yz-theme="cloud"] .yzr[data-f="row"] .yzr-card { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
    .yzr, .yzr *, .yzr-in, .yzr-skel { animation: none !important; transition: none !important; }
}