/* ============================================================================
   SIGVIN — Страница «Projekty» (десктоп).
   Переиспользует готовые компоненты: navbar/gframe/tag/btn-split (hero.css),
   .proj-card (projects.css), CTA (cta.css), Footer (footer.css).
   Тут только: hero страницы (Figma 250:3692) + сетка проектов (250:5299) + пагинация.
   ========================================================================== */

/* ===================== HERO страницы (Figma 250:3692, 1440×718) ============ */
.phero {
  position: relative;
  width: var(--frame-w);
  max-width: 100%;
  height: 718px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background: var(--dark-black);
}
.phero__bg {                         /* фон выше блока → лёгкий параллакс не оголяет края */
  position: absolute;
  top: -8%; left: 0;
  width: 100%; height: 116%;
  object-fit: cover;
  z-index: 0;
}
.phero__overlay {
  position: absolute; inset: 0;
  background: rgba(17, 17, 17, 0.32);  /* dark/32% (Figma) */
  z-index: 1;
  pointer-events: none;
}

/* navbar — переиспользуем .navbar; тут только позиция (по центру, отступ 24 сверху) */
.phero__nav {
  position: absolute;
  top: var(--margin); left: var(--margin);
  width: calc(var(--frame-w) - var(--margin) * 2);   /* 1392 */
  max-width: calc(100% - var(--margin) * 2);
  z-index: 3;
}

/* заголовок «Nasze Realizacje» 146px — тот же паттерн, что hero главной (hl-1/hl-2) */
.phero__head {
  position: absolute;
  left: 80px; top: 160px;
  width: var(--content-w);
  height: 270px;
  z-index: 2;
}
.phero__head .hl-1 { position: absolute; left: 0;     top: 0;         color: var(--light-white); white-space: nowrap; }
.phero__head .hl-2 { position: absolute; left: 243px; top: 114.19px;  color: var(--light-white); white-space: nowrap; }

/* горизонтальный бар статистики (4 ячейки, общие границы, уголки gframe) */
.phero__stats {
  position: absolute;
  left: 80px; top: 478px;
  width: var(--content-w);
  max-width: calc(100% - 160px);
  display: flex;
  align-items: stretch;
  z-index: 2;
}
.phero__stat {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 16px 32px;
  margin-right: -1px;                 /* общие границы соседних ячеек */
  color: var(--light-white);
  --glass-border: var(--border-light);  /* сплошная 12% белая обводка */
}
.phero__stat:last-child { margin-right: 0; }
.phero__stat-num   { font: 700 64px/72px "adineue PRO Cyr", sans-serif; }
.phero__stat-label { color: var(--light-white); }

/* ===================== СЕТКА ПРОЕКТОВ (Figma 250:5299) ===================== */
.projekty {
  position: relative;
  z-index: 2;                         /* как FAQ на главной: белым перекрывает верх CTA */
  width: var(--frame-w);
  max-width: 100%;
  margin: -48px auto 0;               /* наезжает на hero (белый rounded-top peek) */
  padding: 48px 0 64px;               /* +48 сверху компенсирует наезд; снизу 64 от пагинации до края */
  background: var(--light-white);
  border-radius: var(--r-card);       /* скругления со ВСЕХ сторон (верх — наезд на hero, низ — 40px) */
}
.projekty__container {
  width: var(--content-w);
  max-width: calc(100% - 160px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* фильтр-табы — те же, что на главной (.proj-tabs в projects.css), на всю ширину */
.projekty .proj-tabs { width: 100%; }

/* сетка карточек: 3 в ряд, gap 24 (карточки .proj-card как на главной) */
.projekty__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
}
.projekty__grid .proj-card {
  flex: 0 0 calc((100% - 48px) / 3);  /* ровно 3 в ряд */
  height: 393px;                       /* фикс-высота карточки (в карусели = 100% ряда) */
}

/* ===================== ПАГИНАЦИЯ (Figma 250:8106) ========================= */
.projekty__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
/* стрелки (квадрат 48, острые углы → уголки gframe) */
.projekty__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);
}
.projekty__pg-arrow svg { width: 20px; height: 20px; }
.projekty__pg-prev svg { transform: rotate(180deg); }
.projekty__pg-next { background: var(--light-light); }
.projekty__pg-arrow:hover:not([disabled]) { background: var(--light-light); transform: scale(1.06); }
.projekty__pg-arrow[disabled] { opacity: .35; pointer-events: none; }

