/* ==================================================================
   Kelpie_v2 — Портфолио, фронтенд
   «Закрытые» стили: блок изолирован от глобальных стилей сайта и темы.
   База зафиксирована через !important + сброс наследования, поэтому
   чистка/перетряска глобального CSS не должна ломать вид блока.
   Все правила скоупированы внутри .kbv2-pf.

   Брейкпоинты (адаптив, без горизонтального скролла на 320/360/420):
     ≤820px — статистика выравнивается влево, заголовок мельче;
     ≤768px — межблочный отступ 56px; шапка в колонку; карточки 210px;
              навигация и «смотреть все» переносятся по ширине;
     ≤480px — паддинги/шрифты ещё мельче; карточки 172px;
     ≤420px — карточки 78vw (≤ 300px при 320px вьюпорте), кнопки nav 40px,
              «смотреть все» на всю ширину — нет переполнения по горизонтали.
   Лента (.kbv2-pf__rail) скроллится по X, поэтому широкий трек не вызывает
   переполнения страницы — он обрезается внутри своего overflow-x:auto.
   ================================================================== */

/* ── Защитный сброс ───────────────────────────────────────────── */
.kbv2-pf,
.kbv2-pf *,
.kbv2-pf *::before,
.kbv2-pf *::after {
	box-sizing: border-box !important;
}

/* ── typography firewall: вернуть наследование голым элементам, чтобы темовые `p{font-size}` / `h*{}` не продавливали блок; классовые правила ниже всё равно выигрывают ── */
.kbv2-pf :where(p,h1,h2,h3,h4,h5,h6,ul,ol,li,blockquote,figure,figcaption,small,strong,em,b,i,span,a,button,input,label) { font-size: inherit; line-height: inherit; font-family: inherit; }


.kbv2-pf {
	--pf-ink:#16243B;
	--pf-ink-soft:#34425C;
	--pf-mute:#727C8C;
	--pf-paper:#FFFFFF;
	--pf-bg:#EEF1F6;
	--pf-line:#E5E9F1;
	--pf-orange:#FF6B1A;
	--pf-orange-deep:#E85B0E;
	--pf-orange-soft:#FFEADD;
	--pf-orange-line:#F8D2BA;
	--pf-blue:#0088C4;
	--pf-blue-deep:#006F9F;
	--pf-green-deep:#1B8F4D;
	--pf-green-soft:#E5F6EC;
	--pf-grid:#D9E4F2;

	max-width:1200px !important;
	margin:0 auto 88px !important;
	padding:0 20px !important;
	font-family:'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif !important;
	font-size:16px !important;
	line-height:1.5 !important;
	text-align:left !important;
	color:var(--pf-ink) !important;
	background:none !important;
}

/* Обёртка блока — карточка снята глобальным оверрайдом макета (#15):
   прозрачный фон, без рамки/тени. */
.kbv2-pf__block {
	position:relative !important;
	background:transparent !important;
	border:none !important;
	border-radius:0 !important;
	box-shadow:none !important;
	padding:0 !important;
}

/* Сброс ссылок/списков/типографики внутри блока */
.kbv2-pf a { text-decoration:none !important; color:inherit !important; }
.kbv2-pf h2 { margin:0 !important; }
.kbv2-pf svg { display:inline-block !important; vertical-align:middle !important; }

/* ── Шапка ────────────────────────────────────────────────────── */
.kbv2-pf__top {
	position:relative !important; z-index:1 !important;
	display:flex !important; align-items:flex-start !important; justify-content:space-between !important;
	gap:24px !important; flex-wrap:wrap !important;
}
.kbv2-pf__headcol { min-width:0 !important; }
.kbv2-pf__eyebrow {
	font-family:'Manrope', monospace !important; font-weight:700 !important; font-size:12px !important;
	letter-spacing:2px !important; color:var(--pf-mute) !important; text-transform:uppercase !important;
	margin:0 0 12px !important;
}
.kbv2-pf__head {
	margin:0 !important; font-family:'Manrope', sans-serif !important; font-weight:800 !important;
	font-size:31px !important; line-height:1.15 !important; letter-spacing:-.3px !important;
	color:var(--pf-ink) !important; text-wrap:balance; max-width:820px !important;
}
.kbv2-pf__head .ac { color:var(--pf-blue) !important; }

