/* ==========================================================================
   Единый шаблон страниц состояний (Сон, Менопауза, Эмоции, Стресс, Вес,
   Память, Тело). Общий для всех 7 страниц — правь один раз, применяется
   везде. Реальные шапка/подвал сайта берутся из layout.css, здесь только
   контент страницы состояния. Все классы с префиксом state-, чтобы не
   конфликтовать с sections.css.
   ========================================================================== */

.state-page {
  --state-cream: #f6efe5;
  --state-paper: #fffdf9;
  --state-ink: #191512;
  --state-muted: #736d66;
  --state-line: #ded6cc;
  --state-orange: #eb5b35;
  --state-orange-soft: #f7d8c9;
  --state-olive: #71805d;
  --state-olive-soft: #dfe5d6;
  --state-plum: #6a4f59;
  --state-radius: 30px;
  --state-page-w: min(1180px, calc(100% - 40px));

  display: flow-root;
  color: var(--state-ink);
  background: var(--state-cream);
  font-family: Inter, Arial, sans-serif;
  line-height: 1.62;
}

.state-page a { color: inherit; }
.state-page button, .state-page a { -webkit-tap-highlight-color: transparent; }
.state-serif { font-family: Georgia, "Times New Roman", serif; }
.state-page h1, .state-page h2, .state-page h3, .state-page p { margin-top: 0; }

.state-page .state-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  padding: 0 23px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--state-orange);
  color: #fff;
  font-size: 15px;
  font-weight: 750;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 9px 24px rgba(235, 91, 53, .2);
}
.state-btn:hover { transform: translateY(-2px); box-shadow: 0 13px 30px rgba(235, 91, 53, .27); }
.state-page .state-btn-ghost { background: transparent; color: var(--state-ink); border-color: var(--state-line); box-shadow: none; }
.state-page .state-btn-light { background: var(--state-paper); color: var(--state-ink); box-shadow: none; }
.state-microcopy { margin: 12px 0 0; color: var(--state-muted); font-size: 13px; }

/* ---------- Hero ---------- */

