/* stranica.css — раскладка лендинга N.E.O. Yoga Retreat (этап 5, 07.11.2026).
   Цвета, шрифт, размеры шрифта и кнопки — только из stil.css. */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--f-tekst);font-size:var(--fs-tekst);line-height:var(--lh-tekst);color:var(--c-tekst);background:var(--c-fon)}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
h1,h2{font-family:var(--f-zag);font-weight:400;text-transform:uppercase;line-height:var(--lh-zag);letter-spacing:var(--razryadka-zag)}
h1{font-size:var(--fs-h1);text-wrap:balance}
h2{font-size:var(--fs-h2);max-width:17ch;text-wrap:balance}
h3{font-family:var(--f-zag);font-size:var(--fs-h3);font-weight:600;line-height:1.3}
b{font-weight:600}
.obertka{max-width:var(--shirina);margin:0 auto;position:relative}
.nadzag{font-size:var(--fs-nadzag);text-transform:uppercase;letter-spacing:var(--razryadka-nadzag)}

/* Кнопка блока: последний элемент блока, на телефоне по центру */
.dey{display:flex;justify-content:center;margin-top:48px}

/* ── Блок 1. Первый экран: текст → фото → кнопка; на компьютере фото справа ── */
.ekran{background:var(--c-fon-2);color:var(--c-fon)}
.shapka{display:flex;align-items:center;justify-content:space-between;padding:18px max(var(--otstup-kraya),calc((100% - var(--shirina)) / 2));border-bottom:1px solid var(--c-liniya-temn)}
.shapka img{height:44px;width:auto}
.nomer{font-size:var(--fs-nadzag);letter-spacing:.08em;opacity:.75}
.ekran__setka{max-width:calc(var(--shirina) + 2 * var(--otstup-kraya));display:grid;grid-template-areas:"tekst" "foto" "knopka";gap:28px;padding:32px var(--otstup-kraya) 40px}
.ekran__tekst{grid-area:tekst}
.ekran .nadzag{opacity:.8;margin-bottom:18px}
.ekran .stroka{opacity:.9;max-width:34ch;margin-top:20px}
.ekran__foto{grid-area:foto;display:block}
.ekran__foto img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ekran__knopka{grid-area:knopka;display:flex;justify-content:center}

/* ── Разделы ── */
.razdel{position:relative;padding:var(--otstup-bloka) var(--otstup-kraya);overflow:hidden}
.razdel--temnyy{background:var(--c-fon-2);color:var(--c-fon)}
.razdel__verh{display:flex;justify-content:space-between;align-items:baseline;color:var(--c-tekst-2);margin-bottom:24px;position:relative}
.razdel--temnyy .razdel__verh{color:var(--c-fon);opacity:.7}
.marker{background:linear-gradient(transparent 58%,var(--c-liniya) 58%,var(--c-liniya) 92%,transparent 92%)}
.razdel--temnyy .marker{background:linear-gradient(transparent 58%,var(--c-liniya-temn) 58%,var(--c-liniya-temn) 92%,transparent 92%)}
.tekst{max-width:var(--shirina-teksta);margin-top:32px;position:relative}
.tekst p+p{margin-top:16px}
.vydelit{font-size:var(--fs-h3);line-height:1.4}
.liniya{border:0;border-top:1px solid var(--c-liniya);margin-top:48px}
.vodznak{position:absolute;right:-70px;top:-20px;width:240px;opacity:.07;pointer-events:none}
.razdel--temnyy .vodznak{opacity:.06}

/* Нумерованный список: номер на одной строке с текстом */
.punkty{list-style:none;margin-top:36px;max-width:820px}
.punkty li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:20px 0;border-top:1px solid var(--c-liniya)}
.punkty li:last-child{border-bottom:1px solid var(--c-liniya)}
.razdel--temnyy .punkty li{border-color:var(--c-liniya-temn)}
.punkty .n{font-size:var(--fs-nadzag);letter-spacing:.1em;padding-top:6px;opacity:.6}

/* Блок 4: цитата Виктории */
.citata{margin-top:48px;padding-left:24px;border-left:2px solid var(--c-akcent);max-width:var(--shirina-teksta)}
.citata p{font-size:var(--fs-h3);line-height:1.4}
.citata cite{display:block;margin-top:10px;font-style:normal;font-size:var(--fs-nadzag);text-transform:uppercase;letter-spacing:var(--razryadka-nadzag);color:var(--c-tekst-2)}

