/* Розділ «Опубліковане» — пости по мережах зі статистикою й коментарями.

   🛑 ГОЛОВНА ПАСТКА ЦЬОГО ФАЙЛУ, не повторити: .pf-card-main — це грід із
   колонкою під мініатюру. Мініатюра рендериться ТІЛЬКИ коли в поста є медіа,
   а грід про це не знав — тож у текстового поста .pf-body ставав першим
   дочірнім елементом і осідав у 128-піксельну колонку картинки. Виглядало це
   як зламана сторінка: підпис у стовпчик по три слова, кожен чип статистики з
   нового рядка, і дві третини картки порожні. Тому клас .no-thumb на
   .pf-card-main обов'язковий, коли медіа немає (див. posts.js::cardHtml). */

.pf-tabs{ display: flex; gap: var(--sp-8); flex-wrap: wrap; margin: 0 0 16px; }
.pf-tab{ display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border-soft); background: var(--panel-2); color: var(--text-dim);
  font: 700 var(--fs-12)/1 var(--sans); cursor: pointer; transition: color .12s, border-color .12s; }
.pf-tab:hover{ color: var(--text); }
.pf-tab.on{ border-color: var(--accent); color: var(--text); background: var(--panel); }
.pf-tab .n{ font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }
.pf-tab .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.pf-status{ margin-bottom: 12px; font: 600 var(--fs-12)/1.4 var(--sans); color: var(--text-dim); }
.pf-list{ display: flex; flex-direction: column; gap: var(--sp-16); }

.pf-card{ background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
  overflow: hidden; }

/* Мініатюра 168px + тіло. Друга колонка — minmax(0,1fr), інакше довгий підпис
   без пробілів розпирає грід ширше за картку. */
.pf-card-main{ display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--sp-16); padding: 16px; }
.pf-card-main.no-thumb{ grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px){ .pf-card-main{ grid-template-columns: 1fr; } }

.pf-thumb{ min-width: 0; position: relative; }
.pf-thumb img{ display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--ctl-radius-sm); border: 1px solid var(--border-soft); background: #000;
  transition: border-color .14s var(--ease); }
.pf-thumb img:hover{ border-color: var(--accent); }
/* Значок «play» на стоп-кадрі: без нього відео й фото в стрічці не відрізнити,
   і незрозуміло, що по кліку буде ролик. */
.pf-play{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; color: #fff; opacity: .9; }
.pf-play .svg-ic{ width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.pf-count{ position: absolute; right: 7px; bottom: 7px; padding: 2px 7px; border-radius: 999px;
  background: rgba(0,0,0,.6); color: #fff; font: 700 var(--fs-11)/1.5 var(--sans); pointer-events: none; }

.pf-body{ min-width: 0; display: flex; flex-direction: column; gap: var(--sp-10); }

/* Шапка картки: мережа й дата ліворуч, посилання притиснуте до правого краю —
   саме воно й заповнює ту порожнечу праворуч, на яку не було чого покласти. */
.pf-head{ display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap;
  font: 600 var(--fs-11)/1 var(--sans); color: var(--text-dim); }
.pf-net{ display: inline-flex; align-items: center; gap: var(--sp-6); color: var(--text);
  font: 700 var(--fs-13)/1 var(--sans); white-space: nowrap; }
.pf-net .net-ico, .pf-net .svg-ic{ flex: 0 0 auto; }
.pf-sep{ opacity: .45; }
.pf-date{ white-space: nowrap; }
.pf-link{ margin-left: auto; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  color: var(--accent); text-decoration: none; font-weight: 700; }
.pf-link:hover{ text-decoration: underline; }
.pf-link.muted{ color: var(--text-dim); font-weight: 600; }

/* Підпис: 4 рядки за замовчуванням. Раніше стояв жорсткий max-height, який
   різав текст просто посеред рядка — читалося як помилка рендеру. */
.pf-caption{ font: 500 var(--fs-13)/1.6 var(--sans); color: var(--text); white-space: pre-wrap;
  overflow-wrap: anywhere; max-width: 74ch;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.pf-caption.open{ display: block; -webkit-line-clamp: unset; }
.pf-more{ align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent); font: 700 var(--fs-12)/1 var(--sans); }
.pf-more:hover{ text-decoration: underline; }

.pf-stats{ display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: 2px; }
.pf-stat{ display: inline-flex; flex-direction: column; gap: 3px; padding: 7px 12px; border-radius: var(--ctl-radius-sm);
  background: var(--panel-2); border: 1px solid var(--border-soft); min-width: 78px; }
.pf-stat b{ font: 700 var(--fs-15)/1 var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.pf-stat span{ font: 600 var(--fs-10)/1 var(--sans); color: var(--text-dim);letter-spacing: .04em; }
.pf-stat.er{ border-color: var(--accent); }
.pf-nometrics{ font: 600 var(--fs-12)/1.4 var(--sans); color: var(--text-dim); }

.pf-comments{ border-top: 1px solid var(--border-soft); padding: 14px 16px; background: var(--panel-2); }
.pf-cm-head{ display: flex; align-items: center; gap: var(--sp-8); font: 700 var(--fs-12)/1 var(--sans); color: var(--text);
letter-spacing: .05em; margin-bottom: 12px; }
.pf-cm-head .n{ font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pf-new{ padding: 2px 8px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent);
  font: 700 var(--fs-10)/1.5 var(--sans); letter-spacing: 0; text-transform: none; }
.pf-cm-empty{ font: 600 var(--fs-12)/1.4 var(--sans); color: var(--text-dim); }
.pf-cm-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-10); }

/* Непрочитане позначаємо смужкою зліва, а не рамкою навколо: рамка робила
   кожен новий коментар схожим на поле вводу. */
.pf-cm{ padding: 11px 14px; border-radius: var(--ctl-radius-sm); background: var(--panel);
  border: 1px solid var(--border-soft); border-left: 3px solid transparent; }
.pf-cm.unread{ border-left-color: var(--accent); }
.pf-cm-top{ display: flex; align-items: baseline; gap: var(--sp-10); margin-bottom: 5px; }
.pf-cm-top b{ font: 700 var(--fs-12)/1.2 var(--sans); color: var(--text); overflow-wrap: anywhere; }
.pf-cm-top time{ font: 600 var(--fs-10)/1 var(--sans); color: var(--text-dim); white-space: nowrap; }
.pf-cm-text{ font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text); overflow-wrap: anywhere; }
/* Довга гілка отримує власну прокрутку замість того, щоб розсовувати картку
   на кілька екранів і виштовхувати решту постів геть зі сторінки. */
.pf-cm-list.scroll{ max-height: 460px; overflow-y: auto; padding-right: 4px; }

/* Уже надіслана відповідь. Зелена галка + текст — видно, що на коментар
   відповіли, і що саме відповіли, без переходу в LinkedIn. */
.pf-cm-reply{ margin-top: 9px; padding: 8px 10px; border-radius: var(--ctl-radius-sm);
  background: var(--panel-2); border-left: 2px solid var(--ok, var(--accent));
  display: flex; align-items: flex-start; gap: 7px;
  font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text-dim); }
