/* =========================================================================
   HILBERT · PROJECTS
   /wp-content/themes/hilbert-house/assets/css/hilbert-projects.css
   v10.0.0

   Поля страницы совпадают с шапкой сайта (.header-inner: 55px).
   Весь контент виден без JavaScript.

   О плавности раскрытия карточки:
   scroll-behavior на десктопе НЕ включается — прокрутку ленты анимирует
   скрипт, две одновременные анимации одного свойства давали рывки.
   Из анимируемых свойств осталось одно layout-свойство (flex-basis),
   остальное — transform и opacity, они обрабатываются композитором.
   ========================================================================= */

.hhp{
	--red:#af0b0b;
	--bg:#0e0e12;
	--surface:#131318;
	--text:#f4f4f6;
	--muted:rgba(244,244,246,.55);
	--faint:rgba(244,244,246,.34);
	--line:rgba(244,244,246,.14);
	--rule:rgba(255,255,255,.85);
	--ease:cubic-bezier(.22,.61,.36,1);

	/* боковое поле: 55px как у .header-inner, плавно уменьшается на узких */
	--edge:clamp(20px,4vw,55px);
	--gap:clamp(16px,1.6vw,24px);
	--pad:clamp(30px,5vw,120px);
	--open:.6s;              /* длительность раскрытия; продублирована в JS */

	display:block;
	background:var(--bg);
	color:var(--text);
	min-width:0;
	overflow-x:clip;
}
.hhp *,
.hhp *::before,
.hhp *::after{box-sizing:border-box;}
.hhp img{display:block;max-width:100%;}

.hhp-inner{
	width:100%;
	margin:0 auto;
	padding:0 var(--edge);
	min-width:0;
}

/* только для программ чтения с экрана */
.hhp-sr{
	position:absolute;
	width:1px;height:1px;
	padding:0;margin:-1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	white-space:nowrap;
	border:0;
}

.hhp-h2{
	margin:0;
	font-size:clamp(26px,3.1vw,42px);
	line-height:1.14;
}
.hhp-sub{
	margin:clamp(16px,1.8vw,24px) 0 0;
	max-width:60ch;
	font-size:clamp(14px,1.05vw,16px);
	line-height:1.7;
	color:var(--muted);
}
.hhp-corner{flex:0 0 auto;color:currentColor;transition:color .35s var(--ease);}

.hhp-block-head{
	display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
	gap:12px clamp(24px,4vw,64px);
	margin-bottom:clamp(30px,3.6vw,52px);
}
.hhp-block-head .hhp-sub{margin:0;max-width:42ch;}

/* =========================================================================
   01 · ВВЕДЕНИЕ
   ========================================================================= */
.hhp-hero{padding:clamp(40px,3.1vw,80px) 0 clamp(36px,4vw,64px);}
.hhp-hero{padding:clamp(40px,3.1vw,80px) 0 0;}

.hhp-intro{padding:0 0 clamp(36px,4vw,64px);}

.hhp-hero__eyebrow{
	display:flex;align-items:center;
	gap:14px;
	margin:0 0 clamp(26px,3.2vw,46px);
	font-size:clamp(10.5px,.8vw,12px);
	letter-spacing:.22em;
	text-transform:uppercase;
	color:var(--muted);
}
.hhp-hero__mark{
	width:11px;height:11px;
	flex:0 0 auto;
	background:var(--red);
}

.hhp-hero__title{
	margin:0;
	max-width:22ch;
	font-size:clamp(26px,5.4vw,80px);
	line-height:1.06;
}
.hhp-hero__title span{
	display:block;
	color:var(--muted);
}

.hhp-hero__lead{
	margin:clamp(24px,2.6vw,38px) 0 0;
	max-width:120ch;
	font-size:clamp(15px,1.1vw,17px);
	line-height:1.75;
	color:var(--muted);
}

.hhp-metrics{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	list-style:none;
	margin:clamp(34px,4.2vw,64px) 0 0;
	padding:0;
	border-top:1px solid var(--line);
}
.hhp-metric{
	min-width:0;
	padding:clamp(20px,2.2vw,28px) clamp(16px,1.8vw,28px) 0 clamp(16px,1.8vw,28px);
	border-left:1px solid var(--line);
}
.hhp-metric:first-child{border-left:0;padding-left:0;}

/* число + единица: выравнивание по нижней грани строки —
   так барабаны цифр и «м²» стоят на одном основании */
