/* «Чем заняться» по макету Things to do.svg (1440, 25.10.2026, Desktop/Макет PNG SVG).
   Размеры сверены с рамками SVG макета инструментом сверки (отчёт docs/sverka-26-10.md):
   контейнер 1240 (x 100–1340). Мобильной версии в макете нет — правила ниже 700 px свои. */

.page-scenarios { --things-band: #E4D0C0; }

.things-head { padding-bottom: 56.5px; }
/* Общий отступ первой секции (main.css) даёт 139 px; в макете заголовок ниже. */
/* Перед заголовком стоит слой фона, поэтому отступ под шапкой задаём самому заголовку. */
body.page-scenarios main > .things-head { padding-top: calc(var(--s-4) + var(--header-h) + var(--s-6)); }
@media (min-width: 700px) { body.page-scenarios main > .things-head { padding-top: 202px; } }
.things-head h1 { margin: 0; text-align: center; }

/* Фон: узор у шапки тот же, что на «Территории» (вырезан из макета 1:1), подвал — свой узор макета. */
@media (min-width: 900px) {
  body.page-scenarios #main { position: relative; isolation: isolate; overflow-x: clip; }
  .page-scenarios .footer { position: relative; isolation: isolate; overflow: clip; }
  .page-scenarios .home-bg { display: block; position: absolute; inset: 0; pointer-events: none; user-select: none; }
  .page-scenarios .home-bg__layer { position: absolute; z-index: -1; left: calc(50% - 720px + var(--x)); top: var(--y); width: var(--w); height: var(--h); max-width: none; }
  .page-scenarios .home-bg__layer--territory-top { --x: 189px; --y: -981px; --w: 1866px; --h: 1866px; }
  .page-scenarios .footer .home-bg__layer--footer { display: none; }
  .page-scenarios .home-bg__layer--page-footer { --x: 7px; --y: 40.5px; --w: 1697px; --h: 1697px; }
}

/* ---------- Крючок между пунктирами ---------- */
/* Пунктир макета: штрих 6 px через 6, толщина 1,5 px внутри блока, первый штрих сдвинут на −3 px. */
.things-hook { padding: 35.09px 0 37px; background: linear-gradient(90deg, var(--c-olive) 6px, transparent 6px) -3px 0 / 12px 1.5px repeat-x, linear-gradient(90deg, var(--c-olive) 6px, transparent 6px) -3px 100% / 12px 1.5px repeat-x; }
.things-hook__grid { display: grid; grid-template-columns: minmax(0, 1fr) 480px; align-items: center; column-gap: 40px; padding-left: 59px; }
.things-hook__title { margin: 0; font-family: var(--font-heading); font-size: 54px; line-height: 56.95px; color: var(--c-terra); }
.things-hook__side { position: relative; top: 6.8px; }
.things-hook__text { margin: 0 0 20px; font-size: 20px; line-height: 24px; color: var(--c-dark); }
.site .things-hook__side .btn { min-width: 290px; min-height: 52px; font-size: 20px; font-weight: 500; }

/* ---------- Общие заголовки ---------- */
.site .things-title { margin: 0 0 17.8px; text-align: center; font-size: 40px; line-height: 44px; font-weight: 400; color: var(--c-olive); }
.site .things-title--dark { color: var(--c-dark); }
.things-lead { margin: 0 auto 40px; text-align: center; font-size: 20px; line-height: 24px; color: var(--c-dark); }

/* ---------- Здесь вместо привычного ---------- */
.things-compare { padding-top: 81.5px; }
.things-compare__list { max-width: 999px; margin: 0 auto; padding: 0; list-style: none; }
.things-compare__row { display: flex; align-items: center; min-height: 64px; padding: 0 0 0 120.5px; border-bottom: 1px solid transparent;
  /* Разделитель макета: штрих 4 px со скруглёнными концами через ~4, олива 50 %. */
  background: linear-gradient(90deg, rgb(132 127 87 / 50%) 5px, transparent 5px) -2.5px 100% / 7.992px 1px repeat-x; background-origin: border-box; }
/* Зачёркивание в макете — отдельная черта 1 px, на 2 px длиннее слова с каждой стороны. */
.things-compare__row s { position: relative; font-size: 20px; line-height: 24px; text-decoration: none; color: var(--c-dark); }
.things-compare__row s::after { content: ""; position: absolute; left: -2.4px; right: -1.8px; top: 50%; height: 1px; background: currentColor; }
.things-compare__row > span:last-child { font-size: 20px; line-height: 24px; color: var(--c-dark); }
.things-compare__arrow { flex: 0 0 103px; height: 7.4px; margin: 0 23px 0 22.5px; background: url("../img/things/compare-arrow.14c4c218c48b.svg") 0 0 / 103px 7.4px no-repeat; }

/* ---------- Совет: записка 592×187, поворот −3° вокруг левого верхнего угла (x 414), скотч не повёрнут ---------- */
.things-tip-section { padding-top: 21.4px; }
.things-tip-wrap { position: relative; width: 592px; max-width: 100%; margin: 29.6px auto 0; }
@media (min-width: 1300px) { .things-tip-wrap { margin-left: 314px; } }
.things-tip-wrap::before { content: ""; position: absolute; z-index: 1; top: -29.6px; left: 244.3px; width: 112px; height: 30px; background: rgb(62 63 32 / 20%); }
.page-scenarios .things-tip { box-sizing: border-box; width: 100%; max-width: none; min-height: 187px; margin: 0; padding: 38.9px 40px 20px 39.4px; rotate: -3deg; transform-origin: 0 0; box-shadow: none; background: rgb(226 178 151 / 20%); }
.page-scenarios .things-tip::before { content: none; }
.site .x-note__title { font-weight: 400; text-wrap: wrap; hyphens: none; }  /* заголовок записки — h2, вид прежний */
.page-scenarios .things-tip .x-note__title { margin: 0 0 9.8px; font-size: 32px; line-height: 40px; }
.page-scenarios .things-tip .x-note__text { font-size: 24px; line-height: 29.6px; color: var(--c-dark); }

/* ---------- Сценарии ---------- */
.things-scenarios { padding-top: 19.6px; scroll-margin-top: 120px; }
.things-scenarios .things-title { margin-bottom: 30.1px; }
.things-scenarios .scenarios__chips { gap: 10.8px; margin-bottom: 40px; }
.things-scenarios .filter-chip { min-height: 41.7px; padding: 0 23px; border: 1px solid #B9B499; border-radius: 21px; font-size: 18px; }
.page-scenarios .scenario { padding: 0; }
.site .scenario__title { margin: 0 0 17.8px; font-family: var(--font-heading); font-size: 40px; line-height: 44px; font-weight: 400; color: var(--c-dark); }
.page-scenarios .scenario__lead { max-width: none; margin: 0 auto 32px; font-size: 20px; line-height: 24px; color: var(--c-dark); }
.page-scenarios .scenario__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.page-scenarios .scenario__steps--3 { grid-template-columns: repeat(3, 340px); justify-content: center; gap: 24px; }
.page-scenarios .scenario__step { gap: 0; }
.page-scenarios .scenario__step:not(:last-child)::after { content: none; }
.page-scenarios .scenario__media { aspect-ratio: 295 / 200; border-radius: 20px; background: #D9D9D9; }
.page-scenarios .scenario__steps--3 .scenario__media { aspect-ratio: 340 / 230; }
.page-scenarios .scenario__media .ph { display: block; width: 100%; height: 100%; background: #D9D9D9; }
.page-scenarios .scenario__price { top: 13.5px; inset-inline-end: 13px; box-sizing: border-box; height: 32px; padding: 0 10.6px; border-radius: 16px; background: var(--c-cream); color: var(--c-dark); font-size: 16px; line-height: 32px; font-weight: 600; }
.page-scenarios .scenario__time { margin: 8px 0 0; font-size: 18px; line-height: 22px; letter-spacing: 0; color: rgb(73 73 73 / 80%); }
.site .scenario__step-title { margin: 8px 0 8px; font-family: var(--font-body); font-size: 20px; line-height: 24px; font-weight: 600; color: var(--c-dark); }
.page-scenarios .scenario__text { font-size: 18px; line-height: 22px; color: var(--c-dark); }
.site.page-scenarios .scenario__add.btn { width: 210px; min-width: 0; min-height: 0; height: 36px; margin-top: 14px; padding: 0; border-radius: 18px; font-size: 16px; }
/* В кадре «Поработать» полоса стоит ниже, чем в остальных сценариях макета. */
.page-scenarios .scenario[data-tags="work"] .scenario__house { margin-top: 106.6px; }
.page-scenarios .scenario__house { display: block; margin-top: 80px; padding: 40.7px 0 39.4px; border-radius: 0; background: var(--things-band); }
.page-scenarios .scenario__house p { margin: 0; font-size: 24px; line-height: 29px; color: var(--c-dark); }
.page-scenarios .scenario__actions { display: flex; justify-content: center; gap: 32px; margin-top: 31.9px !important; }
.site.page-scenarios .scenario__actions .btn { min-width: 0; min-height: 52px; padding: 0; font-size: 20px; }
.page-scenarios .scenario__actions .btn--outline { background: var(--c-white); }
/* Ширины кнопок из макета (у «Вдвоём» свой набор кнопок). */
.page-scenarios .scenario__btn--book { width: 298px; }
.page-scenarios .scenario__btn--house { width: 237px; }
.page-scenarios .scenario__btn--choose { width: 243px; }
.page-scenarios .scenario__btn--ask { width: 252px; }

/* ---------- Кубик: в макете карточка на 2 px правее центра, кубик и результат выровнены от x 503 ---------- */
.things-dice { padding-top: 80px; }
.things-dice .container--narrow { max-width: 760px; }
.page-scenarios .things-dice .t-game { left: 2px; padding: 32.3px 42px 32px 38px; border-radius: 30px; box-shadow: none; }
.page-scenarios .t-game__title { font-size: 40px; line-height: 42px; color: var(--c-dark); }
.page-scenarios .t-game__lead { font-size: 18px; color: var(--c-dark); }
.page-scenarios .things-dice .t-dice { justify-content: flex-start; gap: 23px; padding-left: 123px; }
.page-scenarios .t-dice__result { flex: 1 1 auto; max-width: none; }
.page-scenarios .t-dice__result b { font-size: 22px; font-weight: 600; color: var(--c-deep); }

/* ---------- Если пойдёт дождь ---------- */
.things-rain__list { display: grid; grid-template-columns: repeat(4, 282px); justify-content: center; gap: 20px; margin: 0; padding: 0; list-style: none; }
.things-rain__card { display: flex; flex-direction: column; min-height: 282px; padding: 32px 30px 30px 32px; border-radius: 20px; background: var(--c-blush); }
.things-rain { padding-top: 20.4px; }
.things-rain__icon { display: block; width: 80px; height: 80px; margin-bottom: 21.4px; }
.things-rain__title { font-family: var(--font-heading); font-size: 32px; line-height: 34px; font-weight: 400; color: var(--c-dark); }
.things-rain__text { margin-top: 5px; font-size: 18px; line-height: 22px; color: var(--c-dark); }

/* ---------- Что взять ---------- */
.things-packing { padding-top: 20px; }
.things-packing .container--narrow { max-width: 760px; }
.page-scenarios .checklist { padding: 20.5px 24px 8.7px; border-radius: 30px; }
.page-scenarios .checklist__head h2 { font-size: 40px; line-height: 44px; color: var(--c-deep); }
.page-scenarios .checklist__count { font-size: 18px; white-space: nowrap; }
.page-scenarios .checklist ul { gap: 0; margin-top: 1.9px; }
.page-scenarios .checklist label { box-sizing: border-box; min-height: 61px; align-items: center; padding: 12px 0; border-bottom-color: #E6DFD1; }

/* ---------- Планшет ---------- */
@media (max-width: 1299px) {
  .things-hook__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); padding-left: 0; }
  .things-rain__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-scenarios .scenario__steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
  .things-hook__title { font-size: 44px; line-height: 48px; }
  .things-hook__grid { grid-template-columns: 1fr; row-gap: 24px; padding-left: 0; }
  .things-hook__side { top: 0; }
  .things-compare__row { display: grid; grid-template-columns: 103px minmax(0, 1fr); gap: 6px 16px; padding: 12px 0; }
  .things-compare__row s { grid-column: 1 / -1; justify-self: start; }
  .things-compare__arrow { width: 103px; margin: 0; }
  .page-scenarios .scenario__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .things-rain__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .things-compare__row { padding-left: 40px; }
}

/* ---------- Телефон ---------- */
@media (max-width: 699px) {
  .things-head { padding-bottom: 32px; }
  .things-hook { padding: 28px 0; }
  .things-hook__grid { grid-template-columns: 1fr; row-gap: 18px; }
  .things-hook__title { font-size: 30px; line-height: 34px; }
  .things-hook__text { font-size: 15px; line-height: 21px; }
  .things-hook__side .btn { width: 100%; min-width: 0; min-height: 48px; font-size: 16px; }

  .site .things-title { font-size: 26px; line-height: 30px; }
  .site .things-title--dark { font-size: 30px; line-height: 34px; }
  .things-lead { margin-bottom: 24px; font-size: 15px; line-height: 21px; }

  .things-compare { padding-top: 48px; }
  .things-compare__row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; }
  .things-compare__row s { grid-column: 1 / -1; justify-self: start; font-size: 14px; line-height: 18px; }
  .things-compare__arrow { flex: none; width: 40px; margin: 0; background-position: right center; }
  .page-scenarios .things-dice .t-dice { flex-direction: column; gap: 14px; padding-left: 0; text-align: center; }
  .page-scenarios .t-dice__result { align-items: center; min-height: 0; }
  .page-scenarios .t-dice__result br { display: none; }
  .things-compare__row > span:last-child { font-size: 16px; line-height: 21px; }

  .things-tip-section { padding-top: 40px; }
  .things-tip-wrap { margin-top: 34px; }
  .things-tip-wrap::before { top: -14px; left: 50%; margin-left: -56px; }
  .page-scenarios .things-tip { min-height: 0; padding: 36px 22px 26px; rotate: -2deg; transform-origin: 50% 50%; }
  .page-scenarios .things-tip .x-note__title { font-size: 24px; line-height: 28px; }
  .page-scenarios .things-tip .x-note__text { font-size: 16px; line-height: 22px; }
  .page-scenarios .things-tip .x-note__text br { display: none; }

  .things-scenarios .scenarios__chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); margin-bottom: 24px; scrollbar-width: none; }
  .things-scenarios .filter-chip { flex: none; min-height: 40px; padding: 0 18px; font-size: 15px; }
  .site .scenario__title { margin-bottom: 14px; font-size: 26px; line-height: 30px; }
  .page-scenarios .scenario__lead { margin-bottom: 24px; font-size: 15px; line-height: 21px; }
  .page-scenarios .scenario__lead br { display: none; }
  .page-scenarios .scenario__steps, .page-scenarios .scenario__steps--3 { grid-template-columns: 1fr; row-gap: 28px; }
  .page-scenarios .scenario__media, .page-scenarios .scenario__steps--3 .scenario__media { aspect-ratio: 350 / 220; }
  .page-scenarios .scenario__time { font-size: 14px; }
  .site .scenario__step-title { font-size: 17px; line-height: 22px; }
  .page-scenarios .scenario__text { font-size: 15px; line-height: 21px; }
  .page-scenarios .scenario__house { margin-top: 40px; padding: 28px 0; }
  .page-scenarios .scenario__house p { font-size: 16px; line-height: 22px; }
  .page-scenarios .scenario__actions { flex-direction: column; gap: 12px; margin-top: 20px !important; }
  .site.page-scenarios .scenario__actions .btn { width: auto; min-width: 0; min-height: 48px; font-size: 16px; }

  .things-dice { padding-top: 48px; }
  .page-scenarios .t-game { padding: 28px 16px 24px; border-radius: 24px; }
  .page-scenarios .t-game__title { font-size: 26px; line-height: 30px; }
  .page-scenarios .t-game__lead { font-size: 15px; }

  .things-rain__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .things-rain__card { min-height: 0; padding: 18px 16px; }
  .things-rain__icon { width: 56px; height: 56px; margin-bottom: 12px; }
  .things-rain__title { font-size: 22px; line-height: 24px; }
  .things-rain__text { font-size: 14px; line-height: 18px; }
  .things-rain__text br { display: none; }

  .page-scenarios .checklist { padding: 20px 16px 22px; border-radius: 24px; }
  .page-scenarios .checklist__head h2 { font-size: 24px; line-height: 28px; }
  .page-scenarios .checklist__count { font-size: 15px; }
  .page-scenarios .checklist label { min-height: 48px; font-size: 14px; line-height: 19px; }
}