/* Aroken — /web «Профессия: Веб-разработчик»: программа в одну колонку с таймлайном времени (.pgf--web, .pgt),
   «Сертификат и лицензия» (.cert). Подключается только в web.html — #program других курсов не трогает.
   Базовые стили модулей (.pg-mod, .pgf__road) — css/course-blocks.css. */

/* ================================================================
   Программа: рельса времени слева, модули друг под другом
   ================================================================ */
.pgf--web { --gut: 184px; }
@media (min-width: 1024px) { .pgf--web { margin-top: 36px; padding: 24px 32px 28px; } } /* плотнее, чтобы на 1536×864 срок «≈ 3 месяца» был на первом экране */
.pgt { margin-top: 44px; }
.pgt__list { position: relative; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* рельса: сплошная у основной программы (разгорается к первым деньгам), пунктир у бонусных */
.pgt__list::before { content: ""; position: absolute; left: calc(var(--gut) - 30px); top: 14px; bottom: 14px; width: 2px; border-radius: 1px; background: linear-gradient(180deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .95)); }
.pgt__list--bonus::before { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .26) 0 5px, transparent 5px 11px); }
.pgf--web .pg-mod { position: relative; margin-left: var(--gut); }
/* точка модуля на рельсе; открытый и «первые деньги» — залиты акцентом */
.pgf--web .pg-mod::before { content: ""; position: absolute; left: -35px; top: 22px; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--graphite); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .7); transition: background .3s, box-shadow .3s; }
.pgf--web .pg-mod.is-open::before { background: rgb(var(--accent-rgb)); box-shadow: 0 0 0 2px rgb(var(--accent-rgb)), 0 0 14px rgba(var(--accent-rgb), .5); }
.pgf--web .pg-mod--bonus::before { box-shadow: 0 0 0 2px rgba(255, 255, 255, .34); }
.pgf--web .pg-mod--bonus.is-open::before { background: #fff; box-shadow: 0 0 0 2px #fff; }

/* подпись времени — в поле слева, на уровне заголовка модуля (внутри кнопки, поэтому попадает в её имя) */
.pg-mod__time { position: absolute; right: calc(100% + 50px); top: 18px; width: calc(var(--gut) - 66px); display: grid; gap: 2px; text-align: right; pointer-events: none; }
.pg-mod__time b { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.01em; color: rgba(255, 255, 255, .88); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-mod__time small { font-size: 12px; line-height: 15px; color: rgba(255, 255, 255, .48); }
.pg-mod__time--bonus b { color: rgba(255, 255, 255, .58); }

/* шапка модуля: название · [первые деньги] · уроки · знак */
.pgf--web .pg-mod__btn { grid-template-columns: minmax(0, 1fr) auto auto auto; padding: 11px 16px 11px 22px; }
.pgf--web .pg-mod__label, .pgf--web .pg-mod__title { grid-column: 1; }
.pgf--web .pg-mod__money { grid-column: 2; grid-row: 1 / 3; }
.pgf--web .pg-mod__count { grid-column: 3; }
.pgf--web .pg-mod__sign { grid-column: 4; }

/* «Старт на фрилансе» — здесь начинаешь зарабатывать: лаймовая рамка, свечение и плашка «первые деньги» */
.pgf--web .pg-mod--orders { border-color: rgba(var(--accent-rgb), .46); background: linear-gradient(90deg, rgba(20, 20, 26, .98) 34%, rgba(var(--accent-rgb), .16)); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45), inset 0 1px 1px rgba(255, 255, 255, .06), 0 0 28px -8px rgba(var(--accent-rgb), .35); }
.pgf--web .pg-mod--orders:hover { border-color: rgba(var(--accent-rgb), .72); }
.pgf--web .pg-mod--orders.is-open { border-color: rgba(var(--accent-rgb), .72); background: linear-gradient(120deg, rgba(22, 22, 28, .98) 44%, rgba(var(--accent-rgb), .15)); }
.pgf--web .pg-mod--orders .pg-mod__label { color: rgb(var(--accent-rgb)); }
.pgf--web .pg-mod--orders::before { background: rgb(var(--accent-rgb)); box-shadow: 0 0 0 2px rgb(var(--accent-rgb)), 0 0 16px rgba(var(--accent-rgb), .6); }
.pgf--web .pg-mod--orders .pg-mod__time b { color: rgb(var(--accent-rgb)); }
.pg-mod__money { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 5px; border-radius: 999px; background: linear-gradient(135deg, var(--lime-3), var(--lime-2)); color: var(--ink); font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: .005em; white-space: nowrap; box-shadow: 0 0 18px rgba(199, 255, 46, .3); }
.pg-mod__money i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: 12px; line-height: 1; font-style: normal; font-weight: 700; }

