/* ======== Сторінка «Розробка цифрових продуктів» — унікальні композиції в системі BUREAU ========
   Перевикористовує design-system.css / home.css / store-page.css / ecommerce-dev.css /
   dev-page.css / cro-page.css. Тут — тільки те, чого немає в системі. */

/* ---------- Hero: асиметрія 60/40 + технічний рядок-принцип ---------- */
@media (min-width: 1024px) {
  .dvh__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); column-gap: clamp(40px, 5vw, 88px); }
}
.dvh__principle {
  display: grid; gap: 10px; margin: clamp(32px, 4vw, 56px) 0 0; padding-top: 20px;
  border-top: 1px solid var(--c-line-inv);
  font-family: var(--f-mono); font-size: 12px; line-height: 1.65; letter-spacing: .02em;
  color: var(--c-text-2-inv);
}
.dvh__principle b { color: var(--c-white); font-weight: 500; }
.dvh__principle i { font-style: normal; color: var(--c-text-2-inv); }
@media (min-width: 900px) {
  .dvh__principle { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1.1fr); align-items: baseline; gap: 24px; }
}

/* ---------- Леджер питань: моно-індекс + питання (без карток) ---------- */
.qrows { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; border-top: 1px solid var(--c-black); }
.qrows li {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px 24px; align-items: baseline;
  padding: clamp(14px, 1.8vw, 20px) 0; border-bottom: 1px solid var(--c-line);
}
.qrows i { font-family: var(--f-mono); font-style: normal; font-size: 11px; letter-spacing: .12em; color: var(--c-red); }
.qrows b {
  font-family: var(--f-display); font-weight: 500; font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.25; letter-spacing: -.015em; text-wrap: pretty;
}
.theme-dark .qrows { border-top-color: var(--c-white); }
.theme-dark .qrows li { border-bottom-color: var(--c-line-inv); }

/* ---------- Авторський блок: портрет + теза (асиметрія) ---------- */
.author { display: grid; gap: clamp(28px, 3.4vw, 48px); margin-top: clamp(28px, 3.4vw, 44px); align-items: start; }
@media (min-width: 900px) {
  .author { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); column-gap: clamp(40px, 5vw, 80px); }
}
.author__portrait { display: grid; gap: 14px; align-content: start; }
@media (min-width: 1024px) {
  #main .dvh__grid { grid-template-columns: minmax(0, 1fr); }
  #hero-title { font-size: clamp(40px, 3.6vw, 56px) !important; line-height: 1.04; text-wrap: pretty; }
}
@media (min-width: 900px) { .author__portrait { position: sticky; top: 96px; } }
.proc-step__list li::before { width: 5px; height: 5px; background: var(--c-line); }
.theme-dark .proc-step__list li::before { background: var(--c-line-inv); }
.author__portrait .media-ph { aspect-ratio: 4 / 5; }
.author__img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.06); }
@media (min-width: 900px) { .author__img { max-height: 420px; } }
@media (min-width: 900px) { .author__portrait .media-ph { max-height: 420px; } }
.author__name { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 18px; letter-spacing: -.01em; }
.author__role { margin: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-2); }
.theme-dark .author__role { color: var(--c-text-2-inv); }
.author__cap {
  margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--c-line);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-red);
}
.theme-dark .author__cap { border-top-color: var(--c-line-inv); }
.author__quote { margin: clamp(28px, 3.4vw, 44px) 0 0; border-left: 2px solid var(--c-red); padding-left: 24px; }
.author__quote p {
  margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3; letter-spacing: -.015em; max-width: 32ch; text-wrap: pretty;
}

/* ---------- Split-screen: текст + артефакт ---------- */
.split { display: grid; gap: clamp(28px, 3.4vw, 48px); align-items: start; margin-top: clamp(28px, 3.4vw, 44px); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: clamp(40px, 5vw, 80px); }
}
.split__text { display: grid; gap: 14px; align-content: start; max-width: 56ch; }
.split__media { display: grid; gap: 10px; }
.split__cap { margin: 0; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-2); }
.theme-dark .split__cap { color: var(--c-text-2-inv); }
.split__q { margin: 0; font-family: var(--f-mono); font-size: 15px; line-height: 1.6; color: var(--c-text-2); }

/* ---------- Воронка першої версії: 5 кроків (базова .flowline розрахована на 7) ---------- */
#mvp .flowline { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { #mvp .flowline { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 600px) { #mvp .flowline li:nth-child(4)::after { content: "→"; } }
#mvp .flowline li:last-child::after { content: none; }
@media (max-width: 599px) { #mvp .flowline li::after { content: none; } }

/* ---------- Панорамний артефакт ---------- */
.artefact { display: grid; gap: 10px; margin-top: clamp(36px, 4.6vw, 64px); }
.artefact .media-ph { aspect-ratio: 21 / 7; }
@media (max-width: 720px) { .artefact .media-ph { aspect-ratio: 4 / 3; } }
.artefact__cap { margin: 0; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-2); }
.theme-dark .artefact__cap { color: var(--c-text-2-inv); }

/* ---------- Леджер напрямів на чорному ---------- */
.theme-dark .entryrows { border-top-color: var(--c-white); }
.theme-dark .entryrow { border-bottom-color: var(--c-line-inv); }
.theme-dark .entryrow__d { color: var(--c-text-2-inv); }

/* ---------- Результат: питання → відповідь (леджер cro-qa на світлому) ---------- */
#outcome .cro-qa__n { font-weight: 500; }

/* ---------- Заявка: інлайн-бронювання (data-bk-inline) — фіксований блок ДС ---------- */

/* ---------- Технології: ряди-леджер (перекриваємо .stackrow із dev-page.css) ---------- */
#technology .stackrows { border-top: 1px solid var(--c-line-inv); margin-top: clamp(28px, 3.4vw, 44px); }
#technology .stackrow {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 14px 32px;
  align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--c-line-inv);
}
#technology .stackrow__key { margin: 0; padding-left: 24px; display: flex; gap: 14px; align-items: baseline; font-family: var(--f-display); font-weight: 500; font-size: 18px; letter-spacing: -.01em; }
#technology .stackrow__key i { font-family: var(--f-mono); font-style: normal; font-size: 11px; letter-spacing: .12em; color: var(--c-red); }
#technology .stackrow__tags { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) { #technology .stackrow { grid-template-columns: minmax(0, 1fr); } }