/* group.css — страница группы /g/{slug}. Префикс .pp-gr-*. Поверх токенов + pop.css.
   Широкая раскладка «как маркетплейс» (была узкая колонка-читалка 680px):
   full-width баннер-шапка → 2 колонки (ЛЕНТА ~684px + САЙДБАР 340px). Лента держит
   читаемую ширину, сайдбар заполняет остальное → страница ощущается широкой, не узкой.
   Все значения — из tokens.css (var(--*)), без хардкод-hex. */

/* Широкий контейнер вместо .pp-col-read (680px). Баннер и грид — на всю ширину. */
.pp-gr{ max-width:var(--page-max); margin:0 auto; padding:20px 24px 64px; }
@media(max-width:767px){ .pp-gr{ padding:12px 12px 48px; } }

/* ── Шапка-баннер группы (cover ИЛИ бренд-градиент, never-empty) ─────────────── */
.pp-gr-band{
  position:relative; overflow:hidden;
  height:182px; border-radius:var(--rad-xl);
  /* световой блик поверх бренд-градиента → глубина без шума (перекрыт cover-фото, если есть) */
  background:
    radial-gradient(120% 150% at 12% -25%, rgba(255,255,255,.28), transparent 55%),
    radial-gradient(90% 130% at 98% 125%, rgba(46,107,255,.32), transparent 60%),
    var(--grad-hero);
  box-shadow:0 8px 24px -12px rgba(124,92,255,.4);
}
.pp-gr-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* мягкий скрим снизу — читаемость аватара/текста на любом фото */
.pp-gr-band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(20,20,20,.28) 100%);
  pointer-events:none;
}
@media(max-width:767px){ .pp-gr-band{ height:128px; border-radius:var(--rad-lg); } }

/* ── Головной блок под баннером: аватар (наплыв) НАД инфо + действия справа ────
   Раскладка: слева стопка [аватар → имя/мета] на ЕДИНОЙ левой линии с лентой,
   справа действия. z-index:2 обязателен — .pp-gr-band = position:relative и без
   этого перекрывал бы (painted-over) наплывающий аватар (bugfix: аватар «обрезан»). */
.pp-gr-head{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:start; gap:20px; margin:-52px 0 28px;   /* -52 = аватар наплывает на баннер */
}
.pp-gr-headL{ min-width:0; }   /* аватар + инфо в стопке → одна левая линия с лентой (контейнер) */
@media(max-width:767px){
  .pp-gr-head{ grid-template-columns:1fr; margin:-44px 0 20px; gap:12px; }
}

.pp-gr-ava{
  width:104px; height:104px; border-radius:26px; overflow:hidden;
  background:var(--card); box-shadow:var(--shadow); border:4px solid var(--card);
  margin-bottom:14px;
}
.pp-gr-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Плейсхолдер = брендовый логомарк (белый заяц) на фирменном градиенте — не эмодзи, не серый квадрат. */
.pp-gr-ava--ph{ display:grid; place-items:center; background:var(--grad-hero); }
.pp-gr-ava--ph svg{ width:66px; height:66px; }
@media(max-width:767px){ .pp-gr-ava{ width:76px; height:76px; border-radius:20px; margin-bottom:10px; } .pp-gr-ava--ph svg{ width:48px; height:48px; } }

