/* =========================================================
   Portfolio — alternative "Ваши мечты" page
   ========================================================= */
.pf-page{ padding: 150px 5vw 110px; max-width: 1560px; margin: 0 auto; }

/* ---------- intro ---------- */
.pf-intro{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 20px 70px; align-items:end;
  margin-bottom: 64px;
}
.pf-eyebrow{
  grid-column: 1 / -1;
  text-transform:uppercase; letter-spacing: 4px; font-size: .78rem; color: var(--gold-pale);
}
.pf-title{
  font-family: var(--f-display); font-style:italic; font-weight:500;
  font-size: clamp(2.8rem, 6.4vw, 5.8rem); line-height: .98; color: var(--ink);
}
.pf-lead{ color: var(--ink-dim); font-size: 1.05rem; line-height: 1.8; max-width: 560px; }

.pf-stats{
  grid-column: 1 / -1;
  display:flex; flex-wrap:wrap; gap: 14px 56px;
  margin-top: 22px; padding-top: 30px; border-top: 1px solid var(--line-strong);
}
.pf-stat{ display:flex; align-items:baseline; gap: 12px; }
.pf-stat-value{
  font-family: var(--f-display); font-style:italic; font-weight:500;
  font-size: 2.8rem; line-height: 1; color: var(--gold);
}
.pf-stat-label{ text-transform:uppercase; letter-spacing: 2px; font-size: .76rem; color: var(--ink-dim); }

