/* ── blog 04 Post list + 05 Load more — blog/sections/04-post-list + 05-load-more/brief.md ──
   Rows: 449px pitch (Figma 1201 / 1647 / 2099 / 2548 / 2997 — normalised), image 646×370 @ x 240.
   Text column @ x 943 (relative to the row top): date 18 coral @ +21 · title 500 30/1 w≈600 @ +80 ·
   excerpt 20/1 w508 @ +190 · "Read Article →" 14 right edge ≈1668 @ +359.
   Load more: pill 326×54, 1px black, radius 28, 17 below the list; label 26. Dates sorted + not underlined (agreed). */

.bl-posts { width: calc(1440 * var(--u)); margin: calc(1 * var(--u)) auto 0; }
.bl-post {
    display: grid;
    grid-template-columns: 646fr 794fr;
    column-gap: 0;
    min-height: calc(449 * var(--u));
}
.bl-post[hidden] { display: none; }   /* grid display would otherwise override [hidden] */
.bl-post.is-last { min-height: calc(423 * var(--u)); }   /* set by main.js on the last visible post */
.bl-post__media { display: block; width: calc(646 * var(--u)); height: calc(370 * var(--u)); overflow: hidden; }
.bl-post__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .5s ease; }
.bl-post:hover .bl-post__media img { scale: 1.03; }

.bl-post__body { position: relative; height: calc(370 * var(--u)); padding: calc(21 * var(--u)) 0 0 calc(57 * var(--u)); }
.bl-post__date { display: block; font-size: clamp(14px, .9375vw, 18px); line-height: .94; color: var(--skin-coral); text-transform: uppercase; }
.bl-post__title { max-width: calc(603 * var(--u)); margin-top: calc(42 * var(--u)); font-size: clamp(20px, 1.5625vw, 30px); font-weight: 500; line-height: 1; }
.bl-post__title a { transition: color .2s ease; }
.bl-post__title a:hover { color: var(--skin-coral); }
.bl-post__excerpt {
    position: absolute;
    left: calc(57 * var(--u));
    top: calc(190 * var(--u));
    max-width: calc(508 * var(--u));
    font-size: clamp(15px, 1.0417vw, 20px);
    line-height: 1;
}
.bl-post__more {
    position: absolute;
    right: calc(126 * var(--u));
    top: calc(359 * var(--u));
    font-size: 14px;
    line-height: .94;
    transition: color .2s ease;
}
.bl-post__more:hover { color: var(--skin-coral); }
.bl-posts__empty { padding: 40px 0; font-size: var(--fs-body); }

.bl-more { padding: calc(17 * var(--u)) 0 calc(135 * var(--u)); text-align: center; }
.bl-more__btn {
    width: max(240px, calc(326 * var(--u)));
    height: max(46px, calc(54 * var(--u)));
    font: inherit;
    font-size: clamp(18px, 1.354vw, 26px);
    line-height: .94;
    color: var(--skin-black);
    background: none;
    border: 1px solid var(--skin-black);
    border-radius: 28px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.bl-more__btn:hover { background: var(--skin-coral); border-color: var(--skin-coral); color: var(--skin-white); }
.bl-more[hidden] { display: none; }

@media (max-width: 991.98px) {
    .bl-posts { width: calc(100% - 2 * var(--skin-gutter)); }
    .bl-post, .bl-post.is-last { grid-template-columns: 1fr 1fr; column-gap: 28px; min-height: 0; padding-bottom: 40px; }
    .bl-post__media { width: 100%; height: auto; aspect-ratio: 646 / 370; }
    .bl-post__body { height: auto; padding: 0; }
    .bl-post__title { max-width: none; margin-top: 14px; font-size: 22px; line-height: 1.2; }
    .bl-post__excerpt, .bl-post__more { position: static; display: block; }
    .bl-post__excerpt { max-width: none; margin-top: 14px; font-size: 16px; line-height: 1.45; }
    .bl-post__more { margin-top: 14px; }
    .bl-more { padding: 8px 0 72px; }
}
@media (max-width: 767.98px) {
    .bl-post, .bl-post.is-last { grid-template-columns: 1fr; row-gap: 16px; }
}