/* ===== Project Detail (pdj-*) =====
   Использует переменные вашего :root:
   --ch-bg, --ch-ink, --ch-accent, --ch-muted, --ch-surface, --ch-radius, --ch-shadow, --side-padding
*/

.pdj-projects{
  position: relative;
  background: color-mix(in oklab, var(--ch-surface) 92%, #000 8%);
  padding: 50px 0;
  color: #fff;
}

.pdj-container{
  width: 100%;
  margin-inline: auto;
  padding: 0 var(--side-padding);
}

/* Header */
.pdj-head{ text-align:center; margin-bottom: clamp(24px,3vw,40px); }
.pdj-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  color: rgba(255,255,255,.8); font-size:.95rem; margin-bottom:10px;
}
.pdj-eyebrow::before{ content:""; width:24px; height:2px; background: var(--ch-accent); border-radius:2px; }
.pdj-title{
  font-family:"Montserrat",sans-serif; font-weight:700;
  font-size: clamp(28px,3vw,42px); line-height:1.15; margin:0; color:#fff;
}
.pdj-title .accent{ color: var(--ch-accent); display:block; }

/* Card */
.pdj-card{
  display:grid;
  grid-template-columns: 1fr 1fr;
  padding: 10px;
  border-radius: var(--ch-radius);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--ch-shadow);
  margin-bottom: clamp(18px,3vw,28px);
}

