/* ══ Страница «О себе» (по макету Figma, 05.10.2026) ═══════════════
   1440 / 834 / 390. Брейкпоинты как на остальных страницах:
   ≥1200 — широкая, 810–1199 — планшет, ≤809 — телефон. */

.ds-page--osebe{padding-bottom:40px}

/* ── голова: крошки, заголовок, лид, вступление, персонаж справа ── */
.ds-page--osebe .ds-osebe__head{padding:0}
.ds-osebe__krosh{padding:28px 56px 0}
.ds-osebe__krosh .ds-kroshki{margin:0}
.ds-osebe__hero{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);align-items:center;gap:16px;
  padding:0 56px}
.ds-osebe__slova{display:grid;gap:20px;padding-bottom:40px;align-content:start}
.ds-page--osebe .ds-page__title{font-size:168px;line-height:.9;letter-spacing:-.01em}
.ds-page--osebe .ds-page__lead{margin:0;max-width:none;font:400 19px/29px var(--ds-font-text)}
.ds-osebe__vstup{margin:0;color:var(--ds-gray);font:400 16px/24px var(--ds-font-text)}
.ds-osebe__lico{display:block;justify-self:center;width:auto;max-width:100%;height:410px;aspect-ratio:486/766;object-fit:contain;align-self:end}

/* ── раздел: заголовок узкой колонкой слева, содержимое справа ── */
.ds-osebe__razdel{display:grid;grid-template-columns:332px minmax(0,1fr);gap:28px;align-items:start;
  padding:48px 28px;border-bottom:1px solid var(--ds-line)}
.ds-osebe__zag{margin:0;font:600 64px/64px var(--ds-font-display);letter-spacing:-.01em;text-transform:uppercase}
.ds-osebe__telo{display:grid;gap:24px;min-width:0;margin:0;padding:0;list-style:none}
.ds-osebe__tekst{margin:0;color:var(--ds-gray);font:400 19px/29px var(--ds-font-text)}
.ds-osebe__tekst--kem{font:400 17px/26px var(--ds-font-text)}
/* Заголовок, текст и картинка — от одной верхней линии, как у соседних разделов;
   6 px — разница между верхом прописных букв заголовка и первой строки текста. */
.ds-osebe__telo--kak{grid-template-columns:minmax(0,1fr) 280px;align-items:start;padding-top:6px}
.ds-osebe__kak-lico{display:block;width:280px;height:240px;object-fit:contain}

/* ── «Чем занимаюсь» 01–03 ── */
.ds-osebe__punkty{gap:24px}
.ds-osebe__punkt{display:flex;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid var(--ds-line)}
.ds-osebe__nomer{flex:none;width:64px;color:var(--ds-blue);font:600 44px/44px var(--ds-font-display);letter-spacing:-.02em}
.ds-osebe__plitka{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:16px;
  background:var(--ds-badge);color:var(--ds-blue)}
.ds-osebe__punkt-tekst{min-width:0;font:400 18px/29px var(--ds-font-text)}

/* ── «Какие ниши беру»: 12 ниш, 4 / 3 / 2 в ряд (1.8.0) ── */
.ds-osebe__nishi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.ds-osebe__nisha{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px 16px 20px;border:1px solid var(--ds-line);
  border-radius:20px;background:var(--ds-bg-card)}
.ds-osebe__nisha-img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.ds-osebe__nisha-nazv{font:500 17px/23px var(--ds-font-text);text-wrap:balance}
/* под нишами: не нашли свою — вопрос в окно заявки */
.ds-osebe__drugaya{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;min-width:0;
  padding:20px 20px 20px 24px;border:1px solid var(--ds-line);border-radius:20px;background:none}
.ds-osebe__drugaya-tekst{flex:1 1 auto;min-width:0;margin:0;max-width:640px;text-wrap:pretty;font:400 17px/26px var(--ds-font-text)}
.ds-osebe__drugaya-tekst b{font-weight:600}
.ds-osebe__drugaya .ds-btn{flex:none}

/* ── «Что обещаю»: плашка 3 + 2 ── */
.ds-osebe__obeshayu{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin:0;padding:28px;
  list-style:none;border-radius:28px;background:var(--ds-tile)}
.ds-osebe__obeshanie{grid-column:span 2;display:flex;flex-direction:column;gap:20px;padding:28px;
  border-radius:20px;background:var(--ds-bg-card)}
.ds-osebe__obeshanie:nth-child(n+4){grid-column:span 3}
.ds-osebe__galka{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--ds-tile);
  color:var(--ds-blue)}
.ds-osebe__galka .ds-ikonka{width:45px;height:45px}
.ds-osebe__obeshanie-tekst{font:400 19px/29px var(--ds-font-text)}

/* ── призыв с персонажем ── */
.ds-osebe__prizyv-mesto{padding:28px}
.ds-page--osebe .ds-osebe__prizyv{display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:center;gap:24px;
  margin:0;padding:28px 56px;min-height:0;border:0;border-radius:28px;background:var(--ds-tile)}
.ds-osebe__prizyv-slova{display:grid;justify-items:start;gap:16px}
.ds-osebe__prizyv-zag{margin:0;font:600 86px/85px var(--ds-font-display);letter-spacing:-.01em;text-transform:uppercase}
.ds-osebe__prizyv-tekst{margin:0 0 8px;max-width:640px;color:var(--ds-gray);font:400 19px/29px var(--ds-font-text)}
.ds-osebe__prizyv-lico{display:block;width:auto;max-width:100%;height:300px;aspect-ratio:515/764;object-fit:contain;justify-self:center}

