/* Hilbert Range Tiles (Porsche-style) — v1.0.0 */
.hprt-range{
  --hprt-gap: 20px;
  --hprt-shift: 24px; /* legacy var, не используется теперь для трансформаций */
  --hprt-radius: 18px;
  --hprt-shadow: 0 10px 30px rgba(0,0,0,.20);
  --hprt-overlay-top: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
  --hprt-overlay-btm: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
  --hprt-expand: .12fr; /* насколько расширяем колонку */
  --hprt-h: clamp(300px, 34vw, 580px); /* фиксированная высота ряда */
  padding: 0px 100px;
  display:grid;
  grid-template-columns: var(--hprt-col-left, 1fr) var(--hprt-col-right, 1fr);
  gap:var(--hprt-gap);
  transition: grid-template-columns .45s cubic-bezier(.2,.6,0,1);
}

.hprt-range.hprt-theme-light {
  --hprt-overlay-top: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%);
  --hprt-overlay-btm: linear-gradient(0deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%);
}

.hprt-range>*{min-width:0}

.hprt-tile{
  position:relative;
  border-radius:var(--hprt-radius);
  overflow:hidden;
/*  box-shadow:var(--hprt-shadow); */
  transform:translateZ(0);
  transition:
    transform .45s cubic-bezier(.2,.6,0,1),
    box-shadow .35s ease;
  will-change:transform;
  background:#000;
  color:#fff;
}

.hprt-range:hover .hprt-tile{}

.hprt-tile:hover{
  z-index:2;
}

.hprt-gradient-top,
.hprt-gradient-btm{
  position:absolute; left:0; right:0; height:40%;
  pointer-events:none;
  z-index:2;
}
.hprt-gradient-top{ top:0; background:var(--hprt-overlay-top); }
.hprt-gradient-btm{ bottom:0; background:var(--hprt-overlay-btm); }

.hprt-media{
  position:relative; inset:0; width:100%;
  height: var(--hprt-h);
  background:#000;
}

.hprt-poster,
.hprt-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  opacity:1;
  transition:opacity .4s ease;
}

.hprt-poster.is-hidden{ opacity:0; }

.hprt-video{ opacity:0; }
.hprt-tile.is-playing .hprt-video{ opacity:1; }

.hprt-content{
  position:absolute; inset:auto 0 0 0;
  z-index:3;
  padding:18px 18px 16px;
  display:flex; flex-direction:column; gap:10px;
}

.hprt-tags{display:flex; flex-wrap:wrap; gap:8px;}
.hprt-badge{
  font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding:6px 8px; border-radius:999px;
  backdrop-filter:saturate(140%) blur(6px);
  background:rgba(255,255,255,.22);
  color:#111;
}
.hprt-theme-dark .hprt-badge{ background:rgba(255,255,255,.22); color:#111; }
.hprt-theme-light .hprt-badge{ background:rgba(0,0,0,.22); color:#fff; }

.hprt-desc{
  font: 400 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  max-width:78%;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

.hprt-buttons{ display:flex; align-items:center; gap:10px; }

.hprt-cta{
  appearance:none; border:0; background:transparent; color:#fff;
  display:inline-flex; align-items:center; gap:8px;
  font:600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding:8px 10px; border-radius:999px;
  backdrop-filter:saturate(140%) blur(6px);
  background:rgba(255,255,255,.18);
  transition:transform .25s ease, background .25s ease;
  cursor:pointer;
}
.hprt-cta:hover{ transform:translateY(-1px); background:rgba(255,255,255,.26) }

.hprt-arrow .hprt-ico{ opacity:.9; }

.hprt-signature{
  position:absolute; top:14px; left:16px; z-index:3;
/*  font:800 clamp(18px,2.2vw,28px)/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; */
  letter-spacing:.02em;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  pointer-events:none;
}

.hprt-theme-light .hprt-desc,
.hprt-theme-light .hprt-signature,
.hprt-theme-light .hprt-cta{ color:#111; text-shadow:none; }

.hprt-click{ position:absolute; inset:0; z-index:1; }

/* Сдвиг соседней колонки при ховере */
.hprt-range.range--hover-left  .hprt-tile[data-pos="right"]{ transform:translateX(0); }
.hprt-range.range--hover-right .hprt-tile[data-pos="left"] { transform:translateX(0); }
.hprt-range.range--hover-left  .hprt-tile[data-pos="left"]:hover{ transform:translateX(0); }
.hprt-range.range--hover-right .hprt-tile[data-pos="right"]:hover{ transform:translateX(0); }

/* Mobile */
@media (max-width: 767px){
  .hprt-range{
  --hprt-gap: 20px;
  --hprt-shift: 24px; /* legacy var, не используется теперь для трансформаций */
  --hprt-radius: 18px;
  --hprt-shadow: 0 10px 30px rgba(0,0,0,.20);
  --hprt-overlay-top: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
  --hprt-overlay-btm: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
  --hprt-expand: .12fr; /* насколько расширяем колонку */
  --hprt-h: clamp(300px, 34vw, 520px); /* фиксированная высота ряда */
  padding: 0px 0px;
  display:grid;
  grid-template-columns: var(--hprt-col-left, 1fr) var(--hprt-col-right, 1fr);
  gap:var(--hprt-gap);
  transition: grid-template-columns .45s cubic-bezier(.2,.6,0,1);
}
  .hprt-range.range--hover-left  .hprt-tile[data-pos="right"],
  .hprt-range.range--hover-right .hprt-tile[data-pos="left"]{ transform:scaleX(.985); }
  .hprt-desc{ max-width:100%; }
}


/* Расширение колонки без растягивания контента */
.hprt-range.range--hover-left  { --hprt-col-left: calc(1fr + var(--hprt-expand)); --hprt-col-right: calc(1fr - var(--hprt-expand)); }
.hprt-range.range--hover-right { --hprt-col-left: calc(1fr - var(--hprt-expand)); --hprt-col-right: calc(1fr + var(--hprt-expand)); }



/* Без ховера — поровну */
.hprt-range:not(.range--hover-left):not(.range--hover-right){
  --hprt-col-left: 1fr;
  --hprt-col-right: 1fr;
}

/* На ховере — лёгкое увеличение на 12% */
.hprt-range.range--hover-left{
  --hprt-col-left: 1.12fr;
  --hprt-col-right: 0.88fr;
}
.hprt-range.range--hover-right{
  --hprt-col-left: 0.88fr;
  --hprt-col-right: 1.12fr;
}



/* --- Mobile horizontal scroll (swipe) --- */
@media (max-width: 767px){
  .hprt-range{
    /* Горизонтальная карусель через CSS Grid */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(88vw - 24px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
  }
  .hprt-range::-webkit-scrollbar{ display:none; }
  .hprt-tile{ scroll-snap-align: start; }
  /* Отключаем кликабельную зону-ссылку на мобиле, чтобы тап запускал видео */
  .hprt-click{ pointer-events: none; }
  .hprt-content{ padding: 16px; }
}

.hprt-poster,.hprt-video{ inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); }

.hprt-video{opacity:0; transition:opacity .28s ease;}
.hprt-tile.is-ready .hprt-video{opacity:1;}     /* включаем после prime */