/* Лендинг /popov/: всё, чего нет на странице раздела. Основа — styles.css. */

/* ── Шапка поверх первого экрана ── */
.lp-header { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 5; color: white; }
.lp-header-inner { display: flex; align-items: center; height: 4.5rem; gap: 0.5rem; }
.lp-header .brand { color: white; }
.lp-header .icon-btn { color: white; }
.lp-header .icon-btn:hover { background: oklch(1 0 0 / 14%); }
.lp-header .header-actions { gap: 0.5rem; }
@media (max-width: 419px) { .lp-header .brand span { display: none; } }

/* ── Первый экран на всю высоту ── */
.lp-hero { min-height: 100svh; }
.lp-hero .hero-inner { padding-block: 7rem 5rem; }
.lp-hero .hero-shade {
  background:
    linear-gradient(180deg, oklch(0.16 0.04 252 / 70%) 0%, transparent 18%),
    linear-gradient(90deg, oklch(0.16 0.04 252 / 94%) 0%, oklch(0.16 0.04 252 / 76%) 38%, oklch(0.16 0.04 252 / 8%) 72%),
    linear-gradient(0deg, oklch(0.16 0.04 252 / 85%) 0%, transparent 45%);
}
.lp-hero .hero-teaser { inset-block-end: 5rem; }
.scroll-cue { position: absolute; inset-inline-start: 50%; inset-block-end: 1.25rem; transform: translateX(-50%); width: 2.75rem; height: 2.75rem; border-radius: 999px; display: grid; place-items: center; color: oklch(1 0 0 / 75%); border: 1px solid oklch(1 0 0 / 22%); animation: bob 2.4s ease-in-out infinite; }
.scroll-cue:hover { color: white; background: oklch(1 0 0 / 10%); }
@keyframes bob { 50% { transform: translate(-50%, 6px); } }

/* Телефон и планшет: видео на весь экран, титр тизера сверху — как в сторис. */
@media (max-width: 1099px) {
  .lp-hero { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100svh; }
  .lp-hero .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; object-position: 65% center; z-index: -2; }
  .lp-hero .hero-shade { position: absolute; inset: 0; z-index: -1; padding: 0; height: auto;
    background: linear-gradient(0deg, oklch(0.16 0.04 252 / 97%) 0%, oklch(0.16 0.04 252 / 88%) 38%, oklch(0.16 0.04 252 / 25%) 62%, oklch(0.16 0.04 252 / 70%) 100%); }
  .lp-hero .hero-teaser { position: absolute; inset-block-start: 5rem; inset-block-end: auto; inset-inline: 1.25rem; width: auto; margin: 0; text-align: start; z-index: 2; }
  .lp-hero .hero-caption { font-size: clamp(1.375rem, 1rem + 2vw, 2rem); justify-content: flex-start; min-height: 0; }
  .lp-hero .hero-inner { padding-block: 0 4.5rem; }
  .lp-hero .hero-meta { margin-block-start: 1.25rem; }
}
@media (max-width: 640px) {
  .scroll-cue { display: none; }
  .lp-hero .hero-inner { padding-block-end: 2.25rem; }
  .lp-hero .hero-lead { margin: 1rem 0 1.5rem; }
  .lp-hero .hero-actions .btn { flex: 1 1 100%; }
}
@media (min-width: 641px) and (max-width: 1099px) {
  .lp-hero .hero-teaser { inset-inline: 2rem; }
  /* Планшет и узкий ноутбук: собственный текст ролика слева просвечивал сквозь заголовок. */
  .lp-hero .hero-shade {
    background:
      linear-gradient(180deg, oklch(0.16 0.04 252 / 75%) 0%, transparent 24%),
      linear-gradient(90deg, oklch(0.16 0.04 252 / 94%) 0%, oklch(0.16 0.04 252 / 80%) 45%, oklch(0.16 0.04 252 / 20%) 85%),
      linear-gradient(0deg, oklch(0.16 0.04 252 / 90%) 0%, transparent 55%);
  }
}

