/* Блок «Читайте также»: три карточки в конце статьи.
   Палитра взята с сайта: акцент #c0392b, заголовки #2b1f14, текст #3a2d22,
   тёплый фон #fff3e6. Отдельным файлом, чтобы не трогать существующие стили. */
.related{display:grid;grid-template-columns:1fr;gap:18px;margin:0 0 28px}
@media (min-width:640px){.related{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.related{grid-template-columns:repeat(3,1fr)}}

.related-head{font-size:26px;color:#2b1f14;margin:34px 0 18px}

.rel-card{display:flex;flex-direction:column;max-width:none;background:#fff;
          border:1px solid #eddcc8;border-radius:12px;overflow:hidden;
          transition:border-color .15s ease}
.rel-card:hover{border-color:#c0392b}

/* Место под обложку зарезервировано пропорцией: без неё карточка подпрыгивает
   при загрузке картинки — сдвиг вёрстки ровно там, где читатель решает,
   идти ли дальше. */
.rel-card__thumb{display:block;aspect-ratio:16/9;background:#fff3e6}
.rel-card__thumb img{width:100%;height:100%;object-fit:cover;display:block}

.rel-card__body{display:flex;flex-direction:column;gap:6px;padding:13px 14px 15px;flex:1}
.rel-card__cat{color:#a8836a;font-size:11.5px;font-weight:600;
               letter-spacing:.08em;text-transform:uppercase}
/* Обрезка в три строки: без неё карточки в ряду разной высоты и ряд рвётся. */
.rel-card__title{color:#2b1f14;text-decoration:none;font-size:16.5px;
                 line-height:1.34;font-weight:600;
                 display:-webkit-box;-webkit-box-orient:vertical;
                 -webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.rel-card__title:hover{color:#c0392b}

/* Подпись автора статьи. Короткая: имя, статус, ниша и даты — всё из реквизитов
   сайта. Стоит перед блоком «Читайте также», то есть в конце материала, где
   читатель уже решает, доверять ли источнику. */
.art-byline{display:flex;flex-direction:column;gap:3px;margin:30px 0 6px;
            padding:14px 16px;background:#fff;border:1px solid #eddcc8;
            border-left:3px solid #c0392b;border-radius:10px}
.art-byline__who{color:#2b1f14;font-size:15px}
.art-byline__what{color:#7a6652;font-size:13.5px;line-height:1.45}
.art-byline__when{color:#a8836a;font-size:12.5px;margin-top:2px}