/* 420n.cz — виджет «последние посты из соцсетей».
   Правая колонка возле карточек: три поста в столбик, карусель листает
   группами по 3 (автолистание 5с). Карточки — в стиле карточек сайта
   (фото 16:9, заголовок как у ссылок, описание). Вписан в тему через
   CSS-переменные сайта (--surface/--border/--strong/--brand/…). */

/* --- размещение: контент + правая колонка (правила здесь, чтобы грузились
       свежими вместе с виджетом и не зависели от кэша styles.css) --- */
.main-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.main-layout > #main { min-width: 0; }
.lp-rail { position: sticky; top: 16px; }
@media (max-width: 900px) {
  .main-layout { grid-template-columns: 1fr; }
  /* На мобильном сайдбар прячем — посты виджета вплетаются в сетку карточек
     каталога (см. widget.js::mobileInject). Запечённое остаётся в HTML для SEO. */
  .lp-rail { display: none; }
}

/* Посты виджета как карточки каталога (мобильная вставка) — вид .card, акцент
   по площадке через --tc/--tc-soft (задаётся инлайн). Чип для постов без фото: */
.card--wpost .wpost-chip {
  font: 700 15px var(--sans, system-ui, -apple-system, sans-serif);
  color: var(--tc, var(--brand, #F5811E)); text-transform: uppercase; letter-spacing: .04em;
}
/* Плашка поверх фото: «Наши соцсети» / «Блог наших сайтов» */
.card--wpost .thumb, .card--wpost .chip { position: relative; }
.card--wpost .wpost-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(0, 0, 0, .62); color: #fff;
  font: 700 11px var(--sans, system-ui, -apple-system, sans-serif); letter-spacing: .02em;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}

#lp-latest { font-family: inherit; }
#lp-latest[hidden] { display: none; }

.sw-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted, #6E604C); margin: 2px 0 14px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.sw-title::before {
  content: ""; width: 4px; height: 16px; border-radius: 2px;
  background: var(--brand, #F5811E); display: inline-block;
}

.sw-viewport { overflow: hidden; }
.sw-track { display: flex; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
/* страница = три поста в столбик */
.sw-page { flex: 0 0 100%; display: flex; flex-direction: column; gap: 16px; }
/* запечённые prerender'ом карточки (SEO/без-JS) — столбиком, до подмены каруселью */
.sw-static { display: flex; flex-direction: column; gap: 16px; }

/* карточка поста — как карточки сайта (.card) */
.sw-card {
  --sw-ac: var(--brand, #F5811E);
  display: flex; flex-direction: column; color: inherit; text-decoration: none;
  background: var(--surface, #fff); border: 1px solid var(--border, #E7DBC9);
  border-radius: 18px; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sw-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-line, #F6C9A0);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.sw-thumb {
  aspect-ratio: 16 / 9; background: var(--sunken, #F5EEE3);
  border-bottom: 3px solid var(--sw-ac); overflow: hidden;
}
.sw-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

.sw-body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 7px; }
.sw-src {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--sw-ac); text-transform: none;
}
.sw-h {
  margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.25;
  color: var(--strong, #241B12); transition: color .18s ease;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sw-card:hover .sw-h { color: var(--brand, #F5811E); }
.sw-d {
  margin: 0; font-size: 13px; line-height: 1.45; color: var(--text, #3C3325); opacity: .9;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* акцент по площадке (полоска под фото + подпись источника) */
.sw-p-tg   { --sw-ac: #2a7bb8; }
.sw-p-ig   { --sw-ac: #c13584; }
.sw-p-x    { --sw-ac: #111111; }
.sw-p-fb   { --sw-ac: #1877f2; }
.sw-p-th   { --sw-ac: #444444; }
.sw-p-site { --sw-ac: var(--brand, #F5811E); }

.sw-dots { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.sw-dots button {
  height: 6px; width: 6px; border: 0; border-radius: 999px; background: var(--border, #E7DBC9);
  cursor: pointer; padding: 0; transition: width .3s ease, background .2s ease;
}
.sw-dots button.sw-active { width: 20px; background: var(--brand, #F5811E); }