/* Shared saved-article blocks: load after the site/editor stylesheet.
   The same surface class is used in the editor, preview and published article.
   Layout is class-based so article sanitization does not need to allow grid CSS. */
.zn-article-surface {
    container-type: inline-size;
    container-name: znarticle;
}

.zn-article-surface :is(.zn-block-callout, .zn-block-columns, .zn-block-media, .zn-block-gallery, .zn-block-quote, .zn-block-divider) {
    box-sizing: border-box;
    max-width: 100%;
    margin-block: 1.6em;
    overflow-wrap: anywhere;
}

.zn-article-surface .zn-block-callout {
    padding: 1.15em 1.35em;
    border: 1px solid #c7dcf4;
    border-inline-start: 4px solid #367abb;
    border-radius: 12px;
    background: #f0f7ff;
    color: #294e72;
    line-height: 1.85;
}
.zn-article-surface .zn-block-callout.zn-tone-info {
    border-color: #c7dcf4;
    border-inline-start-color: #367abb;
    background: #f0f7ff;
    color: #294e72;
}
.zn-article-surface .zn-block-callout.zn-tone-tip {
    border-color: #c2e4d5;
    border-inline-start-color: #288466;
    background: #edf9f3;
    color: #255d49;
}
.zn-article-surface .zn-block-callout.zn-tone-warning {
    border-color: #ead7ad;
    border-inline-start-color: #ae771a;
    background: #fff8e9;
    color: #73501c;
}
.zn-article-surface .zn-block-callout > :is(h2, h3, h4, p):first-child {
    margin-block-start: 0;
}
.zn-article-surface .zn-block-callout > p:first-child { margin-block-end: .35em; }
.zn-article-surface .zn-block-callout > :is(h2, h3, h4, p, ul, ol):last-child {
    margin-block-end: 0;
}
.zn-article-surface .zn-block-callout a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }

.zn-article-surface .zn-block-columns,
.zn-article-surface .zn-block-media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1.5em;
}
.zn-article-surface .zn-block-columns > .zn-block-column,
.zn-article-surface .zn-block-media > .zn-block-copy {
    min-width: 0;
}
.zn-article-surface .zn-block-columns > .zn-block-column {
    padding: 1.15em 1.2em;
    border: 1px solid #e0e8f1;
    border-radius: 12px;
    background: #f9fbfd;
}
.zn-article-surface .zn-block-columns > .zn-block-column > :is(h2, h3, h4, p):first-child,
.zn-article-surface .zn-block-media > .zn-block-copy > :is(h2, h3, h4, p):first-child {
    margin-block-start: 0;
}
.zn-article-surface .zn-block-columns > .zn-block-column > :is(h2, h3, h4, p, ul, ol, figure):last-child,
.zn-article-surface .zn-block-media > .zn-block-copy > :is(h2, h3, h4, p, ul, ol, figure):last-child {
    margin-block-end: 0;
}
.zn-article-surface .zn-block-media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    padding: 1.2em;
    border: 1px solid #e0e8f1;
    border-radius: 16px;
    background: #fff;
}
.zn-article-surface .zn-block-media > figure,
.zn-article-surface .zn-block-gallery > figure {
    min-width: 0;
    max-width: 100%;
    margin: 0;
}
.zn-article-surface .zn-block-media > figure > img,
.zn-article-surface .zn-block-gallery > figure > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}
.zn-article-surface .zn-block-media > figure > figcaption,
.zn-article-surface .zn-block-gallery > figure > figcaption {
    margin-block: .65em 0;
    color: #5c7188;
    font-size: .82em;
    line-height: 1.7;
    text-align: center;
    overflow-wrap: anywhere;
}
.zn-article-surface .zn-block-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 1em;
}
.zn-article-surface .zn-block-gallery:where(:has(> figure:nth-child(2):last-child)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The repeated surface class intentionally matches the editor's existing
   blockquote specificity without !important or overriding author inline styles. */
.zn-article-surface.zn-article-surface blockquote.zn-block-quote {
    margin-inline: 0;
    padding: 1.35em 1.55em;
    border: 0;
    border-inline-start: 4px solid #78a6ce;
    border-radius: 0;
    border-start-end-radius: 14px;
    border-end-end-radius: 14px;
    background: #f4f8fc;
    color: #344f6a;
    font-size: 1.1em;
    line-height: 1.85;
}
.zn-article-surface .zn-block-quote > p:first-child { margin-block-start: 0; }
.zn-article-surface .zn-block-quote > p:last-child { margin-block-end: 0; }
.zn-article-surface .zn-block-quote > cite {
    display: block;
    margin-block-start: .65em;
    color: #5e7389;
    font-size: .82em;
    font-style: normal;
}
.zn-article-surface hr.zn-block-divider {
    display: block;
    width: 100%;
    height: 1px;
    margin-block: 2.5em;
    border: 0;
    background: linear-gradient(90deg, transparent, #bdd2e5 18%, #789fbe 50%, #bdd2e5 82%, transparent);
    overflow: visible;
}

/* Base two/three-column layout works without container query support. */
@supports not (container-type: inline-size) {
    @media (max-width: 900px) {
        .zn-article-surface .zn-block-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 650px) {
        .zn-article-surface .zn-block-columns,
        .zn-article-surface .zn-block-media,
        .zn-article-surface .zn-block-gallery { grid-template-columns: minmax(0, 1fr); }
        .zn-article-surface .zn-block-media { padding: 1em; }
    }
}
@container znarticle (max-width: 780px) {
    .zn-article-surface .zn-block-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container znarticle (max-width: 560px) {
    .zn-article-surface .zn-block-columns,
    .zn-article-surface .zn-block-media,
    .zn-article-surface .zn-block-gallery { grid-template-columns: minmax(0, 1fr); }
    .zn-article-surface .zn-block-columns,
    .zn-article-surface .zn-block-media { gap: 1em; }
    .zn-article-surface .zn-block-media { padding: 1em; }
    .zn-article-surface .zn-block-callout { padding: 1em 1.1em; }
    .zn-article-surface.zn-article-surface blockquote.zn-block-quote { padding: 1em 1.15em; }
}
@media print {
    .zn-article-surface .zn-block-callout,
    .zn-article-surface .zn-block-media,
    .zn-article-surface .zn-block-gallery > figure,
    .zn-article-surface .zn-block-columns > .zn-block-column,
    .zn-article-surface blockquote.zn-block-quote { break-inside: avoid; }
}