/* Страницы кейсов: список «Все проекты» (cases.html) и страница проекта (cases/<slug>.html).
   Макет Figma mOGbp04qcw827mSwcJ1TF0: список — 246:7058, проект — 220:5545. Страницы собирает portfolio/_сборка/gen_pages.py */
:root { --cs-line: #E0E5FF; --cs-soft: #EFF4FF; --cs-ink: #050912; --cs-text: #111111; --cs-muted: rgba(5, 9, 18, 0.6); }

/* ---------- общее: хлебные крошки и заголовок ---------- */
.cpg { padding-top: 48px; }
.cpg__crumbs { display: flex; align-items: center; gap: 12px; font: 500 16px/19px var(--f-inter); color: var(--blue); }
.cpg__crumbs a { color: var(--blue); }
.cpg__crumbs a:hover { text-decoration: underline; }
.cpg__back { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 5px; background: var(--cs-soft); border: 1px solid var(--cs-line); color: var(--blue); }
.cpg__back svg { width: 20px; height: 20px; }
.cpg__h1 { margin-top: 14px; font: 600 36px/44px var(--f-inter); color: var(--cs-ink); }

/* ---------- список: фильтры ---------- */
.cpg__filters { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.cpg__filter {
  padding: 11px 10px; min-width: 60px; border-radius: 6px; border: 1px solid rgba(5, 9, 18, 0.1); background: #fff;
  font: 400 14px/17px var(--f-inter); color: var(--cs-ink); transition: border-color var(--t-fast), color var(--t-fast);
}
.cpg__filter:hover { border-color: var(--blue); color: var(--blue); }
.cpg__filter.is-on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }

/* ---------- список: карточки 628×290, по две в ряд ---------- */
.cpg__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; margin-top: 48px; }
.pcase {
  position: relative; display: block; height: 290px; overflow: hidden;
  background: #fff; border: 1px solid var(--cs-line); border-radius: 15px;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.pcase:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -20px rgba(46, 84, 200, 0.45); }
.pcase__media { position: absolute; left: 0; top: 0; right: 0; height: 155px; background: #C0C0C0; overflow: hidden; }
.pcase__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med) var(--ease-out); }
.pcase:hover .pcase__media img { transform: scale(1.03); }
.pcase__media.is-logo { background: #fff; border-bottom: 1px solid var(--cs-line); }
.pcase__media.is-logo img { object-fit: contain; padding: 22px 30%; }
.pcase__tag { position: absolute; left: 14px; top: 119px; padding: 4px 6px; border-radius: 6px; background: var(--blue); font: 400 14px/17px var(--f-inter); color: #fff; white-space: nowrap; }
.pcase__city { position: absolute; right: 14px; top: 14px; padding: 4px 8px; border-radius: 6px; background: rgba(14, 22, 60, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 500 12px/16px var(--f-inter); color: #fff; }
.pcase__text { position: absolute; left: 27px; top: 169px; width: calc(100% - 63px); display: flex; flex-direction: column; gap: 8px; }
.pcase__title { font: 600 18px/25px var(--f-mont); color: #050608; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcase__desc { font: 400 14px/20px var(--f-mont); color: rgba(5, 6, 8, 0.6); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.pcase__link { display: inline-flex; align-items: center; gap: 4px; font: 400 14px/17px var(--f-inter); color: var(--blue); }
.pcase__link svg { width: 20px; height: 20px; transition: transform var(--t-fast) var(--ease-out); }
.pcase:hover .pcase__link svg { transform: translateX(3px); }
.cpg__empty { margin-top: 48px; font: 400 16px/25px var(--f-inter); color: var(--cs-muted); }

/* ---------- список: пагинация ---------- */
.cpg__pager { display: flex; justify-content: center; gap: 14px; margin: 48px 0 0; }
.cpg__pager[hidden] { display: none; }
.cpg__pg {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 6px;
  background: var(--cs-soft); border: 1px solid var(--cs-line); font: 400 14px/17px var(--f-inter); color: var(--cs-ink);
  transition: border-color var(--t-fast);
}
.cpg__pg:hover:not(:disabled) { border-color: var(--blue); }
.cpg__pg.is-on, .cpg__pg--next { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.cpg__pg--prev { background: transparent; border: 2px solid var(--blue); color: var(--blue); }
.cpg__pg svg { width: 20px; height: 20px; }
.cpg__pg:disabled { opacity: 0.4; cursor: default; }
.cpg__pg--dots { pointer-events: none; }

/* ---------- страница проекта ---------- */
.cpj__meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.cpj__chips { display: flex; gap: 14px; flex-wrap: wrap; }
.cpj__chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 10px 10px; border-radius: 6px;
  background: var(--cs-soft); border: 1px solid var(--cs-line); font: 400 14px/20px var(--f-inter); color: var(--blue);
}
.cpj__chip b { font-weight: 700; }
.cpj__chip img { width: 24px; height: 24px; margin: -2px 0; }
.cpj__chip--tags { background: #fff; border-color: var(--blue); }
.cpj__line { height: 0; border: 0; border-top: 1px solid var(--cs-line); margin: 14px 0; }
.cpj__h2 { font: 600 22px/35px var(--f-mont); color: var(--cs-ink); }
.cpj__p { margin-top: 14px; font: 500 18px/35px var(--f-mont); color: var(--cs-text); }
.cpj__p + .cpj__p { margin-top: 35px; }
.cpj__list { margin: 14px 0 0 24px; display: grid; gap: 4px; list-style: disc; font: 500 18px/35px var(--f-mont); color: var(--cs-text); }
.cpj__list li::marker { color: var(--blue); }

/* клиент · компания · технологии */
.cpj__who { display: flex; gap: 41px; }
.cpj__col { width: 399px; min-height: 112px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--cs-line); }
.cpj__col:last-child { border-right: 0; }
.cpj__col-h { font: 600 18px/35px var(--f-mont); color: var(--cs-ink); }
.cpj__person { display: flex; align-items: center; gap: 14px; }
.cpj__ava { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: #fff; border: 1px solid var(--cs-line); font: 600 18px/1 var(--f-mont); color: #fff; }
.cpj__ava img { width: 70%; height: 70%; object-fit: contain; }
.cpj__name { font: 600 18px/25px var(--f-inter); color: var(--cs-ink); }
.cpj__role { font: 400 16px/25px var(--f-inter); color: var(--cs-muted); }
.cpj__tech { display: flex; gap: 14px; flex-wrap: wrap; }
.cpj__tech img { width: 48px; height: 48px; padding: 9px; border-radius: 12px; background: var(--cs-soft); border: 1px solid var(--cs-line); }

/* решение + картинка, функции + картинка */
.cpj__split { display: grid; grid-template-columns: minmax(0, 908px) minmax(0, 1fr); gap: 40px; align-items: start; }
.cpj__split--rev { grid-template-columns: minmax(0, 400px) minmax(0, 819px); justify-content: space-between; }
.cpj__shot { border-radius: 20px; overflow: hidden; border: 1px solid var(--cs-line); box-shadow: -10px 16px 25px rgba(0, 0, 0, 0.15); background: #fff; }
.cpj__shot img { display: block; width: 100%; height: auto; }
.cpj__shot.is-logo { display: grid; place-items: center; aspect-ratio: 1; padding: 20%; background: linear-gradient(135deg, #FFFFFF 0%, #EFF4FF 100%); box-shadow: 15px 15px 25px rgba(0, 0, 0, 0.08); }
.cpj__shot.is-dark, .cpj__ava.is-dark { background: #2B2B2B; }
.cpj__shot.is-logo img { width: 100%; height: 100%; object-fit: contain; }
.cpj__wide { margin-top: 48px; border-radius: 20px; overflow: hidden; border: 2px solid var(--cs-line); box-shadow: 0 8px 24px rgba(18, 22, 26, 0.1); }
.cpj__wide img { display: block; width: 100%; height: auto; }

/* отзыв */
.cpj__quote { margin-top: 14px; padding: 24px 28px; border-radius: 15px; background: var(--cs-soft); border: 1px solid var(--cs-line); }
.cpj__quote p { font: 500 18px/32px var(--f-mont); color: var(--cs-text); }
.cpj__quote cite { display: block; margin-top: 10px; font: 600 16px/25px var(--f-inter); font-style: normal; color: var(--cs-muted); }

/* благодарим за просмотр */
.cpj__thanks { margin-top: 48px; padding: 0 0 48px; border-bottom: 1px solid var(--cs-line); text-align: center; }
.cpj__thanks .cpj__h2 { text-align: center; }
.cpj__thanks p { margin-top: 14px; font: 500 18px/35px var(--f-mont); color: var(--cs-text); }
.cpj__thanks .btn { margin-top: 14px; display: inline-flex; }
.cpj__site { color: var(--blue); }

/* рекламный баннер услуг */
.cpj__promo { display: flex; justify-content: space-between; margin-top: 48px; }
.cpj__promo-text {
  width: 707px; height: 427px; padding: 31px 33px; display: flex; flex-direction: column; justify-content: space-between;
  border-radius: 15px; border: 1px solid var(--cs-line); background: linear-gradient(90deg, #FEFFFF 0%, #EFF4FF 100%);
}
.cpj__promo-eb { font: 500 16px/19px var(--f-inter); color: var(--blue); }
.cpj__promo-h { margin-top: 12px; font: 600 36px/44px var(--f-inter); color: var(--cs-ink); }
.cpj__promo-p { margin-top: 12px; font: 400 16px/28px var(--f-inter); color: var(--cs-muted); }
.cpj__promo-text .btn { width: 168px; }
.cpj__promo-img { width: 574px; height: 427px; border-radius: 15px; overflow: hidden; background: #3D71F5; border: 1px solid var(--cs-line); }
.cpj__promo-img img { width: 100%; height: 100%; object-fit: cover; }

/* похожие проекты: карточки 302×368 */
.cpj__similar { margin-top: 48px; }
.cpj__similar-h { font: 600 36px/44px var(--f-inter); color: var(--cs-ink); }
.cpj__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.scase { position: relative; display: block; height: 368px; overflow: hidden; background: #fff; border: 2px solid var(--cs-line); border-radius: 15px; transition: transform var(--t-fast) var(--ease-out); }
.scase:hover { transform: translateY(-4px); }
.scase__media { height: 172px; background: #C0C0C0; overflow: hidden; }
.scase__media img { width: 100%; height: 100%; object-fit: cover; }
.scase__media.is-logo { background: #fff; border-bottom: 1px solid var(--cs-line); }
.scase__media.is-logo img { object-fit: contain; padding: 28px 22%; }
.scase__text { position: absolute; left: 19px; right: 17px; top: 186px; display: flex; flex-direction: column; gap: 8px; }
.scase__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scase__city { font: 400 14px/20px var(--f-mont); color: rgba(5, 6, 8, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scase__tag { padding: 4px 8px; border-radius: 6px; background: rgba(74, 120, 240, 0.1); font: 400 14px/17px var(--f-inter); color: var(--blue); white-space: nowrap; }
.scase__title { font: 600 18px/25px var(--f-mont); color: #050608; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.scase__desc { font: 400 14px/20px var(--f-mont); color: rgba(5, 6, 8, 0.6); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.scase__link { display: inline-flex; align-items: center; gap: 4px; font: 400 14px/17px var(--f-inter); color: var(--blue); }
.scase__link svg { width: 20px; height: 20px; }
.cpg__end { height: 48px; }

/* ---------- адаптив ---------- */
@media (max-width: 1339px) {
  .cpj__who { gap: 24px; }
  .cpj__col { width: auto; flex: 1; }
  .cpj__promo { gap: 24px; }
  .cpj__promo-text { width: auto; flex: 1.2; height: auto; gap: 40px; }
  .cpj__promo-img { width: auto; flex: 1; height: auto; min-height: 320px; }
}
@media (max-width: 1023px) {
  .cpg__grid { grid-template-columns: minmax(0, 1fr); }
  .cpj__split, .cpj__split--rev { grid-template-columns: minmax(0, 1fr); }
  .cpj__split--rev .cpj__shot { order: 2; max-width: 420px; }
  .cpj__split .cpj__shot { max-width: 560px; }
  .cpj__who { flex-direction: column; gap: 20px; }
  .cpj__col { border-right: 0; min-height: 0; }
  .cpj__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpj__promo { flex-direction: column; }
  .cpj__promo-img { min-height: 260px; }
}
@media (max-width: 767px) {
  .cpg { padding-top: 24px; }
  .cpg__crumbs { font-size: 14px; flex-wrap: wrap; }
  .cpg__h1 { font-size: 26px; line-height: 34px; }
  .cpg__filters { gap: 8px; }
  .cpg__filter { padding: 9px 10px; font-size: 13px; }
  .cpg__grid { gap: 20px; margin-top: 28px; }
  .pcase { height: 300px; }
  .pcase__text { left: 18px; width: calc(100% - 36px); }
  .pcase__media.is-logo img { padding: 22px 22%; }
  .cpg__pager { gap: 8px; flex-wrap: wrap; }
  .cpg__pg { width: 40px; height: 40px; }
  .cpj__h2 { font-size: 20px; line-height: 30px; }
  .cpj__p, .cpj__list { font-size: 16px; line-height: 28px; }
  .cpj__p + .cpj__p { margin-top: 20px; }
  .cpj__promo-h { font-size: 26px; line-height: 34px; }
  .cpj__promo-text { padding: 24px 20px; }
  .cpj__row { grid-template-columns: minmax(0, 1fr); }
  .cpj__quote { padding: 18px; }
  .cpj__quote p { font-size: 16px; line-height: 27px; }
}