/* ============================================================
   NO DATA NO GROWTH — общий hero курсовых лендингов
   Единый источник правды для hero-блока всех курсовых страниц:
   /product-analyst-ab-testing, /ab-for-product-managers,
   /product-analyst-interview, /machine-learning.

   Правила зафиксированы в docs/design-rules.md → «Hero курсового лендинга».
   Подключать ПОСЛЕДНИМ в <head> (после инлайнового <style>), чтобы файл
   был авторитетным. Использует CSS-переменные страницы (--ndng-accent и т.д.)
   и --ndng-maxw (должен быть 1200px).

   НЕ дублировать эти правила инлайново в файлах страниц.
   ============================================================ */

/* ---------- HERO base ---------- */
.ndng-hero{position:relative;min-height:70vh;display:flex;align-items:center;padding:44px 0 74px;overflow:hidden;}
.ndng-hero__grid{display:grid;grid-template-columns:1fr 1.02fr;gap:44px;align-items:center;width:100%;}
.ndng-hero__text{align-self:start;transform:translateY(-20px);}

/* eyebrow (альтернатива pills) */
.ndng-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ndng-accent);margin-bottom:26px;}
.ndng-eyebrow::before{content:"";width:34px;height:2px;background:var(--ndng-accent);display:inline-block;}