/* номера страниц (60×48; активный — тёмная пилюля, неактивные — острые с уголками) */
.projekty__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;
}
.projekty__pg-num:hover { background: var(--light-light); }
.projekty__pg-num.is-active {
  background: var(--dark-black);
  color: var(--light-white);
  border-radius: var(--r-pill);
}

/* ============================ МОБАЙЛ (≤767, фрейм 375) ============================
   Block 1 hero (Figma 518:875): navbar + заголовок 64px + ВЕРТИКАЛЬНЫЙ стек статистики.
   Block 2 grid (Figma 518:659): белый rounded-32, табы гор.скролл, карточки в 1 столбец. */
@media (max-width: 1024px) {
  /* ---- Block 1: HERO — контент в колонку (навбар → заголовок → статистика) ---- */
  .phero {
    width: 100%; height: auto; min-height: 100svh;
    display: flex; flex-direction: column;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .phero__overlay { background: var(--dark-48); }   /* dark/48% (Figma мобайл) */

  .phero__nav { position: static; left: auto; top: auto; width: 100%; max-width: none; }

  /* заголовок «Nasze Realizacje» 64px — тот же паттерн, что hero главной (hl-1/hl-2) */
  .phero__head {
    position: static; left: auto; top: auto;
    width: 100%; height: auto;
    margin-top: 22px;
    display: flex; flex-direction: column; gap: 0;
  }
  .phero__head .hl-1,
  .phero__head .hl-2 { position: static; left: auto; top: auto; white-space: normal; letter-spacing: 0; }
  .phero__head .hl-1 { font: 400 64px/72px "Geologica Cursive", sans-serif; margin-bottom: -13px; letter-spacing: -0.08em; }
  .phero__head .hl-2 {
    font: 700 64px/51px "adineue PRO Cyr", sans-serif;
    align-self: stretch; text-align: right; padding-left: 32px;
  }

  /* статистика — вертикальный стек 4 ячеек на всю ширину, общие границы */
  .phero__stats {
    position: static; left: auto; top: auto;
    width: 100%; max-width: none;
    flex-direction: column; align-items: stretch;
    margin-top: 24px;
  }
  .phero__stat {
    flex: none; width: 100%;
    padding: 12px 20px;
    margin-right: 0; margin-bottom: -1px;   /* общие границы по вертикали */
  }
  .phero__stat:last-child { margin-bottom: 0; }
  .phero__stat-num   { font: 700 40px/48px "adineue PRO Cyr", sans-serif; }      /* H4 */
  .phero__stat-label { font: 700 18px/26px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em; }  /* Label/Large */

  /* ---- Block 2: GRID — белый rounded-32, наезд на hero, карточки в 1 столбец ---- */
  .projekty {
    width: 100%;
    margin-top: -48px;            /* наезд на hero: небольшой peek белого блока (было -136 — на коротком iOS-хиро (svh) наезжало на цифры) */
    padding: 16px 0 32px;         /* приподнят: 16 от верха блока до табов; 32 от пагинации до низа */
    border-radius: 32px;          /* Figma rounded-32 */
  }
  .projekty__container {
    width: 100%; max-width: 100%;
    padding: 0 16px;
    gap: 24px;
  }
  .projekty__grid {
    flex-direction: column;       /* 1 карточка в ряд */
    flex-wrap: nowrap;
    gap: 16px;
  }
  .projekty__grid .proj-card { flex: none; width: 100%; }
}