/* бонусные модули — тише: без фиолетовой подсветки, серая метка */
.pgf--web .pg-mod--bonus { border-color: rgba(255, 255, 255, .12); background: linear-gradient(90deg, rgba(20, 20, 26, .98) 40%, rgba(52, 48, 70, .5)); }
.pgf--web .pg-mod--bonus:hover { border-color: rgba(255, 255, 255, .24); }
.pgf--web .pg-mod--bonus .pg-mod__label { color: rgba(255, 255, 255, .5); }

/* итог основной программы между модулями 6 и 7: срок в поле времени, пояснение на линии карточек */
.pgt__sum { position: relative; display: grid; grid-template-columns: var(--gut) minmax(0, 1fr); align-items: start; margin: 18px 0 18px; }
.pgt__sum::before { content: ""; position: absolute; left: calc(var(--gut) - 34px); top: 13px; width: 10px; height: 10px; background: rgb(var(--accent-rgb)); transform: rotate(45deg); box-shadow: 0 0 14px rgba(var(--accent-rgb), .6); }
.pgt__sum-mark { grid-column: 1; display: grid; gap: 2px; padding-right: 46px; text-align: right; }
.pgt__sum-mark b { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.03em; color: rgb(var(--accent-rgb)); white-space: nowrap; }
.pgt__sum-mark small { font-size: 12px; line-height: 15px; color: rgba(255, 255, 255, .48); }
.pgt__sum-text { grid-column: 2; align-self: center; margin: 0; font-size: 18px; line-height: 26px; color: #fff; max-width: 60ch; text-wrap: pretty; }
.pgt__sum-note { grid-column: 2; margin: 6px 0 0; font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .5); }

/* главное на первом экране: срок и «первые деньги»; маркеры «практическая работа / первые заказы» у счётчика уроков
   и легенда к ним на /web убраны — «Старт на фрилансе» и так выделен плашкой, работы видны в раскрытых модулях */
