/* Shared publication/editor reading geometry. Only non-gallery articles opt in.
   Keep block spacing outside its content and respect saved inline typography. */
.blog-article-content.blog-reading-surface {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 0;
    container-type: inline-size;
    container-name: blog-reader;
    --blog-reading-media-layout: rows;
    --blog-reading-gutter: clamp(16px, 4%, 36px);
    width: min(100%, 900px);
    max-width: 100%;
    padding: 0 var(--blog-reading-gutter);
    color: #242424;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    overflow-wrap: anywhere;
    word-break: normal;
}

.blog-article-content.blog-reading-surface,
.blog-article-content.blog-reading-surface * {
    box-sizing: border-box;
}

/* The site's universal font and paragraph color rules otherwise interrupt
   inheritance inside editor wrappers. Keep local inline font/color choices
   flowing to nested prose; semantic headings, captions and links retain their
   own rules below. Icon and code fonts are deliberately outside this reset. */
.blog-article-content.blog-reading-surface :where(div, p, ul, ol, li, blockquote, cite, figcaption, a, strong, b, em, u, s, span, i:not([class])) {
    font-family: inherit;
    color: inherit;
}

.blog-article-content.blog-reading-surface .blog-content-block {
    --blog-block-space-before: 0px;
    --blog-block-space-after: 24px;
    min-width: 0;
    max-width: 100%;
    margin-top: var(--blog-block-space-before);
    margin-bottom: var(--blog-block-space-after);
}

.blog-article-content.blog-reading-surface .blog-content-block--full { grid-column: span 12; }
.blog-article-content.blog-reading-surface .blog-content-block--half { grid-column: span 6; }
.blog-article-content.blog-reading-surface .blog-content-block--third { grid-column: span 4; }
.blog-article-content.blog-reading-surface .blog-content-block--two-thirds { grid-column: span 8; }
.blog-article-content.blog-reading-surface .blog-content-block--quarter { grid-column: span 3; }
.blog-article-content.blog-reading-surface .blog-content-block--three-quarters { grid-column: span 9; }

/* Prose, pictures and captions use the same inset area of the 900px cover.
   Saved fractional block widths and explicit inline widths still apply. */
.blog-article-content.blog-reading-surface > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, .blog-text-block, .blog-subtitle, .blog-list, .blog-quote, .blog-caption),
.blog-article-content.blog-reading-surface .blog-content-block > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, .blog-text-block, .blog-subtitle, .blog-list, .blog-quote, .blog-caption) {
    width: 100%;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.blog-article-content.blog-reading-surface p {
    margin-top: 0;
    margin-bottom: 1em;
    line-height: inherit;
}

.blog-article-content.blog-reading-surface :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 40px;
    margin-bottom: 20px;
    color: #171717;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
}

.blog-article-content.blog-reading-surface h1 { font-size: 28px; }
.blog-article-content.blog-reading-surface h2 { font-size: 24px; }
.blog-article-content.blog-reading-surface h3 { font-size: 22px; }
.blog-article-content.blog-reading-surface h4 { font-size: 20px; }
.blog-article-content.blog-reading-surface :is(h5, h6) { font-size: 18px; }

.blog-article-content.blog-reading-surface .blog-subtitle {
    color: #56616a;
    line-height: 1.5;
}

