/* ============================================================
   КВЕСТ И АВТОР КУРСА — по референсу IMG_4293 (артборд 2942).
   Канва: x — доля ширины страницы, y — доля высоты канвы.
     квест: строки макета 139..1200  -> 2942 × 1061
     автор: строки макета 1358..2338 -> 2942 ×  980
   ============================================================ */
.qz, .au {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  container-type: inline-size;
  z-index: 1;

  --q-fs: 1.49cqw;     /* текст */
  --q-lh: 1.30;
  --q-h-fs: 4.69cqw;   /* рукописные заголовки */
}
.qz { aspect-ratio: 2942 / 1061; }
.au { aspect-ratio: 2942 /  980; }

.qz__art, .au__art { position: absolute; display: block; object-fit: cover; z-index: 1; }
.qz__art { left: 3.774%; top: 0; width: 65.60%; aspect-ratio: 1930 / 899; }
.au__art { left: 16.05%; top: 0; width: 23.11%; aspect-ratio: 680 / 980; border-radius: .7cqw; }

.qz-h, .au__name {
  font-family: "Aquarelle", cursive;
  font-weight: 400;
  color: #571d17;
  line-height: 1;
  white-space: nowrap;
}
.qz-h { position: absolute; z-index: 2; font-size: var(--q-h-fs); }
.qz-h1 { left: 71.72%; top:  8.39%; }
.qz-h2 { left: 71.75%; top: 21.87%; }

.qt { position: absolute; z-index: 2; }
.qt p, .au__panel p {
  margin: 0;
  color: var(--ink-dark);
  font-family: "Champagne & Limousines", sans-serif;
  font-weight: 700;
  font-size: var(--q-fs);
  line-height: var(--q-lh);
  text-wrap: pretty;
}
.qt-1 { left: 71.79%; top: 42.41%; width: 19.2%; }
.qt-2 { left: 71.79%; top: 57.30%; width: 23.4%; }
.qt-3 { left: 16.14%; top: 94.72%; width: 62.0%; }
/* в макете эта строка крупнее остальных */
.qt-3 p { font-size: 1.94cqw; }

/* ---------- автор и спикер ----------
   Картинка и текст одной высоты: низ плашки совпадает с низом иллюстрации. */
.au {
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: 23.11% 65%;
  gap: 3.5%;
  justify-content: center;
  align-items: stretch;
  padding: 0 clamp(16px, 3vw, 60px);
}
/* 🔴 height:100% у самой картинки в grid даёт 0: процент считается от строки
   неопределённой высоты. Поэтому картинка лежит в растянутой обёртке. */
.au__figure { position: relative; border-radius: .7cqw; overflow: hidden; }
.au__art {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
}
.au__right { display: flex; flex-direction: column; gap: 1.1cqw; }
.au__head { position: static; }
.au__name { margin: 0; font-size: var(--q-h-fs); }
.au__nick {
  margin: .25em 0 0;
  font-family: "Champagne & Limousines", sans-serif;
  font-weight: 400;
  font-size: 1.15cqw;
  color: var(--ink-mid);
  letter-spacing: .04em;
}
.au__panel {
  position: static; width: auto;
  flex: 1;
  padding: 1.6cqw 1.9cqw;
  border-radius: 1.1cqw;
  background: #f3eeea;
  display: grid;
  gap: 1.35cqw;
  align-content: center;
}

/* ---------- телефон ---------- */
@media (max-width: 699px) {
  .qz, .au {
    width: auto; margin-left: 0; aspect-ratio: auto;
    max-width: 620px; margin-inline: auto;
    display: flex; flex-direction: column; gap: 16px; padding: 0 20px;
  }
  .qz__art { position: static; width: 100%; height: auto; aspect-ratio: auto; }
  .au__figure { position: static; }
  .au__art { position: static; width: 100%; height: auto; aspect-ratio: 680 / 980; }
  .au__art { max-width: 320px; align-self: center; }
  .qz-h { position: static; font-size: clamp(30px, 8.4vw, 44px); white-space: normal; }
  .qz-h2 { margin-top: -.18em; }
  .qt { position: static; width: auto !important; }
  .qt p, .au__panel p { font-size: clamp(15px, 4vw, 18px); line-height: 1.4; }
  .au__head { position: static; }
  .au__name { font-size: clamp(28px, 7.6vw, 40px); white-space: normal; }
  .au__nick { font-size: clamp(13px, 3.4vw, 15px); }
  .au__panel {
    position: static; width: auto; padding: 16px 18px; border-radius: 14px; gap: 12px;
  }
  /* порядок: заголовок, картинка, текст */
  .qz__art { order: 2 } .qz-h1 { order: 1 } .qz-h2 { order: 1 }
  .qt-1 { order: 3 } .qt-2 { order: 4 } .qt-3 { order: 5 }
  .au__head { order: 1 } .au__art { order: 2 } .au__panel { order: 3 }
}

