/* Hilbert Topic Explorer — Porsche-like (v1.1.3) */

/* ====== МОДУЛЬ: фон верх 50% тёмный, низ 50% белый ====== */
.hhte{
  --hhte-text:#fff;
  --hhte-overlay-strength:.66;
  --hhte-overlay-open: .9; 
  --hhte-radius:20px;
  --hhte-gap:clamp(14px,1.8vw,22px);
  --hhte-side-pad:clamp(16px,2vw,24px);
  --hhte-card-w:min(88vw,720px);
  --hhte-title:clamp(22px,2.6vw,30px);
  --hhte-body:clamp(14px,1.25vw,16px);
  --hhte-ctrl-pad:clamp(14px,2.2vw,20px);
  --hhte-ratio:16/9;
  --hhte-dots-offset: clamp(18px, 2.2vw, 28px);

  position:relative; display:block;
  /* верх 0e0e12 до 50%, далее белый */
  background: #fff;
  color: var(--hhte-text);
  padding: clamp(12px,1.2vw,16px) 0;
  isolation:isolate;
  padding-top: 80px;
  padding-bottom: 10px;
  padding-left: 60px;
  
}

/* Viewport / Track 
.hhte__viewport{ overflow:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scrollbar-width:none; padding:0 var(--hhte-side-pad); }
.hhte__viewport::-webkit-scrollbar{ display:none; }
 */

.hhte__viewport{
  overflow-x: auto;
  overflow-y: hidden;              /* внутри секции нет вертикального скролла */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 var(--hhte-side-pad);
  touch-action: auto;              /* десктоп/трекпад — не ограничиваем вертикаль */
  /* overscroll-behavior-y: contain;  ← если было, УДАЛИТЬ, чтобы страница скроллилась */
}

/* На тач-устройствах можно оставить pan-x */
@media (pointer: coarse){
  .hhte__viewport{ touch-action: pan-x; }
}

.hhte__track{ display:grid; grid-auto-flow:column; grid-auto-columns:var(--hhte-card-w); gap:var(--hhte-gap); align-items:stretch; }

.hhte__slide.is-open .hhte__overlay{
  opacity: var(--hhte-overlay-open);
}

/* Slide */
.hhte__slide{ position:relative; border-radius:var(--hhte-radius); overflow:clip; scroll-snap-align:center; background:#000; aspect-ratio:var(--hhte-ratio); /*  box-shadow:0 10px 30px rgba(0,0,0,.15);*/ transition:transform .45s cubic-bezier(.22,.65,.21,1),/* box-shadow .45s ease;*/ }
.hhte__slide.is-active{ transform:translateZ(0) scale(1.02); /* box-shadow:0 12px 36px rgba(0,0,0,.20); */ }

/* Media + overlay */
.hhte__media{ position:absolute; inset:0; }
.hhte__media-el{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hhte__overlay{ position:absolute; inset:0; z-index:1; background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,0.88) 85%
  ); /* background:linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.88) 85%);*/ opacity:1; transition:opacity .4s ease; }
.hhte__slide.is-active .hhte__overlay{ opacity:var(--hhte-overlay-strength); }

