/* ТСН «Нагорье» */

@font-face { font-family: "PT Serif"; font-weight: 700; font-display: swap;
             src: url("/fonts/PT_Serif-Web-Bold.woff2") format("woff2"); }
@font-face { font-family: "PT Sans"; font-weight: 400; font-display: swap;
             src: url("/fonts/PT_Sans-Web-Regular.woff2") format("woff2"); }
@font-face { font-family: "PT Sans"; font-weight: 700; font-display: swap;
             src: url("/fonts/PT_Sans-Web-Bold.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --meadow: #f4f7ee;      /* фон страницы: светлый луг */
  --surface: #ffffff;
  --ink: #1f2a1f;         /* хвойный, основной текст */
  --muted: #56645a;
  --line: #d6dfcf;
  --forest: #2f5d3a;      /* лес: кнопки и ссылки */
  --forest-press: #244a2d;
  --sky: #dcebf2;
  --sun: #e9b949;
  --hill-far: #a9c79a;
  --hill-mid: #7fa96f;
  --hill-near: var(--meadow);
  --tree: #4d7a4a;
  --serif: "PT Serif", Georgia, "Times New Roman", serif;
  --sans: "PT Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --meadow: #141a15;
    --surface: #1c241d;
    --ink: #e7ede4;
    --muted: #a3b0a5;
    --line: #2e3a30;
    --forest: #7fbf8a;
    --forest-press: #96cfa0;
    --sky: #1d2a36;       /* вечернее небо */
    --sun: #e7d9a3;       /* луна вместо солнца */
    --hill-far: #2b3d2f;
    --hill-mid: #22322a;
    --tree: #1a281e;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--meadow);
  color: var(--ink);
  font: 18px/1.55 var(--sans);
}

a { color: var(--forest); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 4px; }

/* ---------- Небо и холмы ---------- */

.hero {
  position: relative;
  background: var(--sky);
  padding: calc(48px + env(safe-area-inset-top, 0px)) 0 0;
  overflow: hidden;
}

.hero-text {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}

.hero-short {
  margin: 0 0 6px;
  color: var(--forest);
  font-weight: 700;
  font-size: 1.05rem;
}

.hero h1 {
  max-width: 15em;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.hero-lead {
  max-width: 34em;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.12rem;
}

.hills {
  display: block;
  width: 100%;
  height: clamp(150px, 24vw, 300px);
  margin-top: -10px;
}

.sun { fill: var(--sun); }
.hill-far { fill: var(--hill-far); }
.hill-mid { fill: var(--hill-mid); }
.hill-near { fill: var(--hill-near); }
.trees path { fill: var(--tree); }

/* ---------- Разделы ---------- */

main {
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 24px 40px;
}

.block { padding: 28px 0 8px; }

.block h2 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 1.8rem;
  line-height: 1.2;
}

/* ---------- Карта ---------- */

.map {
  overflow: hidden;
  border-radius: 18px 18px 18px 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
}
.map iframe { display: block; width: 100%; height: 100%; border: 0; }

.coords { margin: 14px 0 0; color: var(--muted); }
.coords span { color: var(--ink); font-variant-numeric: tabular-nums; }

.map-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }

/* ---------- Кнопки ---------- */

.button {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--forest);
  border-radius: 999px;
  background: var(--forest);
  color: var(--meadow);
  font: 700 1rem var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--forest-press); border-color: var(--forest-press); }
.button-quiet { background: transparent; color: var(--forest); }
.button-quiet:hover { background: transparent; color: var(--forest-press); }

.copy {
  margin-left: 10px;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--forest);
  font: 0.85rem var(--sans);
  cursor: pointer;
  white-space: nowrap;
}
.copy:hover { border-color: var(--forest); }
.copy.done { border-color: var(--forest); background: var(--forest); color: var(--meadow); }

/* ---------- Реквизиты ---------- */

.req-layout {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: start;
}

.requisites {
  margin: 0;
  padding: 6px 20px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.requisites > div {
  display: grid;
  grid-template-columns: 13em minmax(0, 1fr);
  gap: 4px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.requisites > div:last-child { border-bottom: 0; }
.requisites dt { color: var(--muted); }
.requisites dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 0;
  margin: 0;
}
.requisites dd span { overflow-wrap: anywhere; }
.num { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.pay {
  padding: 20px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.pay img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto 14px;
  padding: 8px;
  border-radius: 10px;
  background: #fff;
}
.pay h3 { margin: 0 0 6px; font-size: 1.05rem; }
.pay p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
.pay p + p { margin-top: 8px; }

.copy-all { margin: 18px 0 0; }

/* ---------- Подвал и уведомление ---------- */

.footer {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 24px calc(32px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}
.footer p { margin: 0; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--meadow);
  font-size: 0.95rem;
  transform: translate(-50%, 140%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
  pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; transition: transform 0.2s ease; }

/* ---------- Телефон ---------- */

@media (max-width: 760px) {
  body { font-size: 17px; }
  .hero { padding-top: calc(32px + env(safe-area-inset-top, 0px)); }
  .req-layout { grid-template-columns: 1fr; }
  .pay { display: grid; grid-template-columns: 150px 1fr; gap: 0 16px; align-items: start; }
  .pay img { margin: 0; padding: 4px; }
  .requisites { padding: 4px 16px; }
  .requisites > div { grid-template-columns: 1fr; }
  .map { aspect-ratio: 4 / 3; }
}

@media (max-width: 460px) {
  .pay { grid-template-columns: 1fr; }
  .pay img { max-width: 200px; margin: 0 auto 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}