/* ----------------------------------------------------------
 *  Blog styles
 *  Only adds NEW rules — leans on the same colour variables
 *  (--panel, --accent, --bevel-mid, etc.) already defined in
 *  style.css, so it automatically matches the rest of the site.
 * ---------------------------------------------------------- */

/* ---------- Blog index: post card grid ---------- */
.blog-post-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.blog-empty {
    color: var(--muted);
    font-style: italic;
}

.blog-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.9rem 1rem;
    text-decoration: none;
    color: var(--text);
    background: rgba(0, 0, 0, 0.25);
    border: 2px solid var(--bevel-mid);
    box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.1),
    inset -2px -2px 0 rgba(0,0,0,0.35);
    transition: border-color 120ms ease, transform 120ms ease;
}

.blog-card:hover,
.blog-card:focus-visible {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.blog-card__title {
    margin: 0;
    font-family: "Silkscreen", system-ui, sans-serif;
    font-size: 1rem;
    color: var(--text);
}

.blog-card__date {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.blog-card__excerpt {
    margin: 0;
    font-size: 0.95rem;
}

.blog-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.2rem;
}

.blog-tag {
    font-family: "Silkscreen", system-ui, sans-serif;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    color: var(--muted);
    border: 1px solid var(--bevel-mid);
    text-transform: lowercase;
}

/* ---------- Individual post page ---------- */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    color: var(--muted);
    font-size: 0.95rem;
    margin: -0.25rem 0 1rem;
}

.post-meta__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* ---------- Previous / Next navigation ---------- */
.post-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 1.25rem 0;
}

.post-nav__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 45%;
    padding: 0.5rem 0.8rem;
    text-decoration: none;
    color: var(--text);
    background: rgba(0, 0, 0, 0.25);
    border: 2px solid var(--bevel-mid);
    transition: border-color 120ms ease;
}

.post-nav__link:hover,
.post-nav__link:focus-visible {
    border-color: var(--accent);
}

.post-nav__newer {
    margin-left: auto;
    text-align: right;
}

.post-nav__label {
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-back-link {
    margin: 0.5rem 0 1.5rem;
}