.pf-cm-reply b{ color: var(--text); font-weight: 700; }
.pf-cm-reply .svg-ic{ flex: 0 0 auto; margin-top: 1px; color: var(--ok, var(--accent)); }

.pf-cm-actions{ margin-top: 10px; }
/* Спершу лише кнопка-посилання; форма розкривається по кліку. Двадцять полів
   вводу під двадцятьма коментарями — це стіна, а не інбокс. */
.pf-cm-open{ padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--text-dim); font: 700 var(--fs-11)/1 var(--sans); }
.pf-cm-open:hover{ color: var(--accent); text-decoration: underline; }
.pf-cm-form{ display: flex; gap: var(--sp-8); }
.pf-cm-form[hidden]{ display: none; }
.pf-cm-input{ flex: 1 1 auto; min-width: 0; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-soft);
  background: var(--panel-2); color: var(--text); font: 500 var(--fs-12)/1.2 var(--sans); }
.pf-cm-input:focus{ outline: none; border-color: var(--accent); }

/* Кнопка «Показати попередні» стоїть НАД списком — там, звідки читач починає
   рух до старіших коментарів. */
.pf-cm-more{ display: block; margin: 0 0 10px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent); font: 700 var(--fs-12)/1 var(--sans); }
.pf-cm-more:hover{ text-decoration: underline; }

/* ── порядок і «найкраще за тиждень» ─────────────────────────────────────
   Той самий список, але два різні питання: «що вийшло останнім» і «що
   спрацювало». Друге в стрічці за датою не читається взагалі. */
.pf-tabs-sp{ flex: 1 1 auto; }
/* Доріжка — заглибина, як і в .ui-seg: на --fill-1 поверхні --fill-1
   доріжка не існує. */
.pf-sort{ display: inline-flex; gap: var(--sp-2); padding: 3px; border-radius: 999px;
  background: var(--well); align-self: center; }
.pf-sort-b{ border: 0; background: transparent; cursor: pointer; border-radius: 999px;
  padding: 7px 13px; color: var(--text-dim); font: 600 var(--fs-12)/1 var(--sans); }
.pf-sort-b:hover{ color: var(--text); }
.pf-sort-b.on{ background: var(--accent-wash-3); color: var(--accent-hi); }

.pf-best{ display: flex; align-items: center; gap: var(--sp-12); width: 100%; margin: 0 0 14px;
  padding: 12px 16px; border-radius: var(--radius-sm); cursor: pointer; text-align: left;
  border: 1px solid var(--accent-edge);
  background: var(--accent-wash-1); color: var(--text); }
.pf-best:hover{ border-color: var(--accent); }
.pf-best-lbl{ display: inline-flex; align-items: center; gap: var(--sp-6); white-space: nowrap;
  color: var(--accent-hi); font: 700 var(--fs-11)/1 var(--sans);  letter-spacing: .04em; }
.pf-best-txt{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--text-dim); font: 500 var(--fs-13)/1.3 var(--sans); }
.pf-best-n{ white-space: nowrap; color: var(--text-dim); font: 500 var(--fs-12)/1 var(--sans); }
.pf-best-n b{ color: var(--text); font-weight: 700; }

/* Підсвітка поста, на який прийшли з Аналітики або з рядка «найкраще».
   Без неї перехід виглядає як «сторінка просто смикнулась». */
.pf-card-focus{ box-shadow: 0 0 0 2px var(--accent); }
@media (prefers-reduced-motion: no-preference){
  .pf-card-focus{ transition: box-shadow .35s ease; }
}

@media (max-width: 640px){
  .pf-tabs-sp{ display: none; }
  .pf-sort{ width: 100%; justify-content: center; }
  .pf-best{ flex-wrap: wrap; }
  .pf-best-txt{ order: 3; flex-basis: 100%; white-space: normal; }
}