/* Blog pages (/blog, /blog/<slug>) are generated by apps/blog-writer from the layout of plans.html. */

.blog-page {
    width: 100%;
    max-width: 780px;
    padding: var(--space-40) var(--space-20) var(--space-60);
    color: var(--primary-text-main);
    font-family: var(--font-family-base);
}

.blog-breadcrumbs {
    margin-bottom: var(--space-20);
    color: var(--primary-text-secondary);
}

.blog-breadcrumbs a {
    color: var(--primary-main);
}

.blog-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-40);
    font-weight: 800;
    line-height: 120%;
    margin: 0 0 var(--space-16);
}

.blog-meta,
.blog-lead {
    color: var(--primary-text-secondary);
    margin-bottom: var(--space-32);
}

.blog-lead {
    font-size: var(--font-size-20);
    line-height: 150%;
}

.blog-article h2,
.blog-related h2 {
    font-family: var(--font-family-display);
    font-size: var(--font-size-28);
    font-weight: 700;
    line-height: 130%;
    margin: var(--space-40) 0 var(--space-16);
}

.blog-article h3 {
    font-family: var(--font-family-display);
    font-size: var(--font-size-20);
    font-weight: 700;
    line-height: 140%;
    margin: 0 0 var(--space-10);
}

.blog-article p {
    font-size: var(--font-size-18);
    line-height: 165%;
    margin: 0 0 var(--space-16);
}

/* The site styles every ul as a horizontal menu; article lists are ordinary bullet lists. */
.blog-article ul.blog-list {
    display: block;
    list-style: disc;
    padding-left: var(--space-24);
    margin: 0 0 var(--space-20);
}

.blog-article ul.blog-list li {
    font-size: var(--font-size-18);
    line-height: 165%;
    margin-bottom: var(--space-8);
}

.blog-summary,
.blog-faq-item,
.blog-cta,
.blog-card {
    background: var(--background-surface);
    border: 1px solid var(--surface-border-soft);
    border-radius: var(--radius-l);
}

.blog-summary {
    padding: var(--space-24);
    border-left: 4px solid var(--primary-main);
}

.blog-summary-label {
    display: block;
    color: var(--primary-main);
    margin-bottom: var(--space-8);
    text-transform: uppercase;
}

.blog-summary p {
    margin: 0;
}

.blog-faq-item {
    padding: var(--space-20) var(--space-24);
    margin-bottom: var(--space-16);
}

.blog-faq-item p {
    margin: 0;
}

.blog-cta {
    margin: var(--space-40) 0 var(--space-24);
    padding: var(--space-32);
    background: var(--primary-main-10);
}

.blog-cta-title {
    display: block;
    font-family: var(--font-family-display);
    font-size: var(--font-size-24);
    font-weight: 800;
    margin-bottom: var(--space-10);
}

.blog-cta-button {
    display: inline-block;
    padding: var(--space-16) var(--space-32);
    border-radius: var(--radius-full);
    background: var(--primary-main);
    color: #fff;
    font-weight: 700;
}

.blog-cta-button:hover {
    background: var(--primary-main-hover);
}

.blog-disclaimer {
    color: var(--primary-text-secondary);
}

.blog-cards {
    display: grid;
    gap: var(--space-16);
}

.blog-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-24);
    color: var(--primary-text-main);
    user-select: text;
}

.blog-card:hover {
    border-color: var(--primary-main);
}

.blog-card-date {
    color: var(--primary-text-secondary);
}

.blog-card-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-20);
    font-weight: 700;
    line-height: 135%;
}

.blog-card-text {
    color: var(--primary-text-secondary);
    line-height: 150%;
}

.blog-related {
    margin-top: var(--space-40);
}

.blog-related .blog-card {
    margin-bottom: var(--space-16);
}

.blog-article,
.blog-index {
    user-select: text;
}

@media (max-width: 768px) {
    .blog-title {
        font-size: var(--font-size-28);
    }

    .blog-article h2,
    .blog-related h2 {
        font-size: var(--font-size-24);
    }

    .blog-article p,
    .blog-article ul.blog-list li {
        font-size: var(--font-size-16);
    }
}