/* =========================================================
   Post page (post-layout.html)
   Same for every index layout — only the index page varies by
   layoutPreset today, see blog-index-*.css.
   ========================================================= */

.postHero {
  padding: var(--section-py) 0 var(--space-xl);
}
.postHeroInner {
  max-width: 720px;
  text-align: center;
}
.postCoverImage {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-media);
}
.postCoverCredit {
  margin: var(--space-xs) 0 0;
  text-align: center;
  font-size: var(--text-xxs);
  color: var(--subtitle-color);
}
.postCoverCredit a {
  color: inherit;
}
/* social-grid is built around square coverImages (see SCHEMA_BLOG.md) —
   keep that squareness on the post page too instead of cropping into the
   wide banner shape meant for list's 1.91:1 images. */
html.layout-social-grid .postCoverImage {
  max-width: 600px;
  max-height: none;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: block;
}
/* magazine's cards (large tile, grid) crop coverImage close to 3:2 —
   match that ratio here too instead of the default's plain object-fit
   crop, so the same source photo looks consistent between the index
   and the article page. See docs/NOTES/conseils-images-blog.md.
   A max-height here (instead of a max-width) would fight aspect-ratio
   at this layout's full 1200px-wide banner — width:100% stays 100%
   while height gets clamped, stretching the box to a wide, shallow
   strip instead of a true 3:2 rectangle. Cap the width instead, same
   pattern as social-grid's square crop below, and match it to
   .postHeroInner's 720px so the photo lines up with the title/text
   column above it. */
html.layout-magazine .postCoverImage {
  max-width: 720px;
  max-height: none;
  aspect-ratio: 3 / 2;
  margin: 0 auto;
  display: block;
}
.postHero .wrap + .wrap {
  margin-top: var(--space-lg);
}
.postMetaTop {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  color: var(--subtitle-color);
  font-size: var(--fs-small);
}
.postTitle {
  margin-top: var(--space-md);
}
.postExcerpt {
  margin-top: var(--space-sm);
  color: var(--subtitle-color);
}
.postMetaBottom {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
  color: var(--subtitle-color);
  font-size: var(--fs-small);
}
.postByline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}
.postAuthorAvatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  object-fit: cover;
}
.postReadingTime {
  display: inline-flex;
  align-items: center;
}
.postTags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}
.postTag {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-md);
  font-size: var(--text-xs);
  color: var(--subtitle-color);
}
.postActions {
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
  margin-top: var(--space-lg);
}
.postBody {
  padding-bottom: var(--space-xxl);
}
/* Article text was stretching to the site's full content width (1200px by
   default) with no narrower reading column, unlike .postHeroInner above —
   constrain it to a comfortable line length. Applied to every direct-child
   .wrap of .postBody (content, FAQ block, back link) rather than just
   .richtext, so they all share the same left edge instead of the back
   link sitting under the wider 1200px default and looking off-center. */
.postBody > .wrap {
  max-width: 720px;
}
.postBody .faqList {
  margin-top: var(--space-xl);
}
/* padding-top/bottom only (not the `padding` shorthand): .postToc also
   carries the .wrap class for its max-width/centering, and .wrap sets
   `padding: 0 var(--wrap-px)` in style.css. Two same-specificity rules
   both writing the padding shorthand would have the later one (this
   file loads after style.css) win outright on all four sides, silently
   dropping .wrap's left/right inset — the box then sits flush against
   the viewport edge below the 720px breakpoint where its own max-width
   stops constraining it. Longhand here leaves padding-left/right alone
   so .wrap's values keep winning on those two. */
.postToc {
  margin: var(--space-xl) auto;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-media);
  background: var(--surface);
}
/* .postToc is the only .wrap element in this file with its own visible
   border/background — for every other .wrap block, .wrap's padding is
   enough to keep text clear of the viewport edge since there's no
   border to reveal the gap. Here the border+background span the box's
   full width below 720px (.postToc's own max-width no longer applies),
   so padding alone leaves the frame itself flush against the screen —
   only its inner content was inset. Needs a real margin, not padding,
   to hold the frame off the edge; auto (set above) computes to 0 once
   the box already fills its container, so it has to be explicit here. */
