/**
 * Document Stack / Section / Quote — Gutenberg layout
 * Enqueued when any of these blocks appear (editor + front).
 *
 * One vertical rhythm: main column fills `1fr` up to the margin seam; margin is a
 * fixed track so text, figures, and aside share a clear “stop lane” on the right.
 */
:root {
    --doc-margin-col: 230px;
    --doc-column-gap: 48px;
    /* Margin aside: intentionally close to body size so it stays legible. */
    --doc-aside-font-size: clamp(1rem, 0.94rem + 0.55vw, 1.125rem);
    --doc-aside-line-height: 1.5;
}

.hron-document-stack {
    display: grid;
    /* Children (sections/quotes) span full width; each section owns its own main+margin grid. */
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    box-sizing: border-box;
    width: 100%;
}

.hron-document-stack > .doc-section {
    grid-column: 1 / -1;
}

.hron-document-stack > .doc-quote {
    grid-column: 1 / -1;
    margin-top: 2rem;
}

/* Single column when no keyword; no :has() — .has-margin is set in markup. */
.doc-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    margin-bottom: 3.5rem;
    box-sizing: border-box;
}

/* Two columns only when .has-margin — was missing and broke desktop (single column stacked). */
.doc-section.has-margin {
    grid-template-columns: minmax(0, 1fr) var(--doc-margin-col);
    column-gap: var(--doc-column-gap);
}

.doc-section.has-margin .doc-main {
    grid-column: 1;
    grid-row: 1;
}

.doc-section.has-margin .doc-margin {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
}

.hron-document-stack > .doc-section:last-child {
    margin-bottom: 0;
}

.doc-main {
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-self: stretch;
}

.doc-body {
    min-width: 0;
    width: 100%;
    max-width: none;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
}

/* Headings inside the body stream stay flush-left; body copy stays justified. */
.doc-section .doc-body :is(h1, h2, h3, h4, h5, h6) {
    text-align: start;
    hyphens: manual;
    -webkit-hyphens: manual;
}

.doc-body > *:first-child {
    margin-top: 0;
}

/* Block media align to same measure as body copy (flush with margin seam). */
.doc-body .wp-block-image,
.doc-body .wp-block-gallery,
.doc-body figure {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.doc-body img {
    height: auto !important;
    max-width: 100% !important;
}

.doc-margin {
    font-size: var(--doc-aside-font-size);
    font-weight: 600;
    line-height: var(--doc-aside-line-height);
    color: var(--text-secondary);
    display: flex;
    align-items: flex-start;
    border-left: 1px solid var(--bg-panel);
    padding-left: 24px;
    align-self: start;
    min-width: 0;
}

[data-theme='dark'] .doc-margin {
    color: var(--text-secondary);
    border-left-color: var(--bg-panel);
}

.doc-keyword {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    padding-top: 8px;
    border-top: 1px solid #d0d0d0;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

[data-theme='dark'] .doc-keyword {
    border-top-color: var(--bg-panel);
}

.doc-quote {
    margin-top: 0;
    margin-bottom: 0;
}

.wp-block-reapse-document-quote .wp-block-quote,
.doc-quote .wp-block-quote {
    margin-left: 0;
    margin-right: 0;
}

/* Narrow screens: same reading column — margin note as a compact line under the section (no side column). */
@media (max-width: 900px) {
    .doc-section.has-margin {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 0;
    }

    .doc-section.has-margin .doc-main {
        grid-column: 1;
        grid-row: 1;
    }

    .doc-section.has-margin .doc-margin {
        grid-column: 1;
        grid-row: 2;
        display: block;
        border-left: none;
        padding-left: 0;
        padding-top: 0.45rem;
        margin-top: 0.35rem;
        border-top: 1px solid var(--bg-panel);
        max-width: 65ch;
        align-self: start;
        font-size: var(--doc-aside-font-size);
        font-weight: 600;
        line-height: var(--doc-aside-line-height);
        color: var(--text-secondary);
    }

    [data-theme='dark'] .doc-section.has-margin .doc-margin {
        color: var(--text-secondary);
        border-top-color: var(--bg-panel);
    }

    .doc-section.has-margin .doc-keyword {
        padding-top: 0;
        border-top: none;
        display: inline;
    }

    .hron-document-stack > .doc-quote {
        margin-top: 2rem;
    }
}