/* =========================================================
   EKKA — the partners' chapter as a scene (partners.js)
   A pinned frame: the machine stands in it; the words open, then four things the place gets are pointed out on
   the machine one at a time, a line from the point to the words, the frame moving in a little on each. Then the
   steps as one drawn line, the form beside its own words, the questions as wide rows.
   ========================================================= */
.partners-x { display: block; padding: 0 0 clamp(80px, 12vh, 140px); }
.partners-x > .px__how, .partners-x > .px__form, .partners-x > .px__faq { margin-left: var(--gutter); margin-right: var(--gutter); }

/* ---------- the words: the chapter opens, then four things the place gets, as large numbered lines ---------- */
.partners-x { padding-top: clamp(96px, 15vh, 170px); }
.px__intro { margin: 0 var(--gutter); max-width: 44em; }
.px__intro .eyebrow { margin-bottom: 18px; }
.px__intro .px__title { max-width: 10em; }
.px__intro .px__lead { margin-top: 22px; max-width: 26em; }
.px__facts { list-style: none; margin: clamp(48px, 8vh, 96px) var(--gutter) 0; padding: 0; border-top: 1px solid rgba(35, 28, 38, .14); }
.px__facts li { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px clamp(24px, 4vw, 72px); align-items: start;
  padding: clamp(28px, 4vh, 48px) 0; }
.px__facts li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(35, 28, 38, .14);
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--m-ease) .25s; }
.rv-g.is-in .px__facts li::after, .px__facts li.is-in::after { transform: none; }
.px__facts li i { font-family: Cormorant, serif; font-style: italic; font-size: clamp(40px, 4.6vw, 76px); line-height: .9; color: var(--m-rose); }
.px__facts li b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 2.9vw, 46px); line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
.px__facts li > div > span { display: block; margin-top: 14px; font-size: var(--fs-lead); line-height: 1.5; color: rgba(35, 28, 38, .64); max-width: 30em; text-wrap: pretty; }

/* ---------- the steps: one line that draws across ---------- */
.px__how { margin-top: clamp(32px, 6vh, 72px); }
.px__how .px__sub { margin-bottom: clamp(26px, 4vh, 44px); }
.px__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); position: relative; }
.px__steps::before, .px__steps::after { left: 0; right: 0; top: 22px; bottom: auto; width: auto; height: 1px; }
.px__steps::after { transform: scaleX(var(--sp, 0)); transform-origin: left; }
.px__steps li { display: grid; grid-template-columns: 1fr; row-gap: 10px; }
.px__steps li i { grid-row: auto; background: #f4eee7; }
.px__steps li b { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.02em; margin: 0; }

/* ---------- the form, beside its own words ---------- */
.px__form { margin-top: clamp(56px, 9vh, 120px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px);
  background: none; padding: 0; box-shadow: none; border-radius: 0; }
.px__form > .px__sub { grid-column: 1; align-self: start; font-size: clamp(32px, 3.4vw, 56px); margin: 0; }
.px__form > .px__sub::after { content: "Пара слов о площадке и контакт — ответим в тот же день и предложим место и формат."; display: block; margin-top: 18px;
/* the same line in the page's other languages (uz.html, en.html: tools/site/i18n.py) */
html[lang="uz"] .px__form > .px__sub::after { content: "Joy haqida bir-ikki so‘z va kontaktingiz — shu kuniyoq javob beramiz, joy va formatni taklif qilamiz."; }
html[lang="en"] .px__form > .px__sub::after { content: "A few words about your venue and how to reach you — we’ll reply the same day and suggest a spot and format."; }
  font-family: var(--sans, inherit); font-size: var(--fs-lead); line-height: 1.5; color: rgba(35, 28, 38, .62); letter-spacing: 0; max-width: 22em; text-wrap: pretty; }
.px__form > .px__fields, .px__form > .px__send, .px__form > .px__note, .px__form > .px__status { grid-column: 2; }
/* the other way in: the bot, with the partners' greeting (?start=partner) */
.px__tg { margin-top: calc(6px - clamp(28px, 4vw, 72px)); }   /* right under the consent line, not a whole grid gap below */
.px__tg a { color: #231c26; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(35, 28, 38, .3); }
.px__tg a:hover { text-decoration-color: currentColor; }
.px__fields { background: #fff; border-radius: 26px; padding: clamp(22px, 2.6vw, 36px); box-shadow: 0 40px 80px -50px rgba(35, 28, 38, .4); }
.px__send { margin-top: 18px; justify-self: start; }

/* ---------- the questions: wide rows ---------- */
.px__faq { margin-top: clamp(56px, 9vh, 120px); }
.px__faq summary { font-family: var(--display); font-size: clamp(20px, 1.8vw, 28px); padding: 22px 0; }

@media (max-width: 860px) {
  .px__facts li { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .px__facts li i { font-size: 30px; }
  .px__facts li b { font-size: clamp(26px, 7.4vw, 32px); }
  .px__facts li > div > span { font-size: 15px; margin-top: 10px; }
  .px__steps { grid-template-columns: 1fr; gap: 18px; }
  .px__steps::before, .px__steps::after { left: 21px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; }
  .px__steps::after { transform: scaleY(var(--sp, 0)); transform-origin: top; }
  .px__steps li { grid-template-columns: 44px 1fr; column-gap: 16px; row-gap: 4px; }
  .px__steps li i { grid-row: span 2; }
  .px__form { grid-template-columns: 1fr; gap: 20px; }
  .px__tg { margin-top: -12px; }
  .px__form > .px__sub, .px__form > .px__fields, .px__form > .px__send, .px__form > .px__note, .px__form > .px__status { grid-column: 1; }
}