/* Остров малышей — оформление публичной страницы.
   Настроение: маленький тёплый остров в спокойном море.
   Море (глубокая бирюза) держит доверие, песок греет, коралл зовёт к действию.
   Шрифты лежат рядом, в app/static/fonts, лицензии — там же. */

/* ─────────────────────────  шрифты  ───────────────────────── */

@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-cyrillic.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { /* рубля и номера нет в обычных подмножествах Google */
  font-family: "Literata";
  src: url("../fonts/literata-znaki.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+20BD;
}
@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-cyrillic.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-znaki.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+20BD;
}

/* ─────────────────────────  величины  ───────────────────────── */

:root {
  /* цвет */
  --more: #0E4C55;          /* глубокое море: заголовки, тёмные полосы */
  --volna: #17747C;         /* бирюза для текста и ссылок, 5,5:1 на белом */
  --volna-svet: #2E9AA0;    /* бирюза для заливок и волн, не для текста */
  --pena: #EAF3F1;          /* пена: светлые полосы */
  --pesok: #F6E7CF;         /* песок: полосы и рамки */
  --pesok-svet: #FDF6EA;
  --pesok-temn: #DCC5A2;    /* песок в линиях */
  --korall: #C8452F;        /* действие: кнопки, 4,8:1 под белым текстом */
  --korall-temn: #A83724;
  --korall-svet: #F3B8A6;   /* коралл на тёмном, 5,6:1 */
  --tekst: #22403D;
  --tekst-tih: #4E6A66;
  --fon: #F6F9F7;
  --bumaga: #FFFFFF;
  --fokus: var(--volna);

  /* шаг отступов: один ряд значений на весь сайт */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;

  --polya: clamp(1rem, 5vw, 2.5rem);     /* поля страницы */
  --shirina: 1120px;                     /* полоса содержимого */
  --polya-kolonki: max(var(--polya), calc((100% - var(--shirina)) / 2));
  --sec-otstup: clamp(3rem, 8vw, 5.5rem); /* воздух между разделами */

  /* скругления: чем крупнее предмет, тем мягче угол */
  --r-s: .75rem; --r-m: 1.25rem; --r-l: 2rem; --r-xl: 2.75rem;
  --r-krug: 999px;

  --ten: 0 18px 40px -24px rgba(14, 76, 85, .45);
  --ten-myagko: 0 2px 10px -6px rgba(14, 76, 85, .35);

  /* волна-разделитель: одна форма на весь сайт, цвет задаёт фон */
  --volna-maska: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 33C120 6 240 6 360 29c120 24 240 26 360 4 120-22 240-28 360-8 60 10 90 16 120 20v15H0Z' fill='%23000'/%3E%3C/svg%3E");
}

/* ─────────────────────────  основа  ───────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fon);
  color: var(--tekst);
  font: 400 1.0625rem/1.6 "Golos Text", "Segoe UI", system-ui, sans-serif;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: "Literata", Georgia, serif;
  color: var(--more);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 6.6vw, 3.25rem); line-height: 1.1; letter-spacing: -.015em; }
h2 { font-size: clamp(1.55rem, 5.2vw, 2.35rem); line-height: 1.18; letter-spacing: -.01em; }
h3 { font-family: "Golos Text", system-ui, sans-serif; font-size: 1.125rem; line-height: 1.35; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--volna); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--more); }

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: var(--s1);
}

::selection { background: var(--pesok); color: var(--more); }

/* ─────────────────────────  каркас раздела  ───────────────────────── */

/* Полоса содержимого держится полями раздела, а не auto-отступами детей:
   тогда узкий абзац встаёт по левому краю колонки, а не съезжает в центр. */