.blog-article-content.blog-reading-surface a:not(.blog-button):not(.blog-download) {
    color: #285b73;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.blog-article-content.blog-reading-surface figcaption {
    width: 100%;
    max-width: 100%;
    margin: 12px auto 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

/* Explicit block gaps, including the first/last block, are authoritative.
   Content margins may separate paragraphs within a block, never add a hidden
   outer gap on top of the editor's spacing controls. */
.blog-article-content.blog-reading-surface .blog-content-block > :first-child,
.blog-article-content.blog-reading-surface .blog-content-block > .blog-protected-html > :first-child {
    margin-top: 0;
}

.blog-article-content.blog-reading-surface .blog-content-block > :last-child,
.blog-article-content.blog-reading-surface .blog-content-block > .blog-protected-html > :last-child {
    margin-bottom: 0;
}

/* Legacy photo rows retain their saved desktop cell sizes. These rules are
   shared with editor preview, which does not load the publication stylesheet.
   Clamp cells before their saved inline widths can escape a narrow article. */
.blog-article-content.blog-reading-surface .image-grid-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.blog-article-content.blog-reading-surface .image-grid-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.blog-article-content.blog-reading-surface .image-grid-cell {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.blog-article-content.blog-reading-surface .image-grid-cell img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Saved pixel dimensions describe a desktop row, not a mobile crop. The
   named query also stacks a narrow editor preview on a wide desktop window. */
@container blog-reader (max-width: 767px) {
    .blog-article-content.blog-reading-surface .image-grid-row {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-article-content.blog-reading-surface .image-grid-cell {
        flex: 0 0 auto;
        width: 100% !important;
        height: auto !important;
    }
}

/* Keep the existing legacy mobile breakpoint as a no-container-query fallback. */
@media (max-width: 767px) {
    .blog-article-content.blog-reading-surface .image-grid-row {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-article-content.blog-reading-surface .image-grid-cell {
        flex: 0 0 auto;
        width: 100% !important;
        height: auto !important;
    }
}

/* Keep the scrollbar outside the simulated article width. Other editor
   contexts retain their original grid child through display: contents. */
.blog-preview-scroll {
    display: contents;
}

.blog-editor-form[data-editor-publication-context="blog"] .blog-preview-scroll {
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

/* Preview represents a device viewport with 16px page gutters outside the
   article. A 932px preview therefore contains the same 900px article as the
   publication. Subtract 32px * 4% from the fluid inner gutter so both views
   use identical content widths (900 -> 828px, 358 -> 326px). */
.blog-preview-panel .blog-article-content.blog-reading-surface {
    --blog-preview-page-gutter: 16px;
    --blog-reading-gutter: clamp(16px, calc(4% - 1.28px), 36px);
    overflow: visible;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 20px;
    width: 100%;
    max-width: 932px;
    margin: 0 auto;
    padding: 24px calc(var(--blog-preview-page-gutter) + var(--blog-reading-gutter));
    font-size: 16px;
    line-height: 1.7;
}

@container (max-width: 639px) {
    .blog-article-content.blog-reading-surface .blog-content-block {
        grid-column: 1 / -1;
    }

    .blog-article-content.blog-reading-surface h2 { font-size: 22px; }
}

@media (max-width: 639px) {
    /* All blocks stack here. Unused twelve-column gaps must not impose a
       220px minimum on the narrowest editor phone preview. */
    .blog-article-content.blog-reading-surface,
    .blog-preview-panel .blog-article-content.blog-reading-surface {
        column-gap: 0;
    }

    .blog-article-content.blog-reading-surface .blog-content-block {
        grid-column: 1 / -1;
    }

    .blog-article-content.blog-reading-surface h2 { font-size: 22px; }
}

.blog-article-content.blog-reading-surface .blog-content-block:is(.blog-block-space-before--none, [data-blog-space-before="none"]),
form[data-editor-publication-context="blog"] .blog-builder-block:is(.blog-block-space-before--none, [data-blog-space-before="none"]) {
    --blog-block-space-before: 0px;
}

.blog-article-content.blog-reading-surface .blog-content-block:is(.blog-block-space-before--micro, [data-blog-space-before="micro"]),
form[data-editor-publication-context="blog"] .blog-builder-block:is(.blog-block-space-before--micro, [data-blog-space-before="micro"]) {
    --blog-block-space-before: 3px;
}

.blog-article-content.blog-reading-surface .blog-content-block:is(.blog-block-space-before--tiny, [data-blog-space-before="tiny"]),
form[data-editor-publication-context="blog"] .blog-builder-block:is(.blog-block-space-before--tiny, [data-blog-space-before="tiny"]) {
    --blog-block-space-before: 6px;
}

.blog-article-content.blog-reading-surface .blog-content-block:is(.blog-block-space-before--small, [data-blog-space-before="small"]),
form[data-editor-publication-context="blog"] .blog-builder-block:is(.blog-block-space-before--small, [data-blog-space-before="small"]) {
    --blog-block-space-before: 12px;
}

.blog-article-content.blog-reading-surface .blog-content-block:is(.blog-block-space-before--medium, [data-blog-space-before="medium"]),
form[data-editor-publication-context="blog"] .blog-builder-block:is(.blog-block-space-before--medium, [data-blog-space-before="medium"]) {
    --blog-block-space-before: 24px;
}

.blog-article-content.blog-reading-surface .blog-content-block:is(.blog-block-space-before--large, [data-blog-space-before="large"]),
form[data-editor-publication-context="blog"] .blog-builder-block:is(.blog-block-space-before--large, [data-blog-space-before="large"]) {
    --blog-block-space-before: 40px;
}

.blog-article-content.blog-reading-surface .blog-content-block:is(.blog-block-space-before--xlarge, [data-blog-space-before="xlarge"]),
form[data-editor-publication-context="blog"] .blog-builder-block:is(.blog-block-space-before--xlarge, [data-blog-space-before="xlarge"]) {
    --blog-block-space-before: 64px;
}

.blog-article-content.blog-reading-surface .blog-content-block:is(.blog-block-space-after--none, [data-blog-space-after="none"]),
form[data-editor-publication-context="blog"] .blog-builder-block:is(.blog-block-space-after--none, [data-blog-space-after="none"]) {
    --blog-block-space-after: 0px;
}

.blog-article-content.blog-reading-surface .blog-content-block:is(.blog-block-space-after--micro, [data-blog-space-after="micro"]),
form[data-editor-publication-context="blog"] .blog-builder-block:is(.blog-block-space-after--micro, [data-blog-space-after="micro"]) {
    --blog-block-space-after: 3px;
}

.blog-article-content.blog-reading-surface .blog-content-block:is(.blog-block-space-after--tiny, [data-blog-space-after="tiny"]),
form[data-editor-publication-context="blog"] .blog-builder-block:is(.blog-block-space-after--tiny, [data-blog-space-after="tiny"]) {
    --blog-block-space-after: 6px;
}

.blog-article-content.blog-reading-surface .blog-content-block:is(.blog-block-space-after--small, [data-blog-space-after="small"]),
form[data-editor-publication-context="blog"] .blog-builder-block:is(.blog-block-space-after--small, [data-blog-space-after="small"]) {
    --blog-block-space-after: 12px;
}

.blog-article-content.blog-reading-surface .blog-content-block:is(.blog-block-space-after--medium, [data-blog-space-after="medium"]),
form[data-editor-publication-context="blog"] .blog-builder-block:is(.blog-block-space-after--medium, [data-blog-space-after="medium"]) {
    --blog-block-space-after: 24px;
}

.blog-article-content.blog-reading-surface .blog-content-block:is(.blog-block-space-after--large, [data-blog-space-after="large"]),
form[data-editor-publication-context="blog"] .blog-builder-block:is(.blog-block-space-after--large, [data-blog-space-after="large"]) {
    --blog-block-space-after: 40px;
}

.blog-article-content.blog-reading-surface .blog-content-block:is(.blog-block-space-after--xlarge, [data-blog-space-after="xlarge"]),
form[data-editor-publication-context="blog"] .blog-builder-block:is(.blog-block-space-after--xlarge, [data-blog-space-after="xlarge"]) {
    --blog-block-space-after: 64px;
}

/* A view-only row shares media and caption tracks, without cropping either
   picture. The saved column widths and gaps remain on the original blocks. */
.blog-article-content.blog-reading-surface > .blog-media-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 0;
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: var(--blog-media-row-before, 0px);
    margin-bottom: var(--blog-media-row-after, 24px);
}

.blog-article-content.blog-reading-surface > .blog-media-row--with-captions {
    row-gap: 12px;
}

.blog-article-content.blog-reading-surface > .blog-media-row > .blog-content-block {
    /* Inline-size containment on legacy blocks prevents their subgrid rows
       from contributing intrinsic image heights to the shared parent tracks. */
    container-type: normal;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    margin-top: 0;
    margin-bottom: 0;
}

.blog-article-content.blog-reading-surface .blog-media-row .blog-image {
    display: contents;
}

.blog-article-content.blog-reading-surface .blog-media-row .blog-image > :not(figcaption) {
    grid-row: 1;
    align-self: end;
    min-width: 0;
}

.blog-article-content.blog-reading-surface .blog-media-row .blog-image > :is(.blog-image-media, picture, a) {
    display: flex;
    align-items: flex-end;
    align-self: stretch;
    min-width: 0;
}

.blog-article-content.blog-reading-surface .blog-media-row .blog-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.blog-article-content.blog-reading-surface .blog-media-row figcaption {
    grid-row: 2;
    align-self: start;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

/* Named queries use the article width, not a narrow image block container. */
@container blog-reader (max-width: 639px) {

    .blog-article-content.blog-reading-surface > .blog-media-row {
        display: contents;
    }

    .blog-article-content.blog-reading-surface > .blog-media-row > .blog-content-block {
        container-type: inline-size;
        display: block;
        grid-row: auto;
        grid-template-rows: none;
        margin-top: var(--blog-block-space-before, 0px);
        margin-bottom: var(--blog-block-space-after, 24px);
    }

    .blog-article-content.blog-reading-surface .blog-media-row .blog-image,
    .blog-article-content.blog-reading-surface .blog-media-row .blog-image > :is(.blog-image-media, picture, a) {
        display: block;
    }

    .blog-article-content.blog-reading-surface .blog-media-row figcaption {
        margin-top: 12px;
    }
}

@media (max-width: 639px) {

    .blog-article-content.blog-reading-surface > .blog-media-row {
        display: contents;
    }

    .blog-article-content.blog-reading-surface > .blog-media-row > .blog-content-block {
        container-type: inline-size;
        display: block;
        grid-row: auto;
        grid-template-rows: none;
        margin-top: var(--blog-block-space-before, 0px);
        margin-bottom: var(--blog-block-space-after, 24px);
    }

    .blog-article-content.blog-reading-surface .blog-media-row .blog-image,
    .blog-article-content.blog-reading-surface .blog-media-row .blog-image > :is(.blog-image-media, picture, a) {
        display: block;
    }

    .blog-article-content.blog-reading-surface .blog-media-row figcaption {
        margin-top: 12px;
    }
}