/* ============================================================
   Ария Огнева — практикумы «Мой кодекс» (praktikum.html) и «Корона спасателя» (korona.html)
   Подключается после site.css и info.css. Блоки страниц — классы info.css (лесенка, факты, маршрут,
   «было / стало», тарифы, вопросы); здесь только то, чем практикумы отличаются:
   лесенка на пять шагов, четыре карточки формата, одна карточка цены, зачёркнутая цена и таймер,
   видео вместо обложки, заглушка «уточняется». Цвета — переменные site.css.
   ============================================================ */

/* ---------- первый экран ---------- */
.p-hero h1{margin-bottom:18px}
.p-hero--code h1{font-size:clamp(50px,5.4vw,78px)}
.p-hero--crown h1{font-size:clamp(34px,3.5vw,50px)}
.p-name{max-width:560px;margin:0 0 24px;font-family:var(--f-display);font-weight:var(--fw-display);font-size:clamp(22px,2vw,29px);line-height:1.25;color:var(--ink);text-wrap:balance}

/* зачёркнутая цена: в кнопке и в карточке */
.p-old{text-decoration:line-through;text-decoration-thickness:1.5px;font-weight:600;opacity:.6}
.btn .price .p-old{margin-right:.45em}

/* таймер цены (текст ставит praktikum.js; без JS — статичная строка) */
.p-timer{display:flex;align-items:center;gap:9px;font-variant-numeric:tabular-nums}
.p-timer::before{content:"";flex:none;width:14px;height:18px;background:var(--grad-fire);-webkit-mask:var(--flame-i) center/contain no-repeat;mask:var(--flame-i) center/contain no-repeat}
.p-timer b{font-weight:800;letter-spacing:.02em;color:var(--ink)}
/* строка таймера по центру: под карточкой цены «Короны» и в финале обоих практикумов */
.p-timer--c{margin:26px auto 0;font-size:15px;color:var(--ink-2);text-align:center}
/* «Корона»: таймер в плавающем баннере (ПК) и над нижней кнопкой (телефон — в адаптиве); после суток этих строк нет */
.promo .p-timer{margin-top:3px;font-size:13px;line-height:1.4}
.promo .p-timer::before{width:12px;height:16px}
.promo .p-timer b{display:inline;margin:0;font:800 13px/1.4 var(--f-body);letter-spacing:.02em;color:var(--ink)}
.p-full .promo .p-timer,.p-full .mbar .p-timer{display:none}
/* Вернувшийся посетитель: пока praktikum.js не посчитал таймер, заготовку «держится 24 часа» не показываем.
   Если сутки уже прошли (видно из ключа ещё до скрипта, строка в начале <main>), прячем и цены: в разметке скидочные,
   скрипт вот-вот поставит полные. Без этого на медленном интернете мелькали 90 € и «24 часа», а потом 150 €. */
.p-wait [data-timer],.p-wait.p-full [data-price],.p-wait.p-full a[href*="oplata.html?p="] .price{visibility:hidden}
.p-full .p-old,.p-full [data-badge]{display:none}
/* в этих местах строка — обычный текст, не flex: если не влезает (узкий телефон, грузинский, текст «после суток»),
   переносится по словам, значок остаётся у первого слова, время не разрывается */
.p-timer--c,.final .p-timer,.mbar--timer .p-timer,.promo .p-timer{display:block;text-wrap:balance}
.p-timer--c::before,.final .p-timer::before,.mbar--timer .p-timer::before,.promo .p-timer::before{display:inline-block;margin-right:.55em;vertical-align:-.25em}
.p-timer--c b,.final .p-timer b,.mbar--timer .p-timer b,.promo .p-timer b{margin-left:.2em;white-space:nowrap}

/* видео вместо обложки («Корона спасателя») */
.p-video-box .ring{border-radius:calc(var(--r-lg) + 12px)}
.p-video{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:4/5;border-radius:var(--r-lg);box-shadow:0 40px 90px -40px rgba(var(--shade-rgb),.6)}
.p-video .ph{height:100%;aspect-ratio:auto;border-radius:inherit}
.p-video .ph b{font-size:16px}

/* ---------- программа: лесенка из пяти кристаллов ----------
   info.css рассчитан на шесть ступеней; на ПК меняем сетку и шнур на пять, телефон (аккордеон) общий */
