/* Главная (/): первый экран с фоном, направления с поиском, преимущества, «Специальная цена».
   Подключается после lp.css и пользуется его переменными и блоками (шапка, лицензия, отзывы, вопросы, контакты, подвал).
   Макеты — пакет оператора glavnaya (10.11.2026): 390 / 768 / 1024 / 1366 / 1536 / 1920. */

/* ---------- 1. Первый экран ---------- */
.hm-hero{position:relative}
.hm-hero__bg{position:absolute;right:0;top:94px;width:1000px;height:500px;background:no-repeat right top/cover;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(0deg,transparent 0,#000 22%),linear-gradient(180deg,transparent 0,#000 12%);
  mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(0deg,transparent 0,#000 22%),linear-gradient(180deg,transparent 0,#000 12%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.hm-hero__in{position:relative;padding-top:79px}
.hm-h1 span{display:block;white-space:nowrap}
/* отступы и кегли первого экрана — как у /kursy/ekspert-tekhnik: H1 → описание 20 (телефон 12), описание → кнопки 40 (24) */
.hm-lead{max-width:520px;margin-top:20px;font-size:19px;line-height:1.45;color:var(--ink-2)}
.hm-cta{display:flex;flex-wrap:wrap;gap:24px;margin-top:40px}
.hm-stats{position:relative;margin-top:66px}
@media (min-width:1520px){.hm-h1{font-size:52px}}
@media (min-width:1280px) and (max-width:1599px){.hm-hero__bg{width:calc(1000px + (100vw - 1366px) * .734);height:calc(500px + (100vw - 1366px) * .353)}}
@media (min-width:1600px){.hm-hero__bg{width:1260px;height:600px}}

/* ---------- 2. Направления ---------- */
.hm-dirs__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.hm-dirs__head .h2{margin-bottom:12px}
.hm-sub{font-size:19px;color:var(--ink-2)}
.hm-search{flex:0 1 506px;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 18px;background:var(--surface);border-radius:var(--r-btn);box-shadow:var(--shadow)}
.hm-search__box{flex:1;min-width:0;display:flex;align-items:center;gap:12px;position:relative;color:var(--ink-3)}
.hm-search input{flex:1;min-width:0;height:44px;border:0;background:none;font:400 16px var(--sans);color:var(--ink);outline:none;text-overflow:ellipsis}
.hm-search input::placeholder{color:var(--ink-3)}
.hm-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.hm-search .btn{min-width:0;height:44px;padding:0 22px;font-size:16px}
.hm-search:focus-within{box-shadow:var(--shadow),0 0 0 2px var(--brand-deep)}
/* подсказки поиска (их рисует assets/vado-search.js) — в шрифте и цветах редизайна */
.hm-search .vado-sdm{left:-18px;right:-110px;margin-top:12px;border:0;border-radius:16px;box-shadow:var(--shadow-pop);font-family:var(--sans)}
.hm-search .vado-sdm a.vado-sdm-i{padding:12px 18px;border-bottom:1px solid var(--line)}
.hm-search .vado-sdm a.vado-sdm-i:hover,.hm-search .vado-sdm a.vado-sdm-i.vado-on{background:var(--page)}
.hm-search .vado-sdm b{font-size:16px;color:var(--ink)}
.hm-search .vado-sdm span{font-size:14px;color:var(--ink-2)}
.hm-search .vado-sdm .vado-sdm-e{padding:14px 18px;color:var(--ink-2)}
.hm-search .vado-sdm .vado-sdm-e a{color:var(--brand)}

.dirs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.dir{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:168px;padding:24px;transition:box-shadow var(--t)}
.dir__arr{position:absolute;top:24px;right:24px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--page);color:var(--brand-deep);transition:background var(--t),color var(--t)}
.dir__arr .ic{width:18px;height:18px}
.dir__t{margin-top:auto;padding-top:24px;font-size:20px;font-weight:600;line-height:1.3}
.dir__s{margin-top:4px;font-size:14px;color:var(--ink-2)}
.dir:hover{box-shadow:var(--shadow-pop)}
.dir:hover .dir__arr{background:var(--brand);color:#fff}
.dir:hover .dir__t{color:var(--brand)}

/* ---------- 4. Специальная цена ---------- */
.hm-offer__h{margin-bottom:12px}
.hm-offer__note{margin-bottom:40px;font-size:15px;color:var(--ink-2)}
.hm-offer{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:stretch}
.hm-price{grid-column:1/7;display:flex;flex-direction:column;padding:12px}
.hm-price__box{padding:24px;border-radius:16px;background:var(--page)}
.hm-price__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:10px}
.hm-price__sub{margin-top:6px;font-size:15px}
.hm-price__list{margin-top:auto;padding:24px 20px 8px}
.hm-price__list li{display:flex;gap:16px;align-items:flex-start;padding:20px 0}
.hm-price__list li+li{border-top:1px solid var(--line)}
/* «Рассрочка 0%» и «Подарки выпускникам» — как пункты «Преимуществ» (.perks__t 17/600, текст 15): однотипные элементы одного кегля */
.hm-price__list b{display:block;margin-bottom:8px;font-size:17px;font-weight:600;line-height:1.35}
.hm-price__list li>div>span{display:block;font-size:15px;color:var(--ink-2)}
.hm-offer__form{grid-column:8/13}

.lic__prev{font-size:15px;color:var(--ink-2)}

/* ---------- 1024–1279 ---------- */
@media (max-width:1279px){
  .hm-hero__bg{top:110px;width:760px;height:470px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%),linear-gradient(0deg,transparent 0,#000 22%),linear-gradient(180deg,transparent 0,#000 12%);
    mask-image:linear-gradient(90deg,transparent 0,#000 38%),linear-gradient(0deg,transparent 0,#000 22%),linear-gradient(180deg,transparent 0,#000 12%)}
  .hm-h1{font-size:42px}
  .dirs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hm-search{flex-basis:468px}
}
/* ---------- 768: фото под кнопками на всю ширину, цифры на нём ---------- */
@media (max-width:1023px){
  .hm-hero{display:flex;flex-direction:column}
  .hm-hero__in{order:1;z-index:1;padding-top:77px}
  .hm-hero__bg{order:2;position:relative;top:auto;width:100%;height:300px;margin-top:8px;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%),linear-gradient(90deg,transparent 0,#000 25%);
    mask-image:linear-gradient(180deg,transparent 0,#000 30%),linear-gradient(90deg,transparent 0,#000 25%)}
  /* фото заходит под кнопки (верх у него прозрачный), чтобы цифры стояли ближе к кнопкам — решение оператора 10.11 */
  .hm-hero__bg{margin-top:-112px}
  .hm-hero>.wrap:last-child{order:3;margin-top:-112px}
  .hm-stats{margin-top:0}
  .hm-h1 span{display:inline;white-space:normal}
  .hm-lead{max-width:560px}
  .hm-dirs__head{flex-direction:column;align-items:stretch;gap:28px}
  .hm-search{flex-basis:auto}
  .hm-search .vado-sdm{right:-96px}
  .dirs{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .hm-offer{grid-template-columns:1fr;gap:16px}
  .hm-price,.hm-offer__form{grid-column:1/-1}
  .hm-price__list{margin-top:8px}
}
/* ---------- 390: кнопки во всю ширину, направления — список в одной карточке ---------- */
@media (max-width:739px){
  .hm-hero__in{position:relative;z-index:1;padding-top:32px}
  .hm-h1{font-size:32px}
  .hm-lead{font-size:16px;margin-top:12px}
  .hm-cta{flex-direction:column;gap:12px;margin-top:24px}
  .hm-cta .btn{width:100%;min-width:0}
  /* фото за заголовком и описанием, как на прежней главной: выше и крупнее, прозрачнее слева, где текст (решение оператора 10.11) */
  .hm-hero__bg{position:absolute;top:0;left:0;right:0;width:auto;height:560px;margin-top:0;background-position:72% 15%;opacity:.6;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 72%,transparent 100%),linear-gradient(90deg,rgba(0,0,0,.3) 0,#000 62%);
    mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 72%,transparent 100%),linear-gradient(90deg,rgba(0,0,0,.3) 0,#000 62%)}
  .hm-hero>.wrap:last-child{margin-top:40px}
  .hm-dirs__head{margin-bottom:24px;gap:20px}
  .hm-sub{font-size:16px}
  .hm-search{padding-left:14px}
  .hm-search .btn{width:auto;flex:none;padding:0 18px}
  .perks.hm-perks{grid-template-columns:1fr;gap:28px}
  .perks.hm-perks li{flex-direction:row;padding-right:0}
  .hm-search .vado-sdm{left:-14px;right:-86px}
  .dirs{display:block;padding:4px 16px;background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow)}
  .dirs li+li{border-top:1px solid var(--line)}
  .dir{flex-direction:row;align-items:center;gap:16px;min-height:0;padding:12px 0;background:none;box-shadow:none;border-radius:0}
  .dir:hover{box-shadow:none}
  .dir__t{order:2;margin:0;padding:0;font-size:17px}
  .dir__s{display:none}
  .dir__arr{order:3;position:static;margin-left:auto;flex:none}
  .hm-offer__note{margin-bottom:24px}
  .hm-price{padding:8px}
  .hm-price__box{padding:20px 16px}
  .hm-price__list{padding:12px 12px 4px}
  .hm-price__list li{padding:16px 0}
}