/* Блок 5 */
.vedushchaya{display:grid;gap:32px;margin-top:8px;grid-template-areas:"zag" "foto" "tekst"}
.vedushchaya__zag{grid-area:zag}.vedushchaya__foto{grid-area:foto}.vedushchaya__tekst{grid-area:tekst;margin-top:0}
.vedushchaya__foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%}
.vedushchaya h2{max-width:18ch}

/* Блок 6: четыре дня */
.dni{display:grid;gap:0;margin-top:40px}
.den{padding:28px 0;border-top:1px solid var(--c-liniya)}
.den__nomer{display:block;font-size:var(--fs-h2);line-height:1;color:var(--c-akcent);opacity:.35;margin-bottom:14px}
.den h3{margin-bottom:14px;max-width:22ch}
.den p+p{margin-top:12px}
.primechanie{margin-top:32px;max-width:var(--shirina-teksta);font-size:var(--fs-melkiy);color:var(--c-tekst-2)}

/* Блок 7 */
.mozaika{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:40px}
.mozaika img{width:100%;height:100%;object-fit:cover}
.mozaika .bolshoe{grid-column:1/-1;aspect-ratio:4/3}
.mozaika .vys{aspect-ratio:3/4}
.mozaika + .setka{margin-top:40px}
.setka > .tekst + .tekst{margin-top:16px}

/* Блок 8: заезды */
.zaezdy{margin-top:32px;font-size:var(--fs-h3);line-height:1.45;max-width:var(--shirina-teksta)}
.zaezdy span{white-space:nowrap;border-bottom:1px solid var(--c-liniya-temn)}
.usloviya{list-style:none;margin-top:32px;max-width:var(--shirina-teksta)}
.usloviya li{padding:16px 0;border-top:1px solid var(--c-liniya-temn)}

/* Блок 9: отзывы */
.otzyvy{display:grid;gap:16px;margin-top:40px}
.otzyv{background:var(--c-fon);border:1px solid var(--c-liniya);padding:28px 24px;display:flex;flex-direction:column;gap:18px}
.otzyv blockquote{font-size:var(--fs-h3);line-height:1.4}
.otzyv figcaption{margin-top:auto;font-size:var(--fs-melkiy);color:var(--c-tekst-2)}

/* Блок 10: заявка */
.zayavka .tekst{margin-top:24px}

/* Блок 11: подвал */
.podval{padding:32px var(--otstup-kraya);border-top:1px solid var(--c-liniya);font-size:var(--fs-melkiy);color:var(--c-tekst-2)}
.podval a{color:inherit}

/* ── Окно заявки с квизом ── */
.mod{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.mod[hidden]{display:none}
.mod::before{content:"";position:absolute;inset:0;background:var(--c-fon-2);opacity:.72;z-index:-1}
.mod-okno{position:relative;width:100%;max-width:480px;max-height:calc(100svh - 32px);overflow:auto;background:var(--c-fon);color:var(--c-tekst);padding:44px 24px 28px}
.mod-zakryt{position:absolute;top:6px;right:8px;width:44px;height:44px;border:0;background:none;cursor:pointer;font-size:var(--fs-h3);line-height:1;color:var(--c-tekst-2)}
.kv-polosa{height:2px;background:var(--c-liniya);margin-bottom:22px}
.kv-polosa span{display:block;height:100%;width:50%;background:var(--c-akcent);transition:width .25s}
.kv-q{font-size:var(--fs-h3);line-height:1.3;font-weight:600;margin-bottom:18px}
.kv-varianty{display:grid;gap:8px}
.kv-opt{display:block;width:100%;text-align:left;padding:15px 18px;border:1px solid var(--c-liniya);background:var(--c-fon);cursor:pointer;font-size:var(--fs-tekst);transition:border-color .2s}
.kv-opt:hover,.kv-opt.is-on{border-color:var(--c-akcent)}
.pole{margin-bottom:16px}
.pole label{display:block;font-size:var(--fs-melkiy);color:var(--c-tekst-2);margin-bottom:6px}
.pole input{width:100%;min-height:52px;padding:0 14px;border:1px solid var(--c-liniya);background:var(--c-fon);font:inherit;color:var(--c-tekst);border-radius:var(--radius)}
.pole input:focus{outline:2px solid var(--c-akcent);outline-offset:-1px}
.soglasie{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-melkiy);line-height:1.4;color:var(--c-tekst-2);margin:6px 0 20px}
.soglasie input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--c-akcent)}
.soglasie a{color:inherit}
.lovushka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mod-okno .btn{width:100%}
.kv-nazad{margin-top:14px;border:0;background:none;cursor:pointer;font-size:var(--fs-melkiy);color:var(--c-tekst-2)}

