/* ==========================================================================
   Вариант 5 — лучший выбор автора: «Тихая стеклянная полоса».
   Не карточка-остров и не голая сцена, а спокойная горизонтальная лента:
   значок-галочка, заголовок с подписью в одну строку слева, кнопка справа.
   На мобильном складывается в столбец. Стекло тише, чем в вариантах 1-2 —
   ближе по духу к шапке сайта (тонкая, служебная), акцент — только в
   значке и в кнопке.
   ========================================================================== */

.tile.risk.r5 { background: transparent; }

.risk.r5 .risk-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  text-align: left;
  max-width: var(--wrap);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--r-lg);
  background: var(--glass-fill);
  box-shadow: var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

@media (prefers-reduced-transparency: reduce) {
  .risk.r5 .risk-inner {
    background: var(--bg-soft);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.risk.r5 .r5-badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 65%, transparent);
}

.risk.r5 .r5-badge::before {
  content: '';
  width: 22px;
  height: 22px;
  background: var(--on-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.risk.r5 .r5-text {
  display: grid;
  gap: var(--s-1);
  flex: 1 1 320px;
  min-width: 0;
  text-align: left;
}

.risk.r5 .r5-text .t-h2 { font-size: var(--t-h3); }
.risk.r5 .r5-text .t-lead { margin-inline: 0; font-size: var(--t-base); color: var(--ink-2); }

.risk.r5 .risk-inner .btn { flex-shrink: 0; }

@media (max-width: 640px) {
  .risk.r5 .risk-inner { flex-direction: column; text-align: center; }
  /* flex-basis:320px метит горизонтальную ось строки; в столбце ту же цифру
     читает высота — сбрасываем на auto, иначе блок раздувается по высоте */
  .risk.r5 .r5-text { flex: 1 1 auto; width: 100%; text-align: center; }
  .risk.r5 .risk-inner .btn { width: 100%; }
}

/* Владелец 2026-10-03: значки белые (цвет текста), без цветной подложки */
.risk.r5 .r5-badge { width: 36px; height: 36px; background: none; box-shadow: none; }
.risk.r5 .r5-badge::before { width: 32px; height: 32px; background: var(--ink); }