/* ============================================================================
   SIGVIN — страница /blog.html «Nasz Blog».
   Переиспользует navbar/gframe/tag/btn-split (hero.css), фильтр-табы .proj-tabs
   (projects.css), CTA (cta.css), Footer (footer.css) — 1:1 без изменений.
   Тут: фото-hero (Figma 677:2741) + блок списка статей (Figma 677:3187,
   карточки .blog-card + пагинация .blog__pager — калька .projekty__pg-* с
   projekty.css/projekty.js).
   ========================================================================== */

/* ===================== HERO (Figma 677:2741, 1440×718) ===================== */
.blogh {
  position: relative;
  width: var(--frame-w);
  max-width: 100%;
  height: 524px;                      /* по просьбе клиента — фикс-высота, не 100vh как у др. heroe */
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background: var(--dark-black);
}
.blogh__bg {
  position: absolute;
  top: -8%; left: 0;
  width: 100%; height: 116%;
  object-fit: cover;
  z-index: 0;
}
.blogh__overlay {
  position: absolute; inset: 0;
  background: rgba(17, 17, 17, 0.32);     /* dark/32% */
  z-index: 1;
  pointer-events: none;
}
.blogh__nav {
  position: absolute;
  top: var(--margin); left: var(--margin);
  width: calc(var(--frame-w) - var(--margin) * 2);
  max-width: calc(100% - var(--margin) * 2);
  z-index: 3;
}

.blogh__content {
  position: absolute;
  left: 80px; bottom: 128px;
  z-index: 2;
}
/* заголовок «Nasz Blog» — как hl-1/hl-2 на главной (Figma 677:3145): вторая строка
   абсолютно смещена вправо-вниз с нахлёстом на первую (top 114.19 при line-height 156) */
.blogh__title { position: relative; height: 271px; color: var(--light-white); }
.blogh__title-thin,
.blogh__title-bold { position: absolute; left: 0; top: 0; white-space: nowrap; }
.blogh__title-thin { font: 400 146px/156px "Geologica Cursive", sans-serif; letter-spacing: -0.08em; }
.blogh__title-bold { left: 164px; top: 114.19px; font: 700 146px/156px "adineue PRO Cyr", sans-serif; letter-spacing: -0.03em; }

/* ===================== СПИСОК СТАТЕЙ (Figma 677:3187) ===================== */
.blogl {
  position: relative;
  z-index: 2;                         /* белым перекрывает верх hero (как projekty на своём hero) */
  width: var(--frame-w);
  max-width: 100%;
  margin: -48px auto 0;               /* наезд на hero */
  padding: 48px 0 64px;
  background: var(--light-white);
  border-radius: var(--r-card);
}
.blogl__container {
  width: var(--content-w);
  max-width: calc(100% - 160px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.blogl .proj-tabs { width: 100%; }

.blogl__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
}

/* ---- карточка статьи (677:3204): чёрная подложка (виден низ-«CZYTAJ WIĘCEJ») +
   светлая верхняя часть (фото + заголовок + дата-плашка) ---- */
.blog-card {
  flex: 0 0 calc((100% - 48px) / 3);   /* ровно 3 в ряд */
  height: 393px;                        /* фикс-высота (Figma) — нужна, чтобы фото на hover могло вырасти на весь блочок */
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding-bottom: 12px;
  border-radius: 24px;
  background: var(--dark-black);
  text-decoration: none;
}
/* «блочок» — как .proj-card__inner: фото абсолютно растёт на hover до bottom:0,
   текст оверлеем поверх (с градиентом-скримом), как на странице Realizacje */
.blog-card__top {
  position: relative; overflow: hidden;
  width: 100%; flex: 1 1 auto; min-height: 0;
  background: var(--light-light);
  border-radius: 24px;
}
.blog-card__media {
  position: absolute; top: 0; left: 0; right: 0; bottom: 160px;
  box-shadow: inset 0 0 0 1px var(--light-white);
  border-radius: 24px; overflow: hidden;
  transition: bottom .5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .5s ease;
}
.blog-card:hover .blog-card__media { bottom: 0; box-shadow: inset 0 0 0 1px transparent; }
.blog-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1); }
.blog-card:hover .blog-card__img { transform: scale(1.05); }
.blog-card__grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 100%);
  opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.blog-card:hover .blog-card__grad { opacity: 1; }