.pf-filters{ grid-column: 1 / -1; display:flex; flex-wrap:wrap; gap: 10px; margin-top: 8px; }
.pf-filter{
  padding: 11px 24px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  font-family: var(--f-body); font-size: .8rem; font-weight: 600;
  text-transform:uppercase; letter-spacing: 1.5px; cursor:pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pf-filter:hover{ border-color: var(--gold); color: var(--gold-pale); }
.pf-filter.active{ background: var(--ink); border-color: var(--ink); color: #FBF6EC; }

/* ---------- grid of cards ---------- */
.pf-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.pf-grid-featured .pf-card:first-child{ grid-column: span 2; grid-row: span 2; }
.pf-grid-featured .pf-card:first-child .pf-card-media{ aspect-ratio: auto; flex: 1; min-height: 420px; }
.pf-grid-featured .pf-card:first-child .pf-card-title{ font-size: clamp(1.6rem, 2.4vw, 2.2rem); }

.pf-card{
  display:flex; flex-direction:column;
  padding:0; border:none; background:none; text-align:left; cursor:pointer;
  font-family: inherit; color: inherit;
  opacity:0; transform: translateY(24px);
  animation: pf-rise .7s var(--ease) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes pf-rise{ to{ opacity:1; transform:none; } }

.pf-card-media{
  position:relative; display:block; overflow:hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-deep);
}
.pf-card-img{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  transition: opacity .7s var(--ease), transform 1.2s var(--ease);
}
.pf-card-before{ opacity:0; }
.pf-card:hover .pf-card-img{ transform: scale(1.05); }
.pf-card:hover .pf-card-before{ opacity:1; }

/* "Реальность → Проект" chip that swaps on hover */
.pf-card-hint{
  position:absolute; left: 16px; bottom: 16px; z-index:1;
  display:grid; overflow:hidden; height: 30px;
  padding: 0 14px; border-radius: 999px;
  background: rgba(20,20,22,.55); backdrop-filter: blur(6px);
  color: #FBF6EC; font-size: .7rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
}
.pf-card-hint span{ line-height: 30px; grid-area: 1 / 1; transition: transform .5s var(--ease); }
.pf-card-hint span + span{ transform: translateY(100%); color: var(--gold-photo); }
.pf-card:hover .pf-card-hint span:first-child{ transform: translateY(-100%); }
.pf-card:hover .pf-card-hint span + span{ transform: none; }

.pf-card-info{
  display:grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items:start;
  padding: 18px 2px 4px;
  border-bottom: 1px solid var(--line);
  transition: border-color .4s var(--ease);
}
.pf-card:hover .pf-card-info{ border-color: var(--gold); }
.pf-card-num{
  font-family: var(--f-display); font-style:italic; font-size: 1.1rem; color: var(--gold); padding-top: 2px;
}
.pf-card-text{ display:flex; flex-direction:column; gap: 6px; padding-bottom: 14px; }
.pf-card-cat{ text-transform:uppercase; letter-spacing: 2px; font-size: .7rem; color: var(--ink-dim); }
.pf-card-title{
  font-family: var(--f-display); font-style:italic; font-weight:500;
  font-size: 1.35rem; line-height: 1.25; color: var(--ink);
}
.pf-card-arrow{
  font-size: 1.3rem; color: var(--gold-pale);
  transform: translateX(-6px); opacity: 0;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.pf-card:hover .pf-card-arrow{ transform:none; opacity:1; }
.pf-card:focus-visible{ outline: 2px solid var(--gold); outline-offset: 6px; }

/* ---------- "how a project looks" + CTA ---------- */
.pf-album{
  display:grid; grid-template-columns: 360px 1fr; gap: 60px; align-items:center;
  margin-top: 110px; padding: 56px; background: var(--bg-deep);
}
.pf-album video{ width:100%; aspect-ratio: 464 / 848; object-fit: cover; background:#1A1A1C; }
.pf-album h2{
  font-family: var(--f-display); font-style:italic; font-weight:500;
  font-size: clamp(1.8rem, 3vw, 2.6rem); line-height:1.15; color: var(--ink); margin: 10px 0 18px;
}
.pf-album p{ color: var(--ink-dim); font-size: 1.05rem; line-height: 1.8; max-width: 560px; }

.pf-cta{ margin-top: 110px; text-align:center; }
.pf-cta-text{
  font-family: var(--f-display); font-style:italic; font-weight:500;
  font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--ink); margin-bottom: 28px;
}

/* ---------- full-screen case view ---------- */
.pf-case{
  position:fixed; inset:0; z-index: 2500;
  display:flex; flex-direction:column;
  background: var(--bg);
  opacity:0; transform: translateY(30px);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.pf-case.open{ opacity:1; transform:none; }
.pf-case-bar{
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
  height: 68px; padding: 0 4vw; flex-shrink:0;
  border-bottom: 1px solid var(--line);
  background: rgba(246,241,231,.94); backdrop-filter: blur(10px);
}
.pf-case-back{
  border:none; background:none; cursor:pointer; padding: 8px 0;
  font-family: var(--f-body); font-size: .82rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink);
}
.pf-case-back:hover{ color: var(--gold-pale); }
.pf-case-counter{ font-family: var(--f-display); font-style:italic; color: var(--ink-dim); }
.pf-case-nav{ display:flex; gap: 8px; }
.pf-case-nav button{
  width: 40px; height: 40px; border-radius:50%; cursor:pointer;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font-size: 1.4rem; line-height: 1;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.pf-case-nav button:hover{ background: var(--gold); border-color: var(--gold); color:#fff; }
.pf-case-scroll{ flex:1; overflow-y:auto; overscroll-behavior: contain; }

/* before/after comparison with a draggable divider */
.pf-compare{
  --split: 50%;
  position:relative; overflow:hidden;
  height: min(76vh, 820px); min-height: 320px;
  background: #1A1A1C;
  user-select:none;
}
.pf-compare-layer{
  position:absolute; inset:0; overflow:hidden;
  background: var(--img) var(--pos, center) / cover no-repeat;
}
.pf-compare-before{ clip-path: inset(0 calc(100% - var(--split)) 0 0); }
/* small photos: show whole over a blurred copy */
.pf-compare-layer.pf-contain{ background: none; }
.pf-compare-layer.pf-contain::before,
.pf-compare-layer.pf-contain::after{ content:''; position:absolute; }
.pf-compare-layer.pf-contain::before{ inset:-40px; background: var(--img) center / cover no-repeat; filter: blur(28px) brightness(.65); }
.pf-compare-layer.pf-contain::after{ inset:0; background: var(--img) var(--pos, center) / contain no-repeat; }

.pf-compare-handle{
  position:absolute; top:0; bottom:0; left: var(--split); z-index:2;
  width: 2px; margin-left: -1px; background: #FBF6EC; pointer-events:none;
  box-shadow: 0 0 18px rgba(0,0,0,.35);
}
.pf-compare-handle span{
  position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius:50%;
  background: var(--gold); box-shadow: 0 10px 26px rgba(0,0,0,.3);
}
.pf-compare-handle span::before,
.pf-compare-handle span::after{
  content:''; position:absolute; top:50%; transform: translateY(-50%);
  border-style: solid; border-color: transparent;
}
.pf-compare-handle span::before{ left: 11px; border-width: 7px 9px 7px 0; border-right-color:#fff; }
.pf-compare-handle span::after{ right: 11px; border-width: 7px 0 7px 9px; border-left-color:#fff; }
.pf-compare-range{
  position:absolute; inset:0; z-index:3; width:100%; height:100%;
  margin:0; opacity:0; cursor: ew-resize;
}
.pf-compare-label{
  position:absolute; top: 22px; z-index:2;
  padding: 8px 18px; border-radius: 999px;
  font-size: .74rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  pointer-events:none;
}
.pf-label-before{ left: 22px; background: rgba(20,20,22,.55); color:#FBF6EC; backdrop-filter: blur(6px); }
.pf-label-after{ right: 22px; background: var(--gold-photo); color:#1A1A1C; }
.pf-no-labels .pf-compare-label{ display:none; }

.pf-case-body{ max-width: 1240px; margin: 0 auto; padding: 60px 5vw 90px; }
.pf-case-head{
  display:grid; grid-template-columns: 1fr auto; gap: 14px 50px; align-items:end;
  padding-bottom: 34px; border-bottom: 1px solid var(--line-strong);
}
.pf-case-cat{ grid-column: 1 / -1; text-transform:uppercase; letter-spacing: 3px; font-size: .74rem; color: var(--gold-pale); }
.pf-case-title{
  font-family: var(--f-display); font-style:italic; font-weight:500;
  font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.08; color: var(--ink);
}
.pf-case-facts{ display:flex; flex-wrap:wrap; gap: 14px 40px; }
.pf-case-facts dt{ text-transform:uppercase; letter-spacing: 2px; font-size: .68rem; color: var(--gold-pale); margin-bottom: 4px; }
.pf-case-facts dd{ font-family: var(--f-display); font-style:italic; font-size: 1.25rem; color: var(--ink); }

.pf-case-text{ max-width: 760px; margin: 44px 0 56px; }
.pf-case-text p{ color: var(--ink-dim); font-size: 1.05rem; line-height: 1.85; margin-bottom: 18px; }
.pf-case-text p.pf-case-lead{
  font-family: var(--f-display); font-style:italic; font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.6; color: var(--ink);
}

.pf-case-gallery{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pf-tile{
  position:relative; aspect-ratio: 4 / 3; overflow:hidden;
  padding:0; border:none; background: var(--bg-deep); cursor: zoom-in;
}
.pf-tile img, .pf-tile video{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s var(--ease); }
.pf-tile video{ pointer-events:none; }
.pf-tile:hover img, .pf-tile:hover video{ transform: scale(1.05); }
.pf-tile-video .video-play{ position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); width: 52px; height: 52px; }

.pf-case-next{
  display:flex; flex-direction:column; gap: 8px; width:100%;
  margin-top: 70px; padding: 36px 0 0;
  border:none; border-top: 1px solid var(--line-strong); background:none; text-align:left; cursor:pointer;
}
.pf-case-next span{ text-transform:uppercase; letter-spacing: 3px; font-size: .74rem; color: var(--gold-pale); }
.pf-case-next strong{
  font-family: var(--f-display); font-style:italic; font-weight:500;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem); color: var(--ink); transition: color .3s var(--ease);
}
.pf-case-next:hover strong{ color: var(--gold-pale); }

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .pf-grid{ grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 860px){
  .pf-page{ padding: 120px 6vw 80px; }
  .pf-intro{ grid-template-columns: 1fr; margin-bottom: 44px; }
  .pf-stat-value{ font-size: 2.2rem; }
  .pf-stats{ gap: 12px 30px; }
  .pf-filter{ padding: 9px 16px; font-size: .7rem; }
  .pf-grid{ grid-template-columns: 1fr; gap: 26px; }
  .pf-grid-featured .pf-card:first-child{ grid-column: auto; grid-row: auto; }
  .pf-grid-featured .pf-card:first-child .pf-card-media{ aspect-ratio: 4 / 3; min-height: 0; }
  .pf-card-arrow{ opacity:1; transform:none; }
  .pf-album{ grid-template-columns: 1fr; gap: 28px; padding: 30px 22px; margin-top: 70px; }
  .pf-album video{ max-width: 260px; }
  .pf-compare{ height: 62vh; }
  .pf-compare-handle span{ width: 44px; height: 44px; }
  .pf-case-head{ grid-template-columns: 1fr; }
  .pf-case-bar{ height: 60px; }
  .pf-case-gallery{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
.pf-case[hidden]{ display:none; }
.pf-filters{ margin-top: 26px; padding-top: 30px; border-top: 1px solid var(--line-strong); }

/* a project presented by a video instead of the before/after comparison */
.pf-case-video{
  display:flex; align-items:center; justify-content:center;
  height: min(76vh, 820px); min-height: 320px; background: #1A1A1C;
}
.pf-case-video[hidden]{ display:none; }
.pf-case-video video{ max-width: 100%; max-height: 100%; height: 100%; }

/* ---------- подборка визуализаций: лента с горизонтальной прокруткой ---------- */
.pf-gallery-strip{
  display:flex; grid-template-columns:none;
  gap: 14px; overflow-x:auto; overflow-y:hidden;
  padding-bottom: 16px;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--gold) var(--bg-deep);
  scrollbar-width: thin;
}
.pf-gallery-strip .pf-tile{
  flex: 0 0 auto; width: clamp(260px, 32vw, 420px);
  scroll-snap-align: start;
}
.pf-gallery-strip::-webkit-scrollbar{ height: 6px; }
.pf-gallery-strip::-webkit-scrollbar-track{ background: var(--bg-deep); }
.pf-gallery-strip::-webkit-scrollbar-thumb{ background: var(--gold); }
@media (max-width: 860px){
  .pf-gallery-strip{ gap: 10px; }
  .pf-gallery-strip .pf-tile{ width: 76vw; }
}