/* pages/sourcing — /sourcing (план DEV0332, задача 1; макет
   docs/design/Sourcing.dc.html). Только токены ДС, один breakpoint —
   тот же, что wholesale.css (max-width: 1023px). */

.sourcing-hero { padding-block: 40px; background: var(--color-bg); }
/* Sourcing.dc.html:50 — текст хиро слева, карточка «In short» справа. */
.sourcing-hero__inner { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; }
.sourcing-hero__text { display: flex; flex-direction: column; gap: 14px; }
.sourcing-hero__title { margin: 0; font-size: 48px; line-height: 1.05; }
.sourcing-hero__sub { margin: 0; color: var(--color-neutral-700); font-size: 17px; }
.sourcing-hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.sourcing-hero__foot { margin: 0; font-size: 13px; color: var(--color-neutral-700); }

.sourcing-facts { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--radius-lg); background: var(--color-surface); }
.sourcing-facts__title { margin: 0; font-family: inherit; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); font-weight: 700; }
.sourcing-facts__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.sourcing-facts__list li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--color-divider); font-size: 15px; }
.sourcing-facts__list li::before { content: ''; width: 8px; height: 8px; margin-top: 8px; flex: none; border-radius: 999px; background: var(--color-accent-2); }

.sourcing-scenarios { padding-block: 40px; }
.sourcing-scenarios__sub { margin: 4px 0 20px; color: var(--color-neutral-700); }
.sourcing-scenarios__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.sourcing-scenario-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--radius-lg); background: var(--color-surface); }
.sourcing-scenario-card__n { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-2-700); font-weight: 700; }
.sourcing-scenario-card h3 { margin: 0; font-size: 22px; }
.sourcing-scenario-card__fit { margin: 0; color: var(--color-neutral-700); font-size: 14px; }
.sourcing-scenario-card__points { margin: 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.sourcing-scenario-card__steps-title { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); font-weight: 700; }
/* Sourcing.dc.html:74 — шаги пилюлями с кружком-номером; номер рисует
   счётчик, а не маркер списка, чтобы <ol> сохранил семантику. */
.sourcing-scenario-card__steps { margin: 0; padding: 0; list-style: none; counter-reset: sourcing-step; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sourcing-scenario-card__steps li {
  counter-increment: sourcing-step; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--color-divider); background: var(--color-bg); font-size: 13px; font-weight: 600;
}
.sourcing-scenario-card__steps li::before {
  content: counter(sourcing-step); width: 18px; height: 18px; flex: none; border-radius: 999px;
  background: var(--color-text); color: var(--color-bg); font-size: 11px; display: grid; place-items: center;
}
.sourcing-scenarios__mix { margin-top: 24px; display: flex; align-items: center; gap: var(--space-4); padding: 20px 24px; border-radius: var(--radius-lg); background: var(--color-accent-2-200); flex-wrap: wrap; }
.sourcing-scenarios__mix p { margin: 0; flex: 1 1 320px; }

.sourcing-quality { padding-block: 40px; background: var(--color-surface); }
/* Sourcing.dc.html:82 — заголовок слева, карточки ярлык|список колонкой справа. */
.sourcing-quality__inner { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; }
.sourcing-quality__intro { display: flex; flex-direction: column; gap: 12px; }
.sourcing-quality__intro h2 { margin: 0; }
.sourcing-quality__sub { margin: 0; color: var(--color-neutral-700); }
.sourcing-quality__grid { display: flex; flex-direction: column; gap: 12px; }
.sourcing-quality-card { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 20px 24px; border-radius: var(--radius-lg); background: var(--color-bg); }
.sourcing-quality-card h3 { margin: 0; font-size: 16px; }
.sourcing-quality-card ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--color-neutral-800); display: flex; flex-direction: column; gap: 4px; }

.sourcing-why { padding-block: 40px; }
.sourcing-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.sourcing-why-card { display: flex; flex-direction: column; gap: 6px; }
.sourcing-why-card__n { font-family: var(--font-heading); font-size: 28px; color: var(--color-accent-2-700); }
.sourcing-why-card h3 { margin: 0; font-size: 16px; }
.sourcing-why-card p { margin: 0; font-size: 13px; color: var(--color-neutral-700); }