/* Media */
.pdj-media{
  position: relative;
  border-radius: calc(var(--ch-radius) - 6px);
  overflow: hidden;
  min-height: 280px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--ch-surface) 78%, #000 22%) 0%,
    color-mix(in oklab, var(--ch-surface) 62%, #000 38%) 100%);
}
.pdj-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Срез угла сверху справа */
.pdj-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  -webkit-mask:
    radial-gradient(46px at top right, transparent 98%, #000 100%) top right,
    linear-gradient(#000 0 0) center/100% 100%;
  -webkit-mask-composite: destination-out;
  mask:
    radial-gradient(46px at top right, transparent 98%, #000 100%) top right,
    linear-gradient(#000 0 0) center/100% 100%;
  mask-composite: exclude;
}

/* Badges */
.pdj-badges{
  position:absolute; left:14px; bottom:14px; z-index:4;
  display:flex; gap:10px; flex-wrap:wrap;
}
.pdj-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px;
  background:transparent; color:#ffffff; border:1px solid #ffffff;
  font-weight:500; font-size:.85rem; backdrop-filter: blur(6px);
}

/* Content */
.pdj-content{ display:flex; flex-direction:column; justify-content:center; padding: 20px; }
.pdj-lead{ margin:0; color: rgba(255,255,255,.85); font-size:1rem; line-height:1.55; }

/* Meta */
.pdj-meta{ list-style:none; padding:0; margin:35px 0; display:grid; gap:12px; }
.pdj-meta li{ display:flex; align-items:center; gap:12px; font-weight:500; color:#fff; }
.pdj-meta li span strong{ font-weight:600; color: var(--ch-accent); }

/* Icon */
.pdj-ico{
  width:34px; height:34px; border-radius:50%;
  background: var(--ch-accent); color:#fff;
  display:grid; place-items:center; flex:0 0 34px;
  box-shadow: 0 8px 18px rgba(250,158,0,.25);
}
.pdj-ico i{ font-size:16px; line-height:1; }

/* Link button */
.pdj-link{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 16px; border-radius:999px; background: var(--ch-accent);
  color:#fff; font-weight:600; text-decoration:none;
  box-shadow: 0 10px 24px rgba(250,158,0,.25);
  transition: transform .15s ease, filter .2s ease;
  width:100%; max-width: 240px;
}
.pdj-link:hover{ transform: translateY(-1px); opacity:1; }

/* Swiper container fits media */
.pdj-swiper{ height:100%; }
.pdj-swiper .swiper-wrapper,
.pdj-swiper .swiper-slide{ height:100%; }
.pdj-swiper .swiper-slide img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Nav & pagination over image (under badges) */
.pdj-media .swiper-button-next,
.pdj-media .swiper-button-prev{
  --btn-bg: color-mix(in oklab, var(--ch-ink) 25%, transparent 75%);
  width:36px; height:36px; border-radius:999px;
  background: var(--btn-bg);
  backdrop-filter: blur(2px);
  box-shadow: var(--ch-shadow);
}
.pdj-media .swiper-button-next:after,
.pdj-media .swiper-button-prev:after{ font-size:16px; color:#fff; }
.pdj-media .swiper-button-next,
.pdj-media .swiper-button-prev{ z-index:3; }

.pdj-media .swiper-pagination{
  z-index:3;
  --dot: color-mix(in oklab, var(--ch-surface) 30%, #fff 70%);
  --dot-active:#fff;
  text-align:right; padding-right:12px; padding-bottom:12px;
}
.pdj-media .swiper-pagination .swiper-pagination-bullet{
  background: var(--dot); opacity:.8;
}
.pdj-media .swiper-pagination .swiper-pagination-bullet-active{
  background: var(--dot-active); opacity:1;
}

/* Responsive */
@media (max-width: 576px){
  .pdj-media .swiper-button-next,
  .pdj-media .swiper-button-prev{ width:30px; height:30px; }
  .pdj-media .swiper-button-next:after,
  .pdj-media .swiper-button-prev:after{ font-size:14px; }
}
@media (max-width: 991px){
  .pdj-card{ grid-template-columns: 1fr; }
  .pdj-media{ min-height: 220px; }
}

/* Optional: rich text inside detail body */
.richtext p{ margin:0 0 1em; color:#fff; opacity:.9; }
.richtext h2, .richtext h3{ color:#fff; margin:1em 0 .5em; }
.richtext a{ color:#fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); }












/* ===== Inline Masonry Gallery ===== */
.pdj-gallery{
  padding: clamp(18px, 3vw, 28px) 0 clamp(30px, 5vw, 60px);
}
.pdj-gallery-head{
  margin: 0 0 14px;
}
.pdj-gallery-title{
  margin: 0 0 4px;
  font: 700 clamp(18px, 2.2vw, 28px)/1.2 "Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color: var(--ch-ink);
}
.pdj-gallery-sub{
  margin: 0;
  color: var(--ch-muted);
}

/* контейнер с прокруткой страницы, а не внутренней области */
.pdj-gallery-shell{ position: relative; }

/* Masonry via CSS columns — быстрый, без зависимостей */
.pdj-masonry{
  column-gap: 14px;
  column-count: 1;
}
@media (min-width: 560px){ .pdj-masonry{ column-count: 2; } }
@media (min-width: 900px){ .pdj-masonry{ column-count: 3; } }
@media (min-width: 1280px){ .pdj-masonry{ column-count: 4; } }

/* Плитка */
.pdj-tile{
  break-inside: avoid;
  margin: 0 0 14px;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: #111;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  cursor: zoom-in;
}
.pdj-tile img{
  width: 100%;
  height: auto;
  display: block;
}

/* Скелетон до загрузки */
.pdj-tile[data-loading="1"]{
  background: linear-gradient(90deg, #1a1a1a 0, #222 40%, #1a1a1a 80%);
  background-size: 200% 100%;
  animation: pdj-skeleton 1.1s infinite linear;
}
@keyframes pdj-skeleton{
  0% { background-position: 0 0; }
  100% { background-position: -200% 0; }
}

/* Фоллбек-кнопка подгрузки */
.pdj-gallery-more{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ch-accent);
  color: #fff;
  font-weight: 700;
  border: 0;
  box-shadow: 0 10px 24px rgba(250,158,0,.25);
  margin: 12px auto 0;
}
.pdj-gallery-more[hidden]{ display: none !important; }

/* Сентинел */
#pdjMasonrySentinel{ height: 1px; }

/* ===== Lightbox ===== */
.pdj-lightbox{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}
.pdj-lightbox.is-open{ display: block; }
.pdj-lightbox-backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(2px);
}
.pdj-lightbox-dialog{
  position: absolute;
  inset: 4% 3%;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  align-items: center;
}
.pdj-lightbox-close{
  position: absolute;
  top: 10px; right: 10px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.15);
  color: #fff; cursor: pointer;
}
.pdj-lightbox-nav{
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.12);
  color: #fff; font-size: 28px;
  display: grid; place-items: center;
}
.pdj-lightbox-nav.prev{ grid-column: 1; grid-row: 2; }
.pdj-lightbox-nav.next{ grid-column: 3; grid-row: 2; }

.pdj-lightbox-figure{
  grid-column: 2; grid-row: 2;
  margin: 0; padding: 0;
  display: grid; place-items: center;
  max-width: 100%; max-height: 100%;
}
.pdj-lightbox-figure img{
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 10px;
  background: #000;
}
.pdj-lightbox-figure figcaption{
  grid-column: 2; grid-row: 3;
  color: #fff; text-align: center;
  margin-top: 6px;
  opacity: .9;
  max-width: 90vw;
  justify-self: center;
}

@media (max-width: 640px){
  .pdj-lightbox-dialog{
    inset: 0;
    grid-template-columns: 40px 1fr 40px;
  }
  .pdj-lightbox-figure img{ max-height: 75vh; }
}






/* Полотно изображений (простая и быстрая реализация masonry через CSS columns) */
.pdj-masonry{
  column-count: 3;
  column-gap: 15px;       /* расстояние между колонками */
  padding: var(--side-padding);
  background-color: #fff;
}

.pdj-masonry-item{
  break-inside: avoid;
  display: block;
  margin-bottom: 15px;    /* одинаковый отступ снизу */
  transition: transform .2s ease-in-out;
}

.pdj-masonry-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(250,158,0,.45);
}

.pdj-masonry-item img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 2px solid var(--ch-accent);
}







/* === Full-bleed Video (вписывается в общий стиль .pdj-projects) === */

.pdj-video{
  position: relative;
  width: 100vw;                 /* full-bleed */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  box-shadow: var(--ch-shadow);

}

.pdj-video__inner{
  max-width: 1800px;            /* чтобы не растягивалось слишком */
  margin: 0 auto;
  padding: clamp(10px, 2vw, 16px) var(--side-padding);
}

/* Универсальный контейнер (iframe или video всегда на всю ширину) */
.pdj-video__el,
.pdj-video__iframe{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--ch-surface) 78%, #000 22%) 0%,
    color-mix(in oklab, var(--ch-surface) 62%, #000 38%) 100%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: calc(var(--ch-radius) + 6px);
  overflow: hidden;
  box-shadow: var(--ch-shadow);
}

/* Ковер с постером и кнопкой Play для YouTube/Vimeo */
.pdj-video__cover{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--ch-radius) + 6px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--ch-shadow);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--ch-surface) 78%, #000 22%) 0%,
    color-mix(in oklab, var(--ch-surface) 62%, #000 38%) 100%);
  cursor: pointer;
  isolation: isolate; /* для корректных blend/filters поверх */
}

.pdj-video__poster{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.02) contrast(1.02);
  transition: transform .35s ease, filter .35s ease;
}

