/* ============================================================================
   ruslan.neurolax.ru — блок «Кейсы клуба»: карточки-триггеры и разборы в попапах
   Наполнение версии 1.0 в дизайн-системе Ruslan Room 2.0.
   Файл подключается ПОСЛЕ styles.css и пользуется только его токенами:
   своих цветов, шрифтов и радиусов здесь нет — иначе блок отвяжется от системы.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. ПОДЗАГОЛОВОК БЛОКА
   Утилиты .rr-mb-* задают только нижние отступы, а здесь нужен воздух сверху:
   клубные кейсы отделяются от короткого списка прессы выше.
   --------------------------------------------------------------------------- */
.rr-club-head{margin-top:44px}

/* ---------------------------------------------------------------------------
   2. КАРТОЧКА КЕЙСА
   Карточка целиком — триггер попапа (клик по любому месту), но доступная точка
   входа с клавиатуры — настоящая кнопка внутри: <article> не фокусируется и
   роль ему не выдана намеренно, чтобы скринридер не читал карточку кнопкой.
   --------------------------------------------------------------------------- */
.rr-ccase{
  display:flex;flex-direction:column;overflow:hidden;cursor:pointer;
  border-radius:var(--radius-lg);background:var(--surface-card);border:1px solid var(--border);
  transition:background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.rr-ccase:hover{background:var(--surface-raised);border-color:var(--border-strong);transform:translateY(-2px)}
.rr-ccase:focus-within{border-color:var(--border-strong)}

/* Скриншот кадрируется по верхнему краю: у интерфейсов всё главное сверху. */
.rr-ccase__shot{margin:0;background:var(--surface-raised);border-bottom:1px solid var(--border);aspect-ratio:16/9;overflow:hidden}
.rr-ccase__shot picture{width:100%;height:100%}
.rr-ccase__shot img{width:100%;height:100%;object-fit:cover;object-position:top center}

.rr-ccase__body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px;flex:1 1 auto}
.rr-ccase__title{font:700 16px/1.3 var(--font-sans);letter-spacing:-0.01em;margin:0}
.rr-ccase__text{font:400 13px/1.5 var(--font-sans);color:var(--text-2)}

/* Итог кейса — единственная выделенная строка в карточке: это то, ради чего
   её открывают. Подложка вместо цвета, чтобы не спорить с коралловым тегом. */
.rr-ccase__result{
  border-radius:var(--radius-md);background:rgba(255,255,255,.05);
  border:1px solid var(--border);padding:12px 14px;
  font:500 12.5px/1.45 var(--font-sans);color:var(--text-1);
}

.rr-ccase__more{
  margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:var(--radius-pill);
  border:1px solid var(--border-strong);background:transparent;color:var(--text-1);
  font:600 13px/1 var(--font-sans);cursor:pointer;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.rr-ccase__more::after{content:"→";font-size:13px}
.rr-ccase:hover .rr-ccase__more{background:var(--coral);border-color:var(--coral);color:#fff}

.rr-cases-source{font:400 13px/1.5 var(--font-sans);color:var(--text-2)}

/* ---------------------------------------------------------------------------
   3. ПОПАП
   Нативный <dialog> + showModal(): Esc, фокус-ловушка и инертный фон — от
   браузера. Высота живёт в одной переменной: её же наследует внутренний
   скроллер, поэтому мобильная надстройка правит одно число.
   --------------------------------------------------------------------------- */
.rr-modal{
  --rr-modal-h:86vh;
  padding:0;margin:auto;
  width:min(760px,calc(100vw - 48px));max-width:none;max-height:var(--rr-modal-h);
  border:1px solid var(--border-strong);border-radius:var(--radius-xl);
  background:var(--surface-card);color:var(--text-1);
  box-shadow:var(--shadow-glass);overflow:hidden;
}
.rr-modal::backdrop{background:rgba(6,8,12,.78);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* Скроллится содержимое, а не окно: крестик остаётся на месте (он абсолютный
   относительно самого <dialog>), и прокрутка не уезжает под страницу. */
.rr-modal__inner{
  max-height:var(--rr-modal-h);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:32px 34px 36px;
}

.rr-modal__close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--blur-glass));-webkit-backdrop-filter:blur(var(--blur-glass));
  color:var(--text-1);font:600 15px/1 var(--font-sans);cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.rr-modal__close:hover{background:rgba(255,255,255,.16)}

/* Правый отступ у шапки — чтобы длинный заголовок не заезжал под крестик. */
.rr-modal__tag{font:600 11.5px/1 var(--font-sans);letter-spacing:0.05em;color:var(--coral-text);margin:0 0 12px;padding-right:48px}
.rr-modal__title{
  font-family:var(--font-sans);font-weight:700;
  font-size:clamp(21px,4.2vw,26px);line-height:1.2;letter-spacing:-0.025em;
  margin:0 0 14px;padding-right:48px;
}
.rr-modal__lead{font:600 15px/1.5 var(--font-sans);color:var(--text-1);margin:0 0 14px}
.rr-modal__text{font:400 14px/1.6 var(--font-sans);color:var(--text-2);margin:0 0 12px}

.rr-modal__gallery{display:grid;gap:12px;margin-top:20px}
.rr-modal__gallery picture{width:100%}
.rr-modal__gallery img{
  width:100%;height:auto;border-radius:var(--radius-md);
  border:1px solid var(--border);background:var(--surface-raised);
}

/* Фон под открытым попапом не скроллится: showModal() делает страницу инертной,
   но прокрутку колесом сам по себе не запирает. Класс вешает cases.js,
   он же компенсирует ширину исчезнувшей полосы прокрутки. */
html.rr-modal-open,html.rr-modal-open body{overflow:hidden}

/* ---------------------------------------------------------------------------
   4. АДАПТИВ
   Точки те же, что в styles.css: 560px — всё в одну колонку.
   --------------------------------------------------------------------------- */
@media (max-width:860px){
  .rr-club-head{margin-top:36px}
}

@media (max-width:560px){
  .rr-club-head{margin-top:32px}
  .rr-ccase__body{padding:18px 18px 20px}
  .rr-ccase__more{width:100%;justify-content:center;min-height:44px}

  /* Телефон: лист снизу почти во весь экран, прокрутка внутри листа. */
  .rr-modal{
    --rr-modal-h:92vh;
    width:100%;margin:auto auto 0;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:none;
  }
  .rr-modal__inner{padding:26px 20px 28px}
  .rr-modal__tag,.rr-modal__title{padding-right:44px}
  .rr-modal__close{top:12px;right:12px;width:36px;height:36px}
  .rr-modal__gallery{gap:10px}
}

@media (prefers-reduced-motion:reduce){
  .rr-ccase,.rr-ccase__more,.rr-modal__close{transition:none}
  .rr-ccase:hover{transform:none}
}

/* ---------------------------------------------------------------------------
   5. ПЕЧАТЬ
   Закрытый <dialog> и так display:none — печатаются только карточки.
   --------------------------------------------------------------------------- */
@media print{
  .rr-ccase{break-inside:avoid;page-break-inside:avoid}
  .rr-ccase__more{display:none}
  .rr-modal{display:none!important}
}