/* ════════════════════════════════════════════════════════════════
   white-lands.com · головна, оновлення 26.09. Лише нові компоненти
   поверх шкіри TERMINAL (redesign2.css), обмежені body.wl-redesign:
   біжучий рядок платформ, колонки скрінів у героях, лайтбокс,
   чотири типи лендів, блок локалізації.
   ════════════════════════════════════════════════════════════════ */

/* ── біжучий рядок платформ (замість статичного eyebrow) ── */
body.wl-redesign .hero-tick{display:flex;align-items:center;gap:0;padding:0;width:100%;max-width:100%;min-width:0;overflow:hidden}
body.wl-redesign .hero-tick__lead{display:flex;align-items:center;gap:10px;padding:8px 14px;white-space:nowrap;
  border-right:1px solid var(--border-bright);color:var(--text)}
body.wl-redesign .hero-tick__win{position:relative;overflow:hidden;flex:1;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
body.wl-redesign .hero-tick__track{display:flex;width:max-content;animation:wl-tick 26s linear infinite}
body.wl-redesign .hero-tick__track span{padding:8px 0;white-space:nowrap;color:var(--text-muted)}
body.wl-redesign .hero-tick__track span::after{content:"·";margin:0 16px;color:var(--accent)}
body.wl-redesign .hero-tick:hover .hero-tick__track{animation-play-state:paused}
@keyframes wl-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── герой: права колонка тепер ширша й несе скріни ── */
body.wl-redesign .hero-arb__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
body.wl-redesign .hero-arb__grid>div:first-child{border-right:1px solid var(--border);min-width:0}
body.wl-redesign .hero-reel{position:relative;overflow:hidden;display:flex;gap:14px;padding:0 14px;
  background:var(--bg-alt);min-height:560px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent)}
/* доріжка поза потоком: висоту героя задає текст зліва, а не кількість скрінів */
.hero-reel__col{flex:1;min-width:0;position:relative;overflow:hidden}
.hero-reel__track{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:14px;padding-top:14px;
  animation:wl-reel-up var(--dur,40s) linear infinite;will-change:transform}
.hero-reel__col.is-down .hero-reel__track{animation-name:wl-reel-down}
body.wl-redesign .hero-reel:hover .hero-reel__track{animation-play-state:paused}
@keyframes wl-reel-up{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 7px))}}
@keyframes wl-reel-down{from{transform:translateY(calc(-50% - 7px))}to{transform:translateY(0)}}
.hr-card{display:block;position:relative;width:100%;padding:0;margin:0;border:1px solid var(--border-bright);
  background:#111;cursor:zoom-in;border-radius:6px;overflow:hidden;text-align:left;font:inherit;color:inherit}
.hr-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.hr-card__cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:8px;
  padding:26px 10px 8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:#e8e8e8;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.9) 55%)}
.hr-card__cap b{font-weight:500;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-card:hover,.hr-card:focus-visible{border-color:var(--accent);outline:none}
@media (max-width:1199px){
  body.wl-redesign .hero-arb__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}
@media (max-width:899px){
  /* minmax(0,…), а не 1fr: інакше мін. ширина біжучого рядка розпирає колонку за екран */
  body.wl-redesign .hero-arb__grid{grid-template-columns:minmax(0,1fr)}
  body.wl-redesign .hero-arb__grid>div:first-child{border-right:none;border-bottom:1px solid var(--border)}
  body.wl-redesign .hero-reel{min-height:0;height:430px}
}
@media (prefers-reduced-motion:reduce){
  body.wl-redesign .hero-tick__track,.hero-reel__track{animation:none}
}

/* ── лайтбокс «сторінка цілком» ── */
.wl-lb{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(4,5,4,.86);backdrop-filter:blur(3px)}
.wl-lb.is-open{display:flex}
html.wl-lb-lock{overflow:hidden}
.wl-lb__panel{width:min(760px,100%);max-height:100%;display:flex;flex-direction:column;
  background:var(--bg,#0b0c0b);border:1px solid var(--border-bright,#333);border-radius:8px;overflow:hidden}
.wl-lb__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;
  border-bottom:1px solid var(--border,#222);font-family:var(--mono,monospace);font-size:12px;color:var(--text-muted,#aaa)}
.wl-lb__x{background:none;border:1px solid var(--border-bright,#333);color:var(--text,#eee);cursor:pointer;
  width:32px;height:32px;border-radius:4px;font-size:14px}
.wl-lb__x:hover{border-color:var(--accent,#8cff5a)}
.wl-lb__scroll{overflow-y:auto;-webkit-overflow-scrolling:touch}
.wl-lb__img{display:block;width:100%;height:auto}
@media (max-width:640px){.wl-lb{padding:10px}}

/* ── приклади: картка coverflow тепер відкриває лайтбокс ── */
body.wl-redesign .cfx-card{cursor:zoom-in}
body.wl-redesign .cfx-shot{object-fit:cover;object-position:top}

/* ── чотири типи лендів ── */
body.wl-redesign .price-cards.types-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
body.wl-redesign .price-card__new{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;
  background:var(--accent);color:#0B0C0B;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;vertical-align:middle}
body.wl-redesign .types-note{margin:26px auto 0;max-width:760px;text-align:center;color:var(--text-muted);font-size:.95rem}
body.wl-redesign .types-note a{color:var(--accent)}
@media (max-width:1199px){body.wl-redesign .price-cards.types-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){body.wl-redesign .price-cards.types-4{grid-template-columns:1fr}}

/* ── мови й гео: без каруселі країн, картки деталей і мовні теги ── */
body.wl-redesign .lang-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:34px auto 0;max-width:900px}
body.wl-redesign .lang-tags span{padding:6px 12px;border:1px solid var(--border-bright);font-family:var(--mono);
  font-size:.8rem;color:var(--text-muted)}
body.wl-redesign .lang-tags span.more{border-color:var(--accent);color:var(--accent)}