.sec, .podval, .shapka, .obyavlenie, .preview-bar {
  padding-inline: var(--polya-kolonki);
}
.sec {
  position: relative;
  padding-block: var(--sec-otstup);
  scroll-margin-top: var(--s4);
}
.sec > .nadzag + h1,
.sec > .nadzag + h2 { margin-top: var(--s2); }
.sec > h1 + .podzag,
.sec > h2 + .podzag { margin-top: var(--s4); }
.sec > .podzag + * { margin-top: var(--s6); }
.sec > h2 + :not(.podzag) { margin-top: var(--s6); }

.nadzag {
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--volna);
  font-weight: 500;
}
.podzag {
  font-size: clamp(1.0625rem, 2.6vw, 1.1875rem);
  line-height: 1.55;
  color: var(--tekst-tih);
  max-width: 60ch;
}
/* обычный абзац внутри раздела не должен растягиваться на всю полосу */
.sec > p:not([class]) { max-width: 60ch; line-height: 1.65; }

/* Якорь формы. Имя блока владелец меняет в панели, поэтому кнопки ведут не на
   него, а на этот знак. Он вынут из потока: ни в сетке раздела, ни в отбивках
   не участвует, а scroll-margin отводит заголовок из-под липкой шапки. */
.yakor {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  scroll-margin-top: var(--s4);
}

/* волна: рисуется поверх предыдущего раздела цветом своего */
.volna-sverhu::before,
.volna-snizu::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px;
  height: clamp(26px, 4.5vw, 52px);
  background-color: inherit;
  -webkit-mask-image: var(--volna-maska);
  mask-image: var(--volna-maska);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.volna-sverhu::before { top: 1px; transform: translateY(-100%); }
.volna-snizu::after { bottom: 1px; transform: translateY(100%) scaleY(-1); }

/* ─────────────────────────  кнопки  ───────────────────────── */

.knopka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding: var(--s3) var(--s6);
  border: 2px solid transparent;
  border-radius: var(--r-krug);
  font: 600 1.0625rem/1.2 "Golos Text", system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: var(--bumaga);
  border-color: var(--pesok-temn);
  color: var(--more);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.knopka:hover { background: var(--pesok); color: var(--more); }
.knopka--glavnaya {
  background: var(--korall);
  color: #fff;
  box-shadow: var(--ten-myagko);
}
.knopka--glavnaya:hover { background: var(--korall-temn); color: #fff; }
.knopka--vtoraya {
  background: transparent;
  border-color: var(--more);
  color: var(--more);
}
.knopka--vtoraya:hover { background: var(--more); color: #fff; }
.knopka:active { transform: translateY(1px); }
.knopka[disabled] { opacity: .65; cursor: progress; }

/* ─────────────────────────  шапка  ───────────────────────── */

.shapka {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "logo tel" "menyu menyu";
  align-items: center;
  gap: var(--s4) var(--s3);
  padding-block: var(--s4);
  background: var(--pena);
}

.logo {
  grid-area: logo;
  display: flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  color: var(--more);
}
.logo img { width: 40px; height: 40px; flex: none; }
.logo span {
  display: block;
  font: 600 1rem/1.2 "Literata", Georgia, serif;
}
.logo i {
  display: block;
  font: 400 .75rem/1.3 "Golos Text", system-ui, sans-serif;
  font-style: normal;
  white-space: nowrap;
  color: var(--tekst-tih);
  margin-top: 2px;
}

.tel {
  grid-area: tel;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border: 1.5px solid var(--more);
  border-radius: var(--r-krug);
  font-weight: 600;
  font-size: .8125rem;
  white-space: nowrap;
  color: var(--more);
  text-decoration: none;
}
.tel:hover { background: var(--more); color: #fff; }

/* на телефоне разделы — лента, её листают пальцем */
.menyu {
  grid-area: menyu;
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--polya-kolonki) * -1);
  padding-inline: var(--polya-kolonki);
  scroll-padding-left: var(--polya-kolonki);
  /* край ленты растворяется — видно, что её можно листать */
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
  mask-image: linear-gradient(to right, #000 88%, transparent);
}
.menyu::-webkit-scrollbar { display: none; }
.menyu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-krug);
  background: var(--bumaga);
  color: var(--more);
  font-size: .9375rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.menyu a:hover { background: var(--pesok); }

@media (min-width: 60rem) {
  .shapka {
    position: sticky;
    top: 0;
    z-index: 20;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo menyu tel";
    /* шапке даём всю ширину окна: разделов шесть, в колонку они не влезают */
    padding-inline: clamp(1.5rem, 4vw, 3.5rem);
    gap: var(--s4);
    background: rgba(234, 243, 241, .94);
    backdrop-filter: blur(8px);
  }
  .sec, .yakor { scroll-margin-top: 6rem; }
  .menyu {
    margin-inline: 0; padding-inline: 0; overflow: visible;
    justify-content: center; flex-wrap: wrap; gap: var(--s1);
    -webkit-mask-image: none; mask-image: none;
  }
  .menyu a { background: transparent; padding-inline: var(--s2); font-size: .9375rem; }
  .logo img { width: 44px; height: 44px; }
  .logo span { font-size: 1.0625rem; }
  .logo i { font-size: .8125rem; }
  .tel { font-size: .9375rem; padding-inline: var(--s4); }
}

.preview-bar {
  padding-block: var(--s3);
  background: var(--more);
  color: var(--pesok);
  font-size: .9375rem;
  text-align: center;
}

/* ─────────────────────────  плашка объявления  ───────────────────────── */

.obyavlenie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s2) var(--s4);
  padding-block: var(--s3);
  background: var(--korall);
  color: #fff;
  font-weight: 500;
  text-align: center;
}
.obyavlenie a {
  color: #fff;
  font-weight: 600;
  text-underline-offset: .25em;
}
.obyavlenie a:hover { color: var(--pesok); }

