/*
 * Standalone "Content" blocks (Piranha HtmlBlock) render their raw HTML with
 * no wrapper, so headings and paragraphs sit flush against the top and side
 * edges of the page. Give them readable side/top padding and a centered,
 * container-width column that lines up with the rest of the page blocks.
 *
 * Scoped to `.block.html-block` (the per-block wrapper emitted in Page.cshtml /
 * Post.cshtml) so that Content blocks nested inside Column blocks — which are
 * rendered via DisplayFor without the `.block` wrapper — keep their column
 * layout and are not double-padded.
 */
.block.html-block {
    width: 100%;
    margin-inline: auto;
    padding-top: 2.5rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    padding-bottom: 1rem;
}

/* Match Bootstrap's responsive .container max-widths so the text column
   aligns with neighbouring blocks instead of stretching edge-to-edge. */
@media (min-width: 576px) {
    .block.html-block { max-width: 540px; }
}

@media (min-width: 768px) {
    .block.html-block {
        max-width: 720px;
        padding-top: 3.5rem;
        padding-right: 2rem;
        padding-left: 2rem;
    }
}

@media (min-width: 992px) {
    .block.html-block { max-width: 960px; }
}

@media (min-width: 1200px) {
    .block.html-block { max-width: 1140px; }
}

@media (min-width: 1400px) {
    .block.html-block { max-width: 1320px; }
}