/* ghostwriter content: the reading column and everything the editor can produce.
   .post-content is a grid. Everything sits in the "main" column; wide and full cards break out.
   Ghost's own card CSS (cards.min.css) provides each card's structure; this file sets type and color. */

.post-content {
    --gutter: var(--page-gutter);
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--gutter), 1fr)
        [wide-start] minmax(0, var(--wide-extra))
        [main-start] min(var(--measure), 100% - 2 * var(--gutter))
        [main-end] minmax(0, var(--wide-extra))
        [wide-end] minmax(var(--gutter), 1fr)
        [full-end];
    font-size: 1em;
    font-weight: var(--prose-weight);
}

.post-content > * { grid-column: main; min-width: 0; margin-block: 0; }
.post-content > * + * { margin-top: 1.3em; }
.post-content > .kg-width-wide { grid-column: wide; }
.post-content > .kg-width-full { grid-column: full; }

/* ---------- Text ---------- */

.post-content h2, .post-content h3, .post-content h4 { margin-top: 2em; line-height: var(--heading-leading); }
.post-content h2 + *, .post-content h3 + *, .post-content h4 + * { margin-top: 0.7em; }
.post-content h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); }
.post-content h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); }
.post-content h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); font-style: italic; }

.post-content :is(p, li, dd) { text-align: var(--prose-align); hyphens: var(--prose-hyphens); }

.post-content :is(p, li, blockquote, dd, td, .kg-callout-text) a { font-weight: var(--link-weight); }

.post-content strong { font-weight: var(--strong-weight); }
.post-content mark { background: color-mix(in srgb, var(--ghost-accent-color) 25%, transparent); color: inherit; padding: 0 0.15em; }
.post-content small { font-size: 0.85em; }

.post-content ul, .post-content ol { padding-left: 1.4em; }
.post-content li + li { margin-top: 0.4em; }
.post-content li > ul, .post-content li > ol { margin-top: 0.4em; }

.post-content blockquote {
    margin-inline: 0;
    padding-left: 1.25em;
    border-left: 2px solid var(--accent-ink);
    font-style: italic;
    color: var(--muted);
}
.post-content blockquote p + p { margin-top: 0.8em; }

.post-content hr {
    grid-column: main;
    width: 100%;
    margin-block: 2.5em;
    border: 0;
    border-top: 1px solid var(--rule);
}

/* Drop cap: the Manuscript style gives every post one. Two lines tall.
   Browsers with initial-letter (Safari needs the -webkit- name) size it exactly; others get a float. */
.style-manuscript .post-content > p:first-of-type::first-letter {
    font-family: var(--font-title);
    font-weight: var(--title-weight);
}

@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
    .style-manuscript .post-content > p:first-of-type::first-letter {
        -webkit-initial-letter: 2;
        initial-letter: 2;
        margin-right: 0.1em;
    }
}

@supports not ((initial-letter: 2) or (-webkit-initial-letter: 2)) {
    .style-manuscript .post-content > p:first-of-type::first-letter {
        float: left;
        font-size: 3.3em;
        line-height: 0.8;
        padding: 0.03em 0.1em 0 0;
    }
}

/* ---------- Code ---------- */

.post-content code, .post-content kbd, .post-content samp {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--surface);
    padding: 0.12em 0.38em;
    border-radius: calc(var(--radius-box) / 2);
}

.post-content pre {
    overflow-x: auto;
    padding: 1.1em 1.25em;
    background: var(--surface);
    border-radius: var(--radius-box);
    font-size: 0.85em;
    line-height: 1.55;
    tab-size: 4;
}
.post-content pre code { background: none; padding: 0; font-size: 1em; }

/* ---------- Tables ---------- */

.post-content table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    font-family: var(--font-ui);
    font-size: 0.9em;
}
.post-content th, .post-content td { padding: 0.55em 0.9em; border-bottom: 1px solid var(--rule); text-align: left; }
.post-content th { font-weight: 600; border-bottom-color: var(--muted); }

/* ---------- Images, captions, embeds ---------- */

.post-content figure { margin-inline: 0; }
.post-content figure img { margin-inline: auto; }
.post-content figcaption {
    margin-top: 0.6em;
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--muted);
    text-align: center;
}
.post-content figcaption a { color: inherit; }

.post-content .kg-width-full img { width: 100%; }
.post-content .kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.post-content iframe { max-width: 100%; border: 0; }

/* ---------- Card overrides (structure comes from cards.min.css) ---------- */

.post-content :is(.kg-bookmark-card, .kg-file-card, .kg-audio-card, .kg-product-card) {
    font-family: var(--font-ui);
    color: var(--fg);
}
.post-content .kg-bookmark-container { color: inherit; text-decoration: none; background: var(--bg); border-color: var(--rule); }
.post-content .kg-bookmark-title { font-family: var(--font-heading); font-weight: var(--h3-weight); }
.post-content .kg-bookmark-description, .post-content .kg-bookmark-metadata { color: var(--muted); }

.post-content .kg-callout-card { border-radius: var(--radius-box); font-family: var(--font-body); }
.post-content .kg-callout-card-grey, .post-content .kg-callout-card-white { background: var(--surface); }
.post-content .kg-callout-card-accent { background: color-mix(in srgb, var(--ghost-accent-color) 14%, transparent); color: var(--fg); }

.post-content .kg-toggle-card { border-color: var(--rule); }
.post-content .kg-toggle-heading-text { font-family: var(--font-heading); font-weight: var(--h3-weight); }
.post-content .kg-toggle-content { font-family: var(--font-body); }

.post-content .kg-button-card .kg-btn {
    font-family: var(--font-ui);
    color: var(--bg);
    background: var(--fg);
    border-radius: var(--radius-button);
    text-decoration: none;
}
.post-content .kg-header-card h2 { font-family: var(--font-heading); }
.post-content .kg-blockquote-alt { font-family: var(--font-heading); font-style: italic; border: 0; padding: 0; text-align: center; font-size: 1.5em; color: var(--fg); }
.post-content .kg-signup-card { font-family: var(--font-ui); }
.post-content .kg-signup-card :is(h2, h3) { font-family: var(--font-heading); }

/* Small screens: wide and full cards just use the available width */
@media (max-width: 40rem) {
    .post-content blockquote { padding-left: 1em; }
}