/* ===== Projects Page (prefixed pjs-) =====
   используют ваши корневые переменные:
   --ch-bg, --ch-ink, --ch-accent, --ch-muted, --ch-surface, --ch-radius, --ch-shadow
*/
.pjs-projects{
  position: relative;
  background: rgba(238, 252, 255, 1);
  padding: 50px 0;
  color: #fff;
}
.pjs-container{ width:100%; margin-inline:auto; padding:0 var(--side-padding); }

/* Заголовок */
.pjs-head{ text-align:center; margin-bottom: clamp(24px,3vw,40px); }
.pjs-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  color: var(--ch-muted); font-size:.95rem; margin-bottom:10px;
}
.pjs-eyebrow::before{ content:""; width:24px; height:2px; background: var(--ch-accent); border-radius:2px; }
.pjs-title{
  font-family:"Montserrat",sans-serif; font-weight:700;
  font-size: clamp(28px,3vw,42px); line-height:1.15; margin:0; color:var(--ch-ink);
}
.pjs-title .accent{ color: var(--ch-accent); }

/* Карта проекта */
.pjs-card{
  display:grid;
  grid-template-columns: 1fr 1fr;
  padding: 10px;
  border-radius: var(--ch-radius);
  background: rgba(255,255,255,.67);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--ch-shadow);
  margin-bottom: 40px;
}
.pjs-card.is-reverse{ grid-auto-flow: dense; }
.pjs-card.is-reverse .pjs-media{ order: 2; }
.pjs-card.is-reverse .pjs-content{ order: 1; }

/* Медиа */
.pjs-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%);
}
.pjs-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Срез угла */
.pjs-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;
}

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

/* Контент */
.pjs-content{ display:flex; flex-direction:column; justify-content:center; padding:20px; }
.pjs-name{ margin:0 0 8px; font-size: clamp(18px,2vw,26px); font-weight:600; color:var(--ch-surface); }
.pjs-lead{ margin:0; color: var(--ch-muted); font-size:1rem; line-height:1.55; }

/* Метаданные */
.pjs-meta{ list-style:none; padding:0; margin:35px 0; display:grid; gap:12px; }
.pjs-meta li{ display:flex; align-items:center; gap:12px; font-weight:400; color:var(--ch-muted); }
.pjs-meta li span strong{ font-weight:600; color:var(--ch-accent);}

/* Иконки */
.pjs-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);
}
.pjs-ico i{ font-size:16px; line-height:1; }

/* Ссылки */
.pjs-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:215px;
}
.pjs-link:hover{ transform: translateY(-1px); opacity:1; }

/* Footer CTA */
.pjs-footer{ display:flex; justify-content:center; margin-top:50px; }
.pjs-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px; 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;
}
.pjs-cta:hover{ transform: translateY(-1px); filter: brightness(.95); }

/* Swiper контейнер */
.pjs-swiper{ height:100%; }
.pjs-swiper .swiper-wrapper,
.pjs-swiper .swiper-slide{ height:100%; }
.pjs-swiper .swiper-slide img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Навигация/пагинация */
.pjs-media .swiper-button-next,
.pjs-media .swiper-button-prev{
  --btn-bg: color-mix(in oklab, var(--ch-ink) 100%, transparent 50%);
  width:36px; height:36px; border-radius:999px;
  background: var(--btn-bg); backdrop-filter: blur(2px);
  box-shadow: var(--ch-shadow); z-index:3;
}
.pjs-media .swiper-button-next:after,
.pjs-media .swiper-button-prev:after{ font-size:16px; color:#fff; }

.pjs-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;
}
.pjs-media .swiper-pagination .swiper-pagination-bullet{ background: var(--dot); opacity:.8; }
.pjs-media .swiper-pagination .swiper-pagination-bullet-active{ background: var(--dot-active); opacity:1; }

/* Мобилка */
@media (max-width:576px){
  .pjs-media .swiper-button-next,
  .pjs-media .swiper-button-prev{ width:30px; height:30px; }
  .pjs-media .swiper-button-next:after,
  .pjs-media .swiper-button-prev:after{ font-size:14px; }
}

/* Адаптив */
@media (max-width:991px){
  .pjs-card{ grid-template-columns:1fr; }
  .pjs-card.is-reverse .pjs-media{ order:0; }
  .pjs-media{ min-height:220px; }
}