/* ============================================================
   «Я поделила процесс обучения…» и заголовок программы курса
   ============================================================ */
.split {
  position: relative;
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: clamp(30px, 4vw, 70px) 0;
}
.split__fl {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: clamp(120px, 17vw, 300px); height: auto; z-index: 1; pointer-events: none;
}
.split__fl--l { left: clamp(-30px, -2vw, 0px); }
.split__fl--r { right: clamp(-30px, -2vw, 0px); }
.split__text {
  position: relative; z-index: 2;
  width: max-content; max-width: 100%;
  margin: 0 auto;
  text-align: center;
  color: var(--ink-dark);
  font-family: "Champagne & Limousines", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.32vw, 25px);
  line-height: 1.75;
  text-wrap: pretty;
}
.split__text .scr {
  font-family: "Aquarelle", cursive;
  font-weight: 400;
  color: #571d17;
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -.1em;
}
.prog__label {
  margin: clamp(26px, 4vw, 70px) 0 0;
  text-align: center;
  color: var(--ink-dark);
  font-family: "Champagne & Limousines", sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1.2vw, 22px);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.prog__name {
  margin: .12em 0 0;
  text-align: center;
  font-family: "Aquarelle", cursive;
  font-weight: 400;
  color: #571d17;
  font-size: clamp(36px, 5.2vw, 96px);
  line-height: 1.05;
  padding: .12em 0;
}
@media (max-width: 699px) {
  .split { padding: 18px 0 6px; }
  .split__fl { width: clamp(78px, 26vw, 130px); opacity: .95; }
  .split__text { font-size: clamp(14px, 3.8vw, 17px); line-height: 1.7; width: min(100%, 76vw); }
  .split__text br { display: none; }   /* на телефоне переносы по месту */
}

/* ============================================================
   ПРОГРАММА КУРСА — МОДУЛЬ (компактный блок по референсу)
   Слева три кадра одной иллюстрации, справа карточка с уроками,
   ниже цифра модуля и результат. Весь модуль помещается в один экран.
   Пропорции с референса: колонка картинок 48.7%, карточка 49.2%,
   зазор 2.05%; сам блок — 65% ширины экрана, как у автора.
   ============================================================ */
.mod-wrap {
  width: min(100% - clamp(32px, 6vw, 120px), 800px);
  margin-inline: auto;
}
.mod {
  display: grid;
  grid-template-columns: 48.7% 49.2%;
  gap: 2.05%;
  align-items: stretch;
}
.mod__pics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.1vw, 18px);
  align-content: start;
}
.mod__pic {
  display: block; width: 100%; height: auto;
  object-fit: cover;
  border-radius: clamp(10px, 1.2vw, 20px);
  aspect-ratio: 1 / 1;
}
.mod__pic--big { grid-column: 1 / -1; aspect-ratio: 760 / 768; }

.mod__card {
  border-radius: clamp(12px, 1.5vw, 24px);
  background: var(--mod-bg);
  color: var(--mod-ink);
  padding: clamp(18px, 2.2vw, 38px) clamp(16px, 2vw, 34px);
  display: flex; flex-direction: column; gap: clamp(10px, 1.3vw, 22px);
}
/* тон карточки: бордовый / коричневый / светлый */
.mod--wine  { --mod-bg: #7d1220; --mod-ink: #f6efe4; --mod-key: #f6efe4; --mod-accent: #7d1220; }
.mod--brown { --mod-bg: #422e2e; --mod-ink: #f6efe4; --mod-key: #f6efe4; --mod-accent: #422e2e; }
.mod--light { --mod-bg: #f3eeea; --mod-ink: var(--ink-dark); --mod-key: var(--wine-line); --mod-accent: var(--wine-line); }

.mod__title { margin: 0; display: grid; gap: .05em; }
/* «Модуль N» — рукописным, название — как было */
.mod__label {
  font-family: "Aquarelle", cursive;
  font-weight: 400;
  font-size: clamp(24px, 2.5vw, 44px);
  line-height: 1.05;
}
.mod__name {
  font-family: "Champagne & Limousines", sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 2vw, 34px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mod__name--solo { font-size: clamp(21px, 2.2vw, 38px); }

.mod__lessons {
  margin: 0; padding-left: 1.25em;
  display: grid; gap: clamp(6px, .7vw, 12px);
  font-family: "Champagne & Limousines", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.38vw, 25px);
  line-height: 1.32;
  list-style: decimal;
}
.mod__plain {
  display: grid; gap: clamp(8px, .9vw, 15px);
  font-family: "Champagne & Limousines", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.38vw, 25px);
  line-height: 1.38;
}
.mod__plain p { margin: 0; }
.mod__plain b { color: var(--mod-key); }

.mod__res {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(10px, 1.2vw, 20px);
  align-items: center;
  margin-top: clamp(14px, 1.6vw, 28px);
}
.mod__num {
  /* цифра ровно по центру кружка: сетка + выключенный лишний интерлиньяж */
  display: flex; align-items: center; justify-content: center;
  width: clamp(38px, 3.4vw, 60px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--mod-bg);
  color: var(--mod-ink);
  font-family: "Aquarelle", cursive;
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 38px);
  line-height: 1;
  text-align: center;
  /* 🔴 у Aquarelle чернила цифры сидят выше середины строки — опускаем,
     иначе цифра стоит не по центру кружка */
  padding-top: .22em;
}

.mod__res p {
  margin: 0;
  color: var(--ink-dark);
  font-family: "Champagne & Limousines", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.38vw, 25px);
  line-height: 1.45;
  text-wrap: pretty;
}
.mod__out { display: inline-block; margin-top: .35em; }
.mod__out b { color: var(--wine-line); }

