/* assets/blog.css — the blog: article pages, the post list and the editor's content area.
   Everything is scoped under .ss-blog or .ss-article, so it cannot change any other page. The admin editor loads this
   same file inside its editing frame (body class ss-article), so what is typed looks like what is published. */

.ss-blog { --ss-blog-ink: #1b2733; --ss-blog-muted: #5b6b7a; --ss-blog-line: #dfe7ee; --ss-blog-accent: #0b6fa4; --ss-blog-soft: #f1f7fb; }

/* ---------- Article page ---------- */
.ss-blog-article { max-width: 760px; margin: 0 auto; padding: 1.25rem 0 3rem; }
.ss-blog-crumbs { margin: 0 0 1rem; font-size: .875rem; color: var(--ss-blog-muted); }
.ss-blog-crumbs a { color: var(--ss-blog-muted); text-decoration: none; }
.ss-blog-crumbs a:hover { text-decoration: underline; }
.ss-blog-title { margin: 0 0 .75rem; font-size: clamp(1.9rem, 4.2vw, 2.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--ss-blog-ink); }
.ss-blog-meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: 0 0 1.25rem; font-size: .9rem; color: var(--ss-blog-muted); }
.ss-blog-meta span + span::before { content: "·"; margin-right: .9rem; color: #a6b4c0; }
.ss-blog-lead { margin: 0 0 1.5rem; font-size: 1.2rem; line-height: 1.6; color: #34475a; }
.ss-blog-cover { margin: 0 0 1.75rem; }
.ss-blog-cover img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 1rem; background: var(--ss-blog-soft); }
.ss-blog-preview-bar { margin: 0 0 1.25rem; padding: .75rem 1rem; border: 1px solid #f3c969; border-radius: .75rem; background: #fff8e1; color: #6b4e00; font-size: .925rem; }
.ss-blog-preview-bar a { color: #6b4e00; font-weight: 600; }

/* Table of contents */
.ss-toc { margin: 0 0 2rem; padding: 1rem 1.25rem; border: 1px solid var(--ss-blog-line); border-radius: .85rem; background: var(--ss-blog-soft); overflow-wrap: break-word; }
.ss-toc-title { margin: 0 0 .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-blog-muted); }
.ss-toc ol { margin: 0; padding-left: 1.2rem; }
.ss-toc li { margin: .15rem 0; }
.ss-toc ul { margin: .15rem 0 .35rem; padding-left: 1.1rem; list-style-type: circle; font-size: .95em; }
.ss-toc a { color: var(--ss-blog-accent); text-decoration: none; }
.ss-toc a:hover { text-decoration: underline; }

/* ---------- The text of a post (also the editor's content area) ---------- */
.ss-article { font-size: 1.125rem; line-height: 1.75; color: var(--ss-blog-ink, #1b2733); overflow-wrap: break-word; }
.ss-article > :first-child { margin-top: 0; }
.ss-article p { margin: 0 0 1.15em; }
.ss-article h2, .ss-article h3, .ss-article h4 { margin: 2em 0 .6em; font-weight: 750; line-height: 1.25; letter-spacing: -.01em; scroll-margin-top: 90px; }
.ss-article h2 { font-size: 1.6rem; }
.ss-article h3 { font-size: 1.3rem; }
.ss-article h4 { font-size: 1.1rem; }
.ss-article a { color: #0b6fa4; text-decoration: underline; text-underline-offset: .18em; }
.ss-article a:hover { color: #08507a; }
.ss-article ul, .ss-article ol { margin: 0 0 1.15em; padding-left: 1.5em; }
.ss-article li { margin: .3em 0; }
.ss-article blockquote { margin: 1.5em 0; padding: .4em 0 .4em 1.1em; border-left: 4px solid #4cb3d9; color: #34475a; font-style: italic; }
.ss-article blockquote p:last-child { margin-bottom: 0; }
.ss-article hr { margin: 2em 0; border: 0; border-top: 1px solid var(--ss-blog-line, #dfe7ee); }
.ss-article code { padding: .1em .35em; border-radius: .3rem; background: #eef3f7; font-size: .9em; }
.ss-article pre { margin: 0 0 1.15em; padding: 1rem; overflow-x: auto; border-radius: .6rem; background: #0f2233; color: #e6f1f8; font-size: .9rem; line-height: 1.55; }
.ss-article pre code { padding: 0; background: none; color: inherit; }
.ss-article img { max-width: 100%; height: auto; border-radius: .75rem; }
.ss-article figure { margin: 1.6em 0; }
.ss-article figure img { display: block; margin: 0 auto; }
.ss-article figcaption { margin-top: .5rem; font-size: .9rem; line-height: 1.45; color: var(--ss-blog-muted, #5b6b7a); text-align: center; }
.ss-article .ss-align-center, .ss-article .align-center { text-align: center; }
.ss-article img.ss-align-center, .ss-article img.align-center { display: block; margin-left: auto; margin-right: auto; }
.ss-article .ss-align-left, .ss-article .align-left { text-align: left; }
.ss-article img.ss-align-left, .ss-article img.align-left, .ss-article figure.ss-align-left, .ss-article figure.align-left { float: left; max-width: 48%; margin: .3em 1.4em 1em 0; }
.ss-article .ss-align-right, .ss-article .align-right { text-align: right; }
.ss-article img.ss-align-right, .ss-article img.align-right, .ss-article figure.ss-align-right, .ss-article figure.align-right { float: right; max-width: 48%; margin: .3em 0 1em 1.4em; }
.ss-article .ss-lead { font-size: 1.25rem; line-height: 1.6; color: #34475a; }
.ss-article .ss-wide { margin-left: -1rem; margin-right: -1rem; }
@media (min-width: 900px) { .ss-article .ss-wide { margin-left: -4rem; margin-right: -4rem; } }
@media (max-width: 575.98px) {
    .ss-article img.ss-align-left, .ss-article img.align-left, .ss-article figure.ss-align-left, .ss-article figure.align-left,
    .ss-article img.ss-align-right, .ss-article img.align-right, .ss-article figure.ss-align-right, .ss-article figure.align-right { float: none; max-width: 100%; margin: 1em auto; }
}

/* Tables */
.ss-article .ss-table-wrap { margin: 0 0 1.4em; overflow-x: auto; }
.ss-article table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.ss-article th, .ss-article td { padding: .55rem .75rem; border: 1px solid var(--ss-blog-line, #dfe7ee); vertical-align: top; text-align: left; }
.ss-article th { background: var(--ss-blog-soft, #f1f7fb); font-weight: 650; }
.ss-article table.table-striped tbody tr:nth-child(even) { background: #f7fafc; }

/* Callouts */
.ss-article .ss-callout { margin: 1.5em 0; padding: 1rem 1.15rem; border: 1px solid #cfe3ee; border-left: 5px solid #4cb3d9; border-radius: .7rem; background: #f1f9fd; }
.ss-article .ss-callout > :last-child { margin-bottom: 0; }
.ss-article .ss-callout-tip { border-color: #cfe9d9; border-left-color: #34a26a; background: #f1faf5; }
.ss-article .ss-callout-warning { border-color: #f3dcb0; border-left-color: #e0a100; background: #fff8e6; }

/* Videos: a placeholder with a play button until the visitor clicks; no request to the video service before that. */
.ss-article .ss-video-embed { margin: 1.6em 0; }
.ss-article .ss-video-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .9rem; background: linear-gradient(135deg, #082640 0%, #0a4468 55%, #0a5a6e 100%); }
.ss-article .ss-video-stage iframe, .ss-article .ss-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; }
.ss-article .ss-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; border: 0; background: transparent; cursor: pointer; }
.ss-article .ss-video-play-icon { display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 6px 22px rgba(0, 0, 0, .35); transition: transform .15s ease; }
.ss-article .ss-video-play-icon::before { content: ""; margin-left: .35rem; border-style: solid; border-width: .85rem 0 .85rem 1.4rem; border-color: transparent transparent transparent #0a4468; }
.ss-article .ss-video-play:hover .ss-video-play-icon, .ss-article .ss-video-play:focus-visible .ss-video-play-icon { transform: scale(1.08); }
.ss-article .ss-video-play:focus-visible { outline: 3px solid #4cb3d9; outline-offset: -3px; }
.ss-article .ss-video-link { display: inline-block; margin-top: .45rem; font-size: .875rem; color: var(--ss-blog-muted, #5b6b7a); }
.ss-article .ss-video-own { margin: 1.6em 0; }
.ss-article .ss-video-own video { display: block; width: 100%; height: auto; border-radius: .9rem; background: #0f2233; }

/* The editor's content area: a video placeholder is drawn as a box, since the player only exists on the page. */
.ss-article div.ss-video[data-video-id] { margin: 1.4em 0; padding: 1.1rem 1.2rem 1.1rem 4.2rem; position: relative; min-height: 3.6rem; border: 2px dashed #4cb3d9; border-radius: .8rem; background: #f1f9fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a4468'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-2 14.5v-9l7 4.5-7 4.5z'/%3E%3C/svg%3E") no-repeat 1rem center / 2.3rem; color: #0a4468; font-size: .95rem; }

/* ---------- Post list (the blog index) ---------- */
.ss-blog-index { max-width: 1040px; margin: 0 auto; padding: 1.25rem 0 3rem; }
.ss-blog-index-head { margin: 0 0 1.5rem; }
.ss-blog-index-head h1 { margin: 0 0 .4rem; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; }
.ss-blog-index-head p { margin: 0; max-width: 40rem; color: var(--ss-blog-muted); font-size: 1.1rem; }
.ss-blog-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr)); }
.ss-blog-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ss-blog-line); border-radius: 1rem; background: #fff; color: inherit; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.ss-blog-card:hover { box-shadow: 0 10px 28px rgba(8, 38, 64, .12); transform: translateY(-2px); color: inherit; }
.ss-blog-card-img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; background: linear-gradient(135deg, #082640 0%, #0a5a6e 100%); }
.ss-blog-card-body { display: flex; flex: 1; flex-direction: column; padding: 1rem 1.15rem 1.15rem; }
.ss-blog-card h2 { margin: 0 0 .4rem; font-size: 1.2rem; font-weight: 750; line-height: 1.3; }
.ss-blog-card p { margin: 0 0 .8rem; color: #41566a; font-size: .95rem; line-height: 1.55; }
.ss-blog-card-meta { margin-top: auto; font-size: .82rem; color: var(--ss-blog-muted); }
.ss-blog-pager { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; }
.ss-blog-more { margin-top: 2.5rem; padding: 1.25rem 1.4rem; border-radius: 1rem; background: var(--ss-blog-soft); }
.ss-blog-more h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.ss-blog-more ul { margin: 0; padding-left: 1.2rem; }

/* "More from the blog" under an article */
.ss-blog-related { padding: 0 0 3rem; }
.ss-blog-related h2 { margin: 0 0 1rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.ss-blog-related .ss-blog-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.1rem; }