/* ============================================================
   BLOCK 7 «NASZE PORTFOLIO» (Figma node 918:1741)
   Шапка (заголовок + кнопка) + маска 1440×1600 с 4 колонками фото.
   Колонки двигаются параллаксом при скролле (1↓ 2↑ 3↓ 4↑), маска
   затемняет сверху/снизу. Ховер фото: притемнение + зум + лого +
   центральный текст + нижний текст.
   ============================================================ */
.pf {
  position: relative;
  width: 100%;
  background: var(--dark-1100);          /* #000 */
  padding: 88px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 65px;
  overflow: hidden;
  isolation: isolate;
}

/* ── Шапка ────────────────────────────────────────────────── */
.pf__head {
  position: relative;
  width: 1264px;
  max-width: calc(100% - 176px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* dash-линия под заголовком (нода 922:2701) */
.pf__line {
  position: absolute;
  left: -60px;
  top: 76px;
  width: 458px;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  transform: rotate(-1.37deg);
  transform-origin: left center;
}
.pf__line svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pf__title {
  margin: 0;
  flex: 1 1 0;
  font-family: var(--ff-display);
  font-weight: 700;
  font-style: italic;
  font-size: 72px;
  line-height: 72px;
  text-transform: uppercase;
  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; }

/* ── Маска-галерея ────────────────────────────────────────── */
.pf__mask {
  position: relative;
  width: 1440px;
  max-width: 100%;
  height: 1600px;
  overflow: hidden;
  border-radius: 32px;
  /* затемнение сверху/снизу (фейд к фону #000) */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
}
.pf__cols {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 8px;
}
.pf__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;       /* контент выше маски → overhang сверху/снизу */
  gap: 8px;
  will-change: transform;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);   /* плавность + «стоп» по ховеру */
}

/* ── Карточка-фото ────────────────────────────────────────── */
.pf__item {
  position: relative;
  width: 100%;
  height: 435px;
  flex: none;
  border-radius: 24px;
  overflow: hidden;
  background: var(--light-80);
}
.pf__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.pf__shade {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.2);
  transition: background .4s ease;
}

/* ── Ховер-оверлей (лого + центр-текст + нижний текст) ─────── */
.pf__hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px 24px;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.pf__logo {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 56px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}
.pf__logo img { width: 100%; height: auto; display: block; }
.pf__name {
  margin: 0;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  color: var(--light-1000);
  transform: scale(.86);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1); letter-spacing: normal; }
.pf__tag {
  position: absolute;
  right: 16px;
  bottom: 14px;
  margin: 0;
  max-width: 62%;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: .48px;
  text-transform: uppercase;
  text-align: right;
  color: var(--light-600);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}

/* состояние hover */
.pf__item:hover .pf__photo { transform: scale(1.06); }
.pf__item:hover .pf__shade { background: rgba(0, 0, 0, 0.62); }
.pf__item:hover .pf__hover { opacity: 1; }
.pf__item:hover .pf__logo { opacity: 1; transform: none; }
.pf__item:hover .pf__name { transform: scale(1); }
.pf__item:hover .pf__tag { opacity: 1; transform: none; }

/* ── Адаптив ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .pf__title { font-size: 52px; line-height: 52px; }
  .pf__mask { height: 1200px; }
  .pf__item { height: 340px; }
}
@media (max-width: 768px) {
  /* мобайл (Figma 477:1860): 2 колонки ПОРТРЕТНЫХ фото (185.5×216.3) + детали поверх.
     На тач-устройствах ховера нет → детали (лого/название/тег) показываем постоянно. */
  /* без боковых отступов — masonry full-bleed (2×185.5 + gap 4 = 375 = Figma) */
  .pf { padding: 48px 0; gap: 40px; }
  .pf__head { width: 100%; max-width: none; padding: 0 16px; }   /* заголовок остаётся с отступом */
  .pf__head .btn-appt { display: none; }   /* в мобильном дизайне кнопки нет */
  .pf__title { font-size: 40px; line-height: 40px; }
  /* dash под заголовком (Figma 922:2701) — возвращаем на мобайле, слева под «Nasze portfolio» */
  .pf__line {
    display: block; position: absolute; left: -8px; top: 46px;   /* сдвинута влево на 24px (было 16) */
    width: min(240px, calc(100% - 32px)); height: 1px; z-index: 1;
    transform: rotate(-2.4deg); transform-origin: left center;
  }
  /* фикс: mask тянулся на 1440 (max-width:none) → плитки 716px (горизонт). Теперь = вьюпорт → вертикальные. */
  .pf__mask { width: 100%; max-width: 100%; height: 640px; border-radius: 0; }
  .pf__cols { gap: 4px; }
  .pf__col:nth-child(n+3) { display: none; }   /* 2 колонки видимы */
  .pf__item { height: auto; aspect-ratio: 185.5 / 216.346; border-radius: 16px; }
  /* размеры деталей (пропорции 477:1840); по умолчанию просто фото, детали — по ТАПУ (.is-open) */
  .pf__hover { padding: 12px; }
  .pf__logo { width: 32px; top: 12px; left: 12px; }
  .pf__name { font-size: 14px; line-height: 20px; }
  .pf__tag { right: 10px; bottom: 10px; max-width: 72%; font-size: 8px; line-height: 1.2; letter-spacing: var(--ls-body); }
  .pf__item.is-open .pf__shade { background: rgba(0, 0, 0, .62); }
  .pf__item.is-open .pf__hover { opacity: 1; }
  .pf__item.is-open .pf__logo { opacity: 1; transform: none; }
  .pf__item.is-open .pf__name { transform: scale(1); }
  .pf__item.is-open .pf__tag { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pf__col { transition: none; }
}