/* ==========================================================================
   ДЕРЕВНЯ ТЕРЕХУНЬ
   Content Design System v2
   Editorial direction: Programs + Workshops
   2026-09-16
   ========================================================================== */

main {
  --tds-forest: #173f32;
  --tds-forest-2: #245744;
  --tds-ink: #26332e;
  --tds-muted: #5d6a64;
  --tds-paper: #f8f5ee;
  --tds-white: #fffdf9;
  --tds-sage: #e7eee7;
  --tds-sand: #eee6da;
  --tds-mist: #edf1ef;
  --tds-line: rgba(23,63,50,.14);
  --tds-shadow: 0 18px 44px rgba(17,47,36,.065);

  --tds-shell: 1180px;
  --tds-reading: 760px;
  --tds-heading: 900px;

  --tds-section-y: 82px;
  --tds-h2: clamp(35px, 4.1vw, 54px);
  --tds-h3: clamp(22px, 2.2vw, 28px);
  --tds-copy: 18px;
  --tds-lead: 19px;

  --tds-radius: 14px;
  --tds-gap: 24px;

  color: var(--tds-ink);
}

/* 1. Единая ось и ширина обычных страниц */
main.page > .section.shell,
main.page > section.section.shell {
  width: min(var(--tds-shell), calc(100% - 64px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: var(--tds-section-y) !important;
  padding-bottom: var(--tds-section-y) !important;
}

main.page > .section.compact.shell,
main.page > section.section.compact.shell {
  padding-top: 58px !important;
  padding-bottom: 58px !important;
}

/* 2. Alignment preservation
   Global .section-head alignment is left to each page template.
   Only compact/SEO panels below are force-aligned to one left axis. */

/* 3. Typography: берем ритм программ */
main.page .section-head h2,
main.page .section > h2,
main.page .article h2,
main.page .legal h2,
main.hub h2 {
  max-width: var(--tds-heading) !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  color: var(--tds-forest);
  font-family: "Aptos Display", Aptos, "Segoe UI", Arial, sans-serif !important;
  font-size: var(--tds-h2) !important;
  font-weight: 430 !important;
  font-style: normal !important;
  line-height: 1.03 !important;
  letter-spacing: -.033em !important;
  text-transform: none !important;
  text-wrap: balance;
}

main.page .section-head h3,
main.page .section > h3,
main.page .article h3,
main.page .legal h3,
main.hub h3 {
  max-width: var(--tds-heading) !important;
  margin-top: 0;
  color: var(--tds-forest);
  font-family: "Aptos Display", Aptos, "Segoe UI", Arial, sans-serif !important;
  font-size: var(--tds-h3) !important;
  font-weight: 520 !important;
  line-height: 1.12 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  text-wrap: balance;
}

main.page .section-head > p,
main.page .copy > p,
main.page .article > p,
main.page .legal > p {
  max-width: var(--tds-reading) !important;
  margin-top: 0;
  color: var(--tds-muted);
  font-size: var(--tds-copy) !important;
  line-height: 1.65 !important;
}

main.page .section-head > p + p,
main.page .copy > p + p,
main.page .article > p + p,
main.page .legal > p + p {
  margin-top: 16px;
}

/* 4. Compact/SEO карточки -> редакционные панели */
.terehun-compact-layout main .terehun-compact-card,
.terehun-compact-layout main #group-format,
.terehun-compact-layout main #geo-about,
.terehun-compact-layout main #seo-varyag,
.terehun-compact-layout main #seo-vityaz,
.terehun-compact-layout main #seo-kancler,
.terehun-compact-layout main #seo-bani,
.terehun-compact-layout main #seo-restaurant,
.terehun-compact-layout main #seo-programs,
main.page .terehun-compact-card {
  width: min(var(--tds-shell), calc(100% - 64px)) !important;
  max-width: var(--tds-shell) !important;
  margin: 14px auto !important;
  padding: 48px 52px !important;
  border: 1px solid var(--tds-line) !important;
  border-radius: var(--tds-radius) !important;
  background: var(--tds-paper) !important;
  box-shadow: var(--tds-shadow);
  text-align: left !important;
}

.terehun-compact-layout main .terehun-compact-card .section-head,
.terehun-compact-layout main #group-format .section-head,
.terehun-compact-layout main #geo-about .section-head,
.terehun-compact-layout main #seo-varyag .section-head,
.terehun-compact-layout main #seo-vityaz .section-head,
.terehun-compact-layout main #seo-kancler .section-head,
.terehun-compact-layout main #seo-bani .section-head,
.terehun-compact-layout main #seo-restaurant .section-head,
.terehun-compact-layout main #seo-programs .section-head,
main.page .terehun-compact-card .section-head {
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 0 22px 0 !important;
}

.terehun-compact-layout main .terehun-compact-card .copy,
.terehun-compact-layout main #group-format .copy,
.terehun-compact-layout main #geo-about .copy,
.terehun-compact-layout main #seo-varyag .copy,
.terehun-compact-layout main #seo-vityaz .copy,
.terehun-compact-layout main #seo-kancler .copy,
.terehun-compact-layout main #seo-bani .copy,
.terehun-compact-layout main #seo-restaurant .copy,
.terehun-compact-layout main #seo-programs .copy,
main.page .terehun-compact-card .copy {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 !important;
}

.terehun-compact-layout main .terehun-compact-card p,
.terehun-compact-layout main #group-format p,
.terehun-compact-layout main #geo-about p,
.terehun-compact-layout main #seo-varyag p,
.terehun-compact-layout main #seo-vityaz p,
.terehun-compact-layout main #seo-kancler p,
.terehun-compact-layout main #seo-bani p,
.terehun-compact-layout main #seo-restaurant p,
.terehun-compact-layout main #seo-programs p,
main.page .terehun-compact-card p {
  max-width: 760px !important;
}

/* 5. Сетки / карточки / split */
main.page .grid,
main.page [class*="grid"] {
  gap: var(--tds-gap);
}

main.page .split {
  column-gap: 64px;
  row-gap: 38px;
}

main.page .card {
  overflow: hidden;
  border-radius: 12px;
}

main.page .card-body {
  padding: 28px;
}

main.page .card-title {
  color: var(--tds-forest);
  font-family: "Aptos Display", Aptos, "Segoe UI", Arial, sans-serif;
  font-weight: 520;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-transform: none;
}

.terehun-answer-grid {
  gap: 14px;
}

.terehun-answer-grid article {
  border-radius: 12px !important;
  background: var(--tds-white) !important;
  box-shadow: 0 10px 30px rgba(17,47,36,.045);
}

/* 6. Articles / legal / SEO reading */
main.page .article {
  max-width: 940px;
}

main.page .legal {
  max-width: 980px;
}

main.page .article p,
main.page .article li,
main.page .legal p,
main.page .legal li {
  line-height: 1.68;
}

/* 7. Offers hub */
main.hub {
  padding-top: 82px;
  padding-bottom: 82px;
}

main.hub > .shell {
  width: min(var(--tds-shell), calc(100% - 64px));
  margin-inline: auto;
}

main.hub .hub-grid {
  gap: 24px;
}

main.hub .hub-card {
  border-radius: 12px;
}

/* 8. Эталонные программы и мастерские: композицию не переделываем */
main.birthday-page .bd-section h2,
main.corporate-program .cp-section h2,
main.devichnik-page .dv-section h2,
main.live-page .lv-section h2,
main.family-day-page .fd-section h2,
main.support-page .support-section h2,
main.page .mw-launch h2,
main.page .mw-overview h2,
main.page .mw-workshop h2,
main.page .mw-finish h2 {
  font-family: "Aptos Display", Aptos, "Segoe UI", Arial, sans-serif !important;
  font-size: var(--tds-h2) !important;
  font-weight: 430 !important;
  line-height: 1.03 !important;
  letter-spacing: -.033em !important;
  text-transform: none !important;
  text-wrap: balance;
}

/* 9. Responsive */
@media (max-width: 980px) {
  main {
    --tds-section-y: 68px;
  }

  main.page .split {
    column-gap: 38px;
  }

  .terehun-compact-layout main .terehun-compact-card,
  .terehun-compact-layout main #group-format,
  .terehun-compact-layout main #geo-about,
  .terehun-compact-layout main #seo-varyag,
  .terehun-compact-layout main #seo-vityaz,
  .terehun-compact-layout main #seo-kancler,
  .terehun-compact-layout main #seo-bani,
  .terehun-compact-layout main #seo-restaurant,
  .terehun-compact-layout main #seo-programs,
  main.page .terehun-compact-card {
    padding: 40px !important;
  }
}

@media (max-width: 680px) {
  main {
    --tds-section-y: 52px;
    --tds-h2: 36px;
    --tds-h3: 24px;
    --tds-copy: 17px;
    --tds-lead: 17px;
    --tds-gap: 18px;
  }

  main.page > .section.shell,
  main.page > section.section.shell {
    width: min(var(--tds-shell), calc(100% - 28px)) !important;
  }

  main.page > .section.compact.shell,
  main.page > section.section.compact.shell {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  main.page .section-head {
    margin-bottom: 24px !important;
  }

  .terehun-compact-layout main .terehun-compact-card,
  .terehun-compact-layout main #group-format,
  .terehun-compact-layout main #geo-about,
  .terehun-compact-layout main #seo-varyag,
  .terehun-compact-layout main #seo-vityaz,
  .terehun-compact-layout main #seo-kancler,
  .terehun-compact-layout main #seo-bani,
  .terehun-compact-layout main #seo-restaurant,
  .terehun-compact-layout main #seo-programs,
  main.page .terehun-compact-card {
    width: calc(100% - 28px) !important;
    margin: 10px auto !important;
    padding: 28px 24px !important;
    border-radius: 12px !important;
  }

  main.page .card-body {
    padding: 22px;
  }

  main.hub {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  main.hub > .shell {
    width: min(var(--tds-shell), calc(100% - 28px));
  }
}

/* === TEREHUN COMPOSITION CONTRACT V2.2 START === */

/* A. Centered editorial intros keep centered composition. */
main .section-head.center {
  width: 100% !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

main .section-head.center > h2,
main .section-head.center > h3,
main .section-head.center > p {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

main .section-head.center > p {
  max-width: 760px !important;
}

/* B. Compact / SEO editorial panels use one clean left axis. */
.terehun-compact-layout main .terehun-compact-card,
.terehun-compact-layout main #group-format,
.terehun-compact-layout main #geo-about,
.terehun-compact-layout main #seo-varyag,
.terehun-compact-layout main #seo-vityaz,
.terehun-compact-layout main #seo-kancler,
.terehun-compact-layout main #seo-bani,
.terehun-compact-layout main #seo-restaurant,
.terehun-compact-layout main #seo-programs,
main.page .terehun-compact-card {
  text-align: left !important;
}

.terehun-compact-layout main .terehun-compact-card .section-head,
.terehun-compact-layout main #group-format .section-head,
.terehun-compact-layout main #geo-about .section-head,
.terehun-compact-layout main #seo-varyag .section-head,
.terehun-compact-layout main #seo-vityaz .section-head,
.terehun-compact-layout main #seo-kancler .section-head,
.terehun-compact-layout main #seo-bani .section-head,
.terehun-compact-layout main #seo-restaurant .section-head,
.terehun-compact-layout main #seo-programs .section-head,
main.page .terehun-compact-card .section-head,
.terehun-compact-layout main .terehun-compact-card .copy,
.terehun-compact-layout main #group-format .copy,
.terehun-compact-layout main #geo-about .copy,
.terehun-compact-layout main #seo-varyag .copy,
.terehun-compact-layout main #seo-vityaz .copy,
.terehun-compact-layout main #seo-kancler .copy,
.terehun-compact-layout main #seo-bani .copy,
.terehun-compact-layout main #seo-restaurant .copy,
.terehun-compact-layout main #seo-programs .copy,
main.page .terehun-compact-card .copy {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

.terehun-compact-layout main .terehun-compact-card h2,
.terehun-compact-layout main .terehun-compact-card h3,
.terehun-compact-layout main .terehun-compact-card p,
.terehun-compact-layout main .terehun-compact-card a,
main.page .terehun-compact-card h2,
main.page .terehun-compact-card h3,
main.page .terehun-compact-card p,
main.page .terehun-compact-card a {
  text-align: left !important;
}

/* C. Split/photo/editorial compositions are intentionally NOT overridden.
      Their own page CSS remains authoritative. */

/* === TEREHUN COMPOSITION CONTRACT V2.2 END === */