/* A blog post (single.php, layout/parts/single-post.php): one centered column under the
   pill menu. Its picture, then its title, date and tags, then its text. About 65 characters
   to a line on desktop. The blog's cards are in post-type.css. */

.single-column-area {
    width: 100%;
    max-width: calc(40rem + 2 * var(--desktop-content-inline-padding));
    margin-inline: auto;
    /* No padding above: the page starts a little under the pill menu already (main.css) */
    padding: 0 var(--desktop-content-inline-padding) var(--desktop-content-vertical-padding);
}

/* The picture: the column's full width, a little space before the title. A tall (portrait)
   picture is cut down to the room the first screen has left, so the title under it is still
   on that screen: the screen's height, less the pill menu above it and the space under it,
   less about 8rem under the picture for the start of the title (never under 10rem tall).
   It sits in the middle and keeps its rounded corners and shadow. */
.blog-post-image img {
    margin-bottom: 1.25em;
}
/* A tall picture is narrower than the column (capped below): the viewer's hover frame
   hugs the picture instead of spanning the empty sides */
.blog-post-image .lightbox-frame {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}
.blog-post .blog-post-image img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 60vh; /* browsers without svh (before 2022) */
    max-height: max(10rem, calc(100svh - var(--pill-clear, 4rem) - 3vh - 8rem));
    margin-inline: auto;
}

.blog-post .title-block {
    text-align: center;
    margin-bottom: 1.5em;
}

/* Phones: a little more room for the text than the two-column pages give. The pill menu is fixed
   at the top, and the picture starts a little under it (main.css). */
@media only screen and (max-width: 768px) {
    .single-column-area {
        max-width: none;
        padding: 0 var(--mobile-fixed-content-inline-padding) var(--mobile-content-vertical-padding);
    }
    .blog-post .blog-post-image img {
        max-height: max(10rem, calc(100svh - var(--pill-clear, 4rem) - 1.5rem - 7.5rem));
    }
}