/* Главная: герой, подбор «Контекст → Подход → Решение», карточки выбранного (redesign-kit/index.html, screens/01–04). */

/* ---------- Портрет ---------- */
.sp-home__img { --bd: 0.64; background-image: url("../../img/hero-portrait.jpg"); background-position: 50% 30%; }
.sp-home__fade { z-index: 0; }
.sp-home__mimg { display: none; }
.sp-main { position: relative; }

/* ---------- Герой ---------- */
.sp-home__main { padding-top: 84px; padding-bottom: 56px; }
.sp-home__intro { max-width: 660px; }
.sp-home__eyebrow { margin-bottom: 26px; }
.sp-home__h1 { margin: 0; font-weight: 500; }
.sp-home__title { display: block; font-family: var(--font-display); font-size: 58px; line-height: 1.08; letter-spacing: -0.01em; font-weight: 500; }
.sp-home__lead { display: block; margin-top: 22px; max-width: 540px; font-size: 22px; line-height: 1.45; font-weight: 400; color: var(--ink-2); }
.sp-home__stats { margin-top: 52px; }
.sp-home__stat:first-child { padding-left: 0; }
.sp-home__stats .sp-num { font-variant-numeric: normal; }

/* ---------- Панель подбора ---------- */
.sp-picker, .sp-picked { box-sizing: border-box; max-width: 1180px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-2xl); background: rgba(18, 15, 28, 0.62); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); }
.sp-picker { margin-top: 64px; }
.sp-picker__step { position: relative; flex: 1 1 240px; min-width: 0; }
.sp-picker__seg { display: flex; align-items: center; gap: 16px; width: 100%; height: 100%; min-height: 88px; box-sizing: border-box; padding: 16px 20px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.07); color: var(--ink); font-family: inherit; text-align: left; cursor: pointer; }
.sp-picker__seg:not([disabled]):hover { background: rgba(255, 255, 255, 0.1); }
.sp-picker__seg[disabled] { background: transparent; cursor: not-allowed; }
.sp-picker__seg .sp-step { align-self: flex-start; padding-top: 1px; }
.sp-picker__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sp-picker__label { font-size: 11px; line-height: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.sp-picker__label b { font-weight: 600; color: var(--ink); }
.sp-picker__value { font-size: 17px; line-height: 24px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-picker__seg[disabled] .sp-picker__value { color: var(--ink-faint); }
.sp-picker__hint { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.sp-picker__hint[hidden] { display: none; }
.sp-picker__chev { flex: none; color: var(--ink-2); transition: transform 0.15s; }
.sp-picker__seg[disabled] .sp-picker__chev { color: var(--ink-disabled); }
.sp-picker__seg[aria-expanded="true"] .sp-picker__chev { transform: rotate(180deg); }
.sp-picker__arrow { display: flex; align-items: center; flex: 0 0 auto; color: rgba(255, 255, 255, 0.3); }

/* ---------- Выпадающий список с поиском (открывается вверх над панелью) ---------- */
.sp-dd { position: absolute; left: 0; bottom: calc(100% + 14px); z-index: 30; width: 440px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-popover); }
.sp-dd[hidden] { display: none; }
.sp-dd--wide { left: auto; right: 0; width: 520px; }
.sp-dd__search { position: relative; }
.sp-dd__search svg { position: absolute; left: 14px; top: 14px; color: var(--ink-faint); pointer-events: none; }
.sp-dd__search input { display: block; box-sizing: border-box; width: 100%; height: 44px; padding: 0 14px 0 40px; border: 1px solid var(--line); border-radius: var(--radius-m); background: rgba(255, 255, 255, 0.04); color: var(--ink); font-family: inherit; font-size: 14px; }
.sp-dd__search input::placeholder { color: var(--ink-faint); }
.sp-dd__search input:focus { outline: none; border-color: var(--accent); }
.sp-dd__list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.sp-dd__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--radius-s); font-size: 14px; line-height: 19px; color: var(--ink); text-decoration: none; }
.sp-dd__opt:hover, .sp-dd__opt:focus-visible { background: rgba(255, 255, 255, 0.06); color: var(--ink-strong); outline: none; }
.sp-dd__opt.is-selected { color: var(--accent); font-weight: 600; }
.sp-dd__opt--go svg { flex: none; color: var(--ink-faint); }
.sp-dd__opt--go:hover svg { color: var(--accent); }
.sp-dd__empty { padding: 10px 12px; font-size: 14px; line-height: 19px; color: var(--ink-muted); }
.sp-dd__empty[hidden], .sp-dd__list li[hidden] { display: none; }
.sp-dd__note { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 10px 12px 2px; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sp-dd__note svg { flex: none; }

/* ---------- Выбранный контекст и подход ---------- */
.sp-picked { margin-top: 16px; }
.sp-picked[hidden], .sp-picked__block[hidden] { display: none; }
.sp-picked__block { flex: 1 1 100%; min-width: 0; box-sizing: border-box; padding: 22px 28px 26px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.sp-picked__block--ctx.is-narrow { flex: 2 1 300px; }
.sp-picked__block--ap { flex: 3 1 420px; }
.sp-picked__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; }
.sp-picked__head .sp-eyebrow { gap: 12px; }
.sp-picked__name { margin: 6px 0 0; max-width: 820px; font-family: var(--font-display); font-size: 22px; line-height: 1.32; font-weight: 500; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.sp-picked__descr { margin: 14px 0 0; max-width: 820px; font-size: 16px; line-height: 1.65; color: var(--ink-2); white-space: pre-line; }
.sp-picked__descr[hidden] { display: none; }
.sp-picked__toggle { gap: 6px; margin-top: 8px; }
.sp-picked__toggle[hidden] { display: none; }
.sp-picked__toggle svg { transition: transform 0.15s; }
.sp-picked__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Кнопка-ссылка «Сменить контекст», «Показать описание» */

/* ---------- Телефон ---------- */
@media (max-width: 760px) {
  .sp-home__img, .sp-home__fade { display: none; }
  .sp-home__mimg { display: block; position: absolute; top: 0; left: 0; right: 0; height: 330px; background-image: linear-gradient(180deg, rgba(18, 15, 28, 0.3) 0%, rgba(18, 15, 28, 0.05) 28%, rgba(18, 15, 28, 0.55) 66%, var(--bg) 100%), url("../../img/hero-portrait.jpg"); background-size: 100% 100%, cover; background-position: 0 0, 50% 30%; background-repeat: no-repeat; }
  .sp-home__main { position: relative; padding-top: 250px; padding-bottom: 40px; }
  .sp-home__eyebrow { margin-bottom: 18px; }
  .sp-home__title { font-size: 34px; line-height: 1.12; }
  .sp-home__lead { margin-top: 14px; font-size: 17px; }
  .sp-home__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 28px; }
  .sp-home__stats > .sp-home__stat { padding: 14px 12px 14px 0; border-left: 0; border-top: 1px solid var(--line-strong); }
  .sp-home__stats > .sp-home__stat:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line-strong); }
  .sp-home__stats .sp-num { font-size: 28px; }
  .sp-home__stats .sp-label { margin-top: 10px; }
  .sp-picker { margin-top: 36px; }
  .sp-picker__arrow { display: none; }
  .sp-picker__step { flex: 1 1 100%; }
  .sp-dd, .sp-dd--wide { left: 0; right: 0; width: auto; max-width: none; }
  .sp-picked__block, .sp-picked__block--ctx.is-narrow, .sp-picked__block--ap { flex: 1 1 100%; padding: 20px 18px 22px; }
  .sp-picked__name { font-size: 20px; }
}