/* theme-extras.css — Grav-specific additions that ride on top of /css/styles.css.
   Keep this small. Anything reusable belongs in styles.css. */

/* Long-form prose used by .prose containers (blog posts, default pages) */
.prose {
  max-width: 72ch;
  margin-inline: auto;
}
.prose h2, .prose h3, .prose h4 {
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}
.prose p,
.prose ul,
.prose ol,
.prose blockquote {
  margin-block: 1em;
  font-size: 1.05rem;
  line-height: 1.7;
}
.prose ul, .prose ol { padding-left: 1.4em; }
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md, 8px);
  margin-block: 1.5em;
}
.prose blockquote {
  border-left: 3px solid var(--bronze-400, #c9a063);
  padding-left: 1em;
  color: var(--text-muted, #555);
  font-style: italic;
}
.prose a { text-decoration: underline; }

/* Blog post page (item.html.twig) */
.blog-post .post-header {
  text-align: center;
  margin-block: 1.5rem 2rem;
}
.blog-post .post-header h1 {
  margin-block: 0.2em 0.4em;
}
.blog-post .post-hero {
  margin-block: 2rem;
}
.blog-post .post-hero img {
  width: 100%;
  border-radius: var(--r-lg, 12px);
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Page-head crumbs link styling (Grav default pages use page-head pattern) */
.page-head .crumbs a { color: inherit; opacity: 0.7; }
.page-head .crumbs a:hover { opacity: 1; }

/* Blog listing — stacked-card layout. Site-wide .post is a 200px-wide
   image column next to a tall content column, which forces landscape
   hero images into a narrow portrait shape and trims them with
   object-fit: cover. On /cms/blog we want a magazine-style 2-up grid
   with the photo on top at its natural 16:9 ratio. Scoped to the
   listing only — homepage 'latest 3' widget and post-detail hero are
   unchanged. */
#blog-posts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6, 1.5rem);
}
#blog-posts .post {
  grid-template-columns: 1fr;   /* stack image on top of body */
}
#blog-posts .post-image,
#blog-posts .post-image--photo {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-right: none;
  border-bottom: 1px solid var(--border-soft, #e5e0d8);
}
#blog-posts .post-image--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* aspect ratios match now → no crop */
}

@media (max-width: 900px) {
  #blog-posts { grid-template-columns: 1fr; }
  #blog-posts .post-image,
  #blog-posts .post-image--photo { aspect-ratio: 16 / 9; height: auto; }
}