/*
 * Blog (index and post pages).
 *
 * Its own stylesheet, like catalog.css, so the global bundle does not carry
 * article typography to every page. Colours are the site palette, darkened
 * where the stock value misses 4.5:1 against white: $header-blue (#5E819C) is
 * 4.1:1, so links use #44637A (6.4:1); $font-grey (#797A7C) is 4.3:1, so
 * meta text uses #5F6062 (6.4:1).
 */

.blog,
.blog-post {
    --blog-text: #37393a;
    --blog-muted: #5f6062;
    --blog-link: #44637a;
    --blog-rule: #d9d9d9;
    --blog-tint: #edf9f7;
    color: var(--blog-text);
    margin: 0 auto;
    padding: 32px 16px 64px;
}

.blog { max-width: 1200px; }
.blog-post { max-width: 760px; }

.blog a,
.blog-post a { color: var(--blog-link); }

.blog a:focus-visible,
.blog-post a:focus-visible {
    outline: 3px solid var(--blog-link);
    outline-offset: 2px;
}

/* Brand titles: Brandon Grotesque, bold, all caps, 0.1em tracking -- the
 * same treatment as the site's other page titles (see _guides.scss). The
 * uppercase is CSS only, so screen readers still read the words normally. */
.blog__title,
.blog-card__title,
.blog-post__title,
.blog-post__series-title,
.blog-post__body h2,
.blog-post__body h3,
.blog-post__body h4 {
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ---- Index ---------------------------------------------------------- */

.blog__header { text-align: center; margin-bottom: 40px; }

.blog__title {
    font-size: 2rem;
    margin: 0 0 8px;
}

.blog__subtitle { color: var(--blog-muted); margin: 0; }

.blog-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 32px 24px;
}

.blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--blog-rule);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.blog-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

.blog-card__body { padding: 16px 18px 20px; }

.blog-card__title {
    font-size: 1.05rem;
    line-height: 1.4;
    margin: 0 0 8px;
}

.blog-card__link { text-decoration: none; }
.blog-card__link:hover { text-decoration: underline; }

/* The whole card is clickable through the title link's pseudo-element,
 * so there is one link per card for screen readers, not two. */
.blog-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.blog-card__meta,
.blog-post__meta { color: var(--blog-muted); font-size: .875rem; margin: 0 0 8px; }

.blog-card__excerpt { margin: 0; line-height: 1.55; }

.blog__empty { text-align: center; }

.blog-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 48px;
    flex-wrap: wrap;
}

.blog-pager__status { color: var(--blog-muted); }

/* ---- Post ----------------------------------------------------------- */

.blog-post__preview,
.blog-post__notice {
    background: #fff4d6;
    border: 1px solid #e6c65c;
    color: #5c4600;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.blog-post__breadcrumb { margin-bottom: 16px; font-size: .9rem; }

.blog-post__title {
    font-size: 2rem;
    line-height: 1.25;
    margin: 0 0 12px;
}

.blog-post__hero {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 16px 0 28px;
    display: block;
}

.blog-post__body { font-size: 1.0625rem; line-height: 1.7; }
.blog-post__body h2 { font-size: 1.35rem; line-height: 1.35; margin: 2em 0 .6em; }
.blog-post__body h3 { font-size: 1.15rem; line-height: 1.35; margin: 1.6em 0 .5em; }
.blog-post__body h4 { font-size: 1rem; line-height: 1.35; margin: 1.4em 0 .4em; }
.blog-post__body p,
.blog-post__body ul,
.blog-post__body ol { margin: 0 0 1.1em; }
.blog-post__body li { margin-bottom: .35em; }
.blog-post__body img { max-width: 100%; height: auto; display: block; margin: 1.5em auto; border-radius: 4px; }
.blog-post__body blockquote { border-left: 4px solid var(--blog-link); margin: 1.5em 0; padding: .25em 0 .25em 1em; color: var(--blog-muted); }
.blog-post__body hr { border: 0; border-top: 1px solid var(--blog-rule); margin: 2em 0; }

.blog-post__body table { border-collapse: collapse; width: 100%; margin: 1.5em 0; font-size: .95rem; }
.blog-post__body th,
.blog-post__body td { border: 1px solid var(--blog-rule); padding: 8px 12px; text-align: left; vertical-align: top; }
.blog-post__body th { background: var(--blog-tint); }
.blog-post__body td p,
.blog-post__body th p { margin: 0; }

.blog-post__series {
    margin-top: 48px;
    padding: 20px 24px;
    background: var(--blog-tint);
    border-radius: 6px;
}

.blog-post__series-title { font-size: 1.2rem; margin: 0 0 12px; }

.blog-post__series-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.blog-post__series-link {
    display: inline-block;
    padding: 10px 18px;
    border: 2px solid var(--blog-link);
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    background: #fff;
}

.blog-post__series-link:hover { background: var(--blog-link); color: #fff; }

@media (max-width: 600px) {
    /* Tables scroll inside themselves instead of widening the page. */
    .blog-post__body table { display: block; overflow-x: auto; }
    .blog__title { font-size: 1.5rem; }
    .blog-post__title { font-size: 1.45rem; }
    .blog-post__body h2 { font-size: 1.2rem; }
}

/* ---- Article text styles ---------------------------------------------- */
/* The site loads a global reset (font: inherit, list-style: none on every
 * element) that strips what article markup means: <strong> rendered at weight
 * 400, <em> upright, lists with no bullets, numbers or indent. Post bodies
 * are real prose, so put the defaults back -- scoped here, not site-wide. */
.blog-post__body strong,
.blog-post__body b { font-weight: 700; }
.blog-post__body em,
.blog-post__body i { font-style: italic; }
.blog-post__body u { text-decoration: underline; }
.blog-post__body s { text-decoration: line-through; }
.blog-post__body sup,
.blog-post__body sub { font-size: .75em; line-height: 0; position: relative; }
.blog-post__body sup { top: -.5em; }
.blog-post__body sub { bottom: -.25em; }
.blog-post__body code,
.blog-post__body pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.blog-post__body pre { white-space: pre-wrap; background: var(--blog-tint); padding: .75em 1em; border-radius: 4px; }

.blog-post__body ul { list-style: disc outside; padding-left: 1.5em; }
.blog-post__body ol { list-style: decimal outside; padding-left: 1.75em; }
.blog-post__body ul ul { list-style-type: circle; }
.blog-post__body ol ol { list-style-type: lower-alpha; }
.blog-post__body li > ul,
.blog-post__body li > ol { margin: .35em 0 0; }
.blog-post__body li { display: list-item; }

/* Same reset, other elements: table headers lost their bold (MailerLite's
 * comparison tables had bold header cells), and captions/rules had no style. */
.blog-post__body th { font-weight: 700; }
.blog-post__body caption { font-weight: 700; text-align: left; padding: 0 0 .5em; }
.blog-post__body figure { margin: 1.5em 0; }
.blog-post__body figcaption { font-size: .875rem; color: var(--blog-muted); text-align: center; margin-top: .5em; }
.blog-post__body hr { height: 0; }