.hhp-metric__num{
	display:flex;
	align-items:flex-end;
	font-size:clamp(26px,2.8vw,40px);
	line-height:1;
	white-space:nowrap;
	/* моноширинные цифры: барабан не меняет ширину при прокрутке */
	font-variant-numeric:tabular-nums;
	font-feature-settings:"tnum" 1;
}
.hhp-metric__value{
	display:flex;
	align-items:flex-end;
	line-height:1;
}
.hhp-metric__unit{
	font-size:.46em;
	margin-left:.26em;
	color:var(--muted);
	/* при необходимости подстроить по основанию цифр */
	padding-bottom:0;
}
.hhp-metric__cap{
	display:block;
	margin-top:10px;
	font-size:clamp(12.5px,.95vw,14px);
	line-height:1.45;
	color:var(--muted);
}

/* --- барабаны цифр ---
   Разметку строит скрипт: колонка из трёх циклов 0–9, посадка на нужную
   цифру через translateY. Анимируется только transform.
   Без JavaScript в .hhp-metric__value остаётся обычный текст. */
.hhp-odo{
	display:block;
	height:1em;
	line-height:1em;
	overflow:hidden;
}
.hhp-odo__reel{
	display:block;
	transform:translateY(calc(var(--d,0) * -1em));
	transition:transform var(--roll,1s) var(--ease) var(--delay,0ms);
	will-change:transform;
}
.hhp-odo__reel span{
	display:block;
	height:1em;
	line-height:1em;
	text-align:center;
	font-weight: 800;
}
.hhp-odo__sep{
	display:block;
	height:1em;
	line-height:1em;
}

/* =========================================================================
   02 · КОЛЛЕКЦИИ
   ========================================================================= */
.hhp-collections{padding:clamp(40px,4.4vw,72px) 0 var(--pad);}

.hhp-collections__head{
	display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
	gap:12px clamp(24px,4vw,64px);
	margin-bottom:clamp(24px,2.8vw,38px);
}
.hhp-collections__head .hhp-sub{margin:0;max-width:45ch;}

.hhp-track{
	display:flex;
	gap:var(--gap);
	padding:0 var(--edge);
	overflow-x:auto;
	overflow-y:hidden;
	overscroll-behavior-x:contain;
	scrollbar-width:none;
	cursor:grab;
	min-width:0;
	/* scroll-behavior намеренно не задаётся: прокрутку анимирует скрипт */
}
.hhp-track::-webkit-scrollbar{display:none;}
.hhp-track.is-dragging{cursor:grabbing;user-select:none;}

/* --- карточка --- */
.hhp-card{
	position:relative;
	flex:0 0 clamp(216px,17vw,268px);
	height:clamp(470px,52vw,600px);
	border-radius:clamp(16px,1.6vw,24px);
	overflow:hidden;
	background:var(--surface);
	cursor:pointer;
	min-width:0;
	contain:paint;
	transition:flex-basis var(--open) var(--ease);
}
.hhp-card:focus-visible{outline:1px solid var(--rule);outline-offset:3px;}
.hhp-card.is-open{
	flex-basis:clamp(440px,46vw,620px);
	cursor:default;
}
.hhp-card.no-anim,
.hhp-card.no-anim *{transition:none !important;}

.hhp-card__bg{
	position:absolute;inset:0;
	width:100%;height:100%;
	object-fit:cover;
	-webkit-user-drag:none;user-select:none;
}
.hhp-card__veil{
	position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(14,14,18,0) 34%,rgba(14,14,18,.5) 68%,rgba(14,14,18,.92) 100%);
	pointer-events:none;
}
/* притемнение закрытой карточки — opacity вместо filter: дешевле для GPU */
.hhp-card__veil::after{
	content:"";
	position:absolute;inset:0;
	background:rgba(14,14,18,.42);
	opacity:1;
	transition:opacity var(--open) var(--ease);
}
.hhp-card.is-open .hhp-card__veil::after{opacity:0;}

/* переход по всей карточке — включается только в мобильном режиме */
.hhp-card__hit{display:none;}

.hhp-card__body{
	position:relative;
	display:flex;flex-direction:column;justify-content:flex-end;
	height:100%;
	padding:clamp(20px,2.2vw,32px);
	min-width:0;
}
.hhp-card__top{
	display:flex;align-items:flex-end;justify-content:space-between;
	gap:16px;
	margin-bottom:clamp(12px,1.4vw,18px);
}
/* размер буквы меняется через transform: не вызывает пересчёта раскладки */
.hhp-card__name{
	width:auto;
	height:clamp(84px,8vw,112px);
	transform-origin:left bottom;
	transition:transform var(--open) var(--ease);
	-webkit-user-drag:none;user-select:none;
}
.hhp-card.is-open .hhp-card__name{transform:scale(1.5);}
.hhp-card__top .hhp-corner{
	color:var(--text);
	opacity:.9;
	transition:transform var(--open) var(--ease),opacity .35s var(--ease);
}
.hhp-card.is-open .hhp-card__top .hhp-corner{transform:rotate(180deg);opacity:1;}

.hhp-card__rule{height:1px;background:var(--rule);}