@media (min-width:901px){
  .ladder--5{--rise:34px;grid-template-columns:repeat(5,minmax(0,1fr))}
  .ladder--5 .ladder-fuse{margin:0 calc((100% - 4 * var(--g)) / 10)}
  .ladder--5 .ladder-fuse::before{background:var(--crystal) 0 50%/12px 16px no-repeat,var(--crystal) 25% 50%/12px 16px no-repeat,var(--crystal) 50% 50%/12px 16px no-repeat,var(--crystal) 75% 50%/12px 16px no-repeat,var(--crystal) 100% 50%/12px 16px no-repeat}
  .ladder--5 .ladder-fuse i{width:calc((var(--at) - 1) / 4 * 100%)}
  .ladder--5 .ladder-fuse b{left:calc((var(--at) - 1) / 4 * 100%)}
}
/* видимая заглушка там, где текст ещё уточняется */
.p-stub{display:inline-block;margin:2px 0 0 4px;padding:2px 10px;border:1.5px dashed rgba(var(--edge-rgb),.42);border-radius:999px;font-size:13px;font-weight:600;line-height:1.4;color:var(--ink-3);vertical-align:1px}

/* ---------- формат: четыре карточки ---------- */
.facts--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.facts--4 .fact b{font-size:21px}

/* ---------- автор ---------- */
.p-sign{margin:-6px 0 22px;font-size:15px;font-weight:700;letter-spacing:.01em;color:var(--pink-2)}

/* ---------- отзывы ---------- */
.rev-grid+.oldname{margin-top:24px}

/* ---------- цена: одна карточка ---------- */
.tariffs--one{grid-template-columns:minmax(0,1fr);max-width:560px}
.t-price .p-old{font-family:var(--f-display);font-weight:var(--fw-display);font-size:clamp(26px,2.4vw,32px);line-height:1;color:var(--ink-3)}
.t-price .p-timer{flex-basis:100%;margin-top:4px}
.t-price .p-timer b{font:800 14px/1.3 var(--f-body);background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink)}
/* «А если нужно глубже» — карточка под ценой: текст, под ним кнопка */
.p-deeper{flex-direction:column;align-items:flex-start;max-width:760px;padding:28px 32px;gap:18px;text-align:left;border-radius:var(--r-lg)}
.p-deeper p b{color:var(--ink)}
.p-nw{white-space:nowrap}
/* «Корона» и «Мой кодекс»: «А если нужно глубже» — отдельным блоком в самом конце страницы, после финала */
.p-deeper-sec{padding:clamp(56px,7vw,100px) 0 clamp(16px,2.5vw,36px)}
.p-deeper-sec .t-note{margin-top:0}

/* ---------- вопросы: ответ из нескольких абзацев ---------- */
.faq .ans p+p{margin-top:12px}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:1080px){
  .facts--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts--4 .fact,.facts--4 .fact:nth-child(n+4){grid-column:auto}
}
@media (max-width:900px){
  /* в аккордеоне у ступени только дни — без хвостовой точки-разделителя */
  .ladder .mod-d b:last-child::after{content:none}
  /* «Корона»: у ступени нет строки с днями — название по центру высоты */
  .ladder--plain .mod-t{grid-row:1/-1}
  .p-deeper{max-width:560px;padding:24px 22px}
  .p-video-box{width:min(340px,78vw)}
  /* «Корона»: над нижней кнопкой — строка таймера; панель «Варианты макета» поднята над плашкой */
  .mbar--timer{flex-direction:column;gap:5px;padding:9px 8px 8px;border-radius:30px}
  .mbar--timer .p-timer{margin:0;font-size:13px;line-height:1.3;color:var(--ink-2);text-align:center}
  html[data-btn] .mbar--timer .btn{flex:none}
  .mbar--timer.show~.vpanel{bottom:110px}
}
@media (max-width:560px){
  .facts--4{grid-template-columns:minmax(0,1fr)}
  .p-hero--code h1{font-size:50px}
  .p-hero--crown h1{font-size:31px}
  .p-name{font-size:22px}
  .p-deeper{padding:22px 20px}
  .p-deeper .btn{width:100%}
  .final .lead.p-timer{font-size:15.5px}
}