/* badges */
.ndng-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;}
.ndng-pill{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:rgba(255,175,0,.9);background:rgba(255,175,0,.04);border:1px solid rgba(255,175,0,.35);padding:7px 14px;border-radius:30px;min-width:150px;text-align:center;}
.ndng-pill--hot{background:var(--ndng-accent);color:#231900;border-color:var(--ndng-accent);}

/* H1 — Oswald (стандарт, см. docs/design-rules.md) */
.ndng-h1{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:56px;line-height:1.2;letter-spacing:-.01em;color:#f0ede6;margin:0 0 28px;}

/* жёлтый акцент в H1 — слово + рукописная волна; межстрочка одинаковая со всем H1 */
.ndng-mark{color:#FFAF00;font-weight:700;position:relative;white-space:nowrap;margin:0;line-height:inherit;}
.ndng-mark svg{position:absolute;left:0;bottom:-3px;width:100%;height:9px;overflow:visible;}
.ndng-mark path{stroke:#FFAF00;stroke-width:3.5;fill:none;stroke-linecap:round;}

/* lead / описание — JetBrains Mono, узкий блок (стандарт) */
.ndng-lead{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:19px;line-height:1.55;letter-spacing:-.03em;color:rgba(245,241,233,.64);max-width:40ch;margin:0 0 30px;}

/* CTA group — primary жёлтая (главный акцент), ghost ещё тише чтобы не читался как второй CTA */
.ndng-hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.ndng-hero__cta .ndng-btn--ghost{background:transparent;color:rgba(245,241,233,.82);border-color:rgba(245,241,233,.22);}
.ndng-hero__cta .ndng-btn--ghost:hover{color:rgba(245,241,233,.88);border-color:rgba(245,241,233,.30);background:rgba(255,255,255,.04);}
/* primary в hero — плоская, без приподнятой тени (в одной эстетике с ghost) */
.ndng-hero__cta .ndng-btn--accent{box-shadow:none;}
.ndng-hero__cta .ndng-btn--accent:hover{transform:none;box-shadow:none;background:var(--ndng-accent-2);}
.ndng-hero__cta .ndng-btn--accent:active{transform:none;box-shadow:none;}

/* CTA в шапке — тёмная (десктоп), чтобы не перетягивать внимание до hero; главный жёлтый CTA остаётся в hero */
.ndng-nav__cta .ndng-btn--accent{background:#171717;color:#F5F1E9!important;border:1px solid rgba(245,241,233,.22);box-shadow:none;padding:10px 24px;}
.ndng-nav__cta .ndng-btn--accent:hover{background:#222;color:#F5F1E9!important;border-color:rgba(245,241,233,.45);box-shadow:none;transform:none;}

/* small note про старт/набор — чуть больше воздуха от кнопок */
.ndng-hero__booster{margin:26px 0 0;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:14.5px;font-weight:600;color:var(--ndng-text-muted);}
.ndng-hero__booster b{color:var(--ndng-accent);font-weight:700;}

/* stats / proof — иконка + число + подпись, с дивайдерами */
.ndng-hero__proof{margin-top:22px;display:flex;align-items:center;flex-wrap:wrap;gap:12px 0;}
.ndng-hp{display:flex;align-items:center;gap:11px;padding:0 12px;border-left:1.5px solid rgba(245,241,232,.12);}
.ndng-hp:first-child{padding-left:0;border-left:none;}
.ndng-hp__ico{width:31px;height:31px;color:rgba(243,237,227,.85);flex:none;}
.ndng-hp__n{display:flex;flex-direction:column;line-height:1.05;}
.ndng-hp__n b{font-family:'NeutralFace','TildaSans','Inter';font-weight:700;font-size:26px;color:#FFAF00;letter-spacing:-.02em;white-space:nowrap;}
/* словесная метрика («Лично») — тот же размер/вес/цвет, но обычный регистр (NeutralFace рисует капсом), чтобы не перетягивать у цифр */
.ndng-hp__n b.ndng-hp__txt{font-family:'Inter',sans-serif;text-transform:none;letter-spacing:-.02em;font-weight:500;}
.ndng-hp__n em{font-style:normal;font-size:13px;color:rgba(245,241,232,.68);font-weight:600;margin-top:3px;white-space:nowrap;}

/* портрет автора — без тени и ореола */
.ndng-portrait{position:relative;max-width:470px;margin:0 auto;transform:translate(-55px,-30px);}
.ndng-portrait__frame{position:relative;z-index:1;aspect-ratio:4/5;background:transparent;}
.ndng-portrait__frame img{width:100%;height:100%;object-fit:contain;display:block;filter:none;}

/* подпись под фото */
.ndng-author{margin-top:18px;text-align:center;}
.ndng-author__role{margin:0;font-size:15px;font-weight:600;color:rgba(245,241,232,.86);line-height:1.4;}
.ndng-author__role b{font-family:'Inter',sans-serif;font-weight:500;text-transform:none;}
.ndng-author__role span{color:#FFAF00;font-weight:600;}
.ndng-author__sub{margin:6px 0 0;font-size:13px;line-height:1.5;color:rgba(245,241,232,.58);}

/* ---------- HERO tablet (≤900px): одна колонка ---------- */
@media (max-width:900px){
  .ndng-hero{min-height:auto;display:block;}
  .ndng-hero__grid{grid-template-columns:1fr;gap:30px;}
  .ndng-portrait{max-width:none;transform:none;}
  .ndng-portrait__frame{max-width:300px;margin:0 auto;}
}

/* ---------- HERO mobile (≤520px) ---------- */
@media (max-width:520px){
  .ndng-hero{padding:24px 0 84px;}
  .ndng-hero__text{text-align:center;transform:none;}
  .ndng-pills{justify-content:center;flex-wrap:nowrap;gap:6px;margin-bottom:22px;}
  .ndng-pill{font-size:10.5px;padding:6px 10px;white-space:nowrap;letter-spacing:0;min-width:0;}
  .ndng-pill__yr{display:none;}
  .ndng-h1{font-size:29px;margin-bottom:20px;letter-spacing:-.01em;}
  .ndng-lead{font-size:15px;margin-bottom:24px;}
  .ndng-eyebrow{font-size:11px;margin-bottom:18px;}
  .ndng-hero__cta{flex-direction:column;align-items:stretch;gap:10px;}
  .ndng-hero__cta .ndng-btn{width:100%;justify-content:center;padding:13px 16px;font-size:14px;}
  .ndng-hero__booster{margin-top:20px;}
  .ndng-hero__proof{justify-content:center;flex-wrap:wrap;gap:6px;margin-top:18px;}
  .ndng-hp{padding:5px 11px;border-left:none;background:rgba(243,237,227,.07);border:1px solid rgba(243,237,227,.14);border-radius:30px;gap:5px;white-space:nowrap;flex:0 0 auto;}
  .ndng-hp__ico{display:none;}
  .ndng-hp__n{flex-direction:row;align-items:baseline;gap:5px;white-space:nowrap;}
  .ndng-hp__n b{font-size:10.5px;}
  .ndng-hp__n em{margin-top:0;font-size:9.5px;}
  .ndng-hero__cut{display:none;}
  .ndng-author{text-align:center;}
  .ndng-portrait__frame{max-width:240px;}
  .ndng-portrait__frame img{filter:none;}
}

/* ---------- HERO small mobile (≤380px) ---------- */
@media (max-width:380px){
  .ndng-h1{font-size:25px;}
  .ndng-portrait__frame{max-width:210px;}
  .ndng-hp__n b{font-size:11px;}
}

/* ============================================================
   CREED — большой светлый statement-блок сразу после hero.
   Единый стиль для всех 4 курсовых лендингов (см. docs/design-rules.md).
   Структура: короткий тезис (Oswald) + объяснение (JetBrains Mono),
   жёлтый акцент только на одной ключевой фразе.
   НЕ дублировать эти правила инлайново в файлах страниц.
   ============================================================ */
.ndng-creed{background:var(--ndng-paper);padding:74px 0;}
.ndng-creed .ndng-wrap{max-width:960px;}

/* короткий ударный тезис — Oswald (роль H1-display, но тише настоящего H1) */
.ndng-creed__lead{max-width:880px;margin:0 auto 18px;text-align:center;
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(32px,4vw,56px);line-height:1.08;letter-spacing:-.02em;
  color:var(--ndng-text-ink);}

/* длинное объяснение — JetBrains Mono, обычный регистр, читаемый размер */
.ndng-creed__text{max-width:880px;margin:0 auto;text-align:center;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;
  text-transform:none;font-size:clamp(17px,1.6vw,25px);line-height:1.55;
  letter-spacing:-.02em;color:var(--ndng-text-ink);}

/* жёлтый акцент — только на ключевой смысловой фразе */
.ndng-creed__text span{color:var(--ndng-accent);font-weight:700;}

/* ---------- CREED mobile (≤520px) ---------- */
@media (max-width:520px){
  .ndng-creed{padding:42px 0;}
  .ndng-creed__lead{font-size:clamp(28px,8vw,38px);line-height:1.1;margin-bottom:14px;letter-spacing:-.01em;}
  .ndng-creed__text{font-size:17px;line-height:1.55;letter-spacing:-.01em;}
}