.pdj-video__cover:hover .pdj-video__poster{
  transform: scale(1.01);
  filter: saturate(1.06) contrast(1.06);
}

/* Кнопка Play в центре */
.pdj-video__play{
  position: absolute;
  cursor: pointer;
  inset: 0;
  margin: auto;
  width: clamp(64px, 9vw, 110px);
  height: clamp(64px, 9vw, 110px);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.18) 0, rgba(255,255,255,.10) 100%),
    color-mix(in oklab, var(--ch-ink) 25%, transparent 75%);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  z-index: 2;
}

.pdj-video__play span{
  display: inline-block;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1;
  color: #fff;
  transform: translateX(1px);
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

/* Пульсирующее кольцо */
.pdj-video__play::after{
  content:"";
  position:absolute;
  inset:-10px;           /* радиус кольца больше круга */
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 999px;
  animation: ch-pulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes ch-pulse{
  0%   { transform: scale(1);   opacity:.85; }
  70%  { transform: scale(1.6); opacity: 0;  }
  100% { opacity: 0; }
}/* Пульсирующее кольцо */
.pdj-video__play::after{
  content:"";
  position:absolute;
  inset:-10px;           /* радиус кольца больше круга */
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 999px;
  animation: ch-pulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes ch-pulse{
  0%   { transform: scale(1);   opacity:.85; }
  70%  { transform: scale(1.6); opacity: 0;  }
  100% { opacity: 0; }
}

.pdj-video__cover:hover .pdj-video__play{
  transform: scale(1.045);
  border-color: rgba(255,255,255,.30);
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.24) 0, rgba(255,255,255,.14) 100%),
    color-mix(in oklab, var(--ch-ink) 22%, transparent 78%);
}

/* Акцентная «подсветка» бордера при фокусе клавиатурой */
.pdj-video__cover:focus-visible .pdj-video__play,
.pdj-video__play:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--ch-accent) 60%, #fff 40%),
    0 10px 24px rgba(0,0,0,.35);
}

/* Контейнер, куда подставляется iframe после клика */
.pdj-video__player{
  width: 100%;
  margin: 0 auto;
}

/* Срез угла (как у .pdj-media), ненавязчиво */
.pdj-video__cover::after,
.pdj-video__el::after,
.pdj-video__iframe::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  -webkit-mask:
    radial-gradient(46px at top right, transparent 98%, #000 100%) top right,
    linear-gradient(#000 0 0) center/100% 100%;
  -webkit-mask-composite: destination-out;
  mask:
    radial-gradient(46px at top right, transparent 98%, #000 100%) top right,
    linear-gradient(#000 0 0) center/100% 100%;
  mask-composite: exclude;
}

/* Поддержка системной «reduce motion» */
@media (prefers-reduced-motion: reduce){
  .pdj-video__poster{ transition: none; }
  .pdj-video__play{ transition: none; }
}

/* Мобильные правки */
@media (max-width: 991px){
  .pdj-video__inner{ padding: clamp(8px, 2.5vw, 14px) var(--side-padding); }
}
@media (max-width: 576px){
  .pdj-video__play{
    width: clamp(56px, 12vw, 78px);
    height: clamp(56px, 12vw, 78px);
  }
}



/* Адаптив */
@media (max-width: 1200px){
  .pdj-masonry{ column-count: 3; }
}
@media (max-width: 992px){
  .pdj-masonry{ column-count: 2; }
}
@media (max-width: 576px){
  .pdj-masonry{ column-count: 1; }
}