/* Arrows (тонкие, как в рефе) */
.hhte__arrows{ position:absolute; right:var(--hhte-side-pad); top:clamp(8px,1.2vw,12px); display:flex; gap:16px; z-index:6; top: 150px; }
.hhte__arrow{ position:relative; width:36px; height:24px; padding:0; border:0; background:none; color:#000; opacity:.92; cursor:pointer; transition:opacity .15s ease, transform .15s ease; }
.hhte__arrow:hover{ transform:translateY(-1px); opacity:1; }
.hhte__arrow::after{ content:""; position:absolute; top:50%; left:7px; right:7px; height:0; border-top:1px solid currentColor; transform:translateY(-50%); }
.hhte__arrow::before{ content:""; position:absolute; top:50%; width:10px; height:10px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateY(-50%) rotate(-45deg); }
.hhte__prev::before{ left:6px; transform:translateY(-50%) rotate(135deg); }
.hhte__next::before{ right:6px; transform:translateY(-50%) rotate(-45deg); }
.hhte__arrow.is-disabled{ opacity:.35; pointer-events:none; }

/* Dots */
.hhte__dots{
  position: static;
  display: flex;
  justify-content: center;          /* ← было center */
  gap: 8px;
  margin-top: clamp(10px, 1.6vw, 16px);
  padding: 0 0 clamp(10px, 2vw, 20px) var(--hhte-side-pad); /* отступ слева как у карточек */
  z-index: 1;
}

/* Сами точки */
.hhte__dot{ width:8px; height:8px; border-radius:999px; background:#c8c8c8; transition:width .25s ease, background .25s ease; }
.hhte__dot.is-active{ width:26px; background:#000; border-radius:999px; }

/* Text */
.hhte__text{ position:absolute; left:0; right:0; bottom:calc(var(--hhte-ctrl-pad) + 26px); padding:var(--hhte-ctrl-pad); max-width:88%; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35); z-index:3; padding-bottom: 10px;}
.hhte__title{ font-size:var(--hhte-title); line-height:1.08; letter-spacing:-.01em; margin:0; transition:opacity .3s ease, transform .3s ease; }

/* ====== Условие 2: при открытии скрываем заголовок ====== */
.hhte__slide.is-open .hhte__title{ opacity:0; transform:translateY(-6px); pointer-events:none; }

/* Expandable */
.hhte__descwrap{ position:absolute; left:0; right:0; bottom:calc(var(--hhte-ctrl-pad) + 50px); padding:0 var(--hhte-ctrl-pad); z-index:2; pointer-events:none; }
.hhte__slide.is-open .hhte__descwrap{ z-index:4; } /* чтобы контент был над текстовой областью */
.hhte__desc{ font-size:var(--hhte-body); line-height:1.5; max-height:0; overflow:hidden; opacity:0; transform:translateY(8px); transition:max-height .5s ease, opacity .5s ease, transform .5s ease; pointer-events:auto; }
.hhte__slide.is-open .hhte__desc{ opacity:1; transform:none; }
.hhte__desc table{ width:100%; border-collapse:collapse; }
.hhte__desc th, .hhte__desc td{ padding:.5em .7em; border-bottom:none; /* border-bottom:1px solid rgba(255,255,255,.25); */ }
.hhte__desc th{ text-align:left; opacity:.9; font-weight:600;width: 30%; }
tbody tr:hover {background: none;}

/* Bottom controls */
.hhte__more{ position:absolute; left:var(--hhte-ctrl-pad); bottom:var(--hhte-ctrl-pad); display:inline-flex; align-items:center; gap:8px; color:#fff; background:transparent; border:0; cursor:pointer; padding:6px 6px; z-index:7; font-size:var(--hhte-body); transition:transform .2s ease; }
.hhte__more:hover{ transform:translateY(-1px); }
.hhte__more-icn{ width:10px; height:10px; display:inline-block; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg); transition:transform .3s ease; }
.hhte__slide.is-open .hhte__more-icn{ transform:rotate(-135deg); }

.hhte__cta{ position:absolute; right:var(--hhte-ctrl-pad); bottom:var(--hhte-ctrl-pad); margin:0; font-size:clamp(12px,1.2vw,14px); padding: 5px 15px;
    border-radius: 12px; border:1px solid rgba(255,255,255,.5); color:#fff; text-decoration:none; backdrop-filter:blur(4px); transition:transform .25s ease, border-color .25s ease, background-color .25s ease; z-index: 1;}
.hhte__cta:hover{ transform:translateY(-1px); border-color:#fff; background:rgba(255,255,255,.08); }

/* Mobile */
@media (max-width: 767px){
  .hhte__desc th {width:60%}
  .hhte{ --hhte-card-w:88vw;padding-top: 60px;padding-left: 0px; }
  .hhte__arrows{ right:var(--hhte-side-pad); top:calc(15px + env(safe-area-inset-top,0px)); }
  .hhte__dots{ bottom:calc(6px + env(safe-area-inset-bottom,0px)); }
  .hhte__text {padding-bottom: 0px;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hhte__slide, .hhte__desc, .hhte__overlay{ transition:none!important; }
}

@media (max-width: 767px){
  .hhte__dots{ bottom: calc(var(--hhte-dots-offset) + env(safe-area-inset-bottom, 0px));}
  .hhte__descwrap{ position:absolute; left:0; right:0; bottom:calc(var(--hhte-ctrl-pad) + 10px)}
}


/* ---- Topic Explorer: Head (title + subtitle) ---- */
.hhte{
  --hhte-max: 1440px;
  --hhte-pad-x: clamp(16px, 2vw, 24px);
}

.hhte__head{
  max-width: var(--hhte-max);
/*  margin: 0 auto clamp(10px, 2.4vw, 18px); */
  padding: 0 var(--hhte-pad-x);
  padding-top: 30px;
  padding-bottom: 40px;
}

.hhte__head-in{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35em;
}

.hhte__head-title{
  margin: 0; font-weight: 500 !important; line-height: 1.1;
  color: #000;
  letter-spacing: -.01em;
    font-size: clamp(21px, 3.2vw, 48px);
    margin: 0 0 .45em;
}

.hhte__head-sub{
  margin: 0;
  font-size: clamp(14px, 1.2vw, 18px);
  opacity: .85;
  color: #000;
}

/* Чтобы стрелки шли отдельным блоком и не «налезали» на заголовок */
.hhte__arrows{ margin-top: clamp(6px, 1.2vw, 10px); }
@media (max-width: 767.98px){
  .hhte__head-title{ font-size: clamp(22px, 6vw, 32px); }
  .hhte__head-sub{ font-size: 14px; }
	.hhte__head{  padding-top: 30px; padding-bottom: 40px;}
}

/* Улучшение тача и скролла */
.hhte__viewport{
  /* разрешаем вертикальный скролл страницы, горизонталь берём на себя */
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: none; /* если где-то включили — выключим здесь */
  cursor: grab;
}
.hhte.is-grabbing .hhte__viewport{ cursor: grabbing; }
.hhte.is-grabbing, .hhte.is-grabbing *{
  user-select: none; -webkit-user-select: none;
}