/* card.css — ЕДИНЫЙ компонент карточки поста. Один источник правды для ленты, профиля и хабов.
   Разметку генерит build-cards.js (renderCard). Токены берутся из страничного CSS (feed.css / author-redesign.css).
   Слот обложки .cover: фото автора ИЛИ наша генерация; нет обложки → чистая карточка (метрика строкой). */

.card{ break-inside:avoid; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
       border-radius:14px; padding:15px 16px 13px; text-decoration:none; transition:border-color .16s var(--ease); }
.card:hover{ border-color:var(--line-2); }
.card[hidden]{ display:none; }

/* обложка (опционально): 16:9, во всю ширину карточки */
.card .cover{ order:0; width:calc(100% + 32px); margin:-15px -16px 13px; aspect-ratio:16/9; object-fit:cover;
              border-radius:13px 13px 0 0; border-bottom:1px solid var(--line); background:var(--surface-2); }

.card .byline{ order:1; display:flex; align-items:center; gap:9px; margin-bottom:11px; min-width:0; }
.card .byline .av{ width:27px; height:27px; border-radius:50%; object-fit:cover; background:var(--surface-2);
                   border:1px solid var(--line); flex:0 0 auto; }
.card .byline .avm{ width:27px; height:27px; border-radius:50%; background:var(--surface-2); color:var(--ink-2);
                    display:grid; place-items:center; font-size:10px; font-weight:600; border:1px solid var(--line); flex:0 0 auto; }
.card .byline .who{ font-size:13.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:0 1 auto; min-width:0; }

/* бейдж формата поста (кейс/гайд/видео/заметка/лонгрид) */
.card .fmt{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
            letter-spacing:.02em; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:2px 7px 2px 6px; flex:0 0 auto; }
.card .fmt svg{ width:12px; height:12px; flex:0 0 auto; }

.card .ctitle{ order:2; font-size:15.5px; font-weight:600; line-height:1.28; letter-spacing:-0.018em; color:var(--ink); }
.card .clede{ order:3; font-size:13px; color:var(--muted); line-height:1.45; margin-top:7px;
              display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }

.card .metric{ order:4; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:12px; padding-top:11px;
               border-top:1px solid var(--line); }
.card .metric .mv{ font-size:19px; font-weight:650; letter-spacing:-0.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.card .metric .mv .up{ color:var(--ink-2); }
.card .metric .ml{ font-size:12px; color:var(--muted); }

.card .foot{ order:5; display:flex; align-items:center; gap:8px; margin-top:12px; color:var(--muted); font-size:12.5px; }
.card .foot .tag{ color:var(--muted); } .card .foot .dot{ color:var(--faint); }