/* Blog listing and article pages (server-rendered by blog.js). Card styling
   is shared with the homepage via .blog-card in style.css. */

.blog-page { background: var(--cream); color: var(--ink); }

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 2000;
    background: var(--ink-fixed);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus { top: 12px; }

.blog-nav-cta { padding: 10px 22px; font-size: .9rem; }

.blog-hero {
    padding: 72px 0 40px;
    background: var(--cream);
}
.blog-lead {
    max-width: 560px;
    margin: 14px auto 0;
    color: var(--ink-soft);
    font-size: 1.05rem;
}

.blog-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    font-size: .84rem;
    color: var(--ink-soft);
}
.blog-breadcrumb li + li::before { content: "/"; margin-right: 6px; opacity: .55; }
.blog-breadcrumb a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.blog-breadcrumb a:hover { color: var(--chili-text); }

.blog-card .bc-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.08rem;
    line-height: 1.4;
    margin: 0;
}
.blog-card .bc-excerpt {
    margin: 10px 0 0;
    color: var(--ink-soft);
    font-size: .9rem;
}

.blog-article { padding: 56px 0 72px; }
.blog-article-inner { max-width: 760px; margin: 0 auto; }
.blog-article .blog-breadcrumb { justify-content: flex-start; }
.blog-article-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.9rem, 4.2vw, 2.9rem);
    line-height: 1.15;
    margin: 0 0 26px;
}
.blog-cover {
    margin: 0 0 32px;
    border-radius: 22px;
    overflow: hidden;
    max-height: 440px;
}
.blog-cover img { width: 100%; height: 100%; max-height: 440px; object-fit: cover; display: block; }

.blog-body { font-size: 1.08rem; line-height: 1.85; }
.blog-body p { margin: 0 0 1.3em; }

/* Photo placed inside the text with a [photo N] marker */
.blog-figure { margin: 2em 0; }
.blog-figure img { width: 100%; height: auto; display: block; border-radius: 18px; }
.blog-figure figcaption,
.blog-photo figcaption {
    margin-top: 8px;
    font-size: .88rem;
    color: var(--ink-soft);
    text-align: center;
}

/* Photos not placed by a marker: a grid under the text */
.blog-photos {
    display: grid;
    gap: 14px;
    margin-top: 2em;
    grid-template-columns: repeat(2, 1fr);
}
.blog-photo { margin: 0; }
.blog-photo a { display: block; }
.blog-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}
.blog-photos-1 { grid-template-columns: 1fr; }
.blog-photos-1 .blog-photo img { aspect-ratio: 16 / 9; }
.blog-photos-3 .blog-photo:first-child { grid-column: 1 / -1; }
.blog-photos-3 .blog-photo:first-child img { aspect-ratio: 16 / 9; }
.blog-photos-5 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 575.98px) {
    .blog-photos-5 { grid-template-columns: repeat(2, 1fr); }
    .blog-photos-5 .blog-photo:first-child { grid-column: 1 / -1; }
}

.blog-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 38px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--border-soft);
    font-weight: 700;
    font-size: .9rem;
}
.blog-share span { margin-right: 4px; }

.blog-cta {
    margin-top: 40px;
    padding: 34px;
    border-radius: 26px;
    background: var(--paper);
    border: 1px solid var(--border-soft);
    text-align: center;
}
.blog-cta-title { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; margin: 0 0 8px; }
.blog-cta p { color: var(--ink-soft); margin-bottom: 20px; }

.blog-more-title {
    font-family: var(--font-display);
    font-weight: 800;
    text-align: center;
    margin: 0 0 32px;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
}
.blog-more-title .accent { color: var(--chili-text); }

@media (max-width: 767.98px) {
    .blog-hero { padding: 44px 0 24px; }
    .blog-article { padding: 32px 0 48px; }
    .blog-cta { padding: 26px 20px; }
}