/* Раскрывающаяся часть: 0fr → 1fr требует РОВНО одного дочернего элемента.
   Отступ задаётся не на .hhp-card__panel-inner, а на его первом потомке:
   при нулевой высоте собственный padding не схлопывается. */
.hhp-card__panel{
	display:grid;
	grid-template-rows:0fr;
	opacity:0;
	transition:grid-template-rows var(--open) var(--ease),opacity calc(var(--open) * .5) var(--ease);
}
.hhp-card__panel-inner{
	overflow:hidden;
	min-height:0;
}
.hhp-card__panel-inner > :first-child{margin-top:clamp(16px,1.8vw,24px);}
.hhp-card.is-open .hhp-card__panel{
	grid-template-rows:1fr;
	opacity:1;
	transition:grid-template-rows var(--open) var(--ease),opacity calc(var(--open) * .5) var(--ease) calc(var(--open) * .25);
}

.hhp-card__list{
	display:flex;flex-wrap:wrap;justify-content:center;
	list-style:none;
	margin:0 0 clamp(14px,1.6vw,20px);
	padding:0;
	row-gap:10px;
}
.hhp-card__list li{
	display:flex;align-items:center;
	padding:0 clamp(10px,1.1vw,18px);
	line-height:1.1;
}
.hhp-card__list li + li{border-left:2px solid var(--red);}
.hhp-card__list a{
	color:var(--text);
	text-decoration:none;
	font-size:clamp(13px,1vw,16px);
	white-space:nowrap;
	transition:color .35s var(--ease);
}
.hhp-card__list a:hover,
.hhp-card__list a:focus-visible{color:var(--red);text-decoration:none;}

.hhp-card__extra{
	display:flex;flex-wrap:wrap;justify-content:center;
	gap:8px clamp(16px,2vw,28px);
}
.hhp-card__extra a{
	color:var(--faint);
	text-decoration:none;
	font-size:clamp(12px,.9vw,13.5px);
	letter-spacing:.06em;
	transition:color .35s var(--ease);
}
.hhp-card__extra a:hover,
.hhp-card__extra a:focus-visible{color:var(--red);text-decoration:none;}

/* --- индикатор и кнопки ---
   ширина и сдвиг задаются скриптом покадрово, поэтому собственный
   transition у полосы не нужен: он бы «догонял» прокрутку с запозданием */
.hhp-controls{
	display:flex;align-items:center;justify-content:space-between;
	gap:clamp(20px,3vw,48px);
	margin-top:clamp(26px,3vw,40px);
}
.hhp-progress{
	position:relative;
	flex:1 1 auto;min-width:0;
	height:1px;
	background:var(--line);
	overflow:hidden;
}
.hhp-progress span{
	position:absolute;top:0;left:0;
	height:1px;width:0;
	background:var(--red);
}
.hhp-nav{display:flex;gap:12px;flex:0 0 auto;}
.hhp-round{
	width:50px;height:50px;
	display:inline-flex;align-items:center;justify-content:center;
	border:1px solid var(--line);
	border-radius:50%;
	background:none;
	color:var(--text);
	padding:0;
	cursor:pointer;
	-webkit-appearance:none;appearance:none;
	transition:border-color .35s var(--ease),color .35s var(--ease),opacity .35s var(--ease);
}
.hhp-round:hover:not([disabled]),
.hhp-round:focus-visible:not([disabled]){border-color:var(--red);color:var(--red);outline:none;}
.hhp-round[disabled]{opacity:.28;cursor:default;}

/* =========================================================================
   03 · КОНТЕНТ СТРАНИЦЫ
   ========================================================================= */
.hhp-editor{
	padding:var(--pad) 0;
	border-top:1px solid var(--line);
	min-width:0;
}
.hhp-editor .wpb_wrapper{min-width:0;}
.hhp-editor a{color:var(--text);}
.hhp-editor a:hover{color:var(--red);}

/* =========================================================================
   04 · АДАПТАЦИЯ
   ========================================================================= */
.hhp-adapt{
	padding:var(--pad) 0;
/*	border-top:1px solid var(--line); */
}
.hhp-adapt__grid{
	display:grid;
	grid-template-columns:minmax(0,5fr) minmax(0,6fr);
	gap:clamp(28px,4vw,90px);
	align-items:start;
}
.hhp-adapt__aside{position:sticky;top:clamp(90px,10vh,130px);}