/* ─────────────────────────  первый экран  ───────────────────────── */

.sec--geroy {
  background: var(--pena);
  padding-top: var(--s7);
}
.geroy-tekst .nadzag { color: var(--volna); }
.geroy-tekst h1 { margin-top: var(--s3); max-width: 16ch; }
.geroy-tekst .podzag { margin-top: var(--s4); max-width: 46ch; }

.geroy-knopki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}
.geroy-knopki .knopka { flex: 1 1 14rem; }

.geroy-citata {
  margin: var(--s6) 0 0;
  padding: var(--s5);
  background: var(--bumaga);
  border-radius: var(--r-l);
  border-top: 4px solid var(--pesok);
  max-width: 34rem;
}
.geroy-citata p {
  font: 400 1.0625rem/1.55 "Literata", Georgia, serif;
  color: var(--more);
}
.geroy-citata cite {
  display: block;
  margin-top: var(--s3);
  font-size: .875rem;
  font-style: normal;
  color: var(--tekst-tih);
}

.geroy-foto {
  position: relative;
  margin-top: var(--s7);
}
.geroy-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-xl);
  box-shadow: var(--ten);
}
.znak-2gis {
  position: absolute;
  left: var(--s4);
  bottom: var(--s4);
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-krug);
  background: var(--bumaga);
  color: var(--more);
  font-size: .875rem;
  font-weight: 600;
  box-shadow: var(--ten-myagko);
}
.znak-2gis::before { content: "★"; color: var(--korall); }

@media (min-width: 60rem) {
  .sec--geroy {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    padding-block: var(--s9);
    background: none;
  }
  /* полоса пены тянется во всю ширину окна, а содержимое держит колонку */
  .sec--geroy::after {
    content: "";
    position: absolute;
    inset: 0 calc(50% - 50vw);
    background: var(--pena);
    z-index: -1;
  }
  .geroy-knopki .knopka { flex: 0 1 auto; }
  .geroy-foto { margin-top: 0; }
  .geroy-foto img { aspect-ratio: 4 / 5; }
  .geroy-citata { margin-top: var(--s7); }
}

