/* ============================================================
   BLOG — lista artykułów (Figma 446:902 hero + 446:1234 grid).
   Hero: фон-гараж + V/щиты (как CTA) + «BLOG» + табы-фильтр.
   Список: сетка карточек 3×N + пагинация. Карточки data-driven (server.py).
   ============================================================ */

/* ── HERO ─────────────────────────────────────────────────── */
.bloghero {
  position: relative; width: 100%; height: 496px; overflow: hidden;
  background: var(--dark-1100, #0a0a0a); isolation: isolate;
}
/* фон-арборд из assets/blog (гараж + V/щиты уже впечатаны) — на всю ширину/высоту, без скруглений */
.bloghero__bg {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
}
.bloghero__bg picture { display: block; width: 100%; height: 100%; }
.bloghero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bloghero__inner {
  position: relative; z-index: 2; width: 100%; max-width: 1440px; height: 496px; margin: 0 auto;
}
/* шапка переиспользуется (.hero__header) — снимаем абсолют из hero.css */
.bloghero .hero__header {
  position: relative; left: auto; top: auto; width: 100%; max-width: 1440px;
  margin: 0 auto; box-sizing: border-box; padding: 24px 24px 0;
}
.bloghero .mega { width: 100%; left: 0; }

.bloghero__title {
  position: absolute; top: 158px; left: 50%; transform: translateX(-50%); margin: 0;
  font-family: var(--ff-display); font-weight: 700; font-style: italic;
  font-size: 92px; line-height: 1.32; text-transform: uppercase; text-align: center; white-space: nowrap;
  padding: 4px 12px 14px;          /* запас, чтобы курсивные глифы не обрезались background-clip:text */
  background: linear-gradient(180deg, #ffffff 38.834%, #787674 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  z-index: 3; letter-spacing: normal; }

/* ── ТАБЫ-фильтр ──────────────────────────────────────────── */
.blog-tabs {
  position: absolute; top: 320px; left: 50%; transform: translateX(-50%);
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; z-index: 3; max-width: calc(100% - 48px);
  background: linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04)), var(--dark-1100, #0a0a0a);
}
.blog-tab {
  display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 16px 24px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer; white-space: nowrap;
  font-family: var(--ff-body); font-weight: 700; font-size: 14px; line-height: 20px;
  letter-spacing: .56px; text-transform: uppercase; color: var(--light-600, rgba(255,255,255,.6));
  transition: background .2s ease, color .2s ease;
}
.blog-tab:hover { color: var(--light-1000, #fff); }
.blog-tab.is-active { background: var(--light-1000, #fff); color: var(--dark-1000, #0f0f0f); }
.blog-tab__count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 32px;
  padding: 0 6px; border-radius: 100px; background: var(--light-40, rgba(255,255,255,.04));
  color: var(--light-600, rgba(255,255,255,.6)); font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: normal; }
.blog-tab.is-active .blog-tab__count { background: var(--dark-1100, #0a0a0a); color: var(--light-1000, #fff); }

/* ── СПИСОК статей ────────────────────────────────────────── */
.blog-list {
  position: relative; width: 100%; box-sizing: border-box; padding: 24px 88px 88px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 43.6%), var(--dark-1100, #0a0a0a);
}
.blog-list__inner { position: relative; z-index: 1; max-width: 1264px; margin: 0 auto; }
.blog-grid { display: flex; flex-wrap: wrap; gap: 24px; }

/* карточка статьи — тот же стиль и ховеры, что у карточек услуг (.svc-item) */
.blog-card {
  box-sizing: border-box; width: calc((100% - 48px) / 3);
  background: var(--dark-1000, #0f0f0f); border: 1px solid var(--light-40, rgba(255,255,255,.04));
  border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; position: relative; transition: border-color .15s ease, transform .15s ease;
}
.blog-card:hover { transform: translateY(-4px); }
.blog-card:hover .blog-card__text,
.blog-card:hover .blog-card__arrow { background: #1b1b1b; }
.blog-card.is-hidden { display: none; }
.blog-card__media { position: relative; height: 180px; border-radius: 8px; overflow: hidden; background: #000; }
.blog-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,15,15,0) 40%, #0F0F0F 100%); }
/* инфо-плашка растягивается на всю оставшуюся высоту карточки (карточки в ряду
   равной высоты), текст центрируется по вертикали — где текста меньше, плашка тянется */
.blog-card__info { display: flex; align-items: stretch; flex: 1 1 auto; border-radius: 8px; overflow: hidden; }
.blog-card__text {
  flex: 1 1 0; min-width: 0; box-sizing: border-box; padding: 24px;
  background: #141414; border-right: 1px solid var(--light-40, rgba(255,255,255,.04));
  display: flex; flex-direction: column; justify-content: center; gap: 12px; transition: background .15s ease;
}
.blog-card__cat, .blog-card__date {
  font-family: var(--ff-body); font-weight: 400; font-size: 13px; line-height: 20px;
  letter-spacing: var(--ls-body); text-transform: uppercase; color: var(--light-600, rgba(255,255,255,.6));
}
.blog-card__title {
  margin: 0; font-family: var(--ff-body); font-weight: 700; font-size: 20px; line-height: 28px;
  text-transform: uppercase; color: var(--light-1000, #fff); letter-spacing: normal; }
.blog-card__arrow {
  display: flex; align-items: center; justify-content: center; width: 48px; flex: none;
  background: #141414; color: var(--light-1000, #fff); transition: background .15s ease;
}
.blog-card__arrow .btn-arrow { width: 16px; height: 16px; }
/* морф стрелки » → ↗ на hover карточки (как у .svc-item) */
.blog-card:hover .btn-arrow__chev { opacity: 0; transform: translate(3px, -3px) scale(.6); }
.blog-card:hover .btn-arrow__diag { opacity: 1; transform: translate(0, 0) scale(1); }

/* ── ПАГИНАЦИЯ ────────────────────────────────────────────── */
.blog-pager {
  display: flex; align-items: stretch; width: 100%; margin-top: 24px; min-height: 56px;
  background: var(--dark-1000, #0f0f0f); border: 1px solid var(--light-40, rgba(255,255,255,.04));
  border-radius: 12px; overflow: hidden;
}
.blog-pager:empty { display: none; }
.blog-pager__nums { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 9px; }
.blog-pager__num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 32px;
  padding: 0 12px; border: 0; border-radius: 100px; background: transparent; cursor: pointer;
  font-family: var(--ff-body); font-weight: 700; font-size: 16px; line-height: 24px; color: var(--light-1000, #fff);
  transition: background .2s ease, color .2s ease; letter-spacing: normal; }
.blog-pager__num:hover:not(.is-active):not(.blog-pager__num--dots) { background: var(--light-40, rgba(255,255,255,.04)); }
.blog-pager__num.is-active { background: var(--light-1000, #fff); color: var(--dark-1000, #0f0f0f); }
.blog-pager__num--dots { cursor: default; }
.blog-pager__edge {
  display: flex; align-items: center; justify-content: center; width: 40px; flex: none;
  border: 0; background: transparent; cursor: pointer; color: var(--light-1000, #fff);
  transition: background .25s ease, color .25s ease;   /* как у стрелок каруселей (block6/9) */
}
.blog-pager__edge svg { width: 16px; height: 16px; display: block; }
.blog-pager__edge--prev { border-right: 1px solid var(--light-40, rgba(255,255,255,.04)); }
.blog-pager__edge--next { background: var(--light-1000, #fff); color: var(--dark-1000, #0f0f0f); border-left: 1px solid var(--light-40, rgba(255,255,255,.04)); }
/* hover как у каруселей: кнопка белеет, стрелка тёмная */
.blog-pager__edge:not([disabled]):hover { background: var(--light-1000, #fff); color: var(--dark-1000, #0f0f0f); }
.blog-pager__edge[disabled] { opacity: .4; cursor: default; }

/* ── Блок команды только на блоге: отступ заголовка −60, скругление только верхних
   углов 32, без наезда на список (отступ от пагинации до блока = padding-bottom 88) ── */
.blog-page .team { padding-top: 76px; border-radius: 32px 32px 0 0; margin-top: 0; z-index: auto; }
/* отзывы приподняты на 40 и должны лежать ПОВЕРХ команды (а не наоборот) */
.blog-page .r8 { position: relative; z-index: 1; }

/* ── Блок отзывов на блоге приподнят на 40px ── */
.blog-page .r8 { margin-top: -40px; }

/* ── CTA на блоге: фон во всю ширину/высоту, без скруглений ── */
.blog-page .cta__inner { left: 0; top: 0; transform: none; width: 100%; height: 100%; }
.blog-page .cta__card { border-radius: 0; }

/* ── Декоративные полоски на фоне списка статей (assets/blog/blog-lines.svg) ── */
.blog-list__lines {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 1440px; height: 1404px; max-height: 100%; z-index: 0; pointer-events: none;
  background: url("/public/assets/blog/blog-lines.svg") no-repeat center bottom / 1440px auto;
}

/* ── Адаптив ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .bloghero__title { font-size: 64px; line-height: 72px; top: 150px; }
  .blog-tabs { top: 300px; }
  .blog-list { padding: 24px 40px 64px; }
  .blog-card { width: calc((100% - 24px) / 2); }
}
@media (max-width: 768px) {
  /* HERO мобайл: контент (шапка → BLOG → табы) в нормальном потоке.
     Фон Hero_bg_mob (750×800) показываем целиком — высота героя по аспекту
     картинки (= «такой же высоты как фон»), контент ложится поверх. */
  .bloghero { height: auto; aspect-ratio: 750 / 800; }
  .bloghero__inner { height: 100%; max-width: none; display: flex; flex-direction: column; }
  .bloghero .hero__header { position: relative; padding: 16px; }
  .bloghero__title {
    position: static; transform: none; top: auto; left: auto;
    width: 100%; box-sizing: border-box; margin: 0; padding: 8px 24px 14px;
    font-size: 64px; line-height: 1.2; text-align: center;
  }
  .blog-tabs {
    position: static; transform: none; top: auto; left: auto; display: flex;
    margin: 0 32px 24px; max-width: none; overflow-x: auto;
    justify-content: flex-start; -webkit-overflow-scrolling: touch;
  }
  .blog-tabs::-webkit-scrollbar { display: none; }
  .blog-tab { flex: none; }

  .blog-list { padding: 24px 16px 48px; }
  .blog-card { width: 100%; }
}

/* ============================================================
   Hero-варианты: Polityka prywatności (471:4118) и 404 (463:3835).
   Переиспользуют .bloghero (фон-гараж + Druk-заголовок).
   ============================================================ */
/* Polityka — невысокий герой с заголовком по центру */
.bloghero--policy { height: 380px; }
.bloghero--policy .bloghero__inner { height: 380px; }
.bloghero--policy .bloghero__title { top: 200px; transform: translateX(-50%); }

/* 404 — высокий герой, контент колонкой по центру */
.bloghero--error { height: 776px; }
.bloghero--error .bloghero__inner { height: 776px; }
.err404 {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 657px; max-width: calc(100% - 48px); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center;
}
.err404__title {
  margin: 0; font-family: var(--ff-display); font-weight: 700; font-style: italic;
  font-size: 92px; line-height: 104px; text-transform: uppercase; max-width: 460px;
  background: linear-gradient(180deg, #ffffff 38.834%, #787674 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; letter-spacing: normal; }
.err404__sub { margin: 0; font-family: var(--ff-body); font-size: 24px; line-height: 32px; letter-spacing: var(--ls-body); color: var(--light-1000, #fff); }
.err404__sub b { font-weight: 700; letter-spacing: normal; }
.err404__btn {
  display: inline-flex; align-items: stretch; height: 56px; border-radius: 8px; overflow: hidden;
  text-decoration: none; transition: transform .2s ease;
}
.err404__btn:hover { transform: scale(1.02); }
.err404__btn:hover .err404__btn-ic svg { transform: translateX(-3px); }
.err404__btn-ic {
  display: flex; align-items: center; justify-content: center; width: 48px;
  background: var(--light-1000, #fff); border-right: 1px solid rgba(15,15,15,.04); color: var(--dark-1000, #0f0f0f);
}
.err404__btn-ic svg { width: 16px; height: 16px; transition: transform .2s ease; }
.err404__btn-label {
  display: flex; align-items: center; padding: 0 24px; background: var(--light-1000, #fff);
  font-family: var(--ff-body); font-weight: 700; font-size: 14px; letter-spacing: .56px; text-transform: uppercase; color: var(--dark-1000, #0f0f0f);
}

@media (max-width: 768px) {
  /* высота героя = по аспекту мобильного фона из ассетов (750×800), фон показан целиком */
  .bloghero--policy { aspect-ratio: 750 / 800; height: auto; }
  /* шапка сверху, заголовок центрируется в оставшемся месте (margin:auto) */
  .bloghero--policy .bloghero__inner { height: 100%; display: flex; flex-direction: column; }
  .bloghero--policy .bloghero__title { position: static; transform: none; top: auto; left: auto; margin: auto 0;
    width: 100%; box-sizing: border-box; white-space: normal; font-size: 64px; line-height: 1.05; padding: 8px 24px; }

  .bloghero--error { aspect-ratio: auto; height: auto; min-height: 100svh; }
  .bloghero--error .bloghero__inner { height: auto; min-height: 100svh; }
  .err404 { position: static; transform: none; width: 100%; max-width: none; padding: 40px 24px 64px; box-sizing: border-box; gap: 32px; margin: auto 0; }
  .err404__title { font-size: 56px; line-height: 1.1; max-width: none; }
  .err404__sub { font-size: 18px; line-height: 26px; }
}