/* Blog pages of the new design: the articles list and the article page.
   The article's photos reuse the album tiles & lightbox of gallery.css. */

/* — title row: heading left, search right — */
.blog-head {
    display: flex; justify-content: space-between; align-items: end;
    gap: 24px; flex-wrap: wrap;
}
.blog-search { display: flex; flex-direction: column; gap: 5px; min-width: 280px; }
.blog-search__label {
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-700);
}
.blog-search__row { display: flex; }
.blog-search__row .input { flex: 1; min-width: 0; border-right: 0; }
@media (max-width: 720px) {
    .blog-search { min-width: 0; width: 100%; }
}

.blog-results { margin: 32px 0 0; font-size: 15px; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }

/* — posts list — */
.blog-list { margin-top: 40px; display: flex; flex-direction: column; border-bottom: 1px solid var(--color-divider); }
.blog-results + .blog-list { margin-top: 16px; }
.blog-item {
    display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 24px;
    padding: 22px 0; border-top: 1px solid var(--color-divider); align-items: start;
    color: inherit; text-decoration: none;
}
.blog-item:hover { color: var(--color-accent-700); }
.blog-item__thumb { display: block; aspect-ratio: 4 / 3; margin: 4px; }
.blog-item__thumb > img { transition: opacity 0.2s; }
.blog-item:hover .blog-item__thumb > img { opacity: 0.85; }
.blog-item__text { display: flex; flex-direction: column; gap: 6px; }
.blog-item__date { font-size: 13px; line-height: 1.5; opacity: 0.65; }
.blog-item__title {
    font-family: var(--font-heading); font-weight: var(--font-heading-weight);
    font-size: 26px; line-height: 1.1; text-wrap: balance;
}
.blog-item__excerpt { font-size: 14px; opacity: 0.7; max-width: 70ch; }
@media (max-width: 560px) {
    .blog-item { grid-template-columns: 96px 1fr; gap: 14px; padding: 16px 0; }
    .blog-item__title { font-size: 20px; }
    .blog-item__excerpt { display: none; }
}
.blog-empty { margin: 0; padding: 22px 0; border-top: 1px solid var(--color-divider); }

/* — pagination — */
.pager { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pager__dir[aria-disabled='true'] { opacity: 0.35; pointer-events: none; }
.pager__pages { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.pager__page, .pager__gap {
    min-width: 32px; padding: 4px 6px; text-align: center;
    font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16px;
    font-variant-numeric: tabular-nums; text-decoration: none;
}
.pager__page:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.pager__page[aria-current='page'] { background: var(--color-accent); color: var(--color-bg); }
.pager__gap { opacity: 0.5; }
@media (max-width: 560px) {
    .pager__pages { order: 3; width: 100%; }
}

/* ————————————————— article page ————————————————— */
.post-title { max-width: 32ch; text-wrap: balance; }
.page-title h1.post-title { font-size: clamp(34px, 5vw, 60px); line-height: 1.05; }
.post-date { margin: 14px 0 0; font-size: 14px; opacity: 0.65; }
.post-preview { margin: 14px 0 0; }

/* — cover: 21:9, cropped; a portrait image sits whole on a dark plate — */
.post-cover { aspect-ratio: 21 / 9; margin: 32px 6px 6px; }
.post-cover > a { position: absolute; inset: 0; display: block; overflow: hidden; }
.post-cover > a > img { width: 100%; height: 100%; object-fit: cover; }
.post-cover--portrait { background: var(--color-accent-900); }
.post-cover--portrait > a > img { object-fit: contain; }
.post-cover__caption { margin: 10px 6px 0; max-width: 84ch; font-size: 13px; line-height: 1.5; opacity: 0.7; }
@media (max-width: 720px) {
    .post-cover { aspect-ratio: 4 / 3; }
}

/* — body: the editor's html, evened out to the site's type — */
.post-body {
    margin-top: 48px; max-width: 84ch;
    font-size: 17px; line-height: 1.65; text-wrap: pretty; overflow-wrap: anywhere;
}
.post-body :is(p, span, font, div, li, td, strong, b, em, i, u, a) { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 1em; }
.post-body img { max-width: 100%; height: auto; }
.post-body iframe { max-width: 100%; }
.post-body table { max-width: 100%; }

/* — photos & files — */
.post-section { margin-top: 56px; }
.post-section h2 { margin: 0; }
.post-section h2 small { font-size: 0.5em; opacity: 0.55; margin-left: 6px; }
.post-photos { margin-top: 20px; }

.post-files { margin-top: 16px; max-width: 84ch; }
.post-files__title { font-weight: 500; }
.post-files__size { opacity: 0.6; white-space: nowrap; }
.post-files__action { text-align: right; }
.post-files__action .btn { font-size: 13px; }

/* — back to list & share — */
.post-foot {
    margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--color-divider);
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}