/*
 * Related-posts grid at the foot of a blog post.
 * Replaces the old float-based Bootstrap columns (.gell/.glry), which produced ragged
 * rows, inconsistent card heights and cropped product shots. Styled to match the
 * catalogue and market cards used elsewhere on the site.
 */
.hr-related { --hr-ink:#14374d; --hr-muted:#55707f; --hr-line:#dce5ec; --hr-blue:#0667a6;
    margin:48px 0 8px; }
.hr-related *, .hr-related *::before, .hr-related *::after { box-sizing:border-box; }

.hr-related .hr-related-title {
    margin:0 0 24px; padding:0; border:0;
    color:var(--hr-ink); font-size:26px !important; font-weight:600;
    line-height:1.25; letter-spacing:-.4px; text-transform:none; text-align:left;
}

.hr-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }

.hr-card { display:flex; min-width:0; }
.hr-card-link {
    display:flex; flex-direction:column; width:100%;
    border:1px solid var(--hr-line); border-radius:14px; overflow:hidden;
    background:#fff; text-decoration:none;
    transition:border-color .2s, box-shadow .2s, transform .2s;
}
.hr-card-link:hover, .hr-card-link:focus-visible {
    border-color:#8fb9d3; box-shadow:0 14px 30px rgba(21,59,81,.12); transform:translateY(-3px);
    text-decoration:none;
}
.hr-card-link:focus-visible { outline:3px solid #4c9dd2; outline-offset:3px; }

/* Media: product shots are mostly on white, so contain (never crop) on a soft tint. */
.hr-card-media {
    display:flex; align-items:center; justify-content:center;
    height:172px; padding:16px; color:#3d7fa6;
    background:linear-gradient(125deg,#edf3f7,#dfeaf1);
    border-bottom:1px solid #e6edf2;
}
.hr-card-media img {
    width:100%; height:100%; margin:0;
    object-fit:contain; mix-blend-mode:multiply;
}
.hr-card-symbol { opacity:.5; transform:rotate(-8deg); }

.hr-card-body { display:flex; flex-direction:column; flex:1; padding:18px 20px 16px; }
.hr-card-title {
    display:block; color:var(--hr-ink); font-size:16px; font-weight:600; line-height:1.4;
    /* keep every card's title block the same height so the footers line up */
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.hr-card-more {
    display:block; margin-top:auto; padding-top:14px;
    color:var(--hr-blue); font-size:13.5px; font-weight:600;
}
.hr-card-link:hover .hr-card-more { text-decoration:underline; }

@media (max-width:991px) { .hr-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } }
@media (max-width:600px) {
    .hr-grid { grid-template-columns:1fr; gap:16px; }
    .hr-card-media { height:190px; }
    .hr-related .hr-related-title { font-size:22px !important; }
}
@media (prefers-reduced-motion:reduce) {
    .hr-card-link { transition:none; }
    .hr-card-link:hover { transform:none; }
}