.section__lead b { font-weight: 600; color: #fff; }
.pgf--web .pg-mod--diploma .pg-mod__count, .pgf--web .pg-mod--orders .pg-mod__count { padding-left: 10px; }
.pgf--web .pg-mod--diploma .pg-mod__count::before, .pgf--web .pg-mod--orders .pg-mod__count::before { display: none; }
.pgf--web .pgt { margin-top: 0; }

/* бонусные модули 7–9 свёрнуты в одну строку (details): сначала — основная программа до первых денег */
.pgt__bonus { position: relative; margin-left: var(--gut); }
.pgt__bonus-sum { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 15px 16px 15px 22px; border-radius: 16px; border: 1px dashed rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .02); cursor: pointer; list-style: none; transition: border-color .25s, background .25s; }
.pgt__bonus-sum::-webkit-details-marker { display: none; }
.pgt__bonus-sum:hover { border-color: rgba(255, 255, 255, .36); background: rgba(255, 255, 255, .04); }
.pgt__bonus-sum:focus-visible { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 2px; }
.pgt__bonus-txt { font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .56); text-wrap: pretty; }
.pgt__bonus-txt > b { display: block; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.012em; color: #fff; }
.pgt__bonus-sum .pg-mod__sign { grid-column: 2; grid-row: 1; }
.pgt__bonus-time { position: absolute; right: calc(100% + 50px); top: 50%; transform: translateY(-50%); width: calc(var(--gut) - 66px); display: grid; gap: 2px; text-align: right; }
.pgt__bonus-time b { font-size: 15px; line-height: 20px; font-weight: 600; color: rgba(255, 255, 255, .58); }
.pgt__bonus-time small { font-size: 12px; line-height: 15px; color: rgba(255, 255, 255, .48); }
.pgt__bonus-sum::before { content: ""; position: absolute; left: -35px; top: 50%; margin-top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--graphite); box-shadow: 0 0 0 2px rgba(255, 255, 255, .34); }
.pgt__bonus[open] .pgt__bonus-sum { margin-bottom: 10px; }
.pgt__bonus[open] > .pgt__bonus-sum .pg-mod__sign { background: #fff; border-color: #fff; }
.pgt__bonus[open] > .pgt__bonus-sum .pg-mod__sign::before, .pgt__bonus[open] > .pgt__bonus-sum .pg-mod__sign::after { background: var(--ink); }
.pgt__bonus[open] > .pgt__bonus-sum .pg-mod__sign::after { transform: rotate(0); }
.pgt__bonus .pgt__list--bonus .pg-mod { margin-left: 0; } /* внутри details поле слева уже задано самим details */
.pgt__bonus .pgt__list--bonus::before { left: -30px; }
.pgt__bonus .pg-mod__time { right: calc(100% + 50px); }

/* финал — на линии карточек */
.pgf--web .pgf__final { margin: 18px 0 0 var(--gut); }

/* на широкой карточке не растягиваем текст модуля в строку на весь экран; превью работы крупнее */
.pgf--web .pg-mod__lead, .pgf--web .pg-mod__list { max-width: 72ch; }
@media (min-width: 1280px) {
  .pgf--web .pg-mod__body--result { grid-template-columns: minmax(0, 1fr) minmax(0, 224px); column-gap: 28px; }
}
@media (min-width: 1800px) {
  .pgf--web { --gut: 220px; }
  .pgt__sum-mark b { font-size: 30px; line-height: 34px; }
  .pgf--web .pg-mod__body--result { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); }
}

