/* === Фон только для блога === */
body.blog-page { background: none; }

#blog {
  position: relative;
  min-height: 100vh;
  padding: 24px 16px 48px;
  background: url("/img/blog-bg.jpg") no-repeat center center fixed;
  background-size: cover;
}

/* затемняющий слой поверх фоновой картинки */
#blog::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.25);
  pointer-events: none;
}
#blog > * { position: relative; z-index: 1; }

/* Заголовок страницы */
#blog .page-title {
  margin: 0 0 24px;
  font-size: 1.8rem;
  text-align: center;
}

/* Сетка карточек — компактнее на десктопе */
#blog .posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, min(560px, 50vw)));
  gap: 148px;
  margin-bottom: 32px;
  justify-content: center;
}

/* Карточки (стеклянные) */
#blog .card {
  padding: 50px;
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 12px;
  box-sizing: border-box;
}

/* Список постов */
#blog .post-card { display: flex; flex-direction: column; gap: 12px; }

/* Обёртка для картинки карточки (для бейджа 1/3) */
#blog .post-card .img-wrap { position: relative; }
#blog .post-card .img-wrap img {
  display: block; width: 100%; height: auto;
  border-radius: 8px;
}
#blog .post-card .img-count {
  position: absolute; right: 8px; bottom: 8px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px; line-height: 1.6;
  background: rgba(0,0,0,0.6);
  color: #fff;
}

/* Мета и аннотация */
#blog .post-card .meta,
#blog article.post-page .meta { font-size: 13px; opacity: .8; }
#blog .post-card .excerpt { font-size: 15px; line-height: 1.5; opacity: .95; }

/* Типографика в полной статье */
#blog .post-page { max-width: min(960px, 80vw); margin: 0 auto; }
#blog article.post-page h2, #blog article.post-page h3 { margin: 16px 0 8px; font-weight: 700; }
#blog article.post-page p { margin: 0 0 12px; line-height: 1.6; }
#blog article.post-page ul { margin: 12px 0; padding-left: 20px; }
#blog article.post-page li { margin-bottom: 6px; }

/* Галерея */
#blog .gallery { position: relative; margin: 8px 0 16px; }

/* центрируем кадр во viewport */
#blog .gallery .viewport{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* базово — никаких жёстких width/height */
#blog .gallery .viewport > img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* два режима подгонки (назначаются классами из JS) */
#blog .gallery .viewport > img.fit-width{
  width: 100%;
  height: auto;
}
#blog .gallery .viewport > img.fit-height{
  width: auto;
  height: 100%;
}

/* Ряд превью: фикс-минимум, чтобы ничего не подпрыгивало */
#blog .gallery .thumbs{
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: nowrap;      /* не переносим, чтобы высота была стабильной */
  min-height: 72px;       /* резервируем место под миниатюры */
  overflow-x: auto;       /* если не влезли — скролл по X */
}
#blog .gallery .thumbs img{
  width: 84px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  opacity: .8;
  cursor: pointer;
}
/* Кнопки навигации галереи */
#blog .gallery .nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.45); border: none; color: #fff;
  width: 36px; height: 36px; border-radius: 18px; cursor: pointer;
}
#blog .gallery .nav.prev { left: 8px; }
#blog .gallery .nav.next { right: 8px; }

/* Превьюшки */
#blog .gallery .thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
#blog .gallery .thumbs img {
  width: 84px; height: 64px; object-fit: cover; border-radius: 6px; opacity: .8; cursor: pointer;
}
#blog .gallery .thumbs img.active { outline: 2px solid #fff; opacity: 1; }

/* Кнопка дозагрузки */
#blog .loadbar { display: grid; place-items: center; margin: 32px 0 16px; }
#blog .loadbar .btn-accent[disabled] { opacity: 0.6; cursor: default; }

/* Back to list */
#blog .backbar {
  margin: 16px 0 24px;
}
#blog .backbar .btn-accent {
  padding: 6px 14px;
  display: inline-block;
}

/* Ховеры карточек (осветление + лёгкое увеличение) */
#blog .post-card, #blog .post-page {
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, background 160ms ease;
  will-change: transform, filter;
}
#blog .post-card:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.08);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  background: rgba(0,0,0,0.32);
}
#blog .post-card a.post-link { display: block; }
#blog .post-card a.post-link:focus-visible { outline: 2px dashed rgba(255,255,255,0.65); outline-offset: 4px; }

/* исправляем порядок слоёв в галерее */
#blog .gallery { position: relative; }
#blog .gallery .viewport { position: relative; z-index: 1; }
#blog .gallery .nav { z-index: 3; }           /* кнопки поверх картинки */

#blog .stats {
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  opacity: 0.9;
}

/* Большая зелёная кнопка лайка на карточке */
#blog .btn-like{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  /* размер кнопки */
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  padding: 10px 16px;     /* было 4px 10px */
  min-height: 40px;       /* хороший тач-таргет */
  border-radius: 10px;    /* визуально как у .btn-accent */

  /* цвета — такие же, как у .btn-accent */
  background: var(--accent, #00d084);
  color: #0b0d10;
  border: 1px solid rgba(0,0,0,.15);
  cursor: pointer;
  transition: background .2s ease, transform .12s ease, box-shadow .12s ease;
}
#blog .btn-like:hover:not(:disabled){
  background: #ff7a00;      /* твой оранжевый на hover */
  color: #0a0a0a;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
#blog .btn-like:disabled{
  opacity: .6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

#blog .post-card .stats-row{
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;         /* было 10px */
  font-size: 14px;   /* было 12px */
  opacity: .9;
  flex-wrap: wrap;   /* чтобы на узких экранах переносилось красиво */
}

/* Back to list — сделать ссылку зелёной кнопкой */
#blog .backbar .btn-accent {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--accent, #00d084); /* использует твой акцент, если есть; иначе зелёный */
  color: #0b0d10;                      /* контрастный текст */
  border: 1px solid rgba(255,255,255,0.25);
  text-decoration: none;
  font-weight: 600;
  transition: filter .15s ease, transform .15s ease, background .15s ease;
}
#blog .backbar .btn-accent:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
#blog .backbar .btn-accent:active {
  transform: translateY(0);
}

#blog .sharebar {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#blog .sharebar .btn-accent {
  padding: 8px 14px;
}

#blog .copy-status {
  font-size: 13px;
  opacity: 0.8;
  color: #9f9;
}

/* Make all .btn-accent (buttons and links) green */
button.btn-accent,
a.btn-accent {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--accent, #00d084); /* твой зелёный акцент */
  color: #0b0d10;
  border: 1px solid rgba(255,255,255,0.25);
  text-decoration: none;
  font-weight: 600;
  transition: filter .15s ease, transform .15s ease, background .15s ease;
}
button.btn-accent:hover,
a.btn-accent:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
button.btn-accent:disabled {
  opacity: 0.6;
  cursor: default;
}