/* Блок «Для кого»: табы ролей, слева список фич, справа ноутбук с живым экраном платформы.
   Мокап ноутбука — Devices.css (MIT); масштабируется под ширину обёртки скриптом js/roles-tabs.js. */

.rt{display:grid;gap:clamp(28px,3.4vw,48px)}

/* табы */
.rt-tabs{display:inline-grid;grid-template-columns:repeat(3,auto);gap:6px;padding:6px;border-radius:var(--r-pill);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);justify-self:start}
.rt-tab{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 28px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--brown);font:inherit;font-size:var(--fs-14);font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.rt-tab:hover{color:var(--ink)}
.rt-tab[aria-selected="true"]{background:var(--milk);color:var(--ink);box-shadow:0 1px 0 var(--line),0 10px 24px -14px var(--ink-35),inset 0 0 0 1.5px var(--ink)}

/* заголовок панели и тело: слева заголовок и список фич, справа ноутбук */
.rt-body{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,14fr);gap:clamp(32px,4.4vw,72px);align-items:start}
.rt-side{display:grid;gap:clamp(22px,2.4vw,32px);min-width:0}
.rt-intro{display:grid;gap:12px}
.rt-intro h3{font-size:var(--h3);font-weight:700;letter-spacing:.01em;line-height:1.1;text-wrap:balance}
.rt-intro p{font-size:var(--fs-16);color:var(--brown);max-width:34em}

.rt-list{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.rt-feat{border-bottom:1px solid var(--line)}
.rt-item{display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 14px;align-items:start;width:100%;padding:20px 0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.rt-n{font-size:var(--fs-14);font-weight:700;font-variant-numeric:tabular-nums;color:var(--stone);transition:color .2s;padding-top:3px}
.rt-t{font-size:var(--h5);font-weight:700;letter-spacing:.01em;line-height:1.25;color:var(--brown);transition:color .2s}
.rt-item:hover .rt-t{color:var(--ink)}
.rt-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.rt-di{overflow:hidden;padding-left:50px;min-height:0}
.rt-di p{margin:0;font-size:var(--fs-16);line-height:1.5;color:var(--brown);opacity:0;transition:opacity .25s;max-width:30em}
.rt-bar{display:block;height:3px;margin:16px 0 22px;border-radius:3px;background:var(--brown-10);overflow:hidden;opacity:0;transition:opacity .25s}
.rt-bar i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--terra)}
.rt-feat.is-on .rt-n{color:var(--terra)}
.rt-feat.is-on .rt-t{color:var(--ink)}
.rt-feat.is-on .rt-d{grid-template-rows:1fr}
.rt-feat.is-on .rt-di p,.rt-feat.is-on .rt-bar{opacity:1}
.rt-feat.is-on .rt-item{padding-bottom:10px}

/* сцена с ноутбуком */
.rt-stage{position:sticky;top:96px;min-width:0}
.rt-dev{position:relative;aspect-ratio:740/434;filter:drop-shadow(0 40px 50px rgba(46,33,26,.18))}
.rt-dev video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;opacity:0;transition:opacity .35s;background:var(--milk)}
.rt-dev video.on{opacity:1}
.rt-note{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;font-size:var(--fs-13);letter-spacing:.06em;text-transform:uppercase;color:var(--brown);opacity:.7}
.rt-pause{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:0;border-radius:var(--r-pill);background:transparent;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--brown);font:inherit;font-size:var(--fs-12);font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.rt-pause:hover{box-shadow:inset 0 0 0 1.5px var(--terra);color:var(--terra)}
.rt-pause svg{width:14px;height:14px;fill:currentColor}
.rt-pause .i-play{display:none}
.rt-pause[aria-pressed="true"] .i-play{display:block}
.rt-pause[aria-pressed="true"] .i-pause{display:none}

.rt-panel[hidden]{display:none}
.rt-panel{display:grid;gap:clamp(28px,3.4vw,48px)}

@media (max-width:900px){
  .rt-body{grid-template-columns:1fr;gap:28px}
  .rt-stage{order:-1;position:relative;top:auto}
}
@media (max-width:640px){
  .rt-tabs{display:grid;grid-template-columns:repeat(3,1fr);justify-self:stretch;gap:4px;padding:4px}
  .rt-tab{flex-direction:column;gap:8px;padding:12px 6px;font-size:var(--fs-12);letter-spacing:.04em}
  .rt-t{font-size:var(--fs-16)}
  .rt-item{grid-template-columns:28px minmax(0,1fr);gap:0 10px;padding:16px 0}.rt-di{padding-left:38px}
}
@media (prefers-reduced-motion:reduce){
  .rt-d,.rt-di p,.rt-bar,.rt-dev video{transition:none}
}

/* метка варианта на странице-превью */

/* цвет плашки под видео по роли (варианты 2–6) */
.rt{--canvas:var(--sand);--shape:color-mix(in srgb,var(--sand) 55%,var(--milk))}
.rt .rt-panel--teacher{--canvas:color-mix(in srgb,var(--terra) 26%,var(--paper));--shape:color-mix(in srgb,var(--terra) 14%,var(--milk))}
.rt .rt-panel--parent{--canvas:color-mix(in srgb,var(--sky) 72%,var(--paper));--shape:color-mix(in srgb,var(--sky) 40%,var(--milk))}

/* Вариант 2 (.rt--flat): без ноутбука — видео в скруглённой цветной плашке, сцена занимает больше ширины */

/* фоновые фигуры — те же формы, что у метки роли в табах */



/* навигация по вариантам на странице-превью */

/* общая полоска прогресса роли на табе (варианты 3 и 5) */
.rt-tbar{display:block;height:2px;border-radius:2px;background:var(--brown-10);overflow:hidden;opacity:0;transition:opacity .25s}
.rt-tbar i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--brown)}
.rt-tab[aria-selected="true"] .rt-tbar{opacity:1}

/* цвет роли для плашек и табов */
.rt-tab--director,.rt-panel--director{--c:var(--sand)}
.rt-tab--teacher,.rt-panel--teacher{--c:color-mix(in srgb,var(--terra) 78%,var(--milk))}
.rt-tab--parent,.rt-panel--parent{--c:var(--sky)}

/* Вариант 3 (.rt--cards): по мотивам «Одна школа — три взгляда» — табы-карточки, большая карточка панели, цветная сцена с фигурами */

/* Вариант 4 (.rt--wide): широкая сцена во всю ширину, фичи строкой под видео */

/* Вариант 5 (.rt--side): роли вертикальным меню, фичи вложены под активной ролью, тёмная сцена справа */

/* Вариант 6 (.rt--type): крупные слова ролей вместо табов, видео слева, список справа */