/* Storefront styles for the blocks the blog editor adds. Colours and fonts are the ones the site already uses
   (biolabs_style.css variables, with the same literal fallbacks the static articles carry). Everything lives
   under .article-body so the stylesheet cannot touch the shell around the article. */

/* Headings the static articles style only down to h3; anchors from the table of contents clear the sticky bar. */
.article-body h2, .article-body h3, .article-body h4 { scroll-margin-top: 96px; }
.article-body h4 { font-size: 17px; font-weight: 600; color: var(--ink, #1F1F1F); margin: 24px 0 8px; line-height: 1.4; }

/* Text alignment (left is the default and writes no class). */
.article-body .blog-ta-center { text-align: center; }
.article-body .blog-ta-right { text-align: right; }

/* Inline marks and simple blocks. */
.article-body mark { background: #F7E7B4; color: var(--ink, #1F1F1F); padding: 0 .2em; border-radius: 3px; }
.article-body sub, .article-body sup { font-size: .75em; line-height: 0; }
.article-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--bg-warm, #F5F2ED); padding: .1em .35em; border-radius: 4px; overflow-wrap: anywhere; }
.article-body blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--bronze, #9A6D2A); font-family: var(--font-logo, 'Fraunces', Georgia, serif); font-style: italic; font-size: 1.08em; color: var(--ink, #1F1F1F); }
.article-body blockquote > :last-child { margin-bottom: 0; }
.article-body hr { border: 0; border-top: 1px solid var(--border-light, #E8E2D8); margin: 40px 0; }
.article-body .table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

/* Figures. */
.article-body .blog-figure { display: block; margin: 32px auto; max-width: 100%; }
.article-body .blog-figure a { display: block; }
.article-body .blog-figure img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm, 12px); }
.article-body .blog-w-auto { width: fit-content; }
.article-body .blog-w-25 { width: 25%; }
.article-body .blog-w-33 { width: 33.333%; }
.article-body .blog-w-50 { width: 50%; }
.article-body .blog-w-66 { width: 66.667%; }
.article-body .blog-w-75 { width: 75%; }
.article-body .blog-w-100 { width: 100%; }
.article-body .blog-w-25 img, .article-body .blog-w-33 img, .article-body .blog-w-50 img, .article-body .blog-w-66 img, .article-body .blog-w-75 img, .article-body .blog-w-100 img { width: 100%; }
.article-body .blog-a-left { margin-left: 0; margin-right: auto; }
.article-body .blog-a-center { margin-left: auto; margin-right: auto; }
.article-body .blog-a-right { margin-left: auto; margin-right: 0; }
.article-body figcaption { font-size: 13px; line-height: 1.5; color: var(--ink-muted, #8A8A8A); text-align: center; margin: 8px 0 0; padding: 0 8px; }

/* Uploaded video. */
.article-body .blog-video { margin: 32px 0; }
.article-body .blog-video video { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: auto 16 / 9; border-radius: var(--radius-sm, 12px); background: #1F1F1F; }

/* Click-to-load embed: a dark 16:9 tile with a play mark; blog.js swaps it for the player. */
.article-body .blog-embed { margin: 32px 0; }
.article-body .blog-embed-btn { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--radius-sm, 12px); overflow: hidden; background: #1F1F1F; cursor: pointer; }
.article-body .blog-embed-btn img { position: absolute; top: 0; left: 0; width: 100%; max-width: 100%; height: 100%; object-fit: cover; }
.article-body .blog-embed-btn:hover img { opacity: .9; }
.article-body .blog-embed-btn:focus-visible { outline: 3px solid var(--bronze, #9A6D2A); outline-offset: 3px; }
.article-body .blog-embed-play { position: absolute; top: 50%; left: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 16px rgba(0, 0, 0, .35); }
.article-body .blog-embed-play::before { content: ""; position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -7px; border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent var(--ink, #1F1F1F); }
.article-body .blog-embed-btn:hover .blog-embed-play { background: #fff; }
.article-body .blog-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-sm, 12px); background: #1F1F1F; }

/* Callouts. */
.article-body .blog-callout { margin: 28px 0; padding: 16px 20px; border: 1px solid var(--border-light, #E8E2D8); border-left: 4px solid var(--bronze, #9A6D2A); border-radius: var(--radius-sm, 12px); background: var(--bg-warm, #F5F2ED); font-size: 16px; line-height: 1.7; color: var(--ink-soft, #4A4A4A); }
.article-body .blog-callout > :last-child { margin-bottom: 0; }
.article-body .blog-callout ul, .article-body .blog-callout ol { margin-bottom: 12px; }
.article-body .blog-callout-note { border-left-color: var(--bronze, #9A6D2A); }
.article-body .blog-callout-warning { background: #FFF9E6; border-color: #E8DFA8; border-left-color: #C98A00; }
.article-body .blog-callout-tip { background: #EEF5EC; border-color: #CFE0C8; border-left-color: #4C8A3F; }

/* FAQ. */
.article-body .blog-faq { margin: 28px 0; border: 1px solid var(--border-light, #E8E2D8); border-radius: var(--radius-sm, 12px); overflow: hidden; }
.article-body .blog-faq details { border-top: 1px solid var(--border-light, #E8E2D8); }
.article-body .blog-faq details:first-child { border-top: 0; }
.article-body .blog-faq summary { position: relative; padding: 16px 52px 16px 20px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink, #1F1F1F); line-height: 1.5; }
.article-body .blog-faq summary::-webkit-details-marker { display: none; }
.article-body .blog-faq summary::after { content: "+"; position: absolute; right: 20px; top: 14px; font-size: 22px; font-weight: 400; line-height: 1.4; color: var(--bronze, #9A6D2A); }
.article-body .blog-faq details[open] summary::after { content: "\2212"; }
.article-body .blog-faq details[open] summary { background: var(--bg-warm, #F5F2ED); }
.article-body .blog-faq summary:focus-visible { outline: 3px solid var(--bronze, #9A6D2A); outline-offset: -3px; }
.article-body .blog-faq details > :not(summary) { padding-left: 20px; padding-right: 20px; }
.article-body .blog-faq details > summary + * { margin-top: 16px; }
.article-body .blog-faq details > :last-child { margin-bottom: 18px; }

/* Button. */
.article-body .blog-btn-wrap { text-align: center; margin: 32px 0; }
.article-body a.blog-btn { display: inline-block; background: var(--ink, #1F1F1F); color: #fff; padding: 14px 32px; border-radius: var(--radius-pill, 999px); font-weight: 600; font-size: 15px; line-height: 1.4; text-decoration: none; }
.article-body a.blog-btn:hover { opacity: .88; }
.article-body a.blog-btn:focus-visible { outline: 3px solid var(--bronze, #9A6D2A); outline-offset: 3px; }

/* Table of contents. */
.article-body .blog-toc { background: var(--bg-warm, #F5F2ED); border: 1px solid var(--border-light, #E8E2D8); border-radius: var(--radius-sm, 12px); padding: 18px 22px; margin: 24px 0 32px; }
.article-body .blog-toc::before { content: "Contents"; display: block; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink, #1F1F1F); margin-bottom: 10px; }
.article-body .blog-toc ol { margin: 0 0 0 18px; padding: 0; }
.article-body .blog-toc li { margin: 6px 0; font-size: 15px; line-height: 1.5; }
.article-body .blog-toc a { color: var(--bronze, #9A6D2A); font-weight: 500; text-decoration: none; }
.article-body .blog-toc a:hover { text-decoration: underline; }
.article-body .blog-toc-l3 { margin-left: 18px; list-style: circle; font-size: 14px; }

/* Phones: figures with a set width fill the column whatever width the author picked. */
@media (max-width: 639px) {
  .article-body .blog-w-25, .article-body .blog-w-33, .article-body .blog-w-50, .article-body .blog-w-66, .article-body .blog-w-75, .article-body .blog-w-100 { width: 100%; }
  .article-body .blog-w-25 img, .article-body .blog-w-33 img, .article-body .blog-w-50 img, .article-body .blog-w-66 img, .article-body .blog-w-75 img, .article-body .blog-w-100 img { width: 100%; }
  /* "auto" is the author's wish for the image's own size: a small image is not stretched, and sits in the middle. */
  .article-body .blog-w-auto { margin-left: auto; margin-right: auto; }
  .article-body .blog-callout { padding: 14px 16px; }
  .article-body .blog-faq summary { padding-left: 16px; }
  .article-body .blog-faq details > :not(summary) { padding-left: 16px; padding-right: 16px; }
}