/* ─────────────────────────  лента цифр  ───────────────────────── */

.sec--cifry {
  background: var(--pesok);
  padding-block: calc(var(--sec-otstup) * .75);
}
.lenta-cifr {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s5) var(--s4);
}
.lenta-cifr li {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding-left: var(--s4);
  border-left: 2px solid var(--pesok-temn);
}
.cifra {
  font: 600 clamp(1.75rem, 6vw, 2.5rem)/1.05 "Literata", Georgia, serif;
  color: var(--more);
  letter-spacing: -.02em;
}
.podpis {
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--tekst-tih);
}
@media (min-width: 48rem) {
  .lenta-cifr { grid-template-columns: repeat(4, 1fr); gap: var(--s6); }
}

/* ─────────────────────────  лестница шагов  ───────────────────────── */

.sec--temno {
  background: var(--more);
  color: var(--pena);
  --fokus: var(--pesok);
}
.sec--temno h2 { color: var(--pesok-svet); }
.sec--temno .nadzag { color: var(--korall-svet); }
.sec--temno .podzag { color: #C8DCD9; }

.lestnica {
  display: grid;
  gap: var(--s4);
}
.shag {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "znak name" "znak cena" "znak ed" "znak text";
  column-gap: var(--s4);
  row-gap: var(--s2);
  padding: var(--s5);
  border-radius: var(--r-l);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(246, 231, 207, .22);
}
.shag-znak {
  grid-area: znak;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-krug);
  background: var(--pesok);
  color: var(--more);
  font: 600 1.0625rem/1 "Literata", Georgia, serif;
  align-self: start;
}
.shag h3 { grid-area: name; color: var(--pesok-svet); font-size: 1.1875rem; }
.shag-cena {
  grid-area: cena;
  font: 600 clamp(1.5rem, 5.5vw, 1.875rem)/1.1 "Literata", Georgia, serif;
  color: #fff;
}
.shag-ed {
  grid-area: ed;
  justify-self: start;
  margin-top: calc(var(--s1) * -1);
  font-size: .9375rem;
  color: #C8DCD9;
}
.shag p { grid-area: text; font-size: .9375rem; line-height: 1.55; color: #C8DCD9; }

.shag--glavnyy {
  background: rgba(243, 184, 166, .14);
  border-color: var(--korall-svet);
}
.shag--glavnyy .shag-znak { background: var(--korall); color: #fff; }

.shagi-podpis {
  margin-top: var(--s5);
  font-size: .9375rem;
  color: var(--pesok);
}
.sec--temno > .knopka { display: flex; margin-top: var(--s5); }

@media (min-width: 48rem) {
  .sec--temno > .knopka { display: inline-flex; }
  .lestnica {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    gap: var(--s4);
  }
  /* шаги поднимаются слева направо — это и есть лестница */
  .lestnica .shag:nth-child(1) { margin-top: 4.5rem; }
  .lestnica .shag:nth-child(2) { margin-top: 3rem; }
  .lestnica .shag:nth-child(3) { margin-top: 1.5rem; }
  .shag {
    grid-template-columns: 1fr;
    grid-template-areas: "znak" "name" "cena" "ed" "text";
    row-gap: var(--s2);
  }
  .shag-znak { margin-bottom: var(--s2); }
}

/* ─────────────────────────  чему научились  ───────────────────────── */

.navyki { display: grid; }
.navyk {
  display: grid;
  gap: var(--s2);
  padding: var(--s5) 0;
  border-top: 1px solid var(--pesok-temn);
}
.navyk:last-child { border-bottom: 1px solid var(--pesok-temn); }
.navyk h3 {
  font-family: "Literata", Georgia, serif;
  font-size: 1.25rem;
  color: var(--more);
}
.navyk blockquote { margin: 0; max-width: 58ch; }
.navyk blockquote p { font: 400 1.0625rem/1.6 "Literata", Georgia, serif; color: var(--more); }
.navyk cite {
  display: block;
  margin-top: var(--s2);
  font-size: .875rem;
  font-style: normal;
  color: var(--tekst-tih);
}

@media (min-width: 48rem) {
  .navyk {
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr);
    column-gap: var(--s7);
    align-items: start;
  }
}

.ssylka-otzyvy {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--s4);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--volna);
  text-decoration-thickness: 1px;
}
.ssylka-otzyvy:hover { color: var(--more); text-decoration-thickness: 2px; }