.pp-gr-info{ min-width:0; }
/* Контекст = компактный статус-бейдж с точкой (цвет = статус, §4): открытая→emerald, закрытая→amber. */
.pp-gr-ctx{
  display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 10px;
  border-radius:var(--pill); background:var(--bg2);
  font:700 10.5px var(--font); letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink2); margin:0 0 10px;
}
.pp-gr-ctx-dot{ width:6px; height:6px; border-radius:50%; background:var(--emerald-500); flex:none; }
.pp-gr-ctx--closed .pp-gr-ctx-dot{ background:var(--amber-500); }
.pp-gr-name{
  font:800 clamp(24px,3.4vw,34px)/1.05 var(--font-display);
  letter-spacing:-.02em; color:var(--ink); margin:0 0 11px;
  /* имя группы = пользовательский текст: длинный неразрывный токен обязан
     переноситься, а не рвать раскладку в горизонт-скролл на мобильном
     (anywhere ужимает min-content → grid-трек не раздувается). Для обычных
     названий с пробелами перенос идёт по словам как раньше → десктоп не меняется. */
  overflow-wrap:anywhere;
}
.pp-gr-meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
/* Бренд-чипы меты: иконка + значение(bold, tabular) + подпись(muted). Ровный ряд, ~26px. */
.pp-gr-meta .pp-chip{
  display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px;
  border:1px solid var(--line); border-radius:var(--pill); background:var(--card);
  font:600 12.5px var(--font); color:var(--ink2);
}
.pp-gr-meta .pp-chip .pp-ic{ color:var(--ink2); flex:none; }
.pp-gr-meta .pp-chip b{ color:var(--ink); font-weight:800; font-variant-numeric:tabular-nums; }
.pp-gr-meta .pp-chip--cat .pp-ic{ color:var(--violet); }
/* Тег-чип: тихий бренд-тинт (акцент, но тише мета-фактов) */
.pp-gr-meta .pp-chip--tag{
  background:var(--violet-50); border-color:var(--violet-100); color:var(--violet-700); font-weight:700;
}
.pp-gr-owner{
  display:flex; flex-wrap:wrap; align-items:center; gap:5px 6px;
  margin:12px 0 0; font:600 13.5px var(--font); color:var(--ink2); overflow-wrap:anywhere;
}
.pp-gr-owner .pp-ic{ color:var(--amber-500); flex:none; }
.pp-gr-owner-lbl{ color:var(--ink2); }
.pp-gr-owner a{ color:var(--violet); font-weight:700; text-decoration:none; }
.pp-gr-owner a:hover{ text-decoration:underline; }

/* действия (join/manage/share) — сгруппированный ряд справа, вровень с именем.
   Один primary (join) держит вес; вторичное (Управление/Выйти/share) — тише, auto-width,
   разведены 8pt-gap (§14.A/D). Плотность D0: кнопка 40px desktop / 44px тач, НЕ 48. */
.pp-gr-actions{
  padding-top:60px; display:flex; flex-wrap:wrap; gap:8px;   /* 60 = ниже кромки баннера, вровень с именем */
  align-items:center; justify-content:flex-end; max-width:340px;
}
.pp-gr-actions:empty{ display:none; }
.pp-gr-actions .pp-btn{ width:auto; white-space:nowrap; min-height:40px; padding:0 18px; font-size:14px; }
/* share рядом с join — компактный icon-only квадрат, не растянутая полоса */
.pp-gr-actions [data-act="gshare"]{ width:40px; padding:0; flex:none; }
.pp-gr-actions .pp-chip{ height:32px; padding:0 12px; }
@media(max-width:767px){
  .pp-gr-actions{ padding-top:0; margin-top:8px; max-width:none; justify-content:stretch; }
  .pp-gr-actions .pp-btn{ min-height:44px; flex:1 1 auto; }
  .pp-gr-actions [data-act="gshare"]{ flex:0 0 44px; width:44px; }
  .pp-gr-actions .pp-chip{ flex:1 1 auto; justify-content:center; }
}

/* полноширинный verify-нудж между шапкой и телом */
.pp-gr-verify{ margin:-8px 0 20px; }
.pp-gr-verify:empty{ display:none; }

/* ── 2-колоночное тело ──────────────────────────────────────────────────────── */
.pp-gr-body{
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start;
}
@media(max-width:959px){ .pp-gr-body{ grid-template-columns:1fr; gap:18px; } }

.pp-gr-main{ min-width:0; display:flex; flex-direction:column; gap:16px; }
.pp-gr-side{ min-width:0; display:flex; flex-direction:column; gap:16px; }
/* сайдбар «прилипает» на десктопе — лента длиннее, контекст остаётся на виду */
@media(min-width:960px){ .pp-gr-side{ position:sticky; top:16px; } }

