/* ==========================================================================
   edu.concretika.ru — курс по костровым зонам.
   Тёмная тема, оранжевый «огненный» акцент, Oswald (заголовки) + Manrope.
   ========================================================================== */

:root {
  --bg: #121212;
  --bg-2: #1b1b1b;
  --bg-3: #242424;
  --line: #2e2e2e;
  --text: #f2f0ed;
  --muted: #a9a39c;
  --accent: #ff8d50;
  --accent-2: #e65a30;
  --bad: #e5484d;
  --ok: #4cc38a;
  --fire: linear-gradient(90deg, #ca2f1a 0%, #e65a30 27%, #ff8d50 74%, #ff772d 100%);
  --radius: 20px;
  --wrap: 1180px;
  --head: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --body: 'Manrope', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--head); font-weight: 500; text-transform: uppercase; line-height: 1.1; margin: 0 0 .6em; letter-spacing: .01em; }
h1 { font-size: clamp(40px, 6vw, 76px); }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: 20px; color: var(--accent); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.accent { color: var(--accent); }
.foot__muted { color: var(--muted); }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--fire); color: #fff; font: 600 16px/1 var(--body);
  box-shadow: 0 8px 30px rgba(230, 90, 48, .35);
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 34px rgba(230, 90, 48, .5); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.btn--wide { width: 100%; }

.chip { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255,141,80,.14); color: #ffc8a8; font-size: 14px; font-weight: 600; white-space: nowrap; }

/* ---------- шапка ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(18,18,18,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top__in { display: flex; align-items: center; gap: 28px; height: 64px; }
.top__logo img { height: 30px; width: auto; }
.top__nav { display: flex; gap: 22px; margin-right: auto; }
.top__nav a { color: var(--text); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.top__nav a:hover { color: var(--accent); text-decoration: none; }
.top__phone { color: var(--text); font-weight: 600; font-size: 15px; white-space: nowrap; }

/* ---------- первый экран ---------- */
/* Фото в границах контейнера сайта (как остальные блоки), справа;
   левый край фото плавно уходит в фон, текст слева. */
