/* Презентация учебного портала — панель #pf (разметка templates/partials/portal_pf.html, логика static/js/portal-pf.js).
   Одна на оффер /offer2 и главную (шторка .pf-sheet — замок «Учебного портала» у бесплатного). Перенесено из
   offer2.html. */

/* Мягкий цвет группы (RGB): «Тест TOPIK» — лавандовый, тренажёры портала — мятный; тот же у строк подарка на
   оффере (решение босса 22.10.2026, исключение из «одного акцента» APP_DESIGN §10). */
:root { --g-topik: 180, 165, 255; --g-plat: 120, 212, 190; }

/* презентация встала над самой кнопкой (низкий экран) — карточки под ней скрыты:
   прячутся, когда панель уже раскрылась (.32s), показываются сразу при закрытии */
.offer-cta-block.is-under-pf .plans { visibility: hidden; transition: visibility 0s linear .32s; }

/* Панель раскрывается от средней линии вверх и вниз («двери лифта» по вертикали) и встаёт
   над блоком «Купить» — кнопка, цена и таймер остаются видны. Высоту и верх ставит JS
   (PF.open). Fixed — по правилу desktop.css: left/right 0 + max-width + margin auto. */
.pf {
    position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; max-width: var(--desktop-max-width, none);
    z-index: 150; height: 560px; display: flex; flex-direction: column; gap: 12px;
    padding: calc(18px + var(--safe-top)) 0 16px;
    background: var(--bg-elevated); border-bottom: 1px solid var(--border-light);
    border-radius: 0 0 18px 18px; box-shadow: 0 18px 40px rgba(0,0,0,.65);
    clip-path: inset(50% 0 50% 0); visibility: hidden; pointer-events: none;
    transition: clip-path .32s cubic-bezier(.2,.8,.2,1), visibility 0s linear .32s;
}
.pf.on {
    clip-path: inset(0 0 0 0); visibility: visible; pointer-events: auto;
    transition: clip-path .32s cubic-bezier(.2,.8,.2,1), visibility 0s;
}
/* В ПК-режиме «На весь экран» панель — во всю колонку: экраны там — снимки портала на компьютере,
   горизонтальные (data-src-pc, portal-pf.js), в узкой панели они мелкие */
/* пока открыта презентация, страница заперта */
html.pf-open, html.pf-open body { overflow: hidden; }
/* Цвет группы экрана в центре ленты (data-group у .pf ставит PF.paint): «Тест TOPIK» —
   лавандовый, «Учебный портал» — мятный. Он у заголовка и подсветки панели сверху;
   рамки экранов и точки — цвета своей группы, граница групп видна в самой ленте. */
.pf { --g: var(--g-topik); }
.pf[data-group="plat"] { --g: var(--g-plat); }
.pf__tint { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; }
.pf__tint--topik { background: linear-gradient(180deg, rgba(var(--g-topik), .16), rgba(var(--g-topik), 0) 55%); }
.pf__tint--plat { background: linear-gradient(180deg, rgba(var(--g-plat), .14), rgba(var(--g-plat), 0) 55%); }
.pf[data-group="topik"] .pf__tint--topik, .pf[data-group="plat"] .pf__tint--plat { opacity: 1; }
.pf__head, .pf__hide { position: relative; }
.pf-slide[data-group="topik"], .pf__dots i[data-g="topik"] { --sg: var(--g-topik); }
.pf-slide[data-group="plat"], .pf__dots i[data-g="plat"] { --sg: var(--g-plat); }
.pf__head { padding: 0 20px; }
.pf h3 { margin: 0; font-size: 17px; font-weight: 700; color: rgb(var(--g)); transition: color .35s; }
.pf__facts { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.pf__car { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.pf__track {
    flex: 1; min-height: 0; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 0 20px; scrollbar-width: none; scroll-behavior: smooth;
}
.pf__track::-webkit-scrollbar { display: none; }
.pf-slide { flex: 0 0 auto; margin: 0; scroll-snap-align: center; }
.pf-slide img {
    display: block; height: var(--slide-h, 360px); width: auto;
    border-radius: 12px; border: 1.5px solid rgba(var(--sg), .55); background: #20232a;
}
/* подпись переносится по ширине экрана (width:0 + min-width:100%), а не раздвигает
   слайд и не наезжает на соседний */
.pf-slide figcaption {
    width: 0; min-width: 100%; font-size: 12px; line-height: 1.35; color: var(--text-secondary);
    margin-top: 6px; text-align: center;
}
.pf__nav {
    position: absolute; top: 42%; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #3a3a3a;
    background: rgba(20,20,20,.85); color: var(--text); font-family: var(--font); font-size: 18px; line-height: 1; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pf__nav--prev { left: 8px; }
.pf__nav--next { right: 8px; }
.pf__dots { display: flex; justify-content: center; gap: 6px; }
.pf__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--sg), .3); }
.pf__dots i.on { background: rgb(var(--sg)); }
/* между группами — зазор: видно, где кончается TOPIK и начинается портал */
.pf__dots i.is-split { margin-left: 8px; }
.pf__hide.btn-secondary { width: auto; margin: 0 20px; background: #262628; color: var(--text-secondary); }

/* Низкий экран (html.offer-lower — до 660px, ставит оффер): у презентации меньше обвязки,
   больше места экранам портала */
html.offer-lower .pf { padding: calc(14px + var(--safe-top)) 0 12px; gap: 8px; }
html.offer-lower .pf__car { gap: 6px; }
html.offer-lower .pf__hide.btn-secondary { padding-top: 10px; padding-bottom: 10px; }

/* Шторка поверх страницы: панель сверху, блок тарифов оффера снизу (главная — замок «Учебного
   портала» у бесплатного). Фон страницы проявляется под панелью, пока она раскрывается, блок
   тарифов — вместе с ним: со стороны — тот же оффер. Над таб-баром (5000), под окнами оплаты
   и попапами (9000+). */
.pf-sheet {
    position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: var(--desktop-max-width, none);
    z-index: 6000; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 20px calc(16px + var(--safe-bottom) + var(--nav-bar-offset, 0px));
    visibility: hidden; pointer-events: none;
    transition: visibility 0s linear .32s;
}
.pf-sheet.on { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.pf-sheet::before {
    content: ''; position: absolute; inset: 0; background: var(--bg);
    opacity: 0; transition: opacity .32s ease;
}
.pf-sheet__buy { position: relative; width: 100%; max-width: 420px; margin: 0 auto; opacity: 0; transition: opacity .32s ease; }
.pf-sheet.on::before, .pf-sheet.on .pf-sheet__buy { opacity: 1; }
/* ПК-режим: блок тарифов той же ширины, что на оффере (колонка 640 без полей, pc-wide.css) */
html.pc-wide .pf-sheet__buy { max-width: 600px; }
.pf-sheet .offer-cta-block { margin: 0; }
.pf-sheet .offer-promo-timer { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .pf, .pf.on, .pf-sheet, .pf-sheet.on, .pf-sheet::before, .pf-sheet__buy { transition: none; }
    .pf__track { scroll-behavior: auto; }
}