/* ─────────────────────────  потом обычный сад  ───────────────────────── */

.otzyvy-posle {
  display: grid;
  gap: var(--s4);
  padding: var(--s6) var(--s5);
  background: var(--pena);
  border-radius: var(--r-xl);
}
.otzyvy-posle .otzyv {
  position: relative;
  margin: 0;
  padding-left: var(--s6);
}
.otzyvy-posle .otzyv::before {
  content: "«";
  position: absolute;
  left: 0;
  top: -.06em;
  font: 600 2.25rem/1 "Literata", Georgia, serif;
  color: var(--pesok-temn);
}
.otzyvy-posle .otzyv p {
  font: 400 1.0625rem/1.6 "Literata", Georgia, serif;
  color: var(--more);
}
.otzyvy-posle cite {
  display: block;
  margin-top: var(--s2);
  font: 400 .875rem/1.4 "Golos Text", system-ui, sans-serif;
  font-style: normal;
  color: var(--tekst-tih);
}
@media (min-width: 48rem) {
  .otzyvy-posle {
    grid-template-columns: 1fr 1fr;
    gap: var(--s6) var(--s7);
    padding: var(--s7);
  }
}

/* ─────────────────────────  что у нас есть / контакты  ───────────────────────── */

.chto-est, .kontakty {
  display: grid;
  gap: var(--s6);
}
.punkty { display: grid; }
.punkty li {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--pesok-temn);
}
.punkty li:first-child { padding-top: 0; }
.punkty h3 { color: var(--more); }
.punkty p {
  margin-top: var(--s1);
  font-size: 1rem;
  color: var(--tekst-tih);
}
.chto-est-foto, .kontakty-foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-l);
  box-shadow: var(--ten);
}

@media (min-width: 48rem) {
  .chto-est, .kontakty {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  .chto-est-foto, .kontakty-foto { position: sticky; top: 7rem; aspect-ratio: 3 / 4; }
}

/* кнопки связи под контактами: в ряд, на узком экране — столбиком во всю ширину */
.marshrut {
  margin-top: var(--s6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
@media (max-width: 30rem) {
  .marshrut .knopka { flex: 1 1 100%; }
}

/* ─────────────────────────  фото и видео родителям  ───────────────────────── */

.otzyvy-foto {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s6);
}
/* слова родителей выглядят как сообщения — блок про них и есть */
.otzyvy-foto blockquote {
  margin: 0;
  padding: var(--s5);
  background: var(--pena);
  border-radius: var(--r-l) var(--r-l) var(--r-l) var(--s2);
  max-width: 34rem;
}
.otzyvy-foto blockquote:nth-child(2) {
  background: var(--pesok);
  border-radius: var(--r-l) var(--r-l) var(--s2) var(--r-l);
  justify-self: end;
}
.otzyvy-foto p { font: 400 1.0625rem/1.6 "Literata", Georgia, serif; color: var(--more); }
.otzyvy-foto cite {
  display: block;
  margin-top: var(--s2);
  font-size: .875rem;
  font-style: normal;
  color: var(--tekst-tih);
}

/* ─────────────────────────  фотографии  ───────────────────────── */

.plitka {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4);
  padding-bottom: var(--s5);
}
.kadr { margin: 0; }
.kadr img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-l);
  background: var(--pena);
  cursor: zoom-in;
  box-shadow: var(--ten);
}
/* лёгкая волна: соседние снимки стоят на разной высоте и разной высоты сами */
.kadr:nth-child(even) { transform: translateY(var(--s5)); }
.kadr:nth-child(even) img { aspect-ratio: 4 / 3; }
.kadr figcaption {
  margin-top: var(--s3);
  font-size: .875rem;
  line-height: 1.4;
  color: var(--tekst-tih);
}
@media (min-width: 48rem) {
  .plitka {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--s5);
  }
  .kadr:nth-child(even) { transform: translateY(var(--s6)); }
}