.sourcing-cat-aud { padding-block: 40px; }
.sourcing-cat-aud__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.sourcing-categories h2, .sourcing-audiences h2 { margin: 0 0 14px; font-size: 24px; }
.sourcing-categories__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sourcing-categories__note { margin: 14px 0 0; font-size: 13px; color: var(--color-neutral-700); }
.sourcing-audiences__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sourcing-audiences__list li { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.sourcing-audiences__list strong { font-size: 15px; }
.sourcing-audiences__list span { color: var(--color-neutral-700); }

.sourcing-open { padding-block: 32px; }
.sourcing-open__inner { border-radius: var(--radius-lg); background: var(--color-accent-2-200); padding: 32px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sourcing-open h2 { margin: 0; font-size: 26px; }
.sourcing-open p { margin: 0; color: var(--color-neutral-800); max-width: 640px; }

.sourcing-faq { padding-block: 40px; }
/* Sourcing.dc.html:105 — заголовок слева, вопросы справа. */
.sourcing-faq__inner { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; }
.sourcing-faq h2 { margin: 0; font-size: 28px; }
.sourcing-faq__list { border-top: 1px solid var(--color-divider); }
.sourcing-faq-item { border-bottom: 1px solid var(--color-divider); padding-block: 14px; }
.sourcing-faq-item h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.sourcing-faq-item p { margin: 0; color: var(--color-neutral-800); font-size: 14px; line-height: 1.55; }

.sourcing-form-section { padding-block: 40px 64px; background: var(--color-surface); }
/* Sourcing.dc.html:112 — заголовок уже-колонкой, форма шире (5fr|7fr). */
.sourcing-form-section__inner { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-8); align-items: start; }
.sourcing-form-section__intro { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; }
.sourcing-form-section__intro h2 { margin: 0; font-size: 28px; }
.sourcing-form-section__intro p { margin: 0; color: var(--color-neutral-700); }

/* Sourcing.dc.html:114 — на всю ширину всё, кроме пар Quantity|Country,
   When|Who, Name|Email (обёртка sourcing-form__half, как field--full в checkout). */
.sourcing-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.sourcing-form > * { grid-column: 1 / -1; }
.sourcing-form > .sourcing-form__half { grid-column: auto; }
/* Sourcing.dc.html не рисует звёздочку у обязательных полей (спека п.2) —
   required/aria-required остаются, видимый маркер components/field скрыт. */
.sourcing-form .field-required { display: none; }
.sourcing-form__consent { margin: 0; font-size: 12px; color: var(--color-neutral-700); }
.sourcing-form__alt { margin: 0; text-align: center; font-size: 13px; }

.sourcing-received { display: flex; flex-direction: column; gap: 16px; padding-block: 48px; max-width: 560px; }
.sourcing-received__icon {
  width: 56px; height: 56px; border-radius: 999px; background: var(--color-accent-2-200); color: var(--color-accent-2-800);
  display: grid; place-items: center;
}
.sourcing-received__title { margin: 0; font-size: 28px; }
.sourcing-received__body { margin: 0; color: var(--color-neutral-700); }
.sourcing-received__next { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius-lg); background: var(--color-surface); }
.sourcing-received__next-title { font-weight: 700; font-size: 14px; }
.sourcing-received__steps { margin: 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.sourcing-received__ref { margin: 0; font-size: 13px; color: var(--color-neutral-700); }

@media (max-width: 1023px) {
  .sourcing-hero__inner { grid-template-columns: 1fr; gap: 14px; }
  .sourcing-hero__title { font-size: 32px; }
  .sourcing-facts { padding: 16px 18px; gap: 4px; }
  .sourcing-facts__list li { padding: 6px 0; border-bottom: none; font-size: 14px; }
  .sourcing-hero__ctas .btn { width: 100%; }
  .sourcing-scenarios__grid { grid-template-columns: 1fr; }
  /* Sourcing.dc.html:154 — те же шаги столбиком, без рамки пилюли. */
  .sourcing-scenario-card__steps { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sourcing-scenario-card__steps li { padding: 0; border: none; background: none; gap: 8px; }
  .sourcing-scenario-card__steps li::before { width: 20px; height: 20px; }
  .sourcing-quality__inner { grid-template-columns: 1fr; gap: 12px; }
  .sourcing-quality-card { grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; }
  /* Sourcing.dc.html:166 — строки номер|текст с разделителем, не грид. */
  .sourcing-why__grid { grid-template-columns: 1fr; gap: 0; }
  .sourcing-why-card { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; row-gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
  .sourcing-why-card__n { grid-row: 1 / span 2; align-self: start; font-size: 22px; line-height: 1; }
  .sourcing-why-card h3, .sourcing-why-card p { grid-column: 2; }
  .sourcing-cat-aud__inner { grid-template-columns: 1fr; }
  .sourcing-faq__inner { grid-template-columns: 1fr; gap: 12px; }
  .sourcing-faq h2 { margin: 0 0 8px; }
  .sourcing-form-section__inner { grid-template-columns: 1fr; }
  .sourcing-form-section__intro { position: static; }
  .sourcing-form { grid-template-columns: 1fr; }

  /* Sourcing.dc.html:188 — на мобильном сценарий становится вертикальным
     списком с радио-кружком вместо горизонтальных чипов (desktop, :118). */
  .sourcing-form__scenario .seg { flex-direction: column; border: none; border-radius: 0; gap: 6px; width: 100%; }
  .sourcing-form__scenario .seg-opt {
    border: 1px solid var(--color-divider); border-radius: 999px; padding: 10px 14px; gap: 10px; min-height: 44px;
    font-size: 14px; background: var(--color-bg);
  }
  .sourcing-form__scenario .seg-opt::before {
    content: ''; width: 16px; height: 16px; flex: none; border-radius: 50%;
    border: 1.5px solid var(--color-neutral-500);
  }
  /* Сбрасывает .seg-opt:has(input:checked) из components.css (заливка
     акцентным фоном всей пилюли) — в макете на мобильном выбранную опцию
     отмечает только кружок, фон строки не меняется (Sourcing.dc.html:188). */
  .sourcing-form__scenario .seg-opt:has(input:checked) { background: var(--color-bg); color: var(--color-text); }
  .sourcing-form__scenario .seg-opt:has(input:checked)::before {
    border-color: var(--color-accent); background: var(--color-accent);
    box-shadow: inset 0 0 0 4px var(--color-bg);
  }
}