/* ==========================================================================
   oft-pages.css — блоки лендинга «Пробное офлайн-тестирование», добавленные
   к базовым секциям: школы и адреса, структура теста, видеоинструкции,
   правила проведения (PDF на странице), развёрнутый FAQ.
   Дополняет styles.css (токены, .btn, .header) и offline-test.css
   (коричневая палитра, .tr-card, .ot-acc, .ot-block, .ot-footer).
   ========================================================================== */

/* подблок внутри секции лендинга (правила: выдержки → списки → документ) */
.ot-block--sub{margin-top:28px}

/* ==========================================================================
   ПЕРВЫЙ ЭКРАН ВНУТРЕННЕЙ СТРАНИЦЫ
   ========================================================================== */
.oft-phero{
  position:relative;overflow:hidden;border-bottom:1px solid var(--brown-line);
  background-image:
    radial-gradient(circle,rgba(255,255,255,.06) 1.1px,transparent 1.1px),
    linear-gradient(125deg,var(--dark) 0%,#3E2C1C 40%,#5A3E24 78%,#4F6C2B 125%);
  background-size:24px 24px,100% 100%;
}
.oft-phero__inner{padding:34px 0 46px;position:relative}

/* хлебные крошки */
.oft-crumbs{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:rgba(255,255,255,.62);margin-bottom:22px}
.oft-crumbs a{color:rgba(255,255,255,.82)}
.oft-crumbs a:hover{color:#fff}
.oft-crumbs svg{width:14px;height:14px;flex:none;opacity:.6}

.oft-phero__copy{max-width:900px}
.oft-phero h1{font-size:clamp(30px,3.8vw,46px);line-height:1.08;letter-spacing:-.02em;font-weight:800;color:#fff;margin-top:16px}
.oft-phero__lead{font-size:clamp(15px,1.4vw,18px);line-height:1.6;color:rgba(255,255,255,.86);margin-top:16px;max-width:660px}
.oft-phero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.oft-phero__cta--docs{margin-top:12px}

/* кнопки на тёмном фоне */
.oft-btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--font);
  font-size:var(--text-default);font-weight:var(--w-semibold);letter-spacing:-.01em;
  padding:12px 20px;border-radius:12px;border:1px solid transparent;transition:.16s;white-space:nowrap;
}
.oft-btn svg{width:18px;height:18px;flex:none}
.oft-btn--light{background:#fff;color:var(--green-dark);box-shadow:0 16px 34px -18px rgba(0,0,0,.6)}
.oft-btn--light:hover{transform:translateY(-2px);box-shadow:0 24px 46px -18px rgba(0,0,0,.65)}
.oft-btn--onDark{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.26);color:#fff}
.oft-btn--onDark:hover{background:rgba(255,255,255,.18)}

/* факты-чипы под заголовком */
.oft-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.oft-fact{
  display:inline-flex;align-items:baseline;gap:8px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  border-radius:999px;padding:9px 16px;
}
.oft-fact b{font-size:var(--text-title);font-weight:var(--w-bold);color:#fff;letter-spacing:-.01em}
.oft-fact span{font-size:var(--text-sm);color:#EFE3D4}

/* ==========================================================================
   СЕКЦИИ И ЗАГОЛОВКИ
   ========================================================================== */
.oft-sec{margin-top:64px;scroll-margin-top:94px}
.oft-sec__head{max-width:760px;margin-bottom:26px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.oft-sec__head h2{font-size:var(--text-h2);font-weight:var(--w-bold)}
.oft-sec__head p{font-size:var(--text-title);color:var(--content);line-height:1.55}

/* сноска под блоком */
.oft-note{
  margin-top:16px;display:flex;gap:10px;align-items:flex-start;
  font-size:var(--text-sm);line-height:1.6;color:var(--content);
}
.oft-note svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--green-dark)}

/* ==========================================================================
   ТАБЛИЦА СТРУКТУРЫ ТЕСТА
   ========================================================================== */
.oft-tablecard{overflow:hidden;padding:0}
.oft-tablewrap{overflow-x:auto}
.oft-table{width:100%;border-collapse:collapse;min-width:640px}
.oft-table th,.oft-table td{padding:15px 20px;text-align:left;vertical-align:middle}
.oft-table thead th{
  font-size:var(--text-label);font-weight:var(--w-semibold);letter-spacing:.06em;text-transform:uppercase;
  color:var(--content);background:var(--brown-soft);border-bottom:1px solid var(--brown-line);white-space:nowrap;
}
.oft-table tbody td{border-bottom:1px solid var(--line);font-size:var(--text-default);color:var(--content-emph)}
.oft-table tbody tr:last-child td{border-bottom:none}
.oft-table .num{color:var(--content);width:52px;font-variant-numeric:tabular-nums}
.oft-table .subj{font-weight:var(--w-semibold);color:var(--content-strong)}
.oft-table .nowrap{white-space:nowrap}
.oft-table td.center,.oft-table th.center{text-align:center}
.oft-table td.right,.oft-table th.right{text-align:right;font-variant-numeric:tabular-nums}
/* объединённая ячейка «90 минут» для трёх языковых разделов */
.oft-table td.span{text-align:center;background:rgba(129,196,64,.07);font-weight:var(--w-semibold);color:var(--green-dark)}
/* строка перерыва */
.oft-table tr.is-break td{background:var(--brown-soft);color:var(--content);font-size:var(--text-sm)}
.oft-table tr.is-break .subj{color:var(--content);font-weight:var(--w-medium);letter-spacing:.04em;text-transform:uppercase;font-size:var(--text-label)}
/* итоговая строка */
.oft-table tfoot td{
  padding:16px 20px;background:var(--dark);color:#fff;font-weight:var(--w-semibold);
  font-size:var(--text-default);border-top:none;
}
.oft-table tfoot td b{color:#E7C39A;font-weight:var(--w-bold)}

/* ---------- Полоса времени ---------- */
.oft-tl{display:flex;gap:6px;margin-bottom:22px}
.oft-tl__seg{
  flex:1 1 0;min-width:70px;border-radius:12px;padding:12px 12px 13px;
  background:rgba(129,196,64,.12);border:1px solid rgba(129,196,64,.24);
  display:flex;flex-direction:column;gap:3px;min-height:76px;justify-content:flex-end;
}
.oft-tl__seg b{font-size:var(--text-sm);font-weight:var(--w-semibold);color:var(--content-strong);line-height:1.25}
.oft-tl__seg span{font-size:var(--text-label);color:var(--green-dark);font-weight:var(--w-semibold)}
.oft-tl__seg--break{background:var(--brown-soft);border-color:var(--brown-line)}
.oft-tl__seg--break b,.oft-tl__seg--break span{color:var(--content)}

/* ==========================================================================
   КАРТОЧКИ-ПЛИТКИ (что получает участник, ключевые правила)
   ========================================================================== */
.oft-grid{display:grid;gap:20px}
.oft-grid--3{grid-template-columns:repeat(3,1fr)}
.oft-grid--2{grid-template-columns:repeat(2,1fr)}
.oft-tile{padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.oft-tile:hover{transform:translateY(-3px);border-color:rgba(129,196,64,.45);box-shadow:0 18px 36px -22px rgba(51,36,26,.4)}
.oft-tile h4{font-size:var(--text-title);font-weight:var(--w-semibold)}
.oft-tile p{font-size:var(--text-default);color:var(--content);line-height:1.55}
.oft-tile__n{
  font-size:var(--text-label);font-weight:var(--w-bold);color:var(--green-dark);
  letter-spacing:.08em;
}

/* список с галочками / крестиками */
.oft-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.oft-list li{display:flex;gap:12px;align-items:flex-start;font-size:var(--text-default);color:var(--content-emph);line-height:1.55}
.oft-list__ic{
  flex:none;width:22px;height:22px;border-radius:7px;margin-top:1px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(129,196,64,.14);color:var(--green-dark);
}
.oft-list__ic svg{width:14px;height:14px}
.oft-list--no .oft-list__ic{background:rgba(180,83,60,.12);color:#B4533C}

/* ==========================================================================
   СРОКИ ПРОВЕДЕНИЯ (даты тестов)
   ========================================================================== */
.oft-dates{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.oft-date{
  display:flex;align-items:center;gap:16px;padding:16px 20px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
}
.oft-date__n{
  flex:none;width:34px;height:34px;border-radius:10px;background:var(--brown-soft);
  color:var(--content-emph);display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--text-sm);font-weight:var(--w-bold);
}
.oft-date__d{font-size:var(--text-default);font-weight:var(--w-semibold);color:var(--content-strong);min-width:150px}
.oft-date__b{font-size:var(--text-sm);color:var(--content);margin-left:auto;text-align:right}
.oft-date__b em{font-style:normal;display:block;font-size:var(--text-label);letter-spacing:.04em;text-transform:uppercase;color:var(--content)}
.oft-date__b b{font-weight:var(--w-semibold);color:var(--content-emph)}

/* ==========================================================================
   БЛОК-БАННЕР (тёмный CTA внутри страницы)
   ========================================================================== */
.oft-cta{
  display:flex;align-items:center;justify-content:space-between;gap:34px;
  padding:34px 38px;border-radius:18px;color:#fff;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.06) 1.1px,transparent 1.1px),
    linear-gradient(120deg,var(--dark) 0%,#4A3320 55%,#5A3E24 100%);
  background-size:22px 22px,100% 100%;
}
.oft-cta h3{color:#fff;font-size:var(--text-h3);font-weight:var(--w-bold)}
.oft-cta p{color:rgba(255,255,255,.82);font-size:var(--text-default);margin-top:8px;max-width:620px}
.oft-cta__actions{display:flex;gap:12px;flex:none}

/* ==========================================================================
   ДОКУМЕНТ (PDF-просмотр)
   ========================================================================== */
.oft-doc{padding:0;overflow:hidden}
.oft-doc__bar{
  display:flex;align-items:center;gap:14px;padding:14px 20px;
  background:var(--brown-soft);border-bottom:1px solid var(--brown-line);
}
.oft-doc__ic{
  flex:none;width:38px;height:38px;border-radius:11px;background:#B4533C;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
}
.oft-doc__ic svg{width:20px;height:20px}
.oft-doc__meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.oft-doc__meta b{font-size:var(--text-default);font-weight:var(--w-semibold);color:var(--content-strong)}
.oft-doc__meta span{font-size:var(--text-sm);color:var(--content)}
.oft-doc__actions{margin-left:auto;display:flex;gap:10px;flex:none}
.oft-doc__frame{width:100%;height:78vh;min-height:520px;border:none;display:block;background:#F1F1F1}
.oft-doc__fallback{padding:28px 24px;text-align:center;font-size:var(--text-default);color:var(--content)}

/* маленькая кнопка в панели документа */
.oft-minibtn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--font);
  font-size:var(--text-sm);font-weight:var(--w-semibold);color:var(--content-emph);
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 14px;transition:.15s;
}
.oft-minibtn:hover{border-color:rgba(129,196,64,.5);color:var(--green-dark)}
.oft-minibtn svg{width:16px;height:16px}
.oft-minibtn--primary{background:var(--green);border-color:var(--green);color:#fff}
.oft-minibtn--primary:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}

/* ==========================================================================
   ВИДЕОИНСТРУКЦИИ
   ========================================================================== */
.oft-step{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.oft-step + .oft-step{margin-top:56px}
.oft-step--rev .oft-vid{order:2}

/* карточка-ролик */
.oft-vid{
  position:relative;display:block;width:100%;padding:0;overflow:hidden;text-align:left;
  border:1px solid var(--line);border-radius:18px;background:var(--card);cursor:default;
  font-family:var(--font);
}
.oft-vid.is-ready{cursor:pointer}
.oft-vid.is-ready:hover{transform:translateY(-3px);border-color:rgba(129,196,64,.45);box-shadow:0 22px 44px -24px rgba(51,36,26,.45)}
.oft-vid{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.oft-vid__thumb{
  position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:16/9;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.07) 1.1px,transparent 1.1px),
    linear-gradient(125deg,var(--dark) 0%,#3E2C1C 42%,#5A3E24 80%,#4F6C2B 130%);
  background-size:22px 22px,100% 100%;
}
.oft-vid__n{
  position:absolute;top:16px;left:18px;font-size:var(--text-label);font-weight:var(--w-bold);
  letter-spacing:.1em;color:rgba(255,255,255,.7);
}
.oft-vid__play{
  width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.32);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;transition:.2s;
}
.oft-vid.is-ready:hover .oft-vid__play{background:#fff;color:var(--green-dark);transform:scale(1.06)}
.oft-vid__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px}
.oft-vid__title{font-size:var(--text-title);font-weight:var(--w-semibold);color:var(--content-strong)}
.oft-vid__state{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--content)}
.oft-vid__state::before{content:'';width:7px;height:7px;border-radius:50%;background:#C9CDD3;flex:none}
.oft-vid.is-ready .oft-vid__state::before{background:var(--green);box-shadow:0 0 0 3px rgba(129,196,64,.22)}

/* текстовая колонка шага */
.oft-step__copy .tr-badge{margin-bottom:14px}
.oft-step__copy h2,.oft-step__copy h3{font-size:var(--text-h2);font-weight:var(--w-bold);margin-bottom:8px}
.oft-step__copy > p{font-size:var(--text-default);color:var(--content);line-height:1.6;margin-bottom:20px}

/* плеер поверх страницы */
.oft-lb{position:fixed;inset:0;z-index:120;background:rgba(20,14,9,.78);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:28px}
.oft-lb[hidden]{display:none}
.oft-lb__card{width:min(1000px,100%);background:#12100E;border-radius:16px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.oft-lb__head{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.oft-lb__title{font-size:var(--text-default);font-weight:var(--w-semibold);color:#fff}
.oft-lb__close{margin-left:auto;flex:none;width:36px;height:36px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.1);border:none;color:#fff;display:inline-flex;align-items:center;justify-content:center}
.oft-lb__close:hover{background:rgba(255,255,255,.2)}
.oft-lb__stage{aspect-ratio:16/9;background:#000}
.oft-lb__stage iframe,.oft-lb__stage video{width:100%;height:100%;display:block;border:none}

/* ==========================================================================
   СПИСОК ШКОЛ
   ========================================================================== */
.oft-filter{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:26px}
.oft-search{position:relative;flex:1 1 320px;max-width:420px}
.oft-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--content)}
.oft-search input{
  width:100%;font-family:var(--font);font-size:var(--text-default);color:var(--content-emph);
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px 12px 42px;
}
.oft-search input::placeholder{color:var(--content)}
.oft-search input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(129,196,64,.18)}
.oft-filter__count{margin-left:auto;font-size:var(--text-sm);color:var(--content)}

/* чипы городов */
.oft-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.oft-chip{
  font-family:var(--font);font-size:var(--text-sm);font-weight:var(--w-medium);color:var(--content-emph);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px;cursor:pointer;transition:.15s;
}
.oft-chip:hover{border-color:rgba(129,196,64,.5);color:var(--green-dark)}
.oft-chip.is-active{background:var(--green);border-color:var(--green);color:#fff}

.oft-schools{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.oft-school{padding:24px 22px;display:flex;flex-direction:column;gap:14px}
.oft-school:hover{transform:translateY(-3px);border-color:rgba(129,196,64,.45);box-shadow:0 18px 36px -22px rgba(51,36,26,.4)}
.oft-school__top{display:flex;align-items:flex-start;gap:12px}
.oft-school__name{font-size:var(--text-title);font-weight:var(--w-semibold);color:var(--content-strong);line-height:1.3}
.oft-school__city{
  flex:none;margin-left:auto;font-size:var(--text-label);font-weight:var(--w-semibold);
  color:var(--green-dark);background:rgba(129,196,64,.12);border:1px solid rgba(129,196,64,.22);
  border-radius:999px;padding:5px 11px;white-space:nowrap;
}
.oft-school__rows{display:flex;flex-direction:column;gap:10px;flex:1}
.oft-school__row{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-sm);color:var(--content-emph);line-height:1.5}
.oft-school__row svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--content)}
.oft-school__row a:hover{color:var(--green-dark)}
.oft-school__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:14px;border-top:1px solid var(--line);
}
.oft-school__seats{font-size:var(--text-sm);color:var(--content)}
.oft-school__seats b{color:var(--content-strong);font-weight:var(--w-semibold)}
.oft-school__map{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:var(--w-semibold);color:var(--green-dark)}
.oft-school__map svg{width:15px;height:15px}
.oft-school__map:hover{color:var(--green)}
.oft-empty{grid-column:1/-1;padding:40px;text-align:center;color:var(--content);font-size:var(--text-default)}

/* ==========================================================================
   FAQ-СТРАНИЦА
   ========================================================================== */
.oft-faq{max-width:900px;margin:0 auto}
.oft-faq__group{margin-top:38px}
.oft-faq__group:first-child{margin-top:0}
.oft-faq{width:100%;max-width:900px}
.oft-faq__gh{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;
  font-size:var(--text-label);font-weight:var(--w-semibold);letter-spacing:.08em;
  text-transform:uppercase;color:var(--content);
}
.oft-faq__gh::after{content:'';flex:1;height:1px;background:var(--line)}
.oft-faq .ot-acc + .ot-acc{margin-top:12px}
/* внутренняя вёрстка ответа: на лендинге отступы висят на <p>, а здесь в ответе
   есть ещё списки — переносим паддинг на сам блок (box-sizing:border-box, поэтому
   свёрнутое состояние max-height:0 по-прежнему схлопывается в ноль) */
/* ВАЖНО: паддинг вешаем на детей, а не на .ot-acc__body — при box-sizing:border-box
   собственный паддинг блока становится минимальной высотой, и свёрнутый ответ
   (max-height:0) подтекает первой строкой. */
.oft-faq .ot-acc__body > *{padding-left:24px;padding-right:24px}
.oft-faq .ot-acc__body p{padding-top:0;padding-bottom:0}
.oft-faq .ot-acc__body > *:last-child{padding-bottom:20px}
.oft-faq .ot-acc__body > *:first-child{margin-top:0}
.ot-acc__body ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:12px}
.ot-acc__body ul li{position:relative;padding-left:20px;font-size:var(--text-default);color:var(--content);line-height:1.55}
.ot-acc__body ul li::before{content:'';position:absolute;left:4px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--green)}
.ot-acc__body p + p{margin-top:12px}
.ot-acc__body ul + p{margin-top:14px}
.ot-acc__body b{color:var(--content-strong);font-weight:var(--w-semibold)}
.ot-acc__body a{color:var(--green-dark);font-weight:var(--w-medium);text-decoration:underline;text-underline-offset:2px}
.ot-acc__body a:hover{color:var(--green)}

/* карточка «остались вопросы» */
.oft-help{display:flex;align-items:center;gap:22px;padding:26px 28px;margin-top:34px}
.oft-help__ic{flex:none;width:52px;height:52px;border-radius:14px;background:rgba(129,196,64,.12);color:var(--green-dark);
  display:inline-flex;align-items:center;justify-content:center}
.oft-help__ic svg{width:26px;height:26px}
.oft-help h4{font-size:var(--text-title);font-weight:var(--w-semibold)}
.oft-help p{font-size:var(--text-sm);color:var(--content);margin-top:4px}
.oft-help__links{margin-left:auto;display:flex;gap:10px;flex:none}

/* ==========================================================================
   RESPONSIVE (десктоп-first; телефон рендерится как 390px)
   ========================================================================== */
@media (max-width:1150px){
  .oft-grid--3{grid-template-columns:repeat(2,1fr)}
  .oft-schools{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .oft-phero__inner{padding:26px 0 36px}
  .oft-sec{margin-top:48px}
  .oft-cta{flex-direction:column;align-items:flex-start;gap:22px;padding:28px}
  .oft-dates{grid-template-columns:1fr}
  .oft-step{grid-template-columns:1fr;gap:24px}
  .oft-step--rev .oft-vid{order:0}
  .oft-tl{display:none}
  .oft-doc__frame{height:60vh;min-height:420px}
}
@media (max-width:720px){
  .oft-date{flex-wrap:wrap}
  .oft-date__b{margin-left:0;text-align:left;width:100%}
  .oft-grid--3,.oft-grid--2,.oft-schools{grid-template-columns:1fr}
  .oft-help{flex-direction:column;align-items:flex-start;gap:16px}
  .oft-help__links{margin-left:0;flex-wrap:wrap}
  .oft-doc__bar{flex-wrap:wrap}
  .oft-doc__actions{margin-left:0;width:100%}
}