/* ─────────────────────────  отзывы  ───────────────────────── */

.otzyvy { display: grid; gap: var(--s4); }
.otzyvy .otzyv {
  break-inside: avoid;
  margin: 0 0 var(--s4);
  padding: var(--s5);
  background: var(--bumaga);
  border-radius: var(--r-l);
  box-shadow: var(--ten-myagko);
}
.otzyv-shapka {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s3);
  margin-bottom: var(--s3);
}
.otzyv-imya { font-weight: 600; color: var(--more); }
.otzyv-data { font-size: .875rem; color: var(--tekst-tih); }
.otzyv-zvezdy {
  flex-basis: 100%;
  color: var(--korall);
  font-size: .9375rem;
  letter-spacing: .1em;
}
.otzyvy .otzyv p { font-size: 1rem; line-height: 1.6; }
.otzyv-gde {
  margin-top: var(--s3);
  font-size: .8125rem;
  color: var(--tekst-tih);
}
@media (min-width: 48rem) {
  .otzyvy { display: block; columns: 2; column-gap: var(--s5); }
  .otzyvy .otzyv { margin-bottom: var(--s5); }
}
@media (min-width: 72rem) {
  .otzyvy { columns: 3; }
}

/* ─────────────────────────  форма записи  ───────────────────────── */

.sec--forma {
  background: var(--pesok);
}
.sec--forma h2 { color: var(--more); }

.forma-zayavki {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s6);
  padding: var(--s5);
  max-width: 34rem;
  background: var(--bumaga);
  border-radius: var(--r-xl);
  box-shadow: var(--ten);
}
.forma-zayavki label {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--more);
}
.forma-zayavki input[type="text"],
.forma-zayavki input[type="tel"],
.forma-zayavki select,
.forma-zayavki textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--s3) var(--s4);
  border: 1.5px solid var(--pesok-temn);
  border-radius: var(--r-s);
  background: var(--fon);
  color: var(--tekst);
  font: 400 1rem/1.5 "Golos Text", system-ui, sans-serif;
}
.forma-zayavki textarea { min-height: 6rem; resize: vertical; }
.forma-zayavki select {
  appearance: none;
  padding-right: var(--s8);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%230E4C55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s4) center;
  background-size: 1rem;
}
.forma-zayavki :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 1px;
  border-color: var(--volna);
}
.forma-zayavki input.oshibka,
.forma-zayavki select.oshibka,
.forma-zayavki textarea.oshibka {
  border-color: var(--korall);
  background: #FDF1EE;
}
.forma-zayavki input[type="checkbox"].oshibka {
  outline: 2px solid var(--korall);
  outline-offset: 2px;
}

.pole-lovushka { /* ловушка для робота: на экране её нет, но и display:none нет */
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* текст согласия идёт сплошной строкой, галочка стоит слева от него */
.soglasie {
  display: block;
  position: relative;
  padding: var(--s1) 0 var(--s1) 2.5rem;
  font-weight: 400;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--tekst-tih);
}
.soglasie input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: .2em;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--korall);
}

/* ответ встаёт над кнопкой: после нажатия он сразу на виду,
   а не уезжает под нижнюю панель телефона */
.forma-zayavki button[type="submit"] { width: 100%; order: 1; }