/* ── Маршруты ── */
.route-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); }
.route-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 1.375rem; background: var(--card); overflow: hidden; cursor: pointer; transition: border-color .15s, transform .2s, box-shadow .2s; }
.route-card:hover { border-color: color-mix(in oklch, var(--primary) 45%, var(--border)); transform: translateY(-2px); box-shadow: 0 14px 40px oklch(0.2 0.05 252 / 10%); }
.route-thumbs { display: grid; gap: 2px; aspect-ratio: 16 / 7; background: var(--brand-navy); }
.route-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.route-body { padding: 1.25rem 1.25rem 1.375rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.route-who { margin: 0; font-weight: 650; font-size: var(--ts-h4-size); letter-spacing: var(--ts-h4-tracking); line-height: 1.25; }
.route-min { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; }
.route-text { margin: 0; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.5; }
.route-steps { list-style: none; margin: 0.25rem 0 0; padding: 0.75rem 0 0; border-block-start: 1px solid var(--border); display: grid; gap: 0.3rem; font-size: 0.8125rem; line-height: 1.35; color: var(--muted-foreground); }
.route-steps b { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; margin-inline-end: 0.375rem; }
.route-body .route-go { margin-block-start: auto; align-self: flex-start; }
.route-steps { margin-block-end: 1rem; }
@media (max-width: 640px) {
  .route-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -1.25rem; padding-inline: 1.25rem; scroll-padding-inline: 1.25rem; padding-block-end: 0.5rem; scrollbar-width: none; }
  .route-card { scroll-snap-align: start; }
  .route-card:hover { transform: none; }
}

/* Полоса маршрута над плеером и отметки на шкале */
.route-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; padding: 0.75rem 1rem 1rem; margin-block-end: 0.75rem; border-radius: 1rem; background: var(--cine-panel); border: 1px solid var(--cine-border); color: var(--cine-fg); font-size: 0.875rem; overflow: hidden; }
.route-badge { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--cine-primary); color: var(--cine-panel); }
.route-name { font-weight: 650; }
.route-step { color: var(--cine-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-left { color: var(--cine-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.route-exit { font-size: 0.8125rem; color: var(--cine-fg); }
.route-progress { position: absolute; inset-inline: 0; inset-block-end: 0; height: 3px; background: var(--cine-border); }
.route-progress i { display: block; height: 100%; width: 0; background: var(--cine-primary); transition: width .3s linear; }
.route-marks { position: absolute; inset-inline: 0; inset-block-end: 0.625rem; height: 1rem; pointer-events: none; }
.route-marks i { position: absolute; inset-block-end: 0; height: 5px; border-radius: 3px; background: oklch(0.82 0.12 253); box-shadow: 0 0 0 1px oklch(0 0 0 / 35%); }
.timeline.in-route .heat { opacity: 0; }
@media (max-width: 640px) { .route-step { flex-basis: 100%; order: 3; } }

/* ── Цифры ── */
.num-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 1.375rem; overflow: hidden; }
@media (min-width: 560px) { .num-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .num-grid { grid-template-columns: repeat(3, 1fr); } }
.num { background: var(--card); padding: 1.75rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.625rem; }
.num-big { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.35em; margin: 0; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1; color: var(--primary); font-variant-numeric: tabular-nums; }
.num-big small { font-size: 0.42em; letter-spacing: -0.01em; font-weight: 600; color: var(--muted-foreground); white-space: nowrap; }
.num-val { white-space: nowrap; }
.num-label { margin: 0; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.5; }
.num-src { margin-block-start: auto; padding-block-start: 0.5rem; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.375rem; border: 0; background: none; padding-inline: 0; color: var(--primary); font-weight: 600; font-size: 0.875rem; cursor: pointer; font-variant-numeric: tabular-nums; }
.num-src:hover { text-decoration: underline; text-underline-offset: 3px; }
.num-src svg { width: 0.875rem; height: 0.875rem; }

/* ── Профагент: фирменный тёмно-синий блок в обеих темах ── */
.lp-pa { color: white; padding-block: var(--space-section); background: radial-gradient(120% 90% at 85% 0%, oklch(0.36 0.13 256) 0%, oklch(0.2 0.06 252) 55%, oklch(0.16 0.04 252) 100%); overflow: hidden; }
.pa-head { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .pa-head { grid-template-columns: 1fr 1.05fr; gap: 3.5rem; } }
.pa-eyebrow { color: oklch(0.85 0.12 85); }
.pa-lead { color: oklch(1 0 0 / 78%); margin: 1.25rem 0 2rem; }
.pa-visual { position: relative; display: block; padding: 0; border: 0; border-radius: 1.375rem; overflow: hidden; cursor: pointer; box-shadow: 0 30px 80px oklch(0 0 0 / 45%); background: black; }
.pa-visual img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .4s; }
.pa-visual:hover img { transform: scale(1.03); }
.pa-visual-play { position: absolute; inset-inline-end: 1.25rem; inset-block-end: 1.25rem; width: 3.5rem; height: 3.5rem; border-radius: 999px; display: grid; place-items: center; background: oklch(1 0 0 / 92%); color: var(--brand-blue); }
.pa-visual-play svg { width: 1.375rem; height: 1.375rem; margin-inline-start: 0.2rem; }
.pa-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); margin-block-start: 3rem; }
.pa-card { display: flex; flex-direction: column; text-align: start; padding: 0; border-radius: 1.125rem; overflow: hidden; border: 1px solid oklch(1 0 0 / 12%); background: oklch(1 0 0 / 6%); color: inherit; cursor: pointer; transition: background-color .15s, border-color .15s; }
.pa-card:hover { background: oklch(1 0 0 / 10%); border-color: oklch(1 0 0 / 22%); }
.pa-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pa-card-body { padding: 1rem 1.125rem 1.25rem; display: grid; gap: 0.375rem; }
.pa-card-title { margin: 0; font-size: 1.125rem; font-weight: 650; letter-spacing: -0.01em; }
.pa-card-text { margin: 0; color: oklch(1 0 0 / 72%); font-size: 0.9375rem; line-height: 1.5; }
.pa-time { display: inline-flex; align-items: center; gap: 0.3rem; color: oklch(0.82 0.1 253); font-weight: 600; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.pa-time svg { width: 0.8rem; height: 0.8rem; }
@media (max-width: 640px) {
  .pa-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -1.25rem; padding-inline: 1.25rem; scroll-padding-inline: 1.25rem; padding-block-end: 0.5rem; scrollbar-width: none; margin-block-start: 2rem; }
  .pa-card { scroll-snap-align: start; }
  .lp-pa .hero-actions .btn { flex: 1 1 100%; }
}

