/* =========================================================
   portfolio.css — portfolio.html (ONLY)
   Без: шапка / футер / instagram / telegram
   ========================================================= */


/* =========================================================
   1) Общий заголовок секции (если вернёшь H1-блок в portfolio.html)
   ========================================================= */
.заголовок-секции{
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 40px;
}

.линия-секции{
  width: 40px;
  height: 2px;
  background: var(--основной-цвет);
  flex-shrink: 0;
}

.название-секции{
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--основной-цвет);
}

.подзаголовок-секции{
  font-size: 14px;
  color: var(--текст-светлый);
  margin-top: -24px;
  margin-bottom: 48px;
  padding-left: 92px; /* линия + gap */
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* =========================================================
   2) PORTFOLIO — layout
   ========================================================= */
.portfolio-page{
  margin-top: 10px;
}


/* =========================================================
   3) Подзаголовки "ФОТО" / "ВИДЕО" — как заголовок (с палочкой)
   Требуемая разметка:
   <div class="portfolio-heading">
     <span class="portfolio-line"></span>
     <h2 class="portfolio-subhead">Фото</h2>
   </div>

   Для второго блока можно:
   <div class="portfolio-heading portfolio-heading--spaced">...</div>
   ========================================================= */
.portfolio-heading{
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 56px 0 28px;
}

.portfolio-heading--spaced{
  margin-top: 72px;
}

.portfolio-line{
  display: inline-block;
  width: 36px;
  height: 2px;
  background: var(--основной-цвет);
  flex: 0 0 auto;
}

.portfolio-subhead{
  margin: 0;
  font-family: inherit;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--основной-цвет);
}

@media (max-width: 680px){
  .portfolio-heading{
    margin: 44px 0 22px;
    gap: 14px;
  }

  .portfolio-heading--spaced{
    margin-top: 58px;
  }

  .portfolio-line{
    width: 28px;
  }

  .portfolio-subhead{
    font-size: 22px;
  }
}


/* =========================================================
   4) PORTFOLIO carousel — core
   ========================================================= */
.portfolio-carousel{
  --tile-h: 390px;
  --tile-w: 240px;  /* базовая ширина всех карточек */
  --gap: 26px;

  position: relative;
  width: 100%;
  margin: 0 auto;
}

.portfolio-viewport{
  overflow: hidden;
  width: 100%;
  padding: 6px 0 12px;
}

.portfolio-track{
  display: flex;
  align-items: center;
  gap: var(--gap);
  will-change: transform;
  transform: translateX(0px);
  transition: transform 700ms cubic-bezier(.18,.9,.18,1) !important;
}

.portfolio-item{
  flex: 0 0 auto;
  width: var(--tile-w);
  height: var(--tile-h);
  border-radius: 16px;
  overflow: hidden;

  /* базовый вид дальних */
  transform: scale(.78);
  opacity: .65;

  transition:
    transform 700ms cubic-bezier(.18,.9,.18,1),
    opacity 420ms ease !important;
}

/* центр */
.portfolio-item.is-active{
  transform: scale(1);
  opacity: 1;
}

/* соседи */
.portfolio-item.is-near{
  transform: scale(.94);
  opacity: .9;
}

/* вторые от центра */
.portfolio-item.is-far{
  transform: scale(.86);
  opacity: .78;
}

/* media */
.portfolio-media{
  display: block;
  width: 100%;
  height: 100%;
  position: relative; /* для play-оверлея */
}

.portfolio-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* =========================================================
   5) Video play overlay
   ========================================================= */
.portfolio-play{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.portfolio-play::before{
  content: "";
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.portfolio-play::after{
  content: "";
  position: absolute;
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 18px solid rgba(155, 123, 184, 0.85);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}


/* =========================================================
   6) Controls — arrows + dots
   ========================================================= */
.portfolio-controls{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 14px;
}

.portfolio-nav{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(155, 123, 184, 0.25);
  background: transparent;
  color: var(--основной-цвет);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.portfolio-nav:hover{
  background: rgba(155,123,184,0.06);
  border-color: rgba(155, 123, 184, 0.35);
  transform: translateY(-1px);
}

.portfolio-nav:active{
  transform: translateY(0px);
}

.portfolio-nav i{
  font-size: 18px;
}


/* =========================================================
   7) Dots — 5 visible, center always active
   В HTML внутри .portfolio-dots должен быть rail:
   <div class="portfolio-dots">
     <div class="portfolio-dots-rail"> ...точки... </div>
   </div>
   ========================================================= */
.portfolio-dots{
  position: relative;
  width: 110px; /* окно на 5 точек */
  height: 12px;
  overflow: hidden;
  display: block;
}

.portfolio-dots-rail{
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  gap: 10px;
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: transform 260ms ease;
}

.portfolio-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(155, 123, 184, 0.35);
  opacity: .75;
  flex: 0 0 auto;
  transition: transform 220ms ease, opacity 220ms ease, background 220ms ease;
}

.portfolio-dot.is-center{
  transform: scale(1.35);
  background: rgba(155, 123, 184, 0.85);
  opacity: 1;
}

.portfolio-dot.is-edge{
  opacity: .55;
}


/* =========================================================
   8) Responsive tuning
   ========================================================= */
@media (max-width: 980px){
  .portfolio-carousel{
    --tile-h: 360px;
    --tile-w: 210px;
    --gap: 18px;
  }
}

@media (max-width: 680px){
  .portfolio-carousel{
    --tile-h: 320px;
    --tile-w: 180px;
    --gap: 14px;
  }

  .portfolio-controls{
    gap: 18px;
  }

  .portfolio-nav{
    width: 46px;
    height: 46px;
  }
}

.video-modal{ position: fixed; inset: 0; display: none; z-index: 9999; }
.video-modal.is-open{ display: block; }

.video-modal__backdrop{
  position:absolute; inset:0; background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}

.video-modal__dialog{
  position:absolute; left:50%; top:50%;
  width: min(920px, calc(100vw - 28px));
  transform: translate(-50%,-50%);
  background:#000; border-radius:16px; overflow:hidden;
}

.video-modal__close{
  position:absolute; right:10px; top:8px;
  width:40px; height:40px; border:0; border-radius:999px;
  background: rgba(255,255,255,.18); color:#fff;
  font-size:26px; line-height:1; cursor:pointer; z-index:2;
}

.video-modal__frame{ width:100%; aspect-ratio: 9 / 16; }
.video-modal__frame video{ width:100%; height:100%; display:block; }