.forma-otvet {
  padding: var(--s4);
  border-radius: var(--r-m);
  background: var(--pena);
  color: var(--more);
  font-weight: 500;
}
.forma-otvet.beda { background: #FDF1EE; color: var(--korall-temn); }

@media (min-width: 48rem) {
  .sec--forma { padding-bottom: var(--s9); }
  .forma-zayavki { padding: var(--s7); }
}
/* на большом экране приглашение слева, бланк справа */
@media (min-width: 60rem) {
  .sec--forma {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30rem;
    /* последняя строка забирает лишнюю высоту, иначе заголовок
       растянуло бы по высоте бланка */
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
  }
  .sec--forma > :not(.forma-zayavki) { grid-column: 1; }
  .sec--forma > .forma-zayavki {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin-top: 0;
    max-width: none;
  }
}

/* ─────────────────────────  подвал  ───────────────────────── */

.podval {
  position: relative;
  display: grid;
  gap: var(--s5);
  padding-block: var(--s8) var(--s7);
  background: var(--more);
  color: var(--pena);
  --fokus: var(--pesok);
}
.podval p { max-width: 46ch; }
.podval nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.podval nav a { display: inline-block; padding-block: var(--s2); }
.podval a { color: var(--pesok-svet); }
.podval a:hover { color: #fff; }
.podval small { font-size: .875rem; color: #9FBDBB; }

/* ─────────────────────────  просмотр фотографии  ───────────────────────── */

.lupa {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  background: rgba(10, 44, 49, .93);
  --fokus: var(--pesok);
}
.lupa img {
  max-width: min(100%, 1100px);
  max-height: 88vh;
  width: auto;
  border-radius: var(--r-m);
  object-fit: contain;
}
#lupaZakryt {
  position: absolute;
  top: var(--s4);
  right: var(--s4);
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--r-krug);
  background: var(--bumaga);
  color: var(--more);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
#lupaZakryt:hover { background: var(--pesok); }

/* ─────────────────────────  нижняя панель на телефоне  ───────────────────────── */

.nizhnyaya-panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  gap: var(--s3);
  padding: var(--s3) var(--polya) calc(var(--s3) + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--pesok-temn);
}
.nizhnyaya-panel .knopka { flex: 1; min-height: 48px; padding-inline: var(--s4); font-size: 1rem; }
/* место под панель. На странице политики панели нет — там место не нужно;
   в старых браузерах без :has() правило просто не сработает, и запас останется */
body { padding-bottom: 5.5rem; }
body:not(:has(.nizhnyaya-panel)) { padding-bottom: 0; }

@media (min-width: 48rem) {
  .nizhnyaya-panel { display: none; }
  body { padding-bottom: 0; }
}

/* ─────────────────────────  страница политики  ───────────────────────── */

.stranica-politiki {
  max-width: 44rem;
  margin: 0 auto;
  padding-block: var(--s8) var(--s9);
  padding-inline: var(--polya);
  display: grid;
  gap: var(--s4);
}
.stranica-politiki h1 { font-size: clamp(1.6rem, 5vw, 2.25rem); margin-bottom: var(--s3); }
.stranica-politiki p { color: var(--tekst); }
.stranica-politiki .rekvizity { color: var(--tekst-tih); font-size: .9375rem; }

/* ─────────────────────────  появление при прокрутке  ───────────────────────── */

.poyav {
  opacity: 0;
  transform: translateY(10px);
}
.kadr.poyav { transform: translateY(10px); }
.kadr.poyav:nth-child(even) { transform: translateY(calc(var(--s5) + 10px)); }
.poyav.vidno {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s ease;
}
.kadr.poyav.vidno:nth-child(even) { transform: translateY(var(--s5)); }
@media (min-width: 48rem) {
  .kadr.poyav:nth-child(even) { transform: translateY(calc(var(--s6) + 10px)); }
  .kadr.poyav.vidno:nth-child(even) { transform: translateY(var(--s6)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* сдвиг снимков в сетке — рисунок, а не движение: его не трогаем */
  .poyav, .poyav.vidno { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}