/* ── Финальный призыв ── */
.lp-cta { position: relative; isolation: isolate; overflow: hidden; color: white; text-align: center; background: var(--hero-bg); padding-block: clamp(4.5rem, 3rem + 6vw, 9rem); }
.lp-cta::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/media/talks/popov/frames/poster.jpg") 70% 30% / cover no-repeat; opacity: .32; }
.lp-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 90% at 50% 50%, oklch(0.18 0.05 252 / 72%), oklch(0.16 0.04 252 / 96%)); }
.lp-cta-title { margin: 0 auto; max-width: 18ch; font-size: var(--ts-display-size); letter-spacing: var(--ts-display-tracking); line-height: 1.05; font-weight: 650; text-wrap: balance; }
.lp-cta-lead { margin: 1.25rem auto 2.25rem; max-width: 36rem; color: oklch(1 0 0 / 80%); }
.lp-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.lp-share { margin-block-start: 1.75rem; color: oklch(1 0 0 / 80%); font-size: 0.9375rem; }
@media (max-width: 640px) { .lp-cta-actions .btn { flex: 1 1 100%; } }

.lp-footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.lp-footer-links a { color: white; text-decoration: none; }
.lp-footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Одно кадрирование для всех планов: лицо остаётся в центральной полосе обрезки. */
.lp-hero .hero-video { object-position: 65% center; }
.lp-hero .hero-inner { padding-block-start: 8rem; }
@media (max-width: 1099px) {
  .lp-hero .hero-inner { padding-block-start: 19rem; }
  .lp-hero .hero-teaser { inset-block-start: 5rem; }
  .lp-hero .hero-caption { max-inline-size: 18rem; font-size: 1rem; }
  .lp-hero .story-bars { display: none; }
  .lp-hero .hero-caption { display: none; }
}
@media (max-width: 640px) {
  .lp-hero .hero-inner { padding-block-start: 17.5rem; }
  .lp-hero .type-display { font-size: clamp(1.875rem, 7.4vw, 2.75rem); }
  .lp-hero .hero-lead { font-size: 1rem; line-height: 1.5; }
  .lp-hero .hero-meta { gap: .35rem .75rem; font-size: .75rem; }
  .lp-hero .hero-motion { margin-block-start: .375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp .scroll-cue { animation: none; }
}