@media (max-width: 720px) {
  .postToc {
    margin-left: var(--wrap-px);
    margin-right: var(--wrap-px);
  }
}
.postTocTitle {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtitle-color);
}
.postToc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.postToc li + li {
  margin-top: var(--space-xs);
}
.postToc a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.postToc a:hover {
  color: var(--accent-hover, var(--accent));
  opacity: 0.8;
}
.postBody .richtext img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-media);
}
.postBody .richtext table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: 0 0 var(--space-xl);
  font-size: var(--fs-small);
}
.postBody .richtext pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.postBody .richtext th,
.postBody .richtext td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-w) solid var(--border);
}
.postBody .richtext thead th {
  background: var(--surface);
  font-weight: 600;
  color: var(--text);
}
.postBody .richtext tbody tr:last-child td {
  border-bottom: none;
}
.postBack {
  display: inline-block;
  margin-top: var(--space-xxl);
}
/* Enriched author bio block — same card treatment as .postToc above
   (border + radius-media + surface), guarded on author.bio in the
   template so it's absent whenever a blog only sets name/avatar. */
.postAuthorBio {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-media);
  background: var(--surface);
}
.postAuthorBioAvatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  flex-shrink: 0;
}
.postAuthorBioContent {
  flex: 1;
  min-width: 0;
}
.postAuthorBioName {
  margin: 0 0 var(--space-2xs);
  font-weight: 700;
  color: var(--text);
}
.postAuthorBioText {
  margin: 0;
  color: var(--subtitle-color);
  font-size: var(--fs-small);
}
.postAuthorBioSocials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.postAuthorBioSocialBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: var(--border-w) solid var(--border);
  color: var(--text);
}
.postAuthorBioSocialBtn:hover {
  background: var(--bg, var(--surface));
}
.postAuthorBioSocialSvg svg {
  display: block;
  width: 16px;
  height: 16px;
}
@media (max-width: 520px) {
  .postAuthorBio {
    flex-direction: column;
    align-items: flex-start;
  }
}
.checklistItem {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-left: calc(-1 * var(--space-md));
}
.checklistText {
  flex: 1;
  min-width: 0;
}
/* Make each checklist point read like a heading (number + lead sentence)
   with the explanation as a normal paragraph below it — content-only
   change (no markdown source change), the lead is still just the
   **bold** run markdown-it already produces at the start of the item. */
.checklistText strong:first-child {
  display: block;
  font-size: var(--text-lg-fluid);
  line-height: 1.3;
  color: var(--text);
  margin-bottom: var(--space-2xs);
}
/* Weight for the checklist lead + general bold text is set per-theme —
   see theme-D-blog.css. Default theme keeps whatever weight it already
   has (not decided yet), theme D gets 700 to counter its own dimmed-down
   `html.theme-D strong`. */
/* Extra breathing room + a divider between points now that each one is
   taller — the default .richtext li + li spacing (0.35em) was sized for
   plain list items, too tight for heading-sized ones. */
.checklistItem + .checklistItem {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--border-w) solid var(--border);
}
.checklistItem input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin-top: 3px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  border: 2px solid var(--subtitle-color);
  background: var(--surface);
  position: relative;
  cursor: pointer;
}
.checklistItem input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.checklistItem input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@media print {
  .siteHeader,
  .mobileNav,
  .siteFooter,
  .postActions,
  .postBadge,
  .postCategory,
  .postByline,
  .postCoverImage,
  .postCoverCredit,
  .postToc,
  .newsletterSection {
    display: none !important;
  }
  .checklistItem {
    break-inside: avoid;
  }
  .checklistItem input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: auto;
    border-radius: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border: 1px solid #000;
  }
  .checklistItem input[type="checkbox"]:checked::after {
    content: none;
  }
}