/* Лента блога /blog и разделы /blog/section/… в шаблоне редизайна (макет SEXFk / TS58g).
   Файл подключается раньше rd.css, поэтому все правила идут от своих классов rd-blog-*. */

.rd .rd-blog-hero { display: flex; flex-direction: column; gap: 14px; padding: 40px var(--gut) 28px; }
.rd .rd-blog-hero h1 { font-size: 56px; line-height: 1.08; letter-spacing: -2px; font-weight: 700; max-width: 1000px; }
.rd .rd-blog-kicker { font-family: var(--f-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.rd .rd-blog-lead { max-width: 720px; font: 400 19px/1.5 var(--f-ui); color: var(--mute); }

.rd .rd-blog-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 0 var(--gut) 28px; }
.rd .rd-blog-chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.rd .rd-blog-chip {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    padding: 9px 16px; border-radius: 9999px;
    background: var(--card); border: 1px solid var(--line); color: var(--ink);
    font: 600 14px/1.3 var(--f-ui); text-decoration: none; white-space: nowrap;
    transition: border-color .15s, background-color .15s;
}
.rd .rd-blog-chip:hover { border-color: var(--ink); }
.rd .rd-blog-chip__n { font: 400 11px/1 var(--f-mono); color: var(--mute); }
.rd .rd-blog-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.rd .rd-blog-chip.is-active .rd-blog-chip__n { color: rgba(255, 255, 255, .6); }

.rd .rd-blog-sort { position: relative; flex: none; display: inline-flex; align-items: center; color: var(--mute); }
.rd .rd-blog-sort select {
    appearance: none; -webkit-appearance: none; margin: 0;
    padding: 9px 38px 9px 14px; border-radius: 12px;
    background: var(--card); border: 1px solid var(--line); color: var(--ink);
    font: 400 14px/1.3 var(--f-ui); cursor: pointer;
}
.rd .rd-blog-sort select:hover { border-color: var(--ink); }
.rd .rd-blog-sort select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd .rd-blog-sort svg { position: absolute; right: 14px; pointer-events: none; }

.rd .rd-blog { display: flex; flex-direction: column; gap: 28px; padding: 0 var(--gut) 64px; }
.rd .rd-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.rd .rd-blog-card {
    display: flex; flex-direction: column; gap: 12px; padding: 24px;
    background: var(--card); border: 1px solid var(--line); border-radius: 22px;
    color: var(--ink); text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.rd .rd-blog-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.rd .rd-blog-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd .rd-blog-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rd .rd-blog-card__cat {
    padding: 4px 10px; border-radius: 9999px; background: var(--tile);
    font: 400 10px/1.3 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--accent);
}
.rd .rd-blog-card__date { margin-left: auto; font: 400 11px/1.3 var(--f-mono); color: var(--mute); white-space: nowrap; }
.rd .rd-blog-card__title { font: 700 20px/1.3 var(--f-ui); }
.rd .rd-blog-card__preview { font: 400 14px/1.5 var(--f-ui); color: var(--mute); }
.rd .rd-blog-empty { color: var(--mute); }

.rd .rd-blog-hub a {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 9999px;
    background: var(--ink); color: #fff; font: 600 14px/1.3 var(--f-ui); text-decoration: none;
}
.rd .rd-blog-hub a:hover { opacity: .85; }

@media (max-width: 1180px) {
    .rd .rd-blog-hero h1 { font-size: 44px; letter-spacing: -1.4px; }
}
@media (max-width: 1024px) {
    .rd .rd-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
    .rd .rd-blog-hero { gap: 10px; padding: 12px 16px 16px; }
    .rd .rd-blog-hero .breadcrumb,
    .rd .rd-blog-hero .breadcrumb__item,
    .rd .rd-blog-hero .breadcrumb__link { font-family: var(--f-mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; }
    .rd .rd-blog-hero h1 { font-size: 32px; line-height: 1.1; letter-spacing: -1px; }
    .rd .rd-blog-lead { font: 400 17px/1.6 var(--f-text); color: var(--ink); }

    .rd .rd-blog-bar { flex-direction: column; align-items: flex-start; gap: 12px; padding: 4px 16px 20px; }
    .rd .rd-blog-chips {
        flex-wrap: nowrap; align-self: stretch; overflow-x: auto;
        margin: 0 -16px; padding: 0 16px; scrollbar-width: none;
    }
    .rd .rd-blog-chips::-webkit-scrollbar { display: none; }

    .rd .rd-blog { gap: 20px; padding: 0 12px 40px; }
    .rd .rd-blog-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .rd .rd-blog-card { padding: 20px; border-radius: 18px; }
    .rd .rd-blog-card:hover { transform: none; }
}