/* планшет и телефон: без поля слева — время строкой рядом с «Модуль N», итог — плашкой */
@media (max-width: 1023px) {
  .pgf--web { --gut: 0px; }
  .pgt { margin-top: 36px; }
  .pgt__list::before, .pgf--web .pg-mod::before, .pgt__sum::before { display: none; }
  .pgf--web .pg-mod__btn { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
  .pgf--web .pg-mod__label { grid-column: 1; grid-row: 1; }
  .pg-mod__time { position: static; grid-column: 2; grid-row: 1; width: auto; display: flex; align-items: center; gap: 6px; text-align: left; justify-self: start; min-width: 0; white-space: nowrap; }
  .pg-mod__time::before { content: "·"; font-size: 11px; line-height: 14px; color: rgba(255, 255, 255, .38); }
  .pg-mod__time b, .pg-mod__time--bonus b { font-size: 11px; line-height: 14px; font-weight: 600; color: rgba(255, 255, 255, .62); }
  .pg-mod__time small { font-size: 11px; line-height: 14px; }
  .pg-mod__time small::before { content: "· "; }
  .pgf--web .pg-mod__title { grid-column: 1 / 3; grid-row: 2; }
  .pgf--web .pg-mod__money { grid-column: 3; }
  .pgf--web .pg-mod__count { grid-column: 4; }
  .pgf--web .pg-mod__sign { grid-column: 5; }
  .pgt__sum { grid-template-columns: minmax(0, 1fr); margin: 14px 0; padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(var(--accent-rgb), .26); background: rgba(var(--accent-rgb), .06); }
  .pgt__sum-mark { grid-column: 1; grid-template-columns: auto auto; align-items: baseline; justify-content: start; gap: 10px; padding: 0; text-align: left; }
  .pgt__sum-text { grid-column: 1; margin-top: 8px; font-size: 15px; line-height: 22px; }
  .pgt__sum-note { grid-column: 1; }
  .pgf--web .pgf__final { margin: 14px 0 0; }
  .pgt__bonus { margin-left: 0; }
  .pgt__bonus-time, .pgt__bonus-sum::before { display: none; }
  .pgt__bonus .pgt__list--bonus::before { display: none; }
  .pgt__sum-mark b { font-size: 24px; line-height: 28px; }
}
@media (max-width: 767px) {
  .pgf--web .pg-mod__btn { padding: 11px 10px 11px 14px; }
  .pgt__bonus-sum { padding: 12px 10px 12px 14px; }
  .pgt__bonus-txt { font-size: 14px; line-height: 20px; }
  .pgt__bonus-txt > b { font-size: 16px; line-height: 22px; }
  .pgt__sum { padding: 16px; }
  .pgt__sum-mark b { font-size: 20px; line-height: 24px; }
}
@media (max-width: 479px) {
  .pg-mod__time--bonus small { display: none; } /* «без срока» не влезает в строку с уроками — остаётся в итоге над бонусными */
}
@media (max-width: 559px) {
  /* плашка «первые деньги» не помещается в строку с уроками — строкой под названием */
  .pgf--web .pg-mod__money { grid-column: 1 / 3; grid-row: 3; justify-self: start; margin-top: 10px; }
}

/* ================================================================
   «Учим по государственной лицензии»: один смысл — сертификат, вычет 13 %, маткапитал, гарантия в договоре.
   Бумажная плитка: слева заголовок и четыре коротких факта строками, реквизиты лицензии одной строкой внизу;
   справа оба документа крупно (выписка сзади, сертификат спереди), оба открываются во весь экран (dialog, js/main.js).
   ================================================================ */
.cert__tile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 24px 0; border-radius: 28px; overflow: hidden; }
.cert__copy { min-width: 0; display: flex; flex-direction: column; }
.cert__h { margin: 0; color: var(--ink); text-wrap: balance; }
/* факты строками: слово-ключ крупно, пояснение в одну-две строки */
.cert__perks { margin: 28px 0 0; padding: 0; list-style: none; display: grid; }
.cert-perk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 16px 0; border-top: 1px solid rgba(23, 24, 28, .1); }
.cert-perk:last-child { border-bottom: 1px solid rgba(23, 24, 28, .1); }
.cert-perk__num { display: flex; align-items: center; gap: 10px; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.022em; color: var(--ink); white-space: nowrap; }
.cert-perk__num::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(199, 255, 46, .32); }
.cert-perk__text { font-size: 16px; line-height: 24px; color: rgba(23, 24, 28, .72); text-wrap: pretty; }
.cert-perk__text a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(23, 24, 28, .3); text-underline-offset: 3px; }
.cert-perk__text a:hover { text-decoration-color: currentColor; }
/* реквизиты — тихой строкой: номер лицензии, проверка в реестре, сертификат крупно */
.cert__meta { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; font-size: 13px; line-height: 18px; color: rgba(23, 24, 28, .56); }
.cert__meta > span { flex: 1 1 100%; }
.cert__meta b { font-weight: 600; color: rgba(23, 24, 28, .78); white-space: nowrap; }
.cert__link { font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -.007em; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(23, 24, 28, .3); text-underline-offset: 4px; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.cert__link:hover { text-decoration-color: currentColor; }
.cert__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }

/* стол с документами: выписка из реестра сзади слева, сертификат спереди — крупно, нижний край уходит за клип плитки */
.cert__desk { position: relative; min-height: 340px; }
/* Кнопка-документ лежит повёрнутой и НЕ двигается — это зона наведения. Выпрямляется и приподнимается внутренний слой .cert__doc-art
   (без событий мыши): раньше двигалась сама кнопка, и у края она уезжала из-под курсора — наведение снималось, документ падал
   обратно под курсор, и так по кругу: выписка мерцала (владелец 22.09) */