/* ── планшет ── */
@media (max-width:1199px){
  .ds-osebe__krosh{padding:28px 28px 0}
  .ds-osebe__hero{grid-template-columns:minmax(0,1fr) 300px;padding:0 28px}
  .ds-page--osebe .ds-page__title{font-size:72px;line-height:.9}
  .ds-page--osebe .ds-page__lead{font-size:17px;line-height:26px}
  .ds-osebe__lico{height:300px}
  .ds-osebe__razdel{grid-template-columns:212px minmax(0,1fr)}
  .ds-osebe__zag{font-size:42px;line-height:41px}
  .ds-osebe__tekst{font-size:17px;line-height:26px}
  .ds-osebe__telo--kak{grid-template-columns:minmax(0,1fr) 200px}
  .ds-osebe__kak-lico{width:200px;height:171px}
  .ds-osebe__nishi{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .ds-osebe__obeshayu{display:grid;grid-template-columns:1fr;gap:4px;padding:0;border-radius:0;background:none}
  .ds-osebe__obeshanie,.ds-osebe__obeshanie:nth-child(n+4){grid-column:auto;flex-direction:row;align-items:center;
    gap:12px;padding:8px 0;border-radius:0;background:none}
  .ds-osebe__galka{flex:none;width:36px;height:36px;background:var(--ds-badge)}
  .ds-osebe__galka .ds-ikonka{width:22px;height:22px}
  .ds-osebe__obeshanie-tekst{font-size:16px;line-height:24px}
  .ds-page--osebe .ds-osebe__prizyv{grid-template-columns:minmax(0,1fr) 250px;padding:24px 32px;border-radius:24px}
  .ds-osebe__prizyv-mesto{padding:28px}
  .ds-osebe__prizyv-zag{font-size:50px;line-height:49px}
  .ds-osebe__prizyv-tekst{font-size:17px;line-height:26px}
  .ds-osebe__prizyv-lico{width:auto;height:230px}
}

/* ── телефон ── */
@media (max-width:809px){
  .ds-osebe__krosh{padding:20px 20px 0}
  .ds-osebe__hero{grid-template-columns:minmax(0,1fr);padding:0 20px}
  .ds-osebe__slova{gap:12px;padding-bottom:24px}
  .ds-page--osebe .ds-page__title{font-size:52px;line-height:.9}
  .ds-page--osebe .ds-page__lead{font-size:16px;line-height:22px}
  .ds-osebe__vstup{font-size:15px;line-height:21px}
  .ds-osebe__lico{display:none}
  .ds-osebe__razdel{grid-template-columns:minmax(0,1fr);gap:16px;padding:28px 20px}
  .ds-osebe__telo{gap:16px}
  .ds-osebe__tekst,.ds-osebe__tekst--kem{font-size:15px;line-height:21px}
  .ds-osebe__telo--kak{grid-template-columns:minmax(0,1fr)}
  .ds-osebe__kak-lico{width:150px;height:129px}
  .ds-osebe__punkty{gap:16px}
  .ds-osebe__punkt{gap:12px;padding:16px 0}
  .ds-osebe__nomer{width:44px;font-size:38px;line-height:38px}
  .ds-osebe__plitka{width:48px;height:48px}
  .ds-osebe__punkt-tekst{font-size:15px;line-height:21px}
  .ds-osebe__nishi{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ds-osebe__nisha{padding:12px 12px 16px}
  .ds-osebe__nisha-nazv{font-size:15px;line-height:20px}
  .ds-osebe__drugaya{flex-direction:column;align-items:flex-start;padding:20px}
  .ds-osebe__drugaya-tekst{font-size:15px;line-height:21px}
  .ds-osebe__prizyv-mesto{padding:20px}
  .ds-page--osebe .ds-osebe__prizyv{grid-template-columns:minmax(0,1fr);gap:8px;padding:24px 20px 0;border-radius:20px}
  .ds-osebe__prizyv-zag{font-size:34px;line-height:38px}
  .ds-osebe__prizyv-tekst{font-size:15px;line-height:21px}
  .ds-osebe__prizyv-lico{width:auto;height:210px;justify-self:end}
}

/* ── тёмная тема: персонаж и иллюстрации на белой скруглённой плашке, как на главной ──
   Внутри плашки только картинка, подписей нет, поэтому переменные текста не переопределяем;
   подпись ниши стоит под плашкой и остаётся по тёмной теме. */
:root[data-theme="dark"] .ds-osebe__lico,
:root[data-theme="dark"] .ds-osebe__kak-lico,
:root[data-theme="dark"] .ds-osebe__prizyv-lico,
:root[data-theme="dark"] .ds-osebe__nisha-img{
  box-sizing:border-box;padding:12px;border-radius:24px;background:var(--ds-кадр)}
:root[data-theme="dark"] .ds-osebe__nisha-img{border-radius:14px;padding:0}
@media (max-width:809px){
  :root[data-theme="dark"] .ds-osebe__kak-lico,
  :root[data-theme="dark"] .ds-osebe__prizyv-lico{border-radius:18px;padding:8px}
}

/* Позы стоя (портретные) в тёмной теме: плашка по размеру фигуры, а не 240 px в ширину. */
@media (max-width:809px){
  :root[data-theme="dark"] .ds-page--osebe .ds-osebe__prizyv-lico{width:auto;height:230px;max-width:none}
}