/* Blog reading styles: one measure, generous leading, images that never break
   out of the column. Loaded on every page so the layout needs no extra hook. */
.post-title {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 10px;
}
.post-meta,
.post-card-meta {
  color: #7a7a7a;
  font-size: 14px;
  margin-bottom: 24px;
}
.post-back { font-size: 14px; margin-bottom: 20px; }
.post-cover,
.post-card-cover {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 28px;
  object-fit: cover;
}
/* Covers are cropped 16:9 in the backoffice; holding that shape here keeps a
   row of cards level even for a cover that was set some other way. */
.post-card-cover { aspect-ratio: 16 / 9; margin-bottom: 16px; }
/* A post without a cover still gets the block, so its row does not sag. */
.post-card-cover-empty { background: linear-gradient(135deg, #f4ecd6, #e8d9ae); }

.post-body {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px;
  line-height: 1.75;
  color: #242424;
  /* Last line of defence for text with no break opportunity at all — a long
     URL, a pasted token. It only splits a word that cannot fit on its own. */
  overflow-wrap: break-word;
}
.post-body p { margin-bottom: 1.4em; }
.post-body h2 { font-size: 27px; margin: 1.6em 0 0.5em; font-weight: 700; }
.post-body h3 { font-size: 22px; margin: 1.5em 0 0.4em; font-weight: 700; }
.post-body h4 { font-size: 19px; margin: 1.4em 0 0.4em; font-weight: 700; }
.post-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.5em 0; }

/* A captioned picture. The API strips every attribute off figure/figcaption,
   so the caption can only be styled from here. */
.post-body figure { margin: 1.5em 0; }
.post-body figure img { display: block; margin: 0 auto; }
.post-body figure a { display: block; text-decoration: none; }
.post-body figcaption {
  margin-top: 8px;
  text-align: center;
  color: #7a7a7a;
  font-size: 15px;
  line-height: 1.5;
}
.post-body blockquote {
  border-left: 3px solid #e3ad1a;
  padding-left: 18px;
  margin: 1.5em 0;
  font-style: italic;
  color: #4a4a4a;
}
.post-body pre {
  background: #f6f6f6;
  padding: 14px 16px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 15px;
}
.post-body ul,
.post-body ol { margin: 0 0 1.4em 1.2em; }
.post-body li { margin-bottom: 0.5em; }
.post-body a { color: #0b6b53; text-decoration: underline; }
.post-body hr { margin: 2em 0; border: 0; border-top: 1px solid #e6e6e6; }

/* Article cards: one column on phones, three across from lg up (see
   blog/_listing). A card fills its grid cell and pushes the author/date line to
   the bottom, so that line sits level across a row. */
.post-card { height: 100%; }
.post-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.post-card-link:hover .post-card-title { color: #e3ad1a; }
.post-card-title { font-size: 22px; line-height: 1.3; font-weight: 700; margin-bottom: 8px; }
.post-card-excerpt { color: #4a4a4a; margin-bottom: 12px; }
.post-card-meta { margin-top: auto; margin-bottom: 0; }

@media (min-width: 992px) {
  .post-card-title { font-size: 20px; }
  /* Three lines is enough to decide whether to open it, and keeps rows even. */
  .post-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.post-pagination { margin-top: 56px; }

/* Titles and excerpts are typed in the backoffice too; same guard as the body. */
.post-title,
.post-card-title,
.post-card-excerpt { overflow-wrap: break-word; }