.cert__doc { --tilt: 0deg; position: absolute; display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; transform: rotate(var(--tilt)); }
.cert__doc-art { position: relative; display: block; border-radius: 8px; pointer-events: none; transition: transform .5s var(--spring); }
.cert__doc img { display: block; width: 100%; height: auto; border-radius: 8px; }
.cert__doc--license { --tilt: -6deg; left: 0; top: 24px; width: 46%; }
.cert__doc--license img { box-shadow: 0 0 0 1px rgba(23, 24, 28, .1), 0 24px 44px -20px rgba(23, 24, 28, .55); }
.cert__doc--cert { --tilt: 3deg; right: 2%; top: 0; width: 56%; }
.cert__doc--cert img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 34px 60px -24px rgba(23, 24, 28, .75); }
.cert__doc:hover, .cert__doc:focus-visible { z-index: 2; }
.cert__doc:hover .cert__doc-art, .cert__doc:focus-visible .cert__doc-art { transform: rotate(calc(-1 * var(--tilt))) translateY(-8px); } /* ровно и на 8 px выше — в осях экрана */
.cert__doc:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.cert__doc-tag { position: absolute; left: 14px; top: 14px; padding: 6px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; line-height: 14px; font-weight: 600; white-space: nowrap; }
.cert__doc--cert .cert__doc-tag { background: var(--lime); color: var(--ink); }

/* широкий экран: текст слева по центру высоты, документы справа во всю высоту плитки */
@media (min-width: 1024px) {
  .cert__tile { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(32px, calc(4vw / var(--z, 1)), 72px); padding: 0 0 0 clamp(36px, calc(3.6vw / var(--z, 1)), 64px); min-height: clamp(520px, calc(var(--screen-h) - var(--nav-h) - 2 * var(--section-pad)), 760px); } /* плитка — весь кадр секции (ритм из css/main.css) */
  .cert__copy { justify-content: center; padding: 48px 0; }
  .cert-perk { padding: 16px 0; }
  .cert__desk { min-height: 0; }
  .cert__doc--license { left: 0; top: 11%; width: 44%; }
  .cert__doc--cert { right: 5%; top: 17%; width: 60%; } /* низ сертификата уходит за нижний край плитки */
}
@media (min-width: 1440px) {
  .cert-perk { grid-template-columns: 224px minmax(0, 1fr); align-items: baseline; column-gap: 20px; padding: 18px 0; } /* слово-ключ и пояснение в строку — колонка шире самого длинного слова («Сертификат») */
  .cert-perk__num { font-size: 30px; line-height: 36px; }
  .cert-perk__text { font-size: 17px; line-height: 26px; }
  .cert__doc--cert { width: 58%; }
}
@media (max-width: 767px) {
  .cert__tile { padding: 24px 20px 0; border-radius: 22px; gap: 20px; }
  .cert__perks { margin-top: 18px; }
  .cert-perk { padding: 12px 0; }
  .cert-perk__num { font-size: 22px; line-height: 28px; }
  .cert-perk__text { font-size: 15px; line-height: 22px; }
  .cert__desk { min-height: 300px; margin: 0 -8px; }
  .cert__doc--license { width: 48%; top: 20px; }
  .cert__doc--cert { width: 58%; right: 0; }
}

/* Основатель — общий блок, стили в css/main.css (канон r3, раньше здесь был модификатор .founder--web) */

/* без движения: документы и точки не едут, всё сразу в конечном состоянии */
@media (prefers-reduced-motion: reduce) {
  .cert__doc-art, .pgf--web .pg-mod::before, .pgt__bonus-sum { transition: none; }
  .cert__doc:hover .cert__doc-art, .cert__doc:focus-visible .cert__doc-art { transform: none; }
}