@media (min-width:900px){
  .shapka img{height:52px}
  .ekran__setka{grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;grid-template-areas:"tekst foto" "knopka foto";
    column-gap:64px;row-gap:36px;align-items:end;min-height:calc(100svh - 89px);padding-top:48px;padding-bottom:56px}
  .ekran__tekst{align-self:end}
  .ekran__knopka{justify-content:flex-start;align-self:start}
  .ekran__foto{height:100%;min-height:520px}
  .ekran__foto img{height:100%;aspect-ratio:auto;object-position:center 40%}
  h1{max-width:16ch}
  .dey{justify-content:flex-start}
  .setka{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .setka .tekst{margin-top:-8px}
  .mozaika + .setka .tekst,.setka > .tekst + .tekst{margin-top:0}
  .vodznak{width:440px;left:-40px;right:auto;top:240px}
  #programma .vodznak{left:auto;right:-40px;top:20px}
  .vedushchaya{grid-template-columns:5fr 7fr;grid-template-rows:auto 1fr;grid-template-areas:"foto zag" "foto tekst";column-gap:64px;row-gap:0;align-items:start}
  .vedushchaya__tekst{margin-top:32px}
  .mozaika{grid-template-columns:2fr 1fr 1fr}
  .mozaika .bolshoe{grid-column:auto;aspect-ratio:auto}
  .dni{grid-template-columns:1fr 1fr;column-gap:64px}
  .punkty{margin-left:auto;margin-right:0}
  .otzyvy{grid-template-columns:1fr 1fr;gap:20px}
  .otzyv{padding:36px 32px}
  .mod-okno{padding:52px 40px 36px}
}

/* Телефон: окно заявки на весь экран, чтобы кнопка встала в одну строку */
@media (max-width:600px){
  .mod{padding:0}
  .mod-okno{max-width:none;height:100%;max-height:none;padding:60px 18px 28px}
}

/* Страница «Спасибо» */
.spasibo{min-height:100svh;display:flex;flex-direction:column}
.spasibo .razdel{flex:1;display:flex;align-items:center}
.spasibo .obertka{width:100%}
.spasibo h1{max-width:18ch}
.spasibo .shapka a{display:inline-block}

/* Компьютер: блок заявки по центру, чтобы не было пустой правой половины */
@media (min-width:900px){
  .zayavka .obertka{text-align:center}
  .zayavka .razdel__verh{text-align:left}
  .zayavka h2{margin:0 auto;max-width:20ch}
  .zayavka .tekst{margin-left:auto;margin-right:auto}
  .zayavka .dey{justify-content:center}
}
.nobr{white-space:nowrap}

/* Блок 4: цитата под заголовком в левой колонке */
.rezultat__zag .citata{margin-top:40px}
/* Блок 7: что входит в стоимость — строками с линиями */
.tekst p.vkl{margin-top:0;padding:14px 0;border-top:1px solid var(--c-liniya)}
/* Два светлых блока подряд разделяет тонкая линия, а не двойной отступ */
.razdel:not(.razdel--temnyy) + .razdel:not(.razdel--temnyy){padding-top:0}
.razdel:not(.razdel--temnyy) + .razdel:not(.razdel--temnyy) > .obertka{border-top:1px solid var(--c-liniya);padding-top:var(--otstup-bloka)}
/* Поле с ошибкой: красная рамка validate.js не прячется под рамкой фокуса */
.pole input.поле-плохо{outline:0}
/* Телефон: в блоке 4 сначала список, потом цитата — как в утверждённом тексте */
@media (max-width:899px){
  #rezultat .setka{display:flex;flex-direction:column}
  .rezultat__zag{display:contents}
  #rezultat .citata{order:2;margin-top:48px}
}