/* "You may also like" at the foot of a page (Views/Shared/_Related.cshtml, Services/RelatedPages.cs; owner, 11 Oct 2026) */
.rel { margin: 48px 0 0; padding: 28px 0 32px; background: var(--b2, #f2f3f5); border-top: 1px solid var(--hair); }
.rel__h { font: 700 20px/1.2 var(--font-head); margin: 0 0 14px; }
.rel__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.rel-card { display: flex; gap: 12px; align-items: stretch; min-width: 0; padding: 10px; background: var(--b1, #fff); color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--hair); text-decoration: none; transition: box-shadow .15s; }
.rel-card:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--ink); }
.rel-card__pic { flex: 0 0 112px; height: 78px; overflow: hidden; display: flex; font-size: 12px; }
.rel-card__pic .nc { width: 100%; }
.rel-card__pic .nc__fig { font-size: 20px; }
.rel-card__pic svg { max-width: 100%; max-height: 100%; }
.rel-card__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; align-self: center; }
.rel-card__txt b { font: 650 15px/1.25 var(--font-ui); }
.rel-card__txt span { font: 400 13px/1.35 var(--font-ui); color: var(--muted); }
.rel__else { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 0; font: 400 14px/1.3 var(--font-ui); }
.rel__else > span { font-weight: 650; color: var(--ink); margin-right: 4px; }
.rel__else a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.rel__else img { box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
@media (max-width: 760px) {
    .rel { margin-top: 28px; padding: 20px 0 22px; }
    .rel-card__pic { flex-basis: 84px; height: 64px; }
}
.rel-card__pic--face { align-items: center; justify-content: center; }