/* ============================================================================
   SIGVIN — страница конкретной статьи блога (Figma 677:4597 hero / 677:5743 body).
   Тело статьи ПОЛНОСТЬЮ переиспользует .poldoc/.poltoc/.polsec (polityka.css,
   scroll-spy — polityka.js без изменений), CTA и Footer — те же секции, что
   на listing-странице блога. Тут — только компактный фото-hero статьи.
   ========================================================================== */

.bhero {
  position: relative;
  width: var(--frame-w);
  max-width: 100%;
  min-height: 572px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background: var(--dark-black);
}
.bhero__bg {
  position: absolute; top: -8%; left: 0;
  width: 100%; height: 116%;
  object-fit: cover;
  z-index: 0;
}
.bhero__overlay { position: absolute; inset: 0; background: rgba(17, 17, 17, 0.32); z-index: 1; pointer-events: none; }
.bhero__nav {
  position: relative; z-index: 3; flex: none;
  width: calc(var(--frame-w) - var(--margin) * 2); max-width: calc(100% - var(--margin) * 2);
  margin: var(--margin) auto 0;
}

/* низ hero: крошки+заголовок слева, мета-инфо справа — координаты 1:1 из Figma
   (679:5932: main top:248, meta top:325.5, оба left/right:80). .bhero__main/
   __meta позиционируются АБСОЛЮТНО от .bhero (не от .bhero__row — иначе
   отсчёт шёл бы от низа навбара, а не от верха всего hero, как в Figma). */
.bhero__row { flex: 1 1 auto; }
.bhero__main { position: absolute; z-index: 2; left: 80px; top: 248px; display: flex; flex-direction: column; gap: 15px; max-width: 900px; }
.bhero__crumbs { display: flex; align-items: center; gap: 12px; max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bhero__crumbs::-webkit-scrollbar { display: none; }
.bhero__crumb {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; padding: 8px 12px; white-space: nowrap;
  font: 500 14px/20px "Geist Mono", monospace; letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--light-32); background: transparent;
  --glass-border: var(--light-16); --corner-color: var(--light-48);
  transition: background-color .25s ease, color .25s ease;
}
a.bhero__crumb:hover { background: var(--light-8); color: var(--light-white); }
.bhero__crumb-cur { color: var(--light-white); }
.bhero__crumb-div { width: 2px; height: 2px; flex: none; border-radius: 0.643px; background: var(--light-32); }
.bhero__title {
  color: var(--light-white);
  font-size: 64px; line-height: 72px; letter-spacing: 0;
}
.bhero__title .thin { font-family: "Geologica Cursive", sans-serif; font-weight: 400; letter-spacing: -0.08em; }
.bhero__title .bold { font-family: "adineue PRO Cyr", sans-serif; font-weight: 700; }

.bhero__meta { position: absolute; z-index: 2; right: 80px; top: 325.5px; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.bhero__meta-row { display: flex; align-items: center; gap: 16px; }
.bhero__meta-dot { width: 4px; height: 4px; flex: none; background: var(--light-white); border-radius: 0 1.285px; }
.bhero__meta-label { color: var(--light-48); margin-right: -8px; }
.bhero__meta-val { color: var(--light-white); }

/* блок «Czytaj także» — переиспользует .projects/.proj-card (Więcej Realizacji,
   projects.css) с инверсией цвета (.projects--inverse); тут только оборачиваем
   его в отдельную скруглённую карточку (на homepage .projects — не самостоятельный
   блок, а часть непрерывной "ленты", поэтому там нет своего радиуса/оверфлоу).
   Фикс. высота 758 + z-index выше CTA(1)/Footer(2) — блок «наезжает» на них
   сверху: CTA сам подтягивается на -72px (cta.css), Footer — на -40px поверх
   CTA; здесь z-index:3 держит Czytaj także визуально НАД обоими при наезде. */
.blog-related.projects {
  position: relative; z-index: 3;
  width: var(--frame-w); max-width: 100%; height: 758px; margin: 40px auto 0;
  padding: 0; border-radius: 40px; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center;
}
.blog-related .projects__container { margin-bottom: 40px; }
.blog-related .projects__row { padding-left: 40px; padding-right: 40px; }

/* ============================ MOBILE (≤1024) ==================== */
@media (max-width: 1024px) {
  .blog-related.projects { height: auto; margin-top: 32px; padding: 40px 0; border-radius: 24px; }
  .blog-related .projects__container { margin-bottom: 24px; }
  .blog-related .projects__row { padding-left: 16px; padding-right: 16px; }
  .bhero { width: 100%; height: auto; min-height: 100svh; }
  .bhero__overlay { background: var(--dark-48); }
  .bhero__nav { width: 100%; max-width: none; margin: 0; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 0; }
  /* на мобилке — обратно в обычный поток (абсолютные top/left/right только для десктопа) */
  .bhero__row { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 24px; padding: 24px 16px calc(136px + env(safe-area-inset-bottom, 0px)); min-width: 0; }
  .bhero__main { position: static; left: auto; top: auto; max-width: none; width: 100%; min-width: 0; }
  .bhero__title { font-size: 40px; line-height: 48px; }
  .bhero__meta { position: static; right: auto; top: auto; align-items: flex-start; gap: 8px; }
  /* активная крошка на мобилке — не скроллим, а обрезаем в многоточие, если не влезает */
  .bhero__crumbs { overflow-x: visible; }
  .bhero__crumb-cur { flex: 1 1 auto; min-width: 0; justify-content: flex-start; text-align: left; overflow: hidden; text-overflow: ellipsis; }
}