/* =============================================================================
   КАРТА 12 ХРАНИТЕЛІВ — розкладка й вертикальний ритм
   v1.1

   ЩО ЦЕ. quiz.css стилізує компоненти квізу: твердження, карту, осі, чипи.
   А ось ширину сторінки, відступи від краю й проміжки між заголовками
   він не задає навмисно — бо це вигляд ВАШОЇ сторінки, не квізу.

   Базові стилі Webflow дають заголовкам і абзацам лише 10px знизу, тому без
   цього файлу текст усередині Embed виглядає злиплим і тягнеться на всю
   ширину екрана.

   КУДИ. Page Settings → Before </body>, ПІСЛЯ рядка з quiz.css:

     <link rel="stylesheet" href=".../quiz.css">
     <link rel="stylesheet" href=".../layout.css">   ← цей файл

   Або, якщо не хочете шостий файл на хостингу, скопіюйте вміст у тег <style>
   там само.

   АЛЬТЕРНАТИВА БЕЗ ЦЬОГО ФАЙЛУ. Оберніть блок Embed у Webflow-контейнер
   (Add panel → Layout → Container) — він сам дасть max-width і відступи.
   Тоді з цього файлу вам потрібна лише секція «вертикальний ритм» нижче:
   проміжки між заголовками Designer до вмісту Embed не дістає.
============================================================================= */

/* ── 1. Контейнер ────────────────────────────────────────────────────────────
   Якщо ви вже обернули Embed у Webflow-контейнер — видаліть цей блок,
   інакше ширина обмежиться двічі. */
#hr-intro,
#hr-quiz,
#hr-result{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  padding-left:20px;
  padding-right:20px;
  box-sizing:border-box;
}
@media(max-width:520px){
  #hr-intro,#hr-quiz,#hr-result{ padding-left:16px; padding-right:16px }
}

/* ── 2. Вертикальний ритм ───────────────────────────────────────────────────
   Потрібен завжди: Designer не дістає до заголовків усередині Embed. */
#hr-intro h1,
#hr-result h1{
  font-size:clamp(26px,5vw,36px);
  line-height:1.2;
  margin:0 0 16px;
}
#hr-result h2{
  font-size:clamp(19px,3.5vw,23px);
  line-height:1.25;
  margin:44px 0 8px;
}
#hr-intro p,
#hr-result p{
  font-size:16px;
  line-height:1.6;
  margin:0 0 18px;
  max-width:62ch;
}
#hr-intro p:last-of-type{
  font-size:13px;
  color:var(--hr-ink-3,#6E7D7A);
  margin-top:4px;
}

/* ── 3. Секція вступу ───────────────────────────────────────────────────────*/
#hr-intro{ padding-top:40px; padding-bottom:8px }
#hr-intro button{ margin:6px 0 4px }

/* ── 4. Секція квізу ────────────────────────────────────────────────────────*/
#hr-quiz{ padding-top:28px; padding-bottom:56px }

/* рейка прогресу */
#hr-progress{ margin-bottom:10px }

/* рядок «Хранитель — 7 / 15»: це div без класу, беремо за позицією */
#hr-progress + div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin:0 0 22px;
  font-size:14px;
}
#hr-guardian{ font-weight:600; font-size:15px }
#hr-count{
  font-family:var(--hr-mono,ui-monospace,monospace);
  color:var(--hr-ink-3,#6E7D7A);
  font-variant-numeric:tabular-nums;
}

/* легенда 0–4 */
#hr-legend{ margin-bottom:8px }

/* рядок навігації: останній div у секції квізу */
#hr-list + div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:28px;
}
#hr-step{
  font-family:var(--hr-mono,ui-monospace,monospace);
  font-size:13px;
  color:var(--hr-ink-3,#6E7D7A);
}

/* ── 5. Секція результату ───────────────────────────────────────────────────*/
#hr-result{ padding-top:40px; padding-bottom:72px }
#hr-result h1{ margin-bottom:18px }
#hr-result-profiles{ margin-bottom:8px }
#hr-restart{ margin-top:34px }

/* мантра «Я Є — присутня» — останній абзац перед кнопкою */
#hr-result-level2 ~ p:last-of-type{
  border-left:2px solid var(--hr-accent,#0F5C57);
  padding-left:16px;
  margin-top:22px;
}

/* ── 6. Кнопки ──────────────────────────────────────────────────────────────
   Якщо ви стилізуєте кнопки в Designer — видаліть цей блок.
   Designer до кнопок усередині Embed не дістає, тому базовий вигляд тут. */
#hr-start,
#hr-next,
#hr-prev,
#hr-restart{
  display:inline-block;
  padding:13px 22px;
  border:1px solid var(--hr-accent,#0F5C57);
  border-radius:var(--hr-radius,6px);
  background:var(--hr-accent,#0F5C57);
  color:#fff;
  font:600 15px/1 inherit;
  cursor:pointer;
  transition:opacity .15s;
}
#hr-start:hover:not(:disabled),
#hr-next:hover,
#hr-prev:hover:not(:disabled),
#hr-restart:hover{ opacity:.87 }

#hr-prev,
#hr-restart{
  background:transparent;
  color:var(--hr-accent,#0F5C57);
  border-color:var(--hr-rule-2,#C3CCCA);
}
#hr-start:disabled{ opacity:.5; cursor:default }

@media (prefers-reduced-motion:reduce){
  #hr-start,#hr-next,#hr-prev,#hr-restart{ transition:none }
}