/* Текст под каталогом раздела (motoaktiv.ru/katalog/<раздел>/), 12.11.2026.
   Владелец 11.11: «всё прижато к левому краю, скучно, без выделений». Выбор по доске образцов (Актив-Мото-текст-раздела-образцы.html):
   вопросы раскрываются (Сравни), отзывы — оценка крупно + карточки или три карточки (Роллинг Мото / Сравни), статьи строками с фото (Велосклад).
   Весь текст и ссылки остаются в коде страницы — поисковикам видно то же. Разметку собирает Актив-Мото-сайт-сборка.py (razd_tail). */
.rz { display:grid; gap:56px; margin:64px 0 24px; }
@media (min-width:960px) { .rz { margin-left:302px; } }          /* по колонке карточек: фильтры 270 + зазор 32 */
.rz h2 { font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1.15; margin:0 0 18px; }
@media (min-width:960px) { .rz h2 { font-size:28px; } }
.rz p { color:var(--ink2); line-height:1.6; }
.rz a { color:inherit; }

/* вступление */
.rz-in p { font-size:17px; max-width:780px; margin:0 0 12px; } .rz-in p:first-of-type { font-size:19px; color:var(--ink); }

/* подборки (12.11, выбран вариант 1): компьютер — списком в левой колонке (.rz-side), телефон — одна строка кнопок над карточками.
   Карточки остаются на первом экране. */
.rz-top { width:0; min-width:100%; }   /* строка не растягивает колонку карточек (без этого на телефоне ехала вся страница) */
.rz-top > div { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 -16px 14px; padding:0 16px 2px;
  -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.rz-top > div::-webkit-scrollbar { display:none; }
.rz-top a { flex:none; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px; border:1px solid var(--line); border-radius:999px;
  background:#fff; font-size:14.5px; font-weight:600; white-space:nowrap; text-decoration:none; transition:border-color .15s; }
.rz-top a:hover { border-color:var(--ink); }
.rz-top small { font-size:13px; font-weight:500; color:var(--mute); font-variant-numeric:tabular-nums; }
@media (min-width:960px) { .rz-top { display:none; } }
@media (max-width:959px) { .rz-side { display:none !important; } }

/* текст раздела: абзац виден, остальное — «Подробнее» (свёрнуто, не спрятано: человек раскрывает, поиск читает то же) */
.rz-more summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-size:15.5px; font-weight:600; color:var(--ink); margin-top:2px; }
.rz-more summary::-webkit-details-marker { display:none; }
.rz-more summary::after { content:''; width:7px; height:7px; border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor; transform:rotate(45deg) translateY(-2px); }
.rz-more[open] summary { display:none; }
.rz-more h3 { font-size:18px; font-weight:700; margin:22px 0 8px; } .rz-more p { font-size:16px; max-width:780px; margin:0 0 12px; }

/* отзывы — оценка крупно, три карточки, первая фраза заголовком */
.rz-stars { display:flex; gap:3px; color:var(--ink); } .rz-stars svg { width:18px; height:18px; }
.rz-rev { border:1px solid var(--line); border-radius:16px; padding:20px; display:grid; gap:10px; align-content:start; background:#fff; }
.rz-rev p { font-size:15px; margin:0; }
.rz-who { display:grid; gap:2px; font-size:13.5px; color:var(--mute); } .rz-who b { font-size:15px; color:var(--ink); font-weight:700; }
.rz-r2 { display:grid; gap:14px; } @media (min-width:960px) { .rz-r2 { grid-template-columns:repeat(3, 1fr); } }
.rz-r2 .rz-rev h3 { font-size:17px; font-weight:700; line-height:1.3; margin:0; }
.rz-sum { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:-4px 0 16px; }
.rz-sum b { font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1; } .rz-sum span { font-size:14px; color:var(--mute); }
/* где посмотреть — сразу под отзывами: прочитал и знаешь, куда ехать */
.rz-where { margin-top:22px; } .rz-where > span { display:block; font-size:16px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.rz-where > div { display:grid; gap:10px; } @media (min-width:700px) { .rz-where > div { grid-template-columns:repeat(3, 1fr); } }
.rz-where a { display:grid; gap:2px; border:1px solid var(--line); border-radius:14px; padding:14px 16px; text-decoration:none; transition:border-color .15s; }
.rz-where a:hover { border-color:var(--ink); } .rz-where b { font-size:15.5px; font-weight:700; } .rz-where a span { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.rz-where a span svg { width:16px; height:16px; color:var(--ink2); }

/* частые вопросы — раскрываются */
.rz-faq { border-top:1px solid var(--line); max-width:860px; }
.rz-faq details { border-bottom:1px solid var(--line); }
.rz-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0;
  font-size:17px; font-weight:600; line-height:1.35; }
.rz-faq summary::-webkit-details-marker { display:none; }
.rz-faq summary svg { flex:none; width:22px; height:22px; color:var(--mute); transition:transform .2s; }
.rz-faq details[open] summary svg { transform:rotate(45deg); color:var(--ink); }
.rz-faq details p { margin:0 0 18px; max-width:760px; font-size:15.5px; }

/* статьи журнала — строки с обложкой */
.rz-arts { display:grid; gap:0; max-width:900px; border-top:1px solid var(--line); }
.rz-art { display:grid; grid-template-columns:112px minmax(0, 1fr); gap:16px; padding:16px 0; border-bottom:1px solid var(--line); text-decoration:none; }
@media (min-width:700px) { .rz-art { grid-template-columns:180px minmax(0, 1fr); gap:22px; } }
.rz-art img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; background:var(--panel); }
.rz-art b { display:block; font-size:17px; font-weight:700; line-height:1.3; } .rz-art:hover b { text-decoration:underline; text-underline-offset:3px; }
.rz-art p { font-size:15px; margin:6px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rz-art span { display:block; font-size:13.5px; color:var(--mute); margin-top:6px; }