.hero { position: relative; padding: 32px 0 72px; }
.hero__in { position: relative; min-height: 600px; display: flex; align-items: center; }
.hero__media { position: absolute; top: 0; bottom: 0; right: 16px; width: 68%; border-radius: 24px; overflow: hidden; background: #0b0b0b; }
.hero__bg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hero__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #121212 0%, rgba(18,18,18,.85) 18%, rgba(18,18,18,.3) 42%, rgba(18,18,18,0) 62%); }
.hero__text { position: relative; z-index: 1; max-width: 600px; padding: 40px 0; }
.hero h1 { margin-bottom: .2em; text-shadow: 0 2px 24px rgba(0,0,0,.6); }
.hero__lead { font-size: clamp(18px, 2vw, 22px); color: #e6ded6; margin: 0 0 28px; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.hero__dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 30px; }
.hero__dates-label { color: var(--muted); font-size: 14px; margin-right: 4px; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- секции ---------- */
.sec { padding: 88px 0; position: relative; }
.sec--dark { background: var(--bg-2); }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fact { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.fact__k { font-family: var(--head); font-size: 22px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.fact__v { color: #ddd6cf; font-size: 15px; }

/* программа */
.program { display: grid; grid-template-columns: 1fr 300px; gap: 32px; }
.program__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pblock { background: var(--bg-3); border-radius: var(--radius); padding: 24px 24px 18px; }
.pblock--wide { grid-column: 1 / -1; }
/* Картинки фона задаются в разметке (background-image), чтобы путь img/ считался от страницы, а не от CSS. */
.program__pic { border-radius: var(--radius); background: #000 center / cover no-repeat; min-height: 420px; }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 15px; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .55em; border: 5px solid transparent; border-left: 7px solid var(--accent); }
.ticks--2col { columns: 2; column-gap: 28px; }
.ticks--2col li { break-inside: avoid; }

/* почему важно */
.why { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }
.stat { margin-bottom: 26px; }
.stat__n { font-family: var(--head); font-size: 64px; line-height: 1; background: var(--fire); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__n--big { font-size: 84px; }
.stat__t { color: #ddd6cf; margin: 6px 0 10px; }
.bar { height: 8px; border-radius: 8px; background: var(--fire); width: var(--w); }
.why__card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 28px; padding: 32px; min-width: 0; }
.why__p { color: #ddd6cf; border-top: 1px solid var(--line); padding-top: 16px; }
/* Слайдер «Неверно»: 2 кадра на экране (на телефоне 1), стрелки, точки, свайп.
   Скролл-бар спрятан: листают стрелками, свайпом или точками. */
.slider { position: relative; margin-top: 18px; }
.slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 10px) / 2); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 16px; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.slider__item { margin: 0; scroll-snap-align: start; }
.slider__item img { width: 100%; aspect-ratio: 726/546; object-fit: cover; border-radius: 16px; }
.slider__btn { position: absolute; top: calc(50% - 32px); width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: var(--fire); color: #fff; font: 700 24px/1 var(--body); display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.slider__btn[hidden] { display: none; }
.slider__btn--prev { left: -12px; }
.slider__btn--next { right: -12px; }
.slider__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.slider__dots span { width: 8px; height: 8px; border-radius: 50%; background: #444; transition: background .2s, width .2s; }
.slider__dots span.on { background: var(--accent); width: 20px; border-radius: 4px; }

/* автор */
.sec--author { background: #000 center / cover no-repeat; overflow: hidden; }
.sec--author::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
/* Автор: фото слева «стоит» на нижней границе блока, справа имя, роль и цитата — по центру по высоте. */
.author { position: relative; display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.author__pic { align-self: end; margin-bottom: -88px; }
.author__pic img { width: 100%; max-width: 400px; margin: 0 auto; }
.author__role { font-size: 18px; color: #e6ded6; margin: 0 0 24px; }
.author__company { color: var(--muted); font-size: 14px; margin: 18px 0 0; }
.quote { margin: 0; background: rgba(12,12,12,.82); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 26px 28px 26px 56px; font-style: italic; font-size: 16px; position: relative; }
.quote::before { content: '“'; position: absolute; top: 14px; left: 16px; font: 700 64px/1 Georgia, serif; color: var(--accent); font-style: normal; }
.quote p { margin: 0 0 12px; }
.quote p:last-child { margin: 0; }

/* галерея */
.gallery { display: grid; gap: 12px; }
.gallery__row { display: flex; gap: 12px; }
/* Колонка из двух горизонтальных кадров: её пропорция = 1 / (1/1.346 + 1/1.346) ≈ 0.673 */
.gallery__stack { flex: .673 1 0; min-width: 0; aspect-ratio: .673; display: flex; flex-direction: column; gap: 12px; }
.gallery__stack .gallery__i { flex: 1 1 0; min-height: 0; height: 0; aspect-ratio: auto; }
/* ширина пропорциональна соотношению сторон → высота в ряду одинаковая, без обрезки */
.gallery__i { flex: var(--r) 1 0; min-width: 0; width: 100%; height: auto; aspect-ratio: var(--r); object-fit: cover; border-radius: 16px; }

/* что получите */
.get { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.get__list { list-style: none; counter-reset: g; margin: 0; padding: 0; display: grid; gap: 14px; }
.get__list li { counter-increment: g; display: flex; gap: 18px; align-items: center; background: var(--bg-3); border-radius: 16px; padding: 18px 22px; font-size: 17px; font-weight: 600; }
.get__list li::before { content: '0' counter(g); font: 500 30px/1 var(--head); color: var(--accent); }
.get__pic { border-radius: var(--radius); width: 100%; height: auto; }

/* запись */
.sec--form { background: radial-gradient(ellipse at 20% 0%, rgba(230,90,48,.18), transparent 60%), var(--bg); }
.reg { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.reg__intro p { color: #ddd6cf; font-size: 17px; }
.reg__pic { margin-top: 24px; border-radius: var(--radius); }
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 24px; padding: 28px; }
.form { display: grid; gap: 14px; }
.alert { background: rgba(229,72,77,.14); border: 1px solid rgba(229,72,77,.5); color: #ffc0c2; padding: 12px 16px; border-radius: 12px; font-size: 15px; }
.alert--info { background: rgba(255,141,80,.1); border-color: rgba(255,141,80,.4); color: #ffd9c4; }

.dates { border: 0; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.dates legend { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; padding: 0; }
.date { position: relative; display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg-3); cursor: pointer; transition: border-color .15s, background .15s; }
.date input { position: absolute; opacity: 0; pointer-events: none; }
.date__d { font: 500 22px/1.1 var(--head); text-transform: uppercase; }
.date__w { font-size: 14px; color: #ddd6cf; }
.date__left { font-size: 12px; color: var(--ok); font-weight: 600; margin-top: 4px; }
.date:hover { border-color: #555; }
.date:has(input:checked) { border-color: var(--accent); background: rgba(255,141,80,.1); }
.date:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.date--full { opacity: .5; cursor: not-allowed; }
.date--full .date__left { color: var(--muted); }

.field { display: grid; gap: 6px; }
.field span { font-size: 13px; font-weight: 600; color: var(--muted); }
.field i { font-style: normal; font-weight: 400; opacity: .7; }
.field input {
  height: 52px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--bg); color: var(--text); font: 500 16px var(--body);
}
.field input:focus { outline: none; border-color: var(--accent); }
.field input[aria-invalid="true"] { border-color: var(--bad); }
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); cursor: pointer; }
.agree input { margin-top: 3px; accent-color: var(--accent-2); width: 18px; height: 18px; flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* как добраться */
.route { display: grid; grid-template-columns: .9fr 1.1fr; gap: 32px; }
.route__big { font: 500 24px/1.3 var(--head); text-transform: uppercase; margin: 0 0 8px; }
.route__ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.route__ways li { background: var(--bg-3); border-radius: 14px; padding: 14px 18px; font-size: 15px; color: #ddd6cf; }
.route__ways b { color: var(--text); }
.route .btn { margin-top: 12px; }

/* спасибо */
.thanks { background: #0b0b0b center top / cover no-repeat; min-height: 70vh; }
.thanks::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.6), var(--bg) 70%); }
.thanks__in { position: relative; max-width: 860px; display: grid; gap: 20px; }
.thanks__head { text-align: center; margin-bottom: 8px; }
.thanks__ok { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; background: var(--fire); display: grid; place-items: center; font-size: 36px; font-weight: 700; box-shadow: 0 10px 40px rgba(230,90,48,.5); }
.thanks h1 { font-size: clamp(38px, 5vw, 60px); }
.when { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.when__date { font: 500 30px/1.1 var(--head); text-transform: uppercase; }
.when__time { font-size: 20px; color: var(--accent); font-weight: 700; }
.when__place { font-size: 17px; }
.when__btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; }
.steps { margin: 0; padding-left: 22px; display: grid; gap: 12px; color: #ddd6cf; }
.steps b { color: var(--text); }
.thanks .route { grid-template-columns: 1fr; }
.thanks__back { text-align: center; }

/* подвал */
.foot { border-top: 1px solid var(--line); padding: 48px 0 24px; font-size: 14px; }
.foot__in { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 32px; }
.foot__logo { height: 30px; width: auto; margin-bottom: 12px; }
.foot__small { font-size: 13px; }
.foot__copy { color: var(--muted); font-size: 12px; margin-top: 24px; }
.foot a { color: var(--text); }

/* ---------- адаптив ---------- */
@media (max-width: 1024px) {
  .hero__media { width: 82%; }
  .hero__shade { background: linear-gradient(90deg, #121212 0%, rgba(18,18,18,.85) 25%, rgba(18,18,18,.45) 55%, rgba(18,18,18,.15) 100%); }
  .top__nav { display: none; }
  .top__phone { margin-left: auto; }
  .facts { grid-template-columns: 1fr 1fr; }
  .program { grid-template-columns: 1fr; }
  .program__pic { display: none; }
  .author { grid-template-columns: 4fr 6fr; gap: 32px; }
}
@media (max-width: 760px) {
  .sec { padding: 60px 0; }
  .top__in { gap: 12px; height: 58px; }
  .top__phone { display: none; }
  .top__cta { margin-left: auto; }
  /* телефон: фото сверху, текст ниже на тёмном фоне с плавным переходом */
  /* телефон: фото сверху в рамке контейнера, текст под ним */
  .hero { padding: 16px 0 52px; }
  .hero__in { display: block; min-height: 0; }
  .hero__media { position: relative; right: auto; width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; }
  .hero__shade { background: linear-gradient(180deg, rgba(18,18,18,0) 55%, rgba(18,18,18,.9) 100%); }
  .hero__text { padding: 0; margin-top: -40px; }
  .why, .get, .reg, .route, .when, .foot__in { grid-template-columns: 1fr; }
  .hero__btns .btn { flex: 1 1 100%; }
  .facts, .program__grid { grid-template-columns: 1fr; }
  .ticks--2col { columns: 1; }
  .author { grid-template-columns: 1fr; gap: 24px; }
  .author__body { order: -1; }
  .author__pic { margin-bottom: -60px; }
  .author__pic img { max-width: 260px; }
  .quote { padding: 22px 20px 22px 48px; font-size: 15px; }
  .gallery__row { flex-wrap: wrap; }
  .gallery__i { flex: 1 1 calc(50% - 6px); aspect-ratio: 3/4; }
  .gallery__i--main { flex-basis: 100%; aspect-ratio: var(--r); }
  .gallery__stack { flex: 1 1 100%; flex-direction: row; aspect-ratio: auto; }
  .gallery__stack .gallery__i { flex: 1 1 0; height: auto; aspect-ratio: 4/3; }
  .gallery__row:last-child .gallery__i:last-child { flex-basis: 100%; aspect-ratio: var(--r); }
  .stat__n { font-size: 52px; }
  .why__card, .card { padding: 22px; }
  .slider__track { grid-auto-columns: 100%; }
  .slider__btn--prev { left: 6px; }
  .slider__btn--next { right: 6px; }
  .reg__pic { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}