.kbv2-pf__statcol {
	display:flex !important; flex-direction:column !important; align-items:flex-end !important;
	gap:14px !important; margin-top:27px !important;
}
.kbv2-pf__badge {
	display:inline-flex !important; align-items:center !important; gap:7px !important;
	background:var(--pf-green-soft) !important; color:var(--pf-green-deep) !important;
	border:1px solid #BFE6CD !important; border-radius:999px !important; padding:7px 15px 7px 12px !important;
	white-space:nowrap !important; font-family:'Manrope', sans-serif !important; font-weight:800 !important;
	font-size:12px !important; letter-spacing:.4px !important; text-transform:uppercase !important;
}
.kbv2-pf__badge svg { width:16px !important; height:16px !important; flex:0 0 auto !important; }
.kbv2-pf__statline {
	display:flex !important; align-items:baseline !important; gap:6px !important; flex-wrap:wrap !important;
	justify-content:flex-end !important; font-family:'Manrope', sans-serif !important;
}
.kbv2-pf__v { font-weight:800 !important; font-size:18px !important; line-height:1 !important; color:var(--pf-ink) !important; letter-spacing:-.3px !important; }
.kbv2-pf__u { font-weight:600 !important; font-size:12.5px !important; color:var(--pf-mute) !important; }
.kbv2-pf__statdot { font-weight:700 !important; font-size:13px !important; color:#C4CDDB !important; margin:0 3px !important; }

/* ── Лента кейсов ─────────────────────────────────────────────── */
.kbv2-pf__rail {
	position:relative !important; z-index:1 !important; margin-top:20px !important;
	overflow-x:auto !important; overflow-y:hidden !important; scroll-snap-type:x proximity !important;
	padding:14px 2px !important;
	scrollbar-width:none !important; -ms-overflow-style:none !important;
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent);
	        mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent);
}
.kbv2-pf__rail::-webkit-scrollbar { display:none !important; width:0 !important; height:0 !important; }
.kbv2-pf__railtrack { display:flex !important; gap:16px !important; width:max-content !important; }
.kbv2-pf__case {
	scroll-snap-align:start !important; flex:0 0 auto !important; width:252px !important;
	text-decoration:none !important; color:inherit !important; display:block !important; cursor:pointer !important;
}
.kbv2-pf__photo {
	position:relative !important; aspect-ratio:1/1 !important; border-radius:14px !important; overflow:hidden !important;
	background:#0E1626 !important; box-shadow:0 12px 24px -16px rgba(15,26,43,.55) !important;
	transition:transform .25s, box-shadow .25s;
}
.kbv2-pf__case:hover .kbv2-pf__photo { transform:translateY(-5px); box-shadow:0 20px 34px -16px rgba(15,26,43,.6); }
.kbv2-pf__shot { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; z-index:1 !important; max-width:100% !important; }
.kbv2-pf__photo::after {
	content:"" !important; position:absolute !important; inset:0 !important; z-index:2 !important; pointer-events:none !important;
	background:linear-gradient(180deg,rgba(11,18,30,.20) 0%,transparent 30%,transparent 72%,rgba(11,18,30,.30) 100%) !important;
}
.kbv2-pf__date {
	position:absolute !important; top:10px !important; right:10px !important; z-index:3 !important;
	background:rgba(16,22,30,.46) !important; backdrop-filter:blur(5px);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) !important;
	color:#fff !important; font-family:'Manrope', monospace !important; font-weight:600 !important; font-size:10.5px !important;
	padding:3px 8px !important; border-radius:7px !important;
}
.kbv2-pf__meta {
	display:flex !important; align-items:flex-start !important; justify-content:space-between !important;
	gap:10px !important; margin-top:11px !important; padding:0 2px !important;
}
.kbv2-pf__metatext { min-width:0 !important; }
.kbv2-pf__t {
	display:inline !important; font-family:'Manrope', sans-serif !important; font-weight:800 !important;
	font-size:14.5px !important; line-height:1.25 !important; color:var(--pf-ink) !important;
	box-shadow:inset 0 -1.5px 0 transparent; transition:color .18s, box-shadow .18s;
}
.kbv2-pf__case:hover .kbv2-pf__t { color:var(--pf-orange-deep) !important; box-shadow:inset 0 -1.5px 0 var(--pf-orange); }
.kbv2-pf__c { font-size:12px !important; color:var(--pf-mute) !important; margin-top:3px !important; }
.kbv2-pf__arr {
	width:27px !important; height:27px !important; border-radius:50% !important; flex:0 0 auto !important;
	display:flex !important; align-items:center !important; justify-content:center !important;
	background:var(--pf-orange-soft) !important; color:var(--pf-orange-deep) !important; font-weight:700 !important;
	font-size:14px !important; transition:transform .2s, background .2s, color .2s;
}
.kbv2-pf__case:hover .kbv2-pf__arr { background:var(--pf-orange) !important; color:#fff !important; transform:translateX(3px); }

/* ── Навигация ────────────────────────────────────────────────── */
.kbv2-pf__railnav {
	position:relative !important; z-index:1 !important; display:flex !important; align-items:center !important;
	justify-content:space-between !important; gap:16px !important; margin-top:14px !important; flex-wrap:wrap !important;
}
.kbv2-pf__navbtns { display:flex !important; gap:10px !important; }
/* подсказка «свайп» — только на мобильных, вместо стрелок */
.kbv2-pf__swipehint {
	display:none !important; align-items:center !important; gap:8px !important;
	font-family:'Manrope', system-ui, sans-serif !important; font-weight:700 !important;
	font-size:12px !important; letter-spacing:1.6px !important; text-transform:uppercase !important;
	color:var(--pf-blue) !important;
}
.kbv2-pf__nav {
	width:44px !important; height:44px !important; border-radius:50% !important; flex:0 0 auto !important; cursor:pointer !important;
	display:flex !important; align-items:center !important; justify-content:center !important;
	font-size:18px !important; line-height:1 !important; padding:0 !important;
	font-family:'Manrope', sans-serif !important; color:var(--pf-orange-deep) !important; background:var(--pf-orange-soft) !important;
	border:1px solid var(--pf-orange-line) !important; transition:background .18s, color .18s, opacity .18s;
}
.kbv2-pf__nav:hover { background:var(--pf-orange) !important; color:#fff !important; }
.kbv2-pf__nav:disabled { opacity:.34 !important; cursor:default !important; background:var(--pf-bg) !important; color:var(--pf-mute) !important; }
.kbv2-pf__seeall {
	display:inline-flex !important; align-items:center !important; gap:9px !important; text-decoration:none !important;
	font-family:'Manrope', sans-serif !important; font-weight:700 !important; font-size:13.5px !important;
	color:var(--pf-orange-deep) !important; padding:11px 18px !important; border-radius:999px !important;
	border:1.5px solid var(--pf-orange-line) !important; background:#fff !important; transition:all .18s;
}
.kbv2-pf__ar { display:inline-flex !important; align-items:center !important; transition:transform .18s; }
.kbv2-pf__seeall:hover { background:var(--pf-orange) !important; color:#fff !important; border-color:var(--pf-orange) !important; }
.kbv2-pf__seeall:hover .kbv2-pf__ar { transform:translateX(3px); }

/* ── Теги ─────────────────────────────────────────────────────── */
.kbv2-pf__tagsgroup {
	position:relative !important; z-index:1 !important; margin-top:20px !important; padding-top:18px !important;
	border-top:1px solid var(--pf-line) !important;
}
.kbv2-pf__tagshead {
	font-family:'Manrope', sans-serif !important; font-weight:700 !important; font-size:13.5px !important;
	line-height:1.4 !important; color:var(--pf-ink-soft) !important; letter-spacing:.1px !important;
}
.kbv2-pf__tagshead b { color:var(--pf-blue-deep) !important; font-weight:800 !important; font-variant-numeric:tabular-nums; }
.kbv2-pf__tags {
	position:relative !important; z-index:1 !important; display:flex !important; flex-wrap:wrap !important;
	gap:10px !important; margin-top:13px !important;
}
.kbv2-pf__pill {
	display:inline-flex !important; align-items:center !important; white-space:nowrap !important;
	background:#F2F4F8 !important; border:1px solid transparent !important; border-radius:999px !important;
	padding:9px 16px !important; font-family:'Manrope', sans-serif !important; font-weight:600 !important;
	font-size:12.5px !important; color:var(--pf-mute) !important; text-decoration:none !important; cursor:pointer !important;
	transition:background .16s, color .16s, border-color .16s;
}
.kbv2-pf__pill:hover { background:#E8EDF4 !important; color:var(--pf-ink-soft) !important; border-color:transparent !important; }

/* ── Адаптив ──────────────────────────────────────────────────── */
@media (max-width:820px) {
	.kbv2-pf__statcol { align-items:flex-start !important; }
	.kbv2-pf__head { font-size:26px !important; }
	.kbv2-pf__statline { justify-content:flex-start !important; }
}
@media (max-width:768px) {
	.kbv2-pf { margin-bottom:56px !important; }
	.kbv2-pf__top { flex-direction:column !important; align-items:stretch !important; gap:18px !important; }
	.kbv2-pf__head { font-size:24px !important; max-width:none !important; }
	.kbv2-pf__statcol { align-items:flex-start !important; width:100% !important; margin-top:0 !important; }
	.kbv2-pf__case { width:210px !important; }
	.kbv2-pf__navbtns { display:none !important; }
	.kbv2-pf__swipehint { display:inline-flex !important; }
	.kbv2-pf__railnav { flex-direction:column !important; align-items:center !important; gap:14px !important; }
}
@media (max-width:480px) {
	.kbv2-pf__head { font-size:22px !important; }
	.kbv2-pf__case { width:172px !important; }
	.kbv2-pf__t { font-size:13.5px !important; }
}
/* 320/360/420 — карточки от ширины вьюпорта (≤ 300px на 320px), без overflow */
@media (max-width:420px) {
	.kbv2-pf { padding:0 14px !important; }
	.kbv2-pf__case { width:78vw !important; max-width:280px !important; }
	.kbv2-pf__nav { width:40px !important; height:40px !important; }
	.kbv2-pf__railnav { gap:12px !important; }
	.kbv2-pf__seeall { width:100% !important; justify-content:center !important; }
	.kbv2-pf__badge { white-space:normal !important; }
}


/* === опциональная рамка с сеткой (тумблер в админке, по умолчанию выкл) === */
.kbv2-pf.is-framed { background:#fff !important; border:none !important; border-radius:24px !important; padding:32px 34px !important; box-shadow:none !important; overflow:hidden !important; position:relative !important; }
.kbv2-pf.is-framed > * { position:relative !important; z-index:1 !important; }
.kbv2-pf.is-framed::before { content:"" !important; position:absolute !important; inset:0 !important; pointer-events:none !important; z-index:0 !important; border-radius:24px !important; background-image:linear-gradient(#D9E4F2 1px,transparent 1px),linear-gradient(90deg,#D9E4F2 1px,transparent 1px) !important; background-size:34px 34px !important; opacity:.55 !important; -webkit-mask-image:radial-gradient(120% 130% at 92% 0%,#000 22%,transparent 66%) !important; mask-image:radial-gradient(120% 130% at 92% 0%,#000 22%,transparent 66%) !important; }
@media (max-width:768px){ .kbv2-pf.is-framed { padding:22px 18px !important; } }