/* ===========================================================================
   BLOG: post list and single post page.
   Ported from section 31 of the xorux.com theme.css.

   Kept in its own file rather than merged into theme.css: it is loaded by
   blog.php and article.php only, through $head_after_styles, so the XorMon
   design system is not touched and the blog can be removed by deleting two
   pages and this file.

   Built entirely from existing tokens. No new colour, font or shadow: it
   reuses the image-card vocabulary and the base typography. All eighteen
   custom properties it reads are already defined in theme.css.
   =========================================================================== */

/* Meta line: author, date, reading time */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--c-text-muted);
}
.post-meta-dot { opacity: 0.6; }

/* Post grid */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.875rem;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(16, 104, 206, 0.06);
  transition: box-shadow var(--tr);
}
.post-card:hover {
  box-shadow: 0 6px 32px rgba(16, 104, 206, 0.12);
}

.post-card-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
}
.post-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--tr-slow);
}
.post-card:hover .post-card-media img { transform: scale(1.04); }

.post-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
}

.post-card-cat {
  font-size: 0.625rem;
  font-weight: var(--t-fw-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-primary);
  background: var(--c-primary-light);
  border-radius: var(--r-pill);
  padding: 0.15rem 0.65rem;
  align-self: flex-start;
}

.theme-v2 .post-card-title {
  font-size: 1.1875rem;
  line-height: 1.35;
  font-weight: var(--t-fw-bold);
  color: var(--c-heading);
  margin: 0.15rem 0 0;
}
.theme-v2 .post-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--tr);
}
.theme-v2 .post-card-title a:hover { color: var(--c-primary); }

.post-card-excerpt {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--c-text-muted);
  margin: 0;
}
.post-card-meta { margin-top: 0.25rem; }

/* Single post page */
.article-col,
.article-body,
.article-author {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.article-back {
  /* flex, not inline-flex: the link takes a line of its own so the category
     pill drops below it. fit-content keeps the hit area on the text. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: var(--t-fw-semibold);
  color: var(--c-text-muted);
  text-decoration: none;
  margin-bottom: 1.25rem;
  transition: color var(--tr);
}
.article-back:hover { color: var(--c-primary); }

/* Outside a flex context (.article-col is not one), align-self does nothing,
   so inline-block is what keeps the pill hugging its text. */
.article-cat {
  display: inline-block;
  margin-bottom: 1rem;
}

.theme-v2 .article-title {
  font-size: 2.75rem;
  line-height: 1.15;
  font-weight: 900;
  color: var(--c-heading);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.article-meta { font-size: 0.875rem; }

.article-hero-media {
  max-width: 1000px;
  margin: 2.5rem auto 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-card);
}
.article-hero-media img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Editorial body: readable measure, vertical rhythm, base element styles. */
.article-body {
  margin-top: 3rem;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--c-text);
}
.article-body > p {
  margin-bottom: 1.5rem;
  color: #2b333d;
}
.theme-v2 .article-body h2 {
  font-size: 1.75rem;
  font-weight: var(--t-fw-bold);
  color: var(--c-heading);
  line-height: 1.3;
  margin: 2.75rem 0 1rem;
}
.theme-v2 .article-body h3 {
  font-size: 1.3125rem;
  font-weight: var(--t-fw-semibold);
  color: var(--c-heading);
  margin: 2rem 0 0.75rem;
}
.article-body ul,
.article-body ol {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
}
.article-body li {
  margin-bottom: 0.5rem;
  color: #2b333d;
}
.article-body a {
  color: var(--c-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-body a:hover { color: var(--c-link-hover); }
.article-body blockquote {
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-left: 3px solid var(--c-primary);
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--c-heading);
  font-weight: var(--t-fw-medium);
}
.article-body strong { color: var(--c-heading); font-weight: var(--t-fw-semibold); }

/* Author box */
.article-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  padding: 1.5rem;
  background: var(--c-bg-subtle);
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-lg);
}
.article-author-avatar {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--grad-hero);
  color: #fff;
  font-weight: 900;
  font-size: 1.25rem;
}
.article-author-name {
  font-weight: var(--t-fw-semibold);
  color: var(--c-heading);
  margin-bottom: 0.15rem;
}
.article-author-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-v2 .article-title { font-size: 2.25rem; }
}
@media (max-width: 575px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .theme-v2 .article-title { font-size: 1.875rem; }
  .article-body { font-size: 1rem; }
}


/* ===========================================================================
   COMPOSITION CLASSES MISSING FROM THIS SITE.

   The markup above is a faithful port, so it uses class names xorux.com
   defines in its global theme.css and xormon.com does not. They are copied
   here verbatim rather than added to theme.css, so nothing outside the two
   blog pages can be affected by them.

   .hero-title is not an invention either: its six declarations are exactly
   the inline style that events.php, products.php and the other XorMon heroes
   already carry on their <h1>.
   =========================================================================== */

.hero-title {
  font-size: 3.25rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin-bottom: 1.25rem;
}
.hero-title-accent { color: var(--c-primary); }

@media (max-width: 767px) {
  .hero-title { font-size: 2.5rem; }
}

/* Hero with no visual: the copy column takes the full usable width. Used by
   the "post not found" state, which has no screenshot to show. */
.hero-layout--text .hero-left {
  flex: 0 0 100%;
  max-width: 820px;
}

.lead-narrow { max-width: 620px; }

/* Newsletter card. The form inside it is this site's own subscribe contract,
   not the one from xorux.com: see the comment in blog.php. */
.newsletter-card {
  max-width: 720px;
  text-align: center;
}
.newsletter-form {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: center;
  margin-top: 1.5rem;
}
.newsletter-form .form-group {
  flex: 1;
  max-width: 340px;
  margin-bottom: 0;
  text-align: left;
}
@media (max-width: 575px) {
  .newsletter-form { flex-direction: column; align-items: stretch; }
  .newsletter-form .form-group { max-width: none; }
}

/* Inline SVG glyph returned by icon_arrow_left(). */
.icon-arrow {
  width: 1.05em;
  height: 1.05em;
  fill: currentColor;
  flex-shrink: 0;
}