/* ── Панель ленты: заголовок + счётчик записей ──────────────────────────────── */
.pp-gr-feedhead{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 12px; margin:2px 2px 0; }
.pp-gr-feedhead h2{ font:800 20px var(--font-display); color:var(--ink); margin:0; letter-spacing:-.01em; }
.pp-gr-feedcount{ font:600 13px var(--font); color:var(--ink2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pp-gr-feedcount:empty{ display:none; }

/* ── Композер: свёрнутый триггер → полная форма (progressive disclosure) ─────── */
.pp-gr-trigger{
  display:flex; align-items:center; gap:12px; width:100%;
  background:var(--card); border:1px solid var(--line2); border-radius:var(--pill);
  padding:11px 16px; cursor:text; text-align:left; min-height:48px;
  font:500 15px var(--font); color:var(--ink2);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.pp-gr-trigger:hover{ border-color:var(--violet); }
.pp-gr-trigger:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.pp-gr-trigger-ico{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--grad-hero);
  display:grid; place-items:center; color:#fff; font:800 14px var(--font); text-transform:uppercase;
}

/* ── «Показать ещё» (курсорная пагинация) ───────────────────────────────────── */
.pp-gr-more{ display:flex; justify-content:center; margin-top:4px; }
.pp-gr-more[hidden]{ display:none !important; }
.pp-gr-more .pp-btn{ width:auto; min-width:240px; min-height:46px; }

/* ── skeleton загрузки первой страницы (не спиннер на пустоте) ───────────────── */
.pp-gr-sk{ border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-bottom:12px; }
.pp-gr-sk-line{
  height:12px; border-radius:6px; margin-bottom:10px;
  background:linear-gradient(90deg,var(--bg2),var(--line2),var(--bg2));
  background-size:200% 100%; animation:ppGrSk 1.2s ease-in-out infinite;
}
.pp-gr-sk-line:last-child{ margin-bottom:0; }
@keyframes ppGrSk{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@media(prefers-reduced-motion:reduce){ .pp-gr-sk-line{ animation:none; } }

/* ── пустые/локк-состояния ленты ─────────────────────────────────────────────── */
.pp-gr-empty{
  text-align:center; padding:32px 18px; border:1px dashed var(--line2);
  border-radius:var(--r); background:var(--card);
}
/* Иконка пустого состояния = мягкий круглый бренд-бейдж с line-SVG (не сырой эмодзи, не голый глиф).
   Перекрывает pop.css (inline-flex/opacity/30px) и общий для SSR + JS-пустых → единый премиум-вид. */
.pp-gr-empty-ico{
  width:56px; height:56px; margin:0 auto; border-radius:50%; opacity:1;
  display:grid; place-items:center; background:var(--violet-50); color:var(--violet);
}
.pp-gr-empty-ico svg{ width:26px; height:26px; }
.pp-gr-empty-t{ margin:10px 0 4px; font:800 17px var(--font-display); color:var(--ink); }
.pp-gr-empty-d{ margin:0 auto 14px; max-width:340px; color:var(--ink2); font:400 14px/1.5 var(--font); }
.pp-gr-empty .pp-btn{ width:auto; min-width:200px; min-height:46px; margin:0 auto; }

/* ── Строка участника в сайдбаре (переиспользует .pp-comment из pop.css) ───────
   Имя/хэндл — пользовательский текст: длинный неразрывный токен обязан
   переноситься внутри своей колонки, а не толкать дату (·15 июл 2026, float:right)
   за край карточки на узком мобильном. Правило СКОУПлено под .pp-gr-side, чтобы
   не трогать общий комментарий-компонент. Обычные имена рендерятся как раньше. */
.pp-gr-side .pp-comment-head{ overflow-wrap:anywhere; }

/* ── «Пожаловаться на группу» — тихий tertiary внизу сайдбара (§14.A) ─────────── */
.pp-gr-report{
  align-self:flex-start; background:none; border:0; padding:8px 2px;
  color:var(--ink2); font:600 13px var(--font); cursor:pointer;
}
.pp-gr-report:hover{ color:var(--ink); text-decoration:underline; }

/* pp-feed-ssr (SEO-seed) внутри ленты — тот же читаемый вид, что и раньше;
   при гидрации JS заменяет содержимое [data-feed] на интерактивную ленту. */