.state-hero {
  width: var(--state-page-w);
  margin: 46px auto 42px;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: 68px;
}
.state-eyebrow, .state-section-number {
  display: block;
  margin: 0 0 16px;
  color: var(--state-orange);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.state-page h1, .state-page .state-section h2 { font-family: Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.state-page h1 { max-width: 720px; margin: 0 0 24px; font-size: clamp(48px, 6.2vw, 84px); line-height: .98; }
.state-hero-lead { max-width: 670px; margin-bottom: 28px; color: #514c46; font-size: clamp(18px, 2vw, 22px); line-height: 1.52; }
.state-hero-lead p { margin-bottom: 14px; }
.state-hero-lead p:last-child { margin-bottom: 0; }
.state-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Quick nav ---------- */

.state-quick-nav {
  width: var(--state-page-w);
  margin: 0 auto 94px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--state-line);
  border-radius: 999px;
  background: rgba(255, 253, 249, .78);
  overflow-x: auto;
  scrollbar-width: none;
}
.state-quick-nav a { flex: 1 1 0; text-align: center; padding: 9px 16px; border-radius: 999px; color: var(--state-muted); font-size: 13px; text-decoration: none; white-space: nowrap; }
.state-quick-nav a:first-child { background: var(--state-paper); color: var(--state-ink); box-shadow: 0 2px 10px rgba(0,0,0,.05); }

/* ---------- Section scaffolding ---------- */

.state-section { width: var(--state-page-w); margin: 0 auto 112px; }
.state-section-head { max-width: 680px; margin: 0 auto 42px; text-align: center; }
.state-section-head .state-eyebrow, .state-section-head .state-section-number { text-align: center; }
.state-section-head-short { margin-bottom: 25px; }
.state-page .state-section h2 { margin: 0 0 18px; font-size: clamp(36px, 4.2vw, 58px); line-height: 1.04; }
.state-section-intro { margin: 0 auto; color: var(--state-muted); font-size: 18px; }

/* ---------- Understand cards ---------- */

.state-cards { display: grid; gap: 16px; }
.state-cards-3 { grid-template-columns: repeat(3, 1fr); }
.state-cards-4 { grid-template-columns: repeat(2, 1fr); }
.state-card { min-height: 285px; padding: 30px; border: 1px solid rgba(222,214,204,.8); border-radius: var(--state-radius); background: var(--state-paper); }
.state-card-b { background: var(--state-olive-soft); }
.state-card-c { background: var(--state-orange-soft); }
.state-card-d { background: var(--state-line); }
.state-card-index { width: 42px; height: 42px; margin-bottom: 42px; display: grid; place-items: center; border: 1px solid rgba(23,21,19,.16); border-radius: 50%; font: 700 17px Georgia, serif; }
.state-card h3, .state-step h3 { margin: 0 0 10px; font-size: 20px; }
.state-card p, .state-step p { margin: 0; color: #5a554f; font-size: 15px; }

/* ---------- Other reasons accordion ---------- */

.state-split { display: grid; grid-template-columns: .86fr 1.14fr; gap: 70px; align-items: start; }
.state-sticky-title { position: sticky; top: 100px; }
.state-accordion { display: grid; gap: 10px; }
.state-accordion details { border-bottom: 1px solid var(--state-line); }
.state-accordion summary { padding: 18px 0; cursor: pointer; list-style: none; font-size: 19px; font-weight: 750; }
.state-accordion summary::-webkit-details-marker { display: none; }
.state-accordion summary:after { content: "+"; float: right; color: var(--state-orange); font-size: 25px; font-weight: 400; }
.state-accordion details[open] summary:after { content: "\2212"; }
.state-accordion details p { max-width: 640px; padding: 0 38px 18px 0; color: var(--state-muted); }

/* ---------- Reframe ---------- */

.state-reframe { padding: clamp(30px, 5vw, 62px); border-radius: 42px; background: var(--state-plum); color: #fff; }
.state-reframe .state-eyebrow { color: #f3c6b4; }
.state-reframe h2 { max-width: 760px; color: #fff; }
.state-reframe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 38px; }
.state-reframe-grid h3 { font-size: 18px; color: #fff; }
.state-reframe-grid p { color: #eadfe3; font-size: 15px; }

/* ---------- Doctor ---------- */

.state-doctor { display: grid; grid-template-columns: .8fr 1.2fr; gap: 55px; padding: clamp(30px, 5vw, 58px); border: 1px solid #d8c9bf; border-radius: 42px; background: #fffaf4; }
.state-doctor ul { margin: 0; padding: 0; list-style: none; }
.state-doctor li { position: relative; padding: 0 0 17px 28px; }
.state-doctor li:before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--state-orange); }

/* ---------- Self-help steps ---------- */

.state-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; counter-reset: state-step; }
.state-step { position: relative; min-height: 210px; padding: 30px 30px 28px 82px; border-radius: 26px; background: var(--state-paper); counter-increment: state-step; }
.state-step:before { content: counter(state-step); position: absolute; left: 29px; top: 29px; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: var(--state-cream); color: var(--state-orange); font-weight: 850; }

/* ---------- Club (single column — right-hand format list intentionally removed) ---------- */

.state-club { border-radius: 44px; background: var(--state-olive); color: #fff; }
.state-club-copy { padding: clamp(24px, 3.2vw, 40px); }
.state-club-copy h2 { color: #fff; font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 10px; }
.state-club-copy .state-eyebrow { color: #e6dcc6; margin-bottom: 8px; }
.state-club-copy p { max-width: 780px; margin-bottom: 8px; color: #eff1ea; font-size: 15px; }
.state-boundary { opacity: .9; }
.state-club-copy .state-btn { margin-top: 8px; }
.state-club-copy .state-microcopy { margin-top: 8px; }

/* ---------- Resources ---------- */

.state-resources { display: grid; grid-template-columns: 1.18fr .82fr; gap: 18px; align-items: start; }
.state-resources-no-book { grid-template-columns: 1fr; }
.state-articles, .state-book { padding: clamp(28px, 4vw, 44px); border-radius: 32px; min-width: 0; }
.state-articles { background: var(--state-paper); display: flex; flex-direction: column; }
.state-articles a { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--state-line); font-weight: 700; text-decoration: none; }
.state-articles a:last-child { border: 0; }
.state-articles span { color: var(--state-orange); }
.state-book { background: var(--state-orange-soft); }
.state-book-tag { display: block; color: var(--state-orange); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.state-book h3 { margin: 20px 0 12px; font: 700 34px/1.05 Georgia, serif; overflow-wrap: break-word; }
.state-book p { color: #655d56; margin-bottom: 12px; }
.state-book a { font-weight: 800; text-underline-offset: 6px; text-decoration-color: var(--state-orange); }
.state-book + .state-book { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(23,21,19,.1); }
.state-book-soon { opacity: .75; }
.state-book-soon-label { display: block; margin-top: 10px; font-size: 13px; color: var(--state-muted); font-style: italic; }

/* Used when a page has 2+ books: articles full-width on top, books side by side below */
.state-resources-stack { display: flex; flex-direction: column; gap: 18px; }
.state-books-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.state-books-row .state-book + .state-book { margin-top: 0; border-top: 0; }

/* ---------- Final CTA ---------- */

.state-final-cta { padding: clamp(38px, 7vw, 80px); border-radius: 44px; background: var(--state-ink); color: #fff; text-align: center; }
.state-page .state-final-cta h2 { max-width: 800px; margin-left: auto; margin-right: auto; color: #fff; }
.state-final-cta > p:not(.state-eyebrow):not(.state-microcopy) { max-width: 650px; margin: 0 auto 28px; color: #d3cec9; font-size: 18px; }
.state-final-cta .state-microcopy { color: #aaa39d; }

/* ---------- Responsive ---------- */

@media (max-width: 880px) {
  .state-page { --state-page-w: min(100% - 26px, 720px); }
  .state-hero { grid-template-columns: 1fr; gap: 36px; margin-top: 30px; }
  .state-section-head, .state-split, .state-doctor, .state-resources, .state-books-row { grid-template-columns: 1fr; gap: 28px; }
  .state-cards-3, .state-cards-4 { grid-template-columns: 1fr; }
  .state-card { min-height: 0; }
  .state-sticky-title { position: static; }
  .state-reframe-grid { grid-template-columns: 1fr; gap: 18px; }
  .state-section { margin-bottom: 82px; }
  /* Quick-nav: wrap into rows instead of horizontal scroll on mobile/tablet */
  .state-quick-nav { flex-wrap: wrap; overflow-x: visible; border-radius: 20px; }
  .state-quick-nav a { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 560px) {
  .state-hero { margin-top: 25px; }
  .state-page h1 { font-size: 50px; }
  .state-actions .state-btn { width: 100%; }
  .state-quick-nav { margin-bottom: 72px; }
  .state-steps { grid-template-columns: 1fr; }
  .state-step { padding-left: 72px; }
  .state-reframe, .state-doctor, .state-club, .state-final-cta { border-radius: 30px; }
  .state-club-copy { padding: 28px 24px; }
  .state-page .state-section h2 { font-size: 39px; }
}