.blog-card__body {
  position: absolute; left: 0; right: 0; bottom: 24px; z-index: 2;
  display: flex; flex-direction: column; gap: 16px; padding: 0 24px;
}
.blog-card__title {
  color: var(--dark-black);
  transition: color .45s ease;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card:hover .blog-card__title { color: var(--light-white); }
.blog-card__meta { display: flex; align-items: center; }
.blog-card__date {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 12px;
  color: var(--dark-64);
  transition: color .45s ease;
  --glass-border: var(--border-dark); --corner-color: var(--dark-48);
}
.blog-card:hover .blog-card__date { color: var(--light-white); --glass-border: var(--light-16); --corner-color: var(--light-white); }
.blog-card__cta {
  display: flex; align-items: center; gap: 8px;
  color: var(--light-white);
}
.blog-card__cta svg { width: 20px; height: 20px; transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1); }
/* на hover стрелка разворачивается в правый-верхний угол (↗) — как на Realizacje */
.blog-card:hover .blog-card__cta svg { transform: rotate(-45deg); }

/* ---- пагинация — калька .projekty__pg-* (projekty.css) ---- */
.blog__pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.blog__pg-arrow {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--light-white);
  color: var(--dark-black);
  --glass-border: var(--border-dark); --corner-color: var(--dark-48);
  transition: background-color .3s ease, transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog__pg-arrow svg { width: 20px; height: 20px; }
.blog__pg-prev svg { transform: rotate(180deg); }
.blog__pg-next { background: var(--light-light); }
.blog__pg-arrow:hover:not([disabled]) { background: var(--light-light); transform: scale(1.06); }
.blog__pg-arrow[disabled] { opacity: .35; pointer-events: none; }
.blog__pg-num {
  min-width: 60px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 16px;
  background: transparent;
  color: var(--dark-black);
  --glass-border: var(--border-dark); --corner-color: var(--dark-48);
  transition: background-color .3s ease, color .3s ease;
}
.blog__pg-num:hover { background: var(--light-light); }
.blog__pg-num.is-active { background: var(--dark-black); color: var(--light-white); border-radius: var(--r-pill); }

/* пустое состояние (фильтр без постов пока) */
.blogl__empty {
  width: 100%; padding: 64px 24px; text-align: center;
  color: var(--dark-48);
  font: 700 18px/26px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em;
}

/* ============================ MOBILE (≤1024) ==================== */
@media (max-width: 1024px) {
  .blogh { width: 100%; height: auto; min-height: 100svh; display: flex; flex-direction: column; }
  .blogh__overlay { background: var(--dark-48); }
  .blogh__nav { position: relative; z-index: 3; flex: none; top: 0; left: 0; width: 100%; max-width: none; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 0; }
  .blogh__content { position: relative; z-index: 2; flex: 1 1 auto; left: auto; bottom: auto; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 16px calc(104px + env(safe-area-inset-bottom, 0px)); }
  /* на мобилке нахлёст выключаем — простой стек в потоке (как .hl-1/.hl-2 на главной) */
  .blogh__title { height: auto; }
  .blogh__title-thin,
  .blogh__title-bold { position: static; left: auto; top: auto; white-space: normal; }
  .blogh__title-thin { font: 400 64px/72px "Geologica Cursive", sans-serif; letter-spacing: -0.08em; margin-right: 0.2em; }
  .blogh__title-bold { font: 700 64px/68px "adineue PRO Cyr", sans-serif; letter-spacing: -0.03em; }

  .blogl { width: 100%; margin-top: -40px; padding: 32px 0 48px; border-radius: 32px; }
  .blogl__container { width: 100%; max-width: 100%; padding: 0 16px; gap: 24px; }
  .blogl__grid { gap: 16px; }
  .blog-card { flex: none; width: 100%; }
}