/* Blog article template (blog-post.html, served at /blog/<slug>). Loaded after styles.css and shared.css. */

/* ---------- Header: dark gray, everything centered; the featured photo overlaps its bottom edge ---------- */
.phead { --ov: clamp(80px, 9vw, 150px); background: var(--secondary); color: var(--white); text-align: center; padding: clamp(150px, 16vw, 240px) 0 calc(var(--ov) + clamp(32px, 4vw, 64px)); }
.phead h1 { max-width: 1000px; margin: 24px auto 0; }
.phead__sub { max-width: 620px; margin: 20px auto 0; opacity: .88; }
.phead__meta { margin-top: 28px; }
.phead .tag[hidden] { display: none; }

.pfeat { --ov: clamp(80px, 9vw, 150px); position: relative; z-index: 1; margin-top: calc(var(--ov) * -1); }
.pfeat__img { margin: 0; height: clamp(260px, 42vw, 680px); overflow: hidden; background: var(--secondary); }
.pfeat__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Article: left-aligned text in a reading column centered on the page (936px, a bit wider than a typical 720px column) ---------- */
.particle { padding-block: clamp(48px, 6vw, 96px) var(--section-y); }
.particle__body { width: 100%; max-width: 936px; margin-inline: auto; padding-inline: var(--gutter); text-align: left; }
.particle__body > * + *, .particle__body #post-body > * + * { margin-top: 20px; } /* #post-body holds the article text written in the CMS */
.particle__body h3 { margin-top: clamp(36px, 4vw, 56px); }
.particle__body h3 + * { margin-top: 16px; }
.particle__body .pfig + h3 { margin-top: clamp(36px, 4vw, 56px); }
.pfig { margin: clamp(36px, 4vw, 56px) 0 0; } /* no side margin, so photos run the full width of the text */
.pfig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.plist li { position: relative; padding-left: 24px; }
.plist li + li { margin-top: 12px; }
.plist li::before { /* the logo's chevron as the bullet */
  content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 12px; background: var(--accent);
  -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat;
}
.particle__body blockquote { margin-inline: 0; padding-left: 24px; border-left: 1px solid var(--accent); }
.particle__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.particle__foot { display: flex; flex-wrap: wrap; gap: var(--gap); margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--accent); }
@media (max-width: 560px) { .particle__foot .btn { width: 100%; } }