/* ЮНАВИА — лендинг. Цвета подставляются из config.py, см. <style> в шапке. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:#152233;
  font:400 17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Cambria,"Times New Roman",Georgia,serif; line-height:1.15; margin:0; color:var(--ink)}
p{margin:0 0 14px}
a{color:var(--sky); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2.5px solid var(--sky); outline-offset:3px; border-radius:4px}
img,svg{max-width:100%}
/* длинные термины не растягивают карточки на узких экранах */
h1,h2,h3,p,li,summary{overflow-wrap:break-word}

.l-wrap{max-width:1160px; margin:0 auto; padding:0 clamp(18px,4vw,32px)}
.l-narrow{max-width:820px}

/* ---------- шапка ---------- */
.l-top{position:sticky; top:0; z-index:20; background:var(--ink); color:var(--ice)}
.l-top-in{display:flex; align-items:center; justify-content:space-between; height:66px; gap:16px}
.l-brand{display:flex; align-items:center; gap:10px; color:#fff}
.l-brand:hover{text-decoration:none}
.l-brand svg{width:26px; height:26px; fill:var(--ice); flex:0 0 auto}
.l-brand span{display:flex; flex-direction:column; line-height:1.1}
.l-brand b{font-family:Cambria,Georgia,serif; font-size:19px; letter-spacing:.09em}
.l-brand i{font-style:normal; font-size:10.5px; color:#8FA8CC; letter-spacing:.04em}
.l-nav{display:flex; align-items:center; gap:14px}
.l-nav > a:not(.l-btn){color:#B9CBE4; font-size:15px; font-weight:500}
.l-nav > a:not(.l-btn):hover{color:#fff; text-decoration:none}

/* ---------- кнопки ---------- */
.l-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font:600 16px/1 system-ui,sans-serif; padding:15px 28px; border-radius:11px;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .12s ease, background .16s ease, border-color .16s ease;
}
.l-btn:hover{text-decoration:none; transform:translateY(-1px)}
.l-btn:active{transform:translateY(0)}
.l-btn-accent{background:var(--accent); color:#fff}
.l-btn-accent:hover{background:#a80d26}
.l-btn-ghost{background:transparent; color:var(--ice); border-color:rgba(220,231,245,.4)}
.l-btn-ghost:hover{background:rgba(220,231,245,.1); border-color:var(--ice)}
.l-btn-sm{padding:9px 17px; font-size:14.5px; border-radius:9px}

/* ---------- первый экран ---------- */
.l-hero{position:relative; background:var(--ink); color:var(--ice); overflow:hidden}
.l-hero-bg{position:absolute; inset:0; opacity:.9}
.l-hero-bg svg{width:100%; height:100%; display:block}
.l-hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, var(--ink) 34%, rgba(14,26,43,.72) 62%, rgba(14,26,43,.35) 100%);
}
.l-hero-in{position:relative; z-index:2;
  padding:clamp(56px,9vw,116px) clamp(18px,4vw,32px) clamp(64px,9vw,120px)}
/* стартовая страница: воздуха больше, заголовок крупнее */
.l-hero-service .l-hero-in{padding-top:clamp(66px,11vw,140px); padding-bottom:clamp(72px,11vw,140px)}
.l-hero-service .l-h1{max-width:15ch}
/* тонкая черта над надзаголовком — приём из печатного УМК */
.l-hero .l-eyebrow{position:relative; padding-top:20px}
.l-hero .l-eyebrow::before{
  content:''; position:absolute; top:0; left:0; width:54px; height:3px;
  background:var(--accent); border-radius:2px;
}
.l-h1{
  color:#fff; font-size:clamp(38px,6.6vw,74px); letter-spacing:-.01em;
  margin-bottom:22px; max-width:16ch;
}
.l-lead{font-size:clamp(17px,2vw,20px); color:#C3D3E9; max-width:56ch; margin-bottom:32px}
.l-actions{display:flex; gap:14px; flex-wrap:wrap}
.l-eyebrow{
  font-size:12px; letter-spacing:.17em; text-transform:uppercase;
  font-weight:700; color:#7A8CA6; margin:0 0 10px;
}
.l-eyebrow-light{color:#8FA8CC}

/* ---------- секции ---------- */
.l-sect{padding:clamp(52px,7vw,92px) 0}
.l-sect-tight{padding:clamp(34px,4vw,48px) 0}
.l-sect-alt{background:var(--paper)}
.l-sect-dark{background:var(--ink); color:var(--ice)}
.l-sect-dark .l-h2, .l-h2-light{color:#fff}
.l-head{margin-bottom:34px; position:relative}
.l-sect .l-head .l-eyebrow{position:relative; padding-top:18px}
.l-sect .l-head .l-eyebrow::before{
  content:''; position:absolute; top:0; left:0; width:44px; height:3px;
  background:var(--accent); border-radius:2px; opacity:.85;
}
.l-h2{font-size:clamp(27px,3.8vw,42px); letter-spacing:-.005em; max-width:20ch}
.l-note{color:#5E7590; max-width:62ch; margin:-22px 0 30px}
/* примечание ПОД блоком — без отрицательного отступа, иначе наезжает на карточки */
.l-after-note{
  color:#5E7590; max-width:62ch; margin:26px 0 0; font-size:15.5px;
  padding-left:15px; border-left:2px solid var(--ice);
}
.l-prose p{font-size:18px; color:#2A3B52}

/* числа */
.l-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:22px; border-top:1px solid #D7E1EE; border-bottom:1px solid #D7E1EE; padding:30px 0;
}
.l-stat b{display:block; font-family:Cambria,Georgia,serif; font-size:clamp(34px,4.4vw,46px); color:var(--ink); line-height:1}
.l-stat span{font-size:14px; color:#5E7590}

/* карточки */
.l-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px}
.l-card{
  background:#fff; border:1px solid #D7E1EE; border-radius:15px; padding:26px 24px;
  transition:transform .16s ease, box-shadow .16s ease;
}
.l-card:hover{transform:translateY(-3px); box-shadow:0 18px 38px -20px rgba(14,26,43,.35)}
.l-card h3{font-size:20px; margin-bottom:10px}
.l-card p{margin:0; color:#3A4E68; font-size:15.5px; line-height:1.55}

/* темы */
.l-topics{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:16px}
.l-topic{display:flex; gap:16px; background:#fff; border:1px solid #D7E1EE; border-radius:15px; padding:22px}
.l-topic-n{
  flex:0 0 auto; width:42px; height:42px; border-radius:12px; background:var(--ink);
  color:#fff; display:grid; place-items:center; font:700 18px Cambria,Georgia,serif;
}
.l-topic-body{min-width:0}
.l-topic h3{font-size:18px; margin-bottom:4px}
.l-topic-meta{font-size:13px; color:#7A8CA6; margin-bottom:10px}
.l-topic-goals{margin:0; padding-left:17px; color:#3A4E68; font-size:14.5px; line-height:1.45}
.l-topic-goals li{margin-bottom:5px}

/* шаги */
.l-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px}
.l-step{display:flex; gap:15px; align-items:flex-start}
.l-step-n{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  border:2px solid var(--accent); color:var(--accent);
  display:grid; place-items:center; font:700 16px Cambria,Georgia,serif;
}
.l-step h3{font-size:17.5px; margin-bottom:6px}
.l-step p{margin:0; font-size:15px; color:#3A4E68; line-height:1.5}

/* цитата */
.l-quote{margin:0; border-left:4px solid var(--accent); padding-left:26px}
.l-quote p{font-family:Cambria,Georgia,serif; font-size:clamp(20px,2.7vw,28px); line-height:1.45; color:#fff; margin-bottom:16px}
.l-quote footer{font-size:14px; color:#8FA8CC}

/* вопросы */
.l-faq-i{border-bottom:1px solid #D7E1EE; padding:4px 0}
.l-faq-i summary{
  cursor:pointer; padding:17px 34px 17px 0; font-weight:600; font-size:17px;
  color:var(--ink); position:relative; list-style:none;
}
.l-faq-i summary::-webkit-details-marker{display:none}
.l-faq-i summary::after{
  content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:24px; font-weight:400; color:var(--sky); line-height:1;
}
.l-faq-i[open] summary::after{content:'−'}
.l-faq-i p{margin:0 0 18px; color:#3A4E68; font-size:16px; max-width:70ch}

/* призыв */
.l-cta{text-align:center}
/* в центрированных блоках заголовок ограничен по ширине —
   без авто-полей он прижимается влево и выглядит несимметрично */
.l-cta .l-h2, .l-sect-dark .l-h2{margin-left:auto; margin-right:auto}
.l-cta .l-lead{margin-left:auto; margin-right:auto}
.l-cta .l-lead{margin-left:auto; margin-right:auto; margin-bottom:28px}

/* подвал */
.l-foot{background:var(--ink2); color:#B9CBE4; padding:44px 0 30px; font-size:14.5px}
.l-foot-in{display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; margin-bottom:22px}
.l-foot p{margin:0 0 6px; max-width:52ch}
.l-foot-brand{color:#fff; font-weight:600; font-size:16px}
.l-foot a{color:var(--ice)}
.l-contact{font-size:15px}
.l-foot-legal{border-top:1px solid rgba(220,231,245,.16); padding-top:18px; font-size:13px; color:#8FA8CC; margin:0}

/* ---------- согласие (отдельная страница) ---------- */
.c-page{max-width:800px; margin:0 auto; padding:clamp(30px,6vw,64px) clamp(18px,4vw,32px)}
.c-page h1{font-size:clamp(25px,3.6vw,34px); margin-bottom:24px}
.c-page p{color:#2A3B52; margin-bottom:16px}
.c-back{display:inline-block; margin-bottom:26px; font-size:15px}

@media (max-width:640px){
  .l-actions .l-btn{width:100%}
  .l-topic{padding:18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ---------------------------------------------------------------- выбор направления
   Стартовая страница сервиса: горизонт делит небо и воду, под ним — две карточки. */

.l-hero-service .l-h1{max-width:16em}

.l-crumb{max-width:1180px; margin:0 auto; padding:22px 24px 0; font-size:14.5px}
.l-crumb a{color:var(--sky); text-decoration:none}
.l-crumb a:hover{text-decoration:underline}

.l-choices{
  display:grid; gap:24px; margin-top:8px;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
}

.l-choice{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line, #D7E1EE); border-radius:16px; overflow:hidden;
  box-shadow:0 1px 2px rgba(14,26,43,.05), 0 12px 32px -20px rgba(14,26,43,.3);
  transition:box-shadow .18s ease, transform .18s ease;
}
.l-choice:hover{transform:translateY(-2px);
  box-shadow:0 2px 6px rgba(14,26,43,.08), 0 24px 48px -24px rgba(14,26,43,.36)}

.l-choice-in{display:block; padding:30px 28px 22px; text-decoration:none; color:inherit;
  border-top:4px solid var(--dir-sky); flex:1; position:relative; overflow:hidden}
/* крупный полупрозрачный значок направления в углу карточки */
.l-choice-in::after{
  content:''; position:absolute; right:-26px; top:-18px; width:150px; height:150px;
  background:var(--dir-sky); opacity:.05; border-radius:50%; pointer-events:none;
}
.l-choice-top{display:flex; align-items:center; gap:13px; margin-bottom:14px}
.l-choice-mark{width:42px; height:42px; flex:none; fill:var(--dir-sky)}
.l-choice-name{display:block; font-family:Cambria,'Times New Roman',Georgia,serif;
  font-size:25px; font-weight:700; color:var(--dir-ink); line-height:1.15;
  letter-spacing:.01em}
.l-choice-name i{display:block; font-style:normal; font-family:inherit;
  font-size:13.5px; font-weight:400; color:var(--muted, #5E7590); margin-top:3px}
.l-choice-lead{margin:0 0 18px; font-size:16px; line-height:1.6; color:#2A3B52}
.l-choice-facts{display:block; font-size:14.5px; color:#5E7590;
  padding-top:15px; border-top:1px solid #D7E1EE}
.l-choice-facts s{text-decoration:none; color:#B9C6D8; padding:0 3px}
.l-choice-facts b{color:var(--dir-ink); font-weight:700}
.l-choice-go{display:block; margin-top:15px; font-size:15px; font-weight:600; color:var(--dir-sky)}
.l-choice-go s{text-decoration:none; display:inline-block; transition:transform .16s ease}
.l-choice:hover .l-choice-go s{transform:translateX(4px)}
.l-choice-btn{margin:0 28px 26px; text-align:center}

@media (max-width:560px){
  .l-choice-in{padding:22px 20px 18px}
  .l-choice-btn{margin:0 20px 20px}
  .l-choice-name{font-size:21px}
}

/* ---------------------------------------------------------------- логотип
   Загруженный логотип вписывается по высоте, пропорции сохраняются. */
.l-brand-logo{height:38px; width:auto; max-width:200px; object-fit:contain; display:block}
@media (max-width:560px){ .l-brand-logo{height:32px; max-width:150px} }

/* ---------------------------------------------------------------- партнёры */
.l-partners{
  display:grid; gap:18px; align-items:stretch;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
}
.l-partner{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:24px 18px; text-align:center; text-decoration:none;
  background:#fff; border:1px solid var(--line,#D7E1EE); border-radius:14px;
  color:var(--ink); min-height:140px; transition:border-color .16s ease, transform .16s ease;
}
a.l-partner:hover{border-color:var(--sky); transform:translateY(-2px)}
.l-partner img{max-height:58px; max-width:150px; width:auto; object-fit:contain}
.l-partner-name{font-size:14.5px; line-height:1.4; font-weight:500}
.l-partner-note{font-size:13px; color:var(--muted,#5E7590)}
.l-partner-blank{
  display:flex; align-items:center; justify-content:center; height:58px; width:100%;
  border-radius:9px; background:var(--paper,#F4F7FB); color:var(--muted,#5E7590);
  font-size:22px; font-weight:700; font-family:Georgia,serif;
}

/* ---------------------------------------------------------------- блок «о нас» */
.l-about{display:grid; gap:32px; grid-template-columns:1.15fr .85fr; align-items:start}
.l-about-side{
  background:var(--paper,#F4F7FB); border-radius:14px; padding:24px 26px;
  border-left:3px solid var(--accent);
}
.l-about-side h3{margin:0 0 14px; font-size:18px}
.l-about-list{list-style:none; margin:0; padding:0; display:grid; gap:13px}
.l-about-list li{position:relative; padding-left:26px; font-size:15.5px; line-height:1.55}
.l-about-list li::before{
  content:''; position:absolute; left:0; top:8px; width:11px; height:11px;
  border-radius:3px; background:var(--sky); opacity:.75;
}
@media (max-width:820px){ .l-about{grid-template-columns:1fr; gap:24px} }

/* ------------------------------------------------------------------
   Запрет выделения текста на всём сайте.

   Выделение отключено везде, КРОМЕ трёх мест, где оно нужно для работы:
   поля ввода (иначе нельзя исправить опечатку), кабинет администратора
   (иначе не скопировать почту или телефон участника из списка) и
   редактор содержимого. Снимок экрана при этом никак не ограничивается.
   ------------------------------------------------------------------ */
body{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;      /* длинное нажатие на телефоне */
  -webkit-tap-highlight-color:transparent;
}
input, textarea, select, [contenteditable="true"],
.admin, .admin *, .editor, .editor *{
  -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}
/* перетаскивание картинок мышью — тоже способ вытащить материал */
img{ -webkit-user-drag:none; user-drag:none; }

/* ---------------------------------------------------------------
   Блок фотографий. Снимки заменяются в редакторе: «Страницы».
   Соотношение сторон фиксировано, чтобы разные по размеру снимки
   не ломали сетку, а подпись всегда стояла на одном уровне.
   --------------------------------------------------------------- */
.l-gal{
  display:grid; gap:18px; margin-top:26px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.l-gal-wide{ grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.l-gal-item{ margin:0; }
.l-gal-item img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  border-radius:14px; background:var(--ice);
  box-shadow:0 10px 30px rgba(14,26,43,.13);
}
.l-gal-item figcaption{
  margin-top:10px; font-size:14px; line-height:1.45; color:var(--ink-2, #35507A);
}
@media (max-width:560px){
  .l-gal{ grid-template-columns:1fr; }
  .l-gal-item img{ aspect-ratio:3/2; }
}

/* ==================================================================
   Фотографии и глубина страницы.

   Палитра и шрифты намеренно оставлены прежними — красный, тёмно-синий
   и серифный заголовок — это опознавательные цвета движения, а не
   свободный выбор оформителя.
   ================================================================== */

/* --- снимок в первом экране --- */
.l-hero-photo{
  width:100%; height:100%; object-fit:cover; display:block;
  /* снимок приглушён, чтобы белый заголовок читался поверх него */
  filter:saturate(.82) contrast(1.03);
}
.l-hero-has-photo .l-hero-bg{opacity:1}
.l-hero-has-photo::after{
  /* плотнее слева, где текст; справа снимок открыт */
  background:linear-gradient(100deg,
    var(--ink) 0%, rgba(14,26,43,.94) 38%, rgba(14,26,43,.68) 68%, rgba(14,26,43,.42) 100%);
}

/* --- снимок в карточке направления --- */
.l-choice-cover{
  display:block; margin:-1px -1px 18px; overflow:hidden;
  border-radius:14px 14px 0 0; background:var(--ice);
}
.l-choice-cover img{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  transition:transform .35s ease;
}
.l-choice:hover .l-choice-cover img{transform:scale(1.03)}
.l-choice-in{overflow:hidden}

/* --- отклик на наведение: карточки перестают быть плоскими --- */
.l-choice{
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 2px 10px rgba(14,26,43,.06);
}
.l-choice:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(14,26,43,.16);
}
.l-gal-item img{transition:transform .3s ease, box-shadow .3s ease}
.l-gal-item:hover img{transform:translateY(-3px); box-shadow:0 18px 42px rgba(14,26,43,.2)}
.l-btn{transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease}
.l-btn:hover{transform:translateY(-1px)}
a, .l-choice-in, .l-btn, summary{cursor:pointer}

/* --- ритм страницы: чередование фона, чтобы полотно не сливалось --- */
.l-sect + .l-sect:not(.l-sect-alt):not(.l-sect-dark){padding-top:clamp(34px,4.5vw,60px)}

/* --- уважение к системной настройке «уменьшить движение» --- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .l-choice:hover, .l-btn:hover, .l-gal-item:hover img{transform:none}
}