/* свёрнутые модули стоят близко друг к другу; когда раскрыты — дышат */
.s-mod { padding-top: clamp(6px, .7vw, 13px); padding-bottom: clamp(6px, .7vw, 13px); }
.s-mod:has(.modbox[open]) { padding-top: clamp(18px, 2vw, 38px); padding-bottom: clamp(18px, 2vw, 38px); }
/* заголовок программы и первый модуль идут подряд */
.s12 { padding-bottom: clamp(10px, 1.2vw, 22px); }

@media (max-width: 699px) {
  .mod { grid-template-columns: 1fr; gap: 12px; }
  .mod__card { padding: 16px 16px 20px; }
  .mod__label { font-size: clamp(22px, 6.4vw, 30px); }
  .mod__name { font-size: clamp(17px, 4.8vw, 22px); }
  .mod__lessons, .mod__plain, .mod__res p { font-size: clamp(14px, 3.9vw, 17px); }
}

/* ---------- модуль сворачивается в узкую полосу ---------- */
.modbox { border: 0; }
.modbox > .mod-wrap { margin-top: clamp(12px, 1.4vw, 22px); }
.modbar {
  list-style: none;
  cursor: pointer;
  width: min(100% - clamp(32px, 6vw, 120px), 800px);
  margin-inline: auto;
  display: flex; align-items: baseline; gap: .6em;
  padding: clamp(10px, 1vw, 18px) clamp(16px, 1.6vw, 26px);
  border-radius: clamp(10px, 1.2vw, 18px);
  background: #f3eeea;
  color: var(--ink-dark);
  transition: background .2s ease;
}
.modbar::-webkit-details-marker { display: none; }
.modbar:hover { background: #efe8e2; }
.modbar__label {
  font-family: "Aquarelle", cursive; font-weight: 400;
  font-size: clamp(20px, 1.9vw, 34px); line-height: 1;
  color: var(--mod-accent, var(--mod-bg));
}
.modbar__name {
  font-family: "Champagne & Limousines", sans-serif; font-weight: 700;
  font-size: clamp(15px, 1.3vw, 23px); text-transform: uppercase; letter-spacing: .04em;
}
.modbar__sign {
  margin-left: auto; align-self: center;
  width: .78em; height: .78em; flex: none;
  border-right: 2px solid var(--wine-line); border-bottom: 2px solid var(--wine-line);
  transform: rotate(45deg) translateY(-15%);
  transition: transform .25s ease;
  font-size: clamp(15px, 1.3vw, 23px);
}
.modbox[open] .modbar__sign { transform: rotate(-135deg) translateY(-15%); }
/* у светлого модуля полоса чуть темнее, чтобы читалась на фоне */


/* ============================================================
   РАБОТЫ УЧЕНИЦ — две строки, листается вбок; клик открывает просмотр
   ============================================================ */
.stu__hint {
  margin: calc(-1 * clamp(18px, 2vw, 34px)) 0 clamp(18px, 2vw, 32px);
  text-align: center;
  color: var(--ink-mid);
  font-family: "Champagne & Limousines", sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1.05vw, 19px);
}
.stu {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: clamp(150px, 15vw, 250px);
  gap: clamp(10px, 1.2vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0 clamp(16px, 3vw, 60px) 14px;
  min-width: 0; max-width: 100%;
  scrollbar-width: thin;
}
.stu__card {
  scroll-snap-align: start;
  padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: clamp(10px, 1.1vw, 18px);
  overflow: hidden;
  line-height: 0;
}
.stu__card img {
  width: 100%; height: clamp(150px, 15vw, 250px);
  object-fit: cover; display: block;
  transition: transform .3s var(--ease, ease);
}
.stu__card:hover img { transform: scale(1.04); }

/* просмотр во весь экран */
.lb {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: rgba(11, 18, 34, .92);
  padding: clamp(52px, 6vw, 90px) clamp(52px, 8vw, 120px);
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  overscroll-behavior: contain;
}
.lb[hidden] { display: none; }
/* 🔴 картинка должна ВПИСЫВАТЬСЯ в экран: max-height:100% у grid-элемента
   не срабатывает (min-height:auto), поэтому фиксируем размер и object-fit */
.lb__img {
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%; min-height: 0; min-width: 0;
  object-fit: contain; border-radius: 10px;
  filter: drop-shadow(0 18px 44px rgba(0,0,0,.45));
}
.lb__close, .lb__nav {
  position: absolute; z-index: 2;
  border: 0; background: rgba(246, 239, 228, .12); color: #f6efe4;
  cursor: pointer; border-radius: 50%;
  width: clamp(40px, 4vw, 56px); height: clamp(40px, 4vw, 56px);
  font-size: clamp(22px, 2.4vw, 34px); line-height: 1;
  display: grid; place-items: center;
  transition: background .2s ease;
}
.lb__close:hover, .lb__nav:hover { background: rgba(246, 239, 228, .26); }
.lb__close { top: clamp(14px, 2vw, 28px); right: clamp(14px, 2vw, 28px); }
.lb__nav--prev { left: clamp(8px, 1.6vw, 26px); top: 50%; transform: translateY(-50%); }
.lb__nav--next { right: clamp(8px, 1.6vw, 26px); top: 50%; transform: translateY(-50%); }
.lb__count {
  position: absolute; bottom: clamp(12px, 1.8vw, 26px); left: 0; right: 0;
  text-align: center; margin: 0; color: rgba(246, 239, 228, .8);
  font-family: "Champagne & Limousines", sans-serif; font-weight: 700;
  font-size: clamp(13px, 1.1vw, 18px);
}

/* любую иллюстрацию можно открыть в просмотре */
.zoomable { cursor: zoom-in; }

/* ============================================================
   ПРОГРАММА ВТОРОГО КУРСА — одна иллюстрация на фазу.
   Картинка слева, уже; карточка с уроками шире; обе одинаковой высоты
   (высоту задаёт текст, картинка подстраивается object-fit: cover).
   ============================================================ */
.ph {
  display: grid;
  grid-template-columns: 30% 68%;
  gap: 2%;
  align-items: stretch;
  /* короткая фаза не должна сплющивать иллюстрацию в полоску */
  min-height: clamp(280px, 26vw, 460px);
}
.ph__art {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 52%;
  border-radius: clamp(12px, 1.5vw, 24px);
  display: block;
}
.ph__card {
  border-radius: clamp(12px, 1.5vw, 24px);
  background: var(--mod-bg);
  color: var(--mod-ink);
  padding: clamp(18px, 2.2vw, 38px) clamp(16px, 2vw, 34px);
  display: flex; flex-direction: column; gap: clamp(10px, 1.3vw, 22px);
}
.ph__card .mod__lessons b.key,
.ph__card .mod__title b.key { color: var(--mod-key); }
.mod--wine .ph__card b.key, .mod--brown .ph__card b.key { color: #f6efe4; }
.mod--light .ph__card b.key { color: var(--wine-line); }

@media (max-width: 699px) {
  .ph { grid-template-columns: 1fr; gap: 12px; }
  .ph__art { height: auto; aspect-ratio: 3500 / 5000; max-height: 62vh; }
  .ph__card { padding: 16px 16px 20px; }
}

/* у бедуина фигура в нижней части кадра — показываем низ */
.ph--p5 .ph__art { object-position: 50% 88%; }

/* 13. эмодзи в кружке спец модуля — без рукописного шрифта */
.mod__num--emoji { font-family: system-ui, "Apple Color Emoji", sans-serif; font-size: clamp(16px, 1.5vw, 26px); padding-top: 0; }

/* 11. меньше пустоты между блоком спикера и «Я поделила» */
.s12 { padding-top: clamp(10px, 1.2vw, 24px); }

/* Заголовок программы второго курса живёт по тем же отступам, что и первого:
   иначе между «Из наброска в профессию» и первой фазой зияет 128px против 28px. */
.s12b { padding-top: clamp(26px, 3vw, 56px); padding-bottom: clamp(10px, 1.2vw, 22px); }