/*
 * blog.css: the blog list page (/blog) and the article layout (/blog/<slug>), #32301.
 *
 * Loaded after /landing.css, which supplies the site colours and type (background #0a0a0a,
 * text #f5f0e8, accent #c41e1e, Inter), the breadcrumb, the trial button (.cta-button) and the
 * closing call to sign up (.closing-cta). This file adds only what the blog needs on top. How to
 * publish an article: docs/blog/README.md.
 */

/* ---- List page ---------------------------------------------------------------------------- */

.blog-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-entry {
    position: relative;
    border: 1px solid rgba(245, 240, 232, 0.12);
    border-radius: 10px;
    padding: 22px 24px;
    transition: border-color 0.2s, background 0.2s;
}

.blog-entry:hover,
.blog-entry:focus-within {
    border-color: rgba(245, 240, 232, 0.35);
    background: rgba(245, 240, 232, 0.03);
}

.landing .blog-entry h3 {
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.blog-entry h3 a {
    text-decoration: none;
}

/* The whole card is the link's target area; the link text stays the heading. */
.blog-entry h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
}

.blog-entry h3 a:focus-visible {
    outline: none;
}

.blog-entry h3 a:focus-visible::after {
    outline: 2px solid #f5f0e8;
    outline-offset: 3px;
}

.landing .blog-entry p {
    margin-bottom: 0;
}

.blog-meta {
    font-size: 0.8rem;
    font-weight: 300;
    opacity: 0.75;
    margin-bottom: 10px;
}

.landing p.blog-meta {
    margin-bottom: 10px;
    opacity: 0.75;
}

/* "Sample" marker, for the placeholder article that shows the layout. Cream on dark, not red:
   accent red text on the page background is under the 4.5:1 that small text needs. */
.sample-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid rgba(245, 240, 232, 0.45);
    border-radius: 4px;
    padding: 1px 7px;
    margin-left: 8px;
    vertical-align: 1px;
}

/* ---- Article ------------------------------------------------------------------------------ */

.article-body {
    max-width: 680px;
    padding-top: 32px;
}

.landing .article-body p,
.article-body li {
    font-size: 1.02rem;
    font-weight: 300;
    line-height: 1.75;
}

.landing .article-body h2 {
    font-size: 1.35rem;
    margin: 36px 0 12px;
}

.article-body ul,
.article-body ol {
    margin: 0 0 18px 22px;
}

.article-body li {
    margin-bottom: 8px;
    opacity: 0.85;
}

.article-body a {
    border-bottom: 1px solid rgba(245, 240, 232, 0.4);
    text-decoration: none;
}

.article-body a:hover {
    border-bottom-color: #f5f0e8;
}

.article-note {
    border-left: 3px solid rgba(245, 240, 232, 0.35);
    padding: 4px 0 4px 16px;
    margin: 0 0 24px;
}

.back-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.9rem;
    font-weight: 400;
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 240, 232, 0.25);
}

.back-link:hover {
    border-bottom-color: #f5f0e8;
}

@media (max-width: 600px) {
    .blog-entry {
        padding: 18px 18px;
    }
    .landing .article-body p,
    .article-body li {
        font-size: 1rem;
    }
}