/* Blog archive styles mirror the exact layout values in the Lovable source. */
.page-hero--blog { padding: 3rem 0; border-bottom: 1px solid #e2e4e9; background: hsl(220 15% 97%); }
.page-hero--blog .breadcrumbs { margin: 0 0 1rem; gap: .375rem; font-size: .875rem; line-height: 1.25rem; }
.page-hero--blog .section-eyebrow { display: inline-block; margin: 0 0 .75rem; color: #0058cc; font-size: .875rem; font-weight: 700; letter-spacing: .05em; line-height: 1.25rem; }
.page-hero--blog h1 { margin: 0; color: #14181f; font: 700 1.875rem/1.1 var(--s4d-font-heading, 'Space Grotesk', sans-serif); letter-spacing: -.025em; }
.page-hero--blog .page-hero__lead { max-width: 42rem; margin: 1rem 0 0; color: hsl(220 10% 46%); font-size: 1.125rem; line-height: 1.75rem; }
.blog-archive { padding: 2.5rem 0 3.5rem; background: #fff; }
.blog-featured-card { display: grid; overflow: hidden; border: 1px solid #e2e4e9; border-radius: 1rem; background: #fff; transition: box-shadow .2s ease; }
.blog-featured-card:hover { box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); }
.blog-featured-card__image, .blog-card__image { display: block; overflow: hidden; background: hsl(220 15% 97%); }
.blog-featured-card__image { aspect-ratio: 16 / 9; }
.blog-featured-card__image img, .blog-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-featured-card:hover img, .blog-card:hover .blog-card__image img { transform: scale(1.05); }
.blog-featured-card__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 1.5rem; }
.blog-featured-card__eyebrow, .blog-card__category, .article-category-badge { color: #0058cc !important; font-size: .75rem; font-weight: 700; letter-spacing: .05em; line-height: 1rem; text-decoration: none; text-transform: uppercase; }
.blog-featured-card__body h2 { max-width: 30rem; margin: .75rem 0 0; color: #14181f; font: 700 1.5rem/1.25 var(--s4d-font-heading, 'Space Grotesk', sans-serif); }
.blog-featured-card__body h2 a, .blog-card h3 a { color: inherit; text-decoration: none; }
.blog-featured-card__body > p { display: -webkit-box; overflow: hidden; margin: .75rem 0 0; color: #687080 !important; line-height: 1.5rem; opacity: 1 !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.blog-featured-card__body .blog-card__meta, .blog-card__meta, .article-header__meta { display: flex; flex-wrap: wrap; gap: .42rem; color: #687080 !important; font-size: .875rem; opacity: 1 !important; }
.blog-featured-card__link { display: inline-flex; gap: .375rem; margin-top: 1.5rem; color: #0058cc; font-weight: 600; text-decoration: none; }
.blog-category-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 3rem 0 2rem; }
.blog-category-filter__link { border: 1px solid #e2e4e9; border-radius: 9999px; background: #fff; color: hsl(220 10% 46%); font-size: .875rem; font-weight: 500; line-height: 1.25rem; padding: .375rem .875rem; text-decoration: none; transition: color .2s, border-color .2s, background-color .2s; }
.blog-category-filter__link:hover { border-color: #0058cc; color: #0058cc; }
.blog-category-filter__link.is-active { border-color: #0058cc; background: #0058cc; color: #fff; }
.blog-card-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.blog-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #e2e4e9; border-radius: 1rem; background: #fff; transition: box-shadow .2s ease; }
.blog-card:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); transform: none; }
.blog-card__image { aspect-ratio: 16 / 9; }
.blog-card__image-placeholder { display: block; width: 100%; height: 100%; background: hsl(220 15% 97%); }
.blog-card__body { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; padding: 1.5rem; }
.blog-card h3 { display: -webkit-box; overflow: hidden; margin: .5rem 0 0; color: #14181f; font: 700 1.125rem/1.375 var(--s4d-font-heading, 'Space Grotesk', sans-serif); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.blog-card:hover h3 { color: #0058cc; }
.blog-card__excerpt { display: -webkit-box; flex: 1; overflow: hidden; margin: .5rem 0 0; color: #687080 !important; font-size: .875rem; line-height: 1.25rem; opacity: 1 !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.blog-card__meta { width: 100%; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1.25rem; border-top: 1px solid #e2e4e9; padding-top: 1rem; font-size: .75rem; line-height: 1rem; }
.blog-card__meta > span:first-child { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.blog-card__read-more { display: inline-flex; flex: none; gap: .25rem; color: #0058cc; font-weight: 600; text-decoration: none; }
.blog-pagination { display: flex; justify-content: center; margin-top: 3rem; color: #14181f; font-size: .875rem; line-height: 1.25rem; }
.blog-pagination ul.page-numbers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.blog-pagination ul.page-numbers li { margin: 0; }
.blog-pagination a, .blog-pagination span { display: grid; min-width: 2.25rem; min-height: 2.25rem; place-items: center; border: 0; border-radius: .375rem; color: #14181f; font-weight: 500; text-decoration: none; }
.blog-pagination .prev, .blog-pagination .next { min-width: auto; padding: .5rem .75rem; color: hsl(220 10% 46%); font-weight: 400; }
.blog-pagination a:hover { background: hsl(220 15% 97%); color: #0058cc; }
.blog-pagination .current { background: #0058cc; color: #fff; }

.article-hero { border-bottom: 1px solid #e2e4e9; background: hsl(220 15% 97%); }
.article-header { max-width: 80rem; padding-top: 2.5rem; padding-bottom: 0; }
.article-header .breadcrumbs { margin: 0 0 1.25rem; }
.article-category-badge { display: inline-block; border-radius: 9999px; background: rgb(0 88 204 / .1); padding: .25rem .75rem; }
.article-header h1 { max-width: 56rem; margin: 1rem 0 0; font: 700 1.875rem/1.25 var(--s4d-font-heading, 'Space Grotesk', sans-serif); letter-spacing: -.025em; }
.article-header__excerpt { width: 100%; max-width: none; margin: 1rem 0 0; color: #6a7181 !important; font-size: 1.125rem; line-height: 1.75rem; opacity: 1 !important; }
.article-header__meta { max-width: 56rem; align-items: center; column-gap: 1.5rem !important; row-gap: .5rem !important; margin-top: 1.5rem; }
.article-header__author { color: #14181f; font-weight: 600; }
.article-featured-image { max-width: 80rem; padding-top: 2rem; padding-bottom: 2.5rem; }
.article-featured-image__frame { aspect-ratio: 21 / 9; overflow: hidden; border-radius: 1rem; background: #fff; }
.article-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-shell { display: grid; grid-template-columns: 13.75rem minmax(0, 50rem); justify-content: center; gap: 3rem; max-width: 80rem; padding-top: 3.5rem; padding-bottom: 3.5rem; }
.article-main { min-width: 0; }
.article-toc--desktop { align-self: start; position: sticky; top: 9rem; max-height: calc(100vh - 11rem); overflow-y: auto; border: 1px solid #e2e4e9; border-radius: .75rem; background: hsl(220 15% 97%); padding: 1.25rem; }
.article-toc strong { display: block; margin-bottom: 1rem; color: #6a7181; font: 700 .75rem/1rem var(--s4d-font-heading, 'Space Grotesk', sans-serif); letter-spacing: .05em; text-transform: uppercase; }
.article-toc ol { margin: 0; padding: 0; list-style: none; }
.article-toc li { margin: .25rem 0; }
.article-toc__item--h3 { padding-left: .75rem; font-size: .9rem; }
.article-toc a { display: block; border-left: 2px solid transparent; color: #6a7181 !important; font-size: .875rem; line-height: 1.375rem; opacity: 1 !important; padding: .25rem 0 .25rem .75rem; text-decoration: none; }
.article-toc a:hover { color: #14181f !important; }
.article-toc a.is-active { border-color: #0058cc; color: #0058cc !important; font-weight: 600; }
.article-toc--mobile { display: none; margin-bottom: 1.5rem; border: 1px solid var(--s4d-border, #dfe5ec); border-radius: .75rem; padding: 1rem; }
.article-toc--mobile summary { cursor: pointer; font-weight: 700; }
.article-toc--mobile nav { padding-top: .6rem; }
.article-author-box { display: flex; gap: 1.25rem; align-items: center; margin: 0 0 2.5rem; padding: 1.5rem; border: 1px solid #e2e4e9; border-radius: .75rem; background: hsl(220 15% 97%); }
.article-author-box__avatar { display: grid; width: 4rem; height: 4rem; flex: 0 0 4rem; overflow: hidden; place-items: center; border-radius: 50%; background: #e1ecfb; color: #0058cc; font-size: 1.125rem; font-weight: 700; line-height: 1; text-decoration: none; }
.article-author-box__avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.article-author-box__content { min-width: 0; }
.article-author-box .section-eyebrow { display: block; margin: 0 0 .35rem; color: #0058cc; font-size: .75rem; font-weight: 700; letter-spacing: .05em; line-height: 1rem; text-transform: uppercase; }
.article-author-box h2 { margin: 0 0 .35rem; font: 700 1.05rem/1.2 var(--s4d-font-heading, 'Space Grotesk', sans-serif); }
.article-author-box h2 a { color: inherit; text-decoration: none; }
.article-author-box p { margin: 0; color: #62718a !important; font-size: .92rem; line-height: 1.55; opacity: 1 !important; }
.article-author-box__posts { display: inline-block; margin-top: .75rem; color: #0058cc; font-size: .9rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.article-content { overflow-wrap: break-word; font-size: 1.0625rem; line-height: 1.7; }
.article-content > * + * { margin-top: 1.25rem; }
.article-content h2 { margin-top: 3rem; scroll-margin-top: 9rem; font: 700 clamp(1.55rem, 3vw, 1.75rem)/1.18 var(--s4d-font-heading, 'Space Grotesk', sans-serif); }
.article-content h3 { margin-top: 2rem; scroll-margin-top: 9rem; font: 700 1.25rem/1.3 var(--s4d-font-heading, 'Space Grotesk', sans-serif); }
.article-content h4 { margin-top: 1.5rem; font: 600 1.1rem/1.35 var(--s4d-font-heading, 'Space Grotesk', sans-serif); }
.article-content h2 + *, .article-content h3 + *, .article-content h4 + * { margin-top: .75rem; }
.article-content a { color: var(--s4d-primary, #0962d7); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.article-content ul, .article-content ol { padding-left: 1.5rem; }
.article-content li + li { margin-top: .45rem; }
.article-content li::marker { color: var(--s4d-primary, #0962d7); }
.article-content blockquote { margin: 2rem 0; border-left: 4px solid var(--s4d-primary, #0962d7); border-radius: 0 .75rem .75rem 0; background: #f4f8ff; padding: 1rem 1.25rem; font-size: 1.1rem; font-style: italic; }
.article-content blockquote cite { display: block; margin-top: .65rem; color: var(--s4d-muted, #62718a); font-size: .875rem; font-style: normal; font-weight: 700; }
.article-content img { height: auto; max-width: 100%; border-radius: .75rem; }
.article-content figure { margin: 2rem 0; }
.article-content figcaption { margin-top: .55rem; color: var(--s4d-muted, #62718a); font-size: .875rem; text-align: center; }
.article-content hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--s4d-border, #dfe5ec); }
.article-content iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: .75rem; }
.article-content .table-scroll,
.article-content figure.wp-block-table { max-width: 100%; margin: 2rem 0; overflow-x: auto; border: 1px solid #e2e4e9; border-radius: .75rem; background: #fff; }
.article-content .table-scroll table,
.article-content figure.wp-block-table table { width: 100%; min-width: 35rem; margin: 0; border: 0 !important; border-collapse: separate; border-spacing: 0; font-size: .875rem; line-height: 1.25rem; }
.article-content .table-scroll th,
.article-content figure.wp-block-table th { border: 0 !important; border-bottom: 1px solid #e2e4e9 !important; background: #f4f8ff; color: #14181f; font-family: var(--s4d-font-heading, 'Space Grotesk', sans-serif); font-weight: 700; text-align: left; }
.article-content .table-scroll td,
.article-content figure.wp-block-table td { border: 0 !important; border-bottom: 1px solid #e2e4e9 !important; background: #fff; color: #14181f; }
.article-content .table-scroll th,
.article-content .table-scroll td,
.article-content figure.wp-block-table th,
.article-content figure.wp-block-table td { padding: .75rem 1rem; vertical-align: top; }
.article-content .table-scroll tbody tr:last-child td,
.article-content figure.wp-block-table tbody tr:last-child td { border-bottom: 0 !important; }
.article-content .tldr, .article-content .callout-info { border: 1px solid #cddffc; border-radius: .75rem; border-left: 4px solid var(--s4d-primary, #0962d7); background: #f4f8ff; padding: 1.25rem; }
.article-content .callout-warning { border: 1px solid #f2d4a7; border-radius: .75rem; background: #fff8eb; padding: 1.25rem; }
.article-content .tldr p, .article-content [class^="callout"] p { margin: 0; }
.article-quote-form { margin-top: 3rem; scroll-margin-top: 9rem; }
.article-inline-cta { margin-top: 2rem; border-radius: 1rem; background: var(--s4d-primary, #0962d7); color: #fff; padding: 2rem; }
.article-inline-cta h2 { margin: 0; color: #fff !important; font: 700 1.5rem/1.25 var(--s4d-font-heading, 'Space Grotesk', sans-serif); }
.article-inline-cta p { max-width: 42rem; margin: .75rem 0 0; color: rgb(255 255 255 / .9) !important; line-height: 1.5; }
.article-inline-cta .section-eyebrow { color: rgb(255 255 255 / .9) !important; }
.article-inline-cta .home-actions { gap: .75rem; margin-top: 1.5rem; }
.article-inline-cta .button--primary { border-color: #fff !important; background: #fff !important; color: #0058cc !important; }
.article-inline-cta .button--primary:hover { border-color: hsl(216 20% 95%) !important; background: hsl(216 20% 95%) !important; color: #0058cc !important; }
.article-inline-cta .button--outline { border: 2px solid rgb(255 255 255 / .75) !important; background: transparent !important; color: #fff !important; }
.article-inline-cta .button--outline:hover { border-color: #fff !important; background: #fff !important; color: #0058cc !important; }
.article-faq { margin-top: 3rem; }
.article-faq h2 { font: 700 1.7rem/1.2 var(--s4d-font-heading, 'Space Grotesk', sans-serif); }
.article-faq details { border-bottom: 1px solid var(--s4d-border, #dfe5ec); padding: 1rem 0; }
.article-faq summary { cursor: pointer; font-weight: 700; }
.article-faq details > div { color: var(--s4d-muted, #62718a); line-height: 1.6; padding-top: .8rem; }
@media (min-width: 640px) { .blog-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .article-header { padding-top: 3rem; } .article-header h1 { font-size: 2.75rem; } .article-featured-image { padding-bottom: 3rem; } .article-inline-cta { padding: 2.5rem; } .article-inline-cta h2 { font-size: 1.875rem; } }
@media (min-width: 1024px) { .page-hero--blog { padding: 3.5rem 0; } .page-hero--blog h1 { font-size: 3rem; line-height: 3rem; } .blog-archive { padding: 3.5rem 0; } .blog-featured-card { grid-template-columns: repeat(2, minmax(0, 1fr)); } .blog-featured-card__image { min-height: 20rem; aspect-ratio: auto; } .blog-featured-card__body { padding: 2.5rem; } .blog-featured-card__body h2 { font-size: 1.875rem; } .blog-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .article-shell { grid-template-columns: minmax(0, 50rem); max-width: 54rem; } .article-toc--desktop { display: none; } .article-toc--mobile { display: block; } }
@media (max-width: 700px) { .article-header { padding-top: 2.5rem; } .article-shell { padding-top: 1.5rem; } .article-content { font-size: 1rem; } .article-author-box { align-items: flex-start; } }