.hhp-steps{
	list-style:none;
	margin:0;padding:0;
	border-top:1px solid var(--line);
}
.hhp-step{
	display:grid;
	grid-template-columns:auto minmax(0,1fr);
	gap:clamp(18px,3vw,56px);
	padding:clamp(24px,2.6vw,34px) 0;
	border-bottom:1px solid var(--line);
}
.hhp-step__num{
	font-size:clamp(13px,1vw,15px);
	color:var(--faint);
	line-height:1.6;
}
.hhp-step__body{min-width:0;}
.hhp-step__title{
	margin:0 0 10px;
	font-size:clamp(17px,1.5vw,23px);
	line-height:1.25;
}
.hhp-step__text{
	margin:0;
	max-width:68ch;
	font-size:clamp(14px,1.02vw,16px);
	line-height:1.68;
	color:var(--muted);
}

/* =========================================================================
   05 · ОСНОВНЫЕ РАЗДЕЛЫ
   ========================================================================= */
.hhp-sections{
	padding:var(--pad) 0 clamp(68px,7.5vw,130px);
/*	border-top:1px solid var(--line); */
}
.hhp-tiles{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:1px;
	background:var(--line);
	border-top:1px solid var(--line);
	border-bottom:1px solid var(--line);
}
.hhp-tile{
	display:flex;flex-direction:column;justify-content:space-between;
	gap:clamp(28px,3.4vw,52px);
	min-height:clamp(160px,15vw,210px);
	padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,32px);
	background:var(--bg);
	color:var(--text);
	text-decoration:none;
	min-width:0;
	transition:background .4s var(--ease),color .35s var(--ease);
}
.hhp-tile:hover,
.hhp-tile:focus-visible{background:var(--surface);color:var(--red);text-decoration:none;}
.hhp-tile__head{
	display:flex;align-items:flex-start;justify-content:space-between;
	gap:20px;
}
.hhp-tile__label{font-size:clamp(17px,1.4vw,22px);line-height:1.2;}
.hhp-tile__note{
	font-size:clamp(13px,1vw,15px);
	line-height:1.6;
	color:var(--muted);
	max-width:32ch;
}

/* =========================================================================
   ФУТЕР: блок с видео скрыт
   ========================================================================= */
.pmf-cut{display:none !important;}

/* =========================================================================
   АДАПТИВ
   ========================================================================= */
@media (max-width:1100px){
	.hhp-hero__title{max-width:none;}
	.hhp-adapt__grid{grid-template-columns:minmax(0,1fr);}
	.hhp-adapt__aside{position:static;}
	.hhp-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:768px){
	.hhp-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
	.hhp-metric{
		border-left:0;
		padding:clamp(18px,4vw,24px) 16px clamp(18px,4vw,24px) 0;
	}
	.hhp-metric:nth-child(n+3){border-top:1px solid var(--line);}
	.hhp-step{grid-template-columns:minmax(0,1fr);gap:10px;}
	.hhp-tiles{grid-template-columns:minmax(0,1fr);}
	.hhp-tile{padding-left:0;padding-right:0;min-height:0;gap:18px;}

	/* --- мобильный режим карусели ---
	   горизонтальный слайдер, карточка целиком — ссылка на коллекцию,
	   раскрывающейся панели нет */
	.hhp-track{
		scroll-snap-type:x mandatory;
		scroll-behavior:smooth;
		scroll-padding-left:var(--edge);
		cursor:default;
	}
	.hhp-card,
	.hhp-card.is-open{
		flex-basis:min(80vw,380px);
		height:min(120vw,540px);
		scroll-snap-align:start;
		cursor:pointer;
	}
	.hhp-card__veil::after{opacity:0;}
	.hhp-card__hit{
		display:block;
		position:absolute;inset:0;
		z-index:3;
	}
	.hhp-card__name,
	.hhp-card.is-open .hhp-card__name{
		height:clamp(92px,20vw,124px);
		transform:none;
	}
	.hhp-card__top .hhp-corner,
	.hhp-card.is-open .hhp-card__top .hhp-corner{transform:none;}
	.hhp-card__panel,
	.hhp-card.is-open .hhp-card__panel{display:none;}
	.hhp-collections__head .hhp-sub{display:none;}
	.hhp-nav{display:none;}
	.hhp{display:flex;flex-direction:column;}
	.hhp > section{min-width:0;}
	.hhp-hero{order:1;padding-bottom:0;}
	.hhp-collections{order:2;padding-top:clamp(26px,7vw,36px);}
	.hhp-intro{order:3;padding-top:clamp(30px,8vw,44px);}
	.hhp-editor{order:4;}
	.hhp-adapt{order:5;}
	.hhp-sections{order:6;}
	.hhp-intro .hhp-hero__lead{margin-top:0;}
	.hhp-collections__head{display:none;}

}
@media (hover:none),(pointer:coarse){
	.hhp-track{cursor:default;}
}
@media (prefers-reduced-motion:reduce){
	.hhp-odo__reel{transition:none;}
	.hhp-card,
	.hhp-card__name,
	.hhp-card__panel,
	.hhp-card__veil::after,
	.hhp-corner{transition:none;}
}