/* ============================================================================
   qara-qizil.css — витрина «Qara Qızıl · 1907» (/qara-qizil). Подключается
   условно в layout. Только то, чего нет в общей грамматике Broadsheet:
   иллюстрации с подписью, пара кадров, список «задача → навык», спецификация.
   Карточек, теней и скруглений нет: линейки и воздух, как на соседних витринах.
   ========================================================================== */

/* Строка «стоимость по запросу» под кнопками шапки */
.page-head > .qq-price { margin-top: var(--s-3); }

/* Иллюстрации: у гравюр свой тёплый фон, тонкая линейка отделяет их от полосы
   (так же сделаны кадры DepoSync). Текста на картинках нет — подпись кодом. */
/* margin только по бокам и снизу: верхний отступ даёт стек (.stack-wide) */
.qq-fig { margin-inline: 0; margin-bottom: 0; }
.stack-wide > .qq-fig:first-child { margin-top: 0; }
.qq-fig img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.qq-fig figcaption {
  margin-top: var(--s-2);
  font-size: 13px; line-height: 22px; color: var(--ink-3);
}
.qq-hero { padding-top: 0; }
.qq-fig--narrow { max-width: 720px; }

/* Два мира: Kontor и Mədən рядом, на телефоне — друг под другом */
.qq-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--s-5) clamp(20px, 3vw, 42px);
}

/* Жирная развязка в конце абзаца «Знакомая история» */
.text strong { font-weight: 600; color: var(--color-text); }

.qq-measure { max-width: 68ch; }

/* .steps обнуляет margin в app.css — возвращаем отступ стека */
.stack-wide > .steps.qq-steps { margin-top: var(--s-6); }

/* Задача → навык: ряд как .row (метка слева, содержание справа), линейка сверху */
.qq-skills { list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--color-divider); }
.qq-skill {
  display: flex; flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding-block: var(--s-4);
  border-top: 1px solid var(--color-divider);
  margin: 0;
}
.qq-skill + .qq-skill { margin-top: 0; }
.qq-skill-task {
  flex: 0 0 200px;
  font-size: 13px; line-height: 22px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.qq-skill-num { color: var(--color-accent-700); font-weight: 600; margin-right: 6px; }
.qq-skill-body { flex: 1 1 340px; max-width: 68ch; }
.qq-skill-body > * + * { margin-top: var(--s-2); }

/* Формат и площадка: подпись — значение, на телефоне в столбик */
.qq-spec { margin: 0; border-top: 1px solid var(--color-text); }
.qq-spec > div {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: var(--s-1) var(--s-4);
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--color-divider);
}
.qq-spec dt { font-size: 15.5px; line-height: 28px; color: var(--ink-3); }
.qq-spec dd { margin: 0; font-size: 15.5px; line-height: 28px; }

/* Когда заказывают: четыре сценария сеткой */
.qq-when {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--s-6) clamp(28px, 4vw, 64px);
}

@media (max-width: 520px) {
  .qq-spec > div { grid-template-columns: 1fr; gap: 0; }
  .qq-skill-task { flex-basis: 100%; }
}

/* Отступы, которые иначе съедает собственный margin:0 блоков */
.qq-hero .qq-fig, .qq-pair > .qq-fig { margin-top: 0; }
.stack-wide > .qq-skills { margin-top: var(--s-5); }