/* ============================================================================
   air.css — воздух и ритм второй итерации.
   Правка по замечанию владельца: «слишком много сплошного текста, мало
   пространства и визуала».

   Слова не тронуты: длинные абзацы разрезаны по границам предложений в
   index.new.html, а здесь этим кускам дан ритм и добавлены просветы.
   Приёмы только те, что уже есть в системе: линия-разделитель как у итога
   в карточке кейса, цвета и радиусы — из токенов styles.css (раздел 2),
   шкала отступов та же. Своих цветов и шрифтов здесь нет.

   Почему отдельный файл, а не хвост cases.css: cases.css принадлежит блоку
   кейсов и переписывается целиком вместе с ним. Воздух живёт своей жизнью,
   поэтому лежит отдельно и подключается последним.

   ПОРЯДОК ВАЖЕН: файл подключается после styles.css, поэтому правило без
   медиазапроса перебивает и мобильные правила styles.css (раздел 16). Всё,
   что там переопределено для узких экранов (.rr-card, .rr-steps,
   .rr-routine__grid), заведено здесь через min-width:561px — иначе
   мобильная раскладка ломается.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. СТРОКА-ВЫВОД
   Последнее предложение абзаца отделено линией и читается как итог. Тот же
   приём, что у результата в карточке кейса.
   --------------------------------------------------------------------------- */
.rr2-out{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
  font:500 12.5px/1.5 var(--font-sans);
  color:var(--text-2);
}
/* Карточка инструмента — флекс-колонка: auto прижимает вывод к низу, и у
   соседних карточек ряда линии встают на одну высоту. */
.rr-tool .rr2-out{margin-top:auto}

/* ---------------------------------------------------------------------------
   2. ЛИД ГЕРОЯ В ДВЕ СТРОФЫ
   Вторая строфа — вывод, поэтому белая: 178 знаков сплошняком читались как
   стена, а вывод в них терялся.
   --------------------------------------------------------------------------- */
.rr2-lead-group{display:flex;flex-direction:column;gap:12px;max-width:460px}
.rr2-lead-group .rr-lead{max-width:none}
.rr2-lead--em{color:var(--text-1);font-weight:500}

/* ---------------------------------------------------------------------------
   3. СПИСОК РУТИНЫ
   Точка-маркер вместо голой строки: восемь пунктов перестают сливаться в две
   колонки текста.
   --------------------------------------------------------------------------- */
.rr-routine__grid li{position:relative;padding-left:18px}
.rr-routine__grid li::before{
  content:"";
  position:absolute;left:0;top:.55em;
  width:5px;height:5px;border-radius:50%;
  background:var(--coral-text);
}

/* ---------------------------------------------------------------------------
   4. ДВА ЭКРАНА ИЗ ГАЙДА
   Блок «что получишь» был тремя текстовыми карточками подряд. Настоящие
   экраны с пометками — единственный визуал, который там нужен: подпись
   «19 экранов с пометками» перестаёт быть обещанием на словах.
   --------------------------------------------------------------------------- */
.rr2-shots{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rr2-shots picture{width:100%}
.rr2-shots img{
  width:100%;height:auto;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--surface-raised);
}

/* ---------------------------------------------------------------------------
   5. ВОЗДУХ: ИНТЕРЛИНЬЯЖ МЕЛКОГО ТЕКСТА И ПРОСВЕТЫ СЕТОК
   --------------------------------------------------------------------------- */
.rr-text-sm,.rr-text-sm--tight{line-height:1.6}
.rr-text-xs,.rr-text-xs--loose{line-height:1.55}
.rr-grid-2{gap:16px}
.rr-bonus-grid{gap:16px}

@media (min-width:561px){
  .rr-card{padding:26px 28px}
  .rr-steps{gap:12px}
  .rr-routine__grid{gap:12px 24px}
}

@media (max-width:560px){
  .rr2-lead-group{max-width:none;gap:10px}
  .rr2-out{margin-top:10px;padding-top:10px}
  .rr2-shots{grid-template-columns:1fr;gap:10px}
  .rr-routine__grid{gap:10px}
}

/* ---------------------------------------------------------------------------
   6. ПЕЧАТЬ
   Экраны гайда не режем между листами (figure уже в списке styles.css,
   раздел 17 — здесь только страховка для новой сетки).
   --------------------------------------------------------------------------- */
@media print{
  .rr2-shots{break-inside:avoid;page-break-inside:avoid}
}

/* --- Фирменные обложки кейсов клуба + строка «личное мнение» у инструментов.
       Просьба владельца 20.08.2026: тег кейса переехал с тела карточки
       на плашку поверх скриншота. --- */
.rr-ccase__shot{position:relative;border-top:3px solid var(--coral)}
.rr2-cover{position:absolute;left:0;right:0;bottom:0;margin:0;padding:22px 24px 10px;
  font:700 11px/1.2 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--coral-light);pointer-events:none;
  background:linear-gradient(180deg,rgba(11,12,14,0) 0%,rgba(11,12,14,.55) 45%,rgba(11,12,14,.92) 100%)}
.rr2-opinion{margin:2px 0 0;font:italic 400 12.5px/1.5 var(--font-sans);color:var(--text-3)}