/* =====================================================================
   blog.css - Journal styles (blog.php list + blog-post.php articles)
   Added Oct 27, 2026 by Website & SEO.
   Kept in its OWN file (not style.css) so blog updates never collide with
   design work on the main stylesheet. It only uses the colour/font/spacing
   variables defined in style.css (:root), so the look always matches.
   Loaded with a <link> at the top of <main> in blog.php and blog-post.php
   (a stylesheet link inside <body> is valid HTML and works in every browser).
   ===================================================================== */
.post-head { border-bottom: 0; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.post-head h1 { max-width: 20ch; font-size: var(--step-3); }        /* long headlines: a step smaller than page titles */
.post-head .lede { max-width: 60ch; }
.post-crumbs { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
               color: var(--ember-deep); margin-bottom: 1.25rem; }
.post-crumbs a { color: inherit; text-decoration: none; }
.post-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-crumbs span[aria-hidden] { margin: 0 0.4em; color: var(--muted); }
.post-meta { margin: 1.5rem 0 0; font-size: var(--step--1); color: var(--muted); }
.post-meta a { color: inherit; }

/* Cover photo: wide, slightly cinematic crop */
.post-cover picture, .post-cover img { display: block; width: 100%; }
.post-cover img { aspect-ratio: 16 / 9; object-fit: cover; height: auto; }

/* Article body: comfortable line length (prose = 66ch) + spacing for headings/lists */
.post-body { margin: 0 auto; }
.post-body h2 { font-size: var(--step-2); margin: 2.4em 0 0.6em; }
.post-body ul, .post-body ol { padding-left: 1.3em; margin: 0 0 1.4em; }
.post-body li { margin-bottom: 0.45em; }
.post-body li::marker { color: var(--ember-deep); }

/* The sample timeline: times in a left column, hairlines between rows */
.post-body .post-timeline { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.post-timeline li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 0.75rem 0;
                    margin: 0; border-bottom: 1px solid var(--line); }
.post-timeline strong { color: var(--ember-deep); font-weight: 600; white-space: nowrap; }

/* Photos inside the article: slightly wider than the text column on big screens */
.post-figure { margin: 2.5rem 0; }
.post-figure img { display: block; width: 100%; height: auto; }
.post-figure figcaption { font-size: var(--step--1); color: var(--muted); margin-top: 0.6rem; }
@media (min-width: 1000px) { .post-figure { margin-left: -4rem; margin-right: -4rem; } }

/* Author note at the end of the article */
.post-author { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); max-width: 66ch; }
.post-author p:last-child { margin: 0; color: var(--muted); }
.post-author .link { color: var(--ember-deep); }

/* "Keep reading" cards: 3 across on wide screens (the Journal page stays 2) */
.post-related__title { font-size: var(--step-3); margin-bottom: 2rem; }
@media (min-width: 1000px) { .cards--three { grid-template-columns: repeat(3, 1fr); } }
.cards--three .card h3 { font-size: var(--step-1); margin: 0; }

/* Journal list: "Read the post" hint on real posts; coming-soon cards look quieter */
.card__more { justify-self: start; font-size: var(--step--1); font-weight: 600; color: var(--ember-deep); }
.card--soon .card__media { opacity: 0.75; }

/* Cards: make the <picture> fill the 3:2 frame so wider (16:9) photos are
   cropped neatly instead of leaving a gap under the image. */
.card__media picture { display: block; height: 100%; }

/* ---------------------------------------------------------------------
   Draft preview markers (added Oct 28, 2026). Only ever appear on the
   local test server (ST_BLOG_PREVIEW=1 php -S ...), never on IONOS.
   --------------------------------------------------------------------- */
.post-draft-flag { display: inline-block; margin: 0 0 1rem; padding: 0.35rem 0.8rem; border-radius: 999px;
                   background: #8a2d1c; color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.card__draft { color: #8a2d1c; font-weight: 700; }