/* =========================================================
   Blog index — "magazine" layout (blog-index-magazine.html)
   Ghost Imperia-inspired: centered title, category nav, a
   1-large + 4-small "Nouveautés" grid, a single colored featured
   banner, then every remaining post as a 3-column grid.
   Self-contained on purpose — some rules duplicate list/social-grid
   CSS rather than importing across layouts (see docs/ROADMAP.md
   policy on avoiding cross-file coupling between blog layouts).
   ========================================================= */

.mzHero {
  padding: var(--section-py) 0 var(--space-lg);
}
.mzHeroInner {
  max-width: 640px;
  text-align: center;
}
.mzHeroInner h1 {
  text-wrap: balance;
}
.mzTagline {
  margin-top: var(--space-sm);
  color: var(--subtitle-color);
}
/* Author/socials CSS intentionally kept even though unused in the
   template right now (removed from the hero on request, 19/08/2026) —
   cheap to bring back later, nothing depends on it being here. */
.mzAuthor {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
  color: var(--subtitle-color);
  font-size: var(--fs-small);
}
.mzAuthorAvatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  object-fit: cover;
}
.sgSocialRow {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.sgSocialBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: var(--border-w) solid var(--border);
  color: var(--text);
}
.sgSocialBtn:hover {
  background: var(--surface);
}
.sgSocialSvg svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* Category nav — same markup/behavior as the "list" layout's, duplicated
   here rather than shared across layout CSS files. */
.blogCategoryNav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: var(--space-xl);
  row-gap: var(--space-sm);
  margin-top: var(--space-xxl);
  padding-bottom: var(--space-sm);
  border-bottom: var(--border-w) solid var(--border);
}
.blogCategoryNavItem {
  color: var(--subtitle-color);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* Badge + category pills shown on cards — thinner than the shared
   blog-wide default (blog-shared.css), closer to Imperia's compact
   style, and harmonized so both pills always match. Scoped to this
   file only, so other layouts keep the default pill size. */
.postCardBadge,
.postCardCategory,
.mzFeaturedCardLabel {
  padding: 2px var(--space-sm);
  font-size: var(--text-xxs);
  margin: 0;
}

.mzSectionTitle {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtitle-color);
  margin-bottom: var(--space-md);
}

/* Shared pill row: wraps badge + category together so they sit on one
   line and share the same left edge as the title below, regardless of
   whether the parent is a plain block (large/small cards) or a flex
   column (featured banner — see note below). */
.mzPillRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}

/* ---- Nouveautés: 1 large + up to 4 small ---- */
.mzNewSection {
  padding: var(--space-lg) 0;
}
.mzNewGrid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-lg);
  align-items: stretch;
}
.mzLargeCard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-ui);
  overflow: hidden;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
}
.mzLargeCardMedia {
  width: 100%;
  height: 440px;
  object-fit: cover;
}
.mzLargeCardContent {
  padding: var(--space-lg);
}
.mzLargeCardTitle {
  margin-top: var(--space-2xs);
}
.mzSmallGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-md);
  height: 100%;
}
.mzSmallCard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-ui);
  overflow: hidden;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
}
.mzSmallCardMedia {
  width: 100%;
  height: 210px;
  flex-shrink: 0;
  object-fit: cover;
}
.mzSmallCardContent {
  padding: var(--space-lg) 18px var(--space-md);
}
.mzSmallCardTitle {
  margin-top: var(--space-xs);
  font-size: 1.2rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Smaller than the shared .postCardMeta default everywhere in this
   layout — was competing with the titles instead of staying in the
   background, including on the large card and featured banner. */
.mzLargeCard .postCardMeta,
.mzSmallCard .postCardMeta,
.mzFeaturedCardMeta {
  font-size: var(--text-xs);
}
@media (max-width: 900px) {
  .mzNewGrid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .mzSmallGrid {
    grid-template-columns: 1fr;
  }
}

/* ---- Featured: single colored banner (no carousel — the engine only
   ever surfaces one featured post at a time, see build-blog.js) ---- */
.mzFeaturedSection {
  padding: var(--space-lg) 0;
}
.mzFeaturedCard {
  display: flex;
  align-items: stretch;
  max-height: 380px;
  border-radius: var(--radius-ui);
  overflow: hidden;
  text-decoration: none;
  background: var(--accent);
}
.mzFeaturedCardContent {
  flex: 1 1 0%;
  min-width: 0;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* A square (or portrait) coverImage would otherwise push its own
   rendered height past the content block's — align-items: stretch on
   .mzFeaturedCard then stretches the colored content block to match,
   ballooning the whole banner. max-height above caps the row itself;
   height: 100% + object-fit: cover here crops the image down to
   whatever that capped row height ends up being instead. */
.mzFeaturedCardMedia {
  flex: 1 1 0%;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  min-height: 280px;
}
/* display:flex on .mzFeaturedCardContent blockifies every direct child
   element (same mechanism as the checklist <strong> bug fixed earlier
   this session) — without .mzPillRow wrapping both labels into a
   single flex item, each pill became its own row instead of sitting
   side by side. */
.mzFeaturedCardLabel {
  display: inline-block;
  border-radius: var(--radius-pill);
  border: 1px solid var(--on-accent);
  color: var(--on-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mzFeaturedCardTitle {
  margin-top: var(--space-sm);
  color: var(--on-accent);
}
.mzFeaturedCardExcerpt {
  margin-top: var(--space-xs);
  color: var(--on-accent);
  opacity: 0.9;
}
.mzFeaturedCardMeta {
  margin-top: var(--space-md);
  color: var(--on-accent);
  opacity: 0.8;
  font-size: var(--fs-small);
}
@media (max-width: 700px) {
  .mzFeaturedCard {
    flex-direction: column;
    max-height: none;
  }
  .mzFeaturedCardMedia {
    width: 100%;
    height: 220px;
    min-height: 0;
  }
}

/* ---- Rest of the articles: 3-column grid of small cards (Imperia's
   "Previous articles"), reusing the Nouveautés small-card look. ---- */
.mzGridSection {
  margin-top: var(--space-xl);
  padding: 0 0 var(--space-xxl);
}
.mzGridSection > .wrap {
  padding-top: var(--space-xl);
  border-top: var(--border-w) solid var(--border);
}
.mzGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.mzGridCard .mzSmallCardMedia {
  height: 250px;
}
.mzGridCard .postCardExcerpt {
  margin-top: var(--space-2xs);
  color: var(--text);
  font-size: var(--fs-small);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mzGridCard .postCardMeta {
  margin-top: var(--space-sm);
  color: var(--subtitle-color);
}
@media (max-width: 900px) {
  .mzGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .mzGrid {
    grid-template-columns: 1fr;
  }
}