/* ===========================================================================
   Blog listing page (/blog).

   A hero with headline + subtitle, then rows of 3 blog cards, followed by
   the shared CTA band and footer.
   =========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */

.blog-hero {
  padding: 160px var(--mz-gutter) 0;
}

.blog-hero-inner {
  max-width: 1320px;
  margin: 0 auto;
}

.blog-hero-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
}

.blog-hero-headline {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 72px;
  line-height: 0.85;
  letter-spacing: -1.44px;
  color: var(--mz-white);
}

.blog-hero-subtitle {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.16px;
  color: var(--mz-white);
}

/* ==========================================================================
   Card grid sections
   ========================================================================== */

.blog-cards-section {
  padding: 100px var(--mz-gutter);
}

/* A grid rather than three flex rows of three.
   The featured set is generated from content/blog and is seven cards today, so
   the last row is short and its card must stay one third wide -- which is
   exactly what a flex row would not do. The 200px row gap reproduces the
   spacing the three stacked sections used to produce (100px of padding below
   one and above the next), so the page does not move. */
.blog-cards-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 200px;
}

/* --- Individual card ------------------------------------------------------ */

.blog-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.blog-card-image {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease;
}

.blog-card-image:hover img {
  opacity: 0.7;
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-card-title-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-card-date {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.14px;
  color: var(--mz-lilac);
}

.blog-card-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.24px;
  color: var(--mz-white);
}

.blog-card-desc {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.2px;
  color: rgba(255, 255, 255, 0.7);
}

.blog-card-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.16px;
  color: var(--mz-white);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.blog-card-link:hover {
  opacity: 0.8;
}

.blog-card-link svg {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.blog-card-link:hover svg {
  transform: translateX(4px);
}

/* ==========================================================================
   Recent articles list
   ========================================================================== */

.blog-recent {
  padding: 0 var(--mz-gutter) 100px;
}

.blog-recent-inner {
  max-width: 1320px;
  margin: 0 auto;
}

.blog-recent-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 40px;
}

.blog-recent-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.blog-recent-item:hover {
  opacity: 0.8;
}

.blog-recent-thumb {
  width: 80px;
  height: 56px;
  flex-shrink: 0;
  overflow: hidden;
}

.blog-recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-recent-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.16px;
  color: var(--mz-white);
}

.blog-recent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.blog-recent-header .mz-section-header {
  margin-bottom: 0;
}

.blog-recent-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 16px;
  width: 280px;
}

.blog-recent-search-input {
  background: none;
  border: none;
  outline: none;
  color: var(--mz-white);
  font-size: 14px;
  font-weight: 400;
  width: 100%;
}

.blog-recent-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.blog-recent-empty {
  padding: 40px 0;
  font-size: 16px;
  color: var(--mz-text-secondary);
  text-align: center;
}

.blog-recent-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 32px;
}

/* Prev/next are links now, not buttons: the archive is paginated into real
   pages, so each step has an address. At the ends of the range there is no
   page to point at, and the renderer emits a <span aria-disabled> rather than
   a link to nowhere -- hence the attribute selectors in place of :disabled. */
.blog-recent-prev,
.blog-recent-next {
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--mz-white);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  text-decoration: none;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.blog-recent-prev[aria-disabled='true'],
.blog-recent-next[aria-disabled='true'] {
  opacity: 0.3;
}

.blog-recent-prev:not([aria-disabled='true']):hover,
.blog-recent-next:not([aria-disabled='true']):hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Numbered links, not just arrows. With 49 pages, prev/next alone puts the
   oldest posts 48 clicks from /blog -- too deep for a reader and discounted by
   a crawler. First, last and a window around the current page keep every page
   within a few hops. */
.blog-recent-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.blog-recent-page,
.blog-recent-gap {
  font-size: 14px;
  font-weight: 400;
  color: var(--mz-text-secondary);
  padding: 10px 12px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-recent-page:hover {
  color: var(--mz-white);
}

.blog-recent-page.is-current {
  color: var(--mz-white);
  font-weight: 600;
}

/* ==========================================================================
   Newsletter subscribe
   ========================================================================== */

.blog-subscribe {
  padding: 100px var(--mz-gutter);
}

.blog-subscribe-inner {
  max-width: 1320px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 80px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.blog-subscribe-headline {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 0.9;
  letter-spacing: -0.4px;
  color: var(--mz-white);
  text-align: center;
  max-width: 600px;
}

.blog-subscribe-form {
  display: flex;
  gap: 0;
  width: 100%;
  max-width: 500px;
}

.blog-subscribe-input {
  flex: 1;
  min-width: 0;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.16px;
  color: var(--mz-white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-right: none;
  outline: none;
}

.blog-subscribe-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.blog-subscribe-input:focus {
  border-color: rgba(255, 255, 255, 0.4);
}

.blog-subscribe-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 32px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.16px;
  color: var(--mz-ink);
  background: var(--mz-lilac);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.blog-subscribe-btn:hover {
  opacity: 0.9;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 1023px) {
  .blog-hero {
    padding: 140px var(--mz-gutter-mobile) 0;
  }

  .blog-hero-headline {
    font-size: 48px;
    letter-spacing: -0.48px;
  }

  .blog-cards-section {
    padding: 60px var(--mz-gutter-mobile);
  }

  .blog-cards-inner {
    grid-template-columns: 1fr;
    row-gap: 60px;
  }

  .blog-card-title {
    font-size: 20px;
  }

  .blog-card-desc {
    font-size: 16px;
  }

  .blog-recent {
    padding: 0 var(--mz-gutter-mobile) 60px;
  }

  .blog-recent-list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .blog-recent-title {
    font-size: 14px;
  }

  .blog-recent-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .blog-recent-search {
    width: 100%;
  }

  /* The number window is nine chips at its widest. Tighten it rather than
     hide it: hidden links are worth less, and the arrows wrap to their own
     row when it still does not fit. */
  .blog-recent-pagination {
    gap: 12px;
  }

  .blog-recent-page,
  .blog-recent-gap {
    padding: 8px 6px;
  }

  .blog-subscribe {
    padding: 60px var(--mz-gutter-mobile);
  }

  .blog-subscribe-inner {
    padding: 40px 20px;
  }

  .blog-subscribe-headline {
    font-size: 28px;
  }

  .blog-subscribe-form {
    flex-direction: column;
  }

  .blog-subscribe-input {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: none;
  }

  .blog-subscribe-btn {
    justify-content: center;
  }
}