/* Visual Language PRO v2.2.0 — unified editable portfolio */
.vl22Portfolio{padding-top:86px!important;padding-bottom:86px!important;background:transparent!important}
.vl22PortfolioHead{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:26px!important;margin-bottom:26px!important}
.vl22PortfolioHead h2{margin:0!important;color:var(--ink)!important;font-size:clamp(56px,8vw,118px)!important;line-height:.78!important;letter-spacing:-.105em!important}
.vl22PortfolioHead p{margin:0 0 10px!important;max-width:620px!important;color:var(--muted)!important;text-transform:uppercase!important;letter-spacing:.14em!important;font-size:12px!important;font-weight:900!important;text-align:right!important}
.vl22ProjectList{display:grid!important;gap:16px!important}
.vl22ProjectRow{display:grid!important;grid-template-columns:1.08fr .72fr 1.08fr!important;min-height:360px!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:34px!important;background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.015))!important;box-shadow:0 24px 70px rgba(0,0,0,.28)!important}
.vl22ProjectPoster,.vl22ProjectDevices{position:relative!important;display:block!important;min-height:360px!important;overflow:hidden!important;background:#080808!important}
.vl22ProjectPoster img,.vl22ProjectDevices img{display:block!important;width:100%!important;height:100%!important;min-height:360px!important;object-fit:cover!important;object-position:center!important;transform:none!important;filter:none!important}
.vl22ProjectInfo{display:flex!important;flex-direction:column!important;justify-content:center!important;padding:34px 32px!important;border-left:1px solid rgba(255,255,255,.12)!important;border-right:1px solid rgba(255,255,255,.12)!important;background:rgba(12,12,12,.82)!important}
.vl22ProjectInfo h3{margin:0 0 18px!important;color:var(--ink)!important;font-size:clamp(34px,4.2vw,58px)!important;line-height:.9!important;letter-spacing:-.08em!important}
.vl22ProjectInfo p{margin:0!important;color:var(--muted)!important;font-size:17px!important;line-height:1.28!important;letter-spacing:-.02em!important}
.vl22Tags{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin-top:24px!important}
.vl22Tags span{display:inline-flex!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:999px!important;padding:8px 12px!important;color:var(--ink)!important;font-size:11px!important;line-height:1!important;text-transform:uppercase!important;letter-spacing:.08em!important;font-weight:900!important}
.vl22Open{margin-top:30px!important;color:var(--acid)!important;text-transform:uppercase!important;font-size:14px!important;letter-spacing:-.02em!important;font-weight:900!important}
.themeToggle:not(:checked) ~ .site .vl22ProjectRow{border-color:rgba(0,0,0,.12)!important;background:rgba(255,253,246,.9)!important;box-shadow:var(--shadow)!important}
.themeToggle:not(:checked) ~ .site .vl22ProjectInfo{background:rgba(255,253,246,.92)!important;border-color:rgba(0,0,0,.10)!important}
.themeToggle:not(:checked) ~ .site .vl22Tags span{border-color:rgba(0,0,0,.14)!important}
#portfolio .vl21Portfolio,#portfolio .vl21PortfolioGrid,#portfolio .portfolioEditorial:not(.vl22ProjectList),#portfolio .casePoster:not(.vl22ProjectPoster){display:none!important}
@media(max-width:1180px){.vl22ProjectRow{grid-template-columns:1fr!important}.vl22ProjectInfo{border-left:0!important;border-right:0!important;border-top:1px solid rgba(255,255,255,.12)!important;border-bottom:1px solid rgba(255,255,255,.12)!important}}
@media(max-width:720px){.vl22Portfolio{padding-top:54px!important;padding-bottom:54px!important}.vl22PortfolioHead{display:block!important}.vl22PortfolioHead p{text-align:left!important;margin-top:12px!important}.vl22ProjectRow{border-radius:26px!important}.vl22ProjectPoster,.vl22ProjectDevices,.vl22ProjectPoster img,.vl22ProjectDevices img{min-height:280px!important}.vl22ProjectInfo{padding:26px 22px!important}}


/* Visual Language PRO v2.2.1 — non-distorted adaptive portfolio previews */
.vl22Portfolio {
  width: min(1180px, calc(100vw - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
}

.vl22ProjectList {
  width: 100% !important;
  overflow: visible !important;
}

.vl22ProjectRow {
  grid-template-columns: minmax(320px, .95fr) minmax(260px, .62fr) minmax(360px, 1.15fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 420px !important;
  overflow: hidden !important;
}

.vl22ProjectPoster,
.vl22ProjectDevices {
  min-width: 0 !important;
  min-height: 420px !important;
}

.vl22ProjectPoster img {
  width: 100% !important;
  height: 100% !important;
  min-height: 420px !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.vl22ProjectDevices {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px !important;
  background: #141414 !important;
}

.vl22ProjectDevices img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

.vl22ProjectInfo {
  min-width: 0 !important;
  z-index: 2 !important;
}

/* Светлая тема: превью мокапов без серой грязи */
.themeToggle:not(:checked) ~ .site .vl22ProjectDevices {
  background: #f5f2eb !important;
}

/* Убираем старые горизонтальные вылеты */
html,
body,
.site,
main {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

@media (max-width: 1180px) {
  .vl22Portfolio {
    width: min(920px, calc(100vw - 28px)) !important;
  }

  .vl22ProjectRow {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .vl22ProjectPoster,
  .vl22ProjectPoster img {
    min-height: 520px !important;
  }

  .vl22ProjectDevices {
    min-height: 360px !important;
    padding: 18px !important;
  }

  .vl22ProjectDevices img {
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 720px) {
  .vl22Portfolio {
    width: min(100%, calc(100vw - 20px)) !important;
  }

  .vl22ProjectRow {
    border-radius: 24px !important;
  }

  .vl22ProjectPoster,
  .vl22ProjectPoster img {
    min-height: 390px !important;
  }

  .vl22ProjectInfo {
    padding: 24px 20px !important;
  }

  .vl22ProjectDevices {
    min-height: 260px !important;
    padding: 14px !important;
  }

  .vl22ProjectDevices img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}


/* VL v2.2.2 — mobile slow internet / wrong preview fix
   На телефонах скрываем декоративные device-мокапы, чтобы при плохом интернете
   не мелькали старые/не те картинки. Оставляем только правильную карточку кейса. */
.vl22ProjectPoster{background:transparent!important;line-height:0!important;}
.vl22ProjectPoster img{display:block!important;aspect-ratio:670/886!important;background:transparent!important;}
@media (max-width: 1180px){
  .vl22ProjectDevices{display:none!important;}
  .vl22ProjectRow{grid-template-columns:1fr!important;}
  .vl22ProjectPoster{order:1!important;}
  .vl22ProjectInfo{order:2!important;}
}
@media (max-width: 720px){
  .vl22ProjectPoster,
  .vl22ProjectPoster img{min-height:0!important;height:auto!important;}
  .vl22ProjectPoster img{width:100%!important;object-fit:contain!important;}
}