/**
 * Blog, single post and single product templates.
 */

/* ---- Breadcrumbs ------------------------------------------------------ */

.zen-crumbs { padding-block: var(--zen-space-4, 1rem); }

.zen-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--zen-ink-3, #6b7885);
  font-size: var(--zen-step--1, 0.875rem);
}

.zen-crumbs__list li + li::before {
  content: '/';
  margin-inline-end: 0.5rem;
  color: var(--zen-line-2, #c6d0da);
}

.zen-crumbs__list a { color: inherit; }

/* ---- Category chips --------------------------------------------------- */

.zen-cats__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zen-space-2, 0.5rem);
  margin: 0 0 var(--zen-space-6, 2rem);
  padding: 0;
  list-style: none;
}

.zen-cat {
  display: inline-block;
  padding: 0.45em 1em;
  border: 1px solid var(--zen-line-2, #c6d0da);
  border-radius: var(--zen-radius-pill, 999px);
  color: var(--zen-ink-2, #48555f);
  font-size: var(--zen-step--1, 0.875rem);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 200ms, color 200ms, border-color 200ms;
}

.zen-cat:hover {
  border-color: var(--zen-blue-600, #1560bd);
  color: var(--zen-blue-600, #1560bd);
}

.zen-cat.is-active {
  background: var(--zen-blue-600, #1560bd);
  border-color: var(--zen-blue-600, #1560bd);
  color: #fff;
}

/* ---- Blog listing ----------------------------------------------------- */

.zen-blog__header {
  padding-block: var(--zen-space-7, 3rem);
  background: var(--zen-blue-050, #f4f8fd);
  text-align: center;
}

.zen-blog__title { margin: 0; color: var(--zen-blue-900, #0b2545); }

.zen-blog__intro {
  max-width: 42rem;
  margin: var(--zen-space-3, 0.75rem) auto 0;
  color: var(--zen-ink-2, #48555f);
}

.zen-blog__body { padding-block: var(--zen-space-7, 3rem); }

.zen-post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.zen-post__media {
  display: block;
  /* Fixed ratio reserves the space before the image arrives, so the grid
     does not jump as thumbnails load. */
  aspect-ratio: 16 / 10;
  background: var(--zen-sunk, #f5f7fa);
}

.zen-post__img { width: 100%; height: 100%; object-fit: cover; }

.zen-post__body {
  display: flex;
  flex-direction: column;
  gap: var(--zen-space-2, 0.5rem);
  padding: var(--zen-space-5, 1.5rem);
  flex: 1;
}

.zen-post__cat {
  margin: 0;
  color: var(--zen-blue-600, #1560bd);
  font-size: var(--zen-step--1, 0.8rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.zen-post__title { margin: 0; font-size: var(--zen-step-1, 1.2rem); line-height: 1.3; }
.zen-post__title a { color: var(--zen-blue-900, #0b2545); text-decoration: none; }
.zen-post__title a:hover { text-decoration: underline; }

.zen-post__excerpt { margin: 0; color: var(--zen-ink-2, #48555f); }

.zen-post__meta {
  margin: auto 0 0;
  padding-top: var(--zen-space-3, 0.75rem);
  color: var(--zen-ink-3, #6b7885);
  font-size: var(--zen-step--1, 0.85rem);
}

.zen-blog__empty { text-align: center; color: var(--zen-ink-3, #6b7885); }

/* ---- Pagination ------------------------------------------------------- */

.zen-pagination { margin-top: var(--zen-space-7, 3rem); }

.zen-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--zen-space-2, 0.5rem);
}

.zen-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.75em;
  border: 1px solid var(--zen-line-2, #c6d0da);
  border-radius: var(--zen-radius, 8px);
  color: var(--zen-ink, #16222c);
  text-decoration: none;
}

.zen-pagination .page-numbers.current {
  background: var(--zen-blue-600, #1560bd);
  border-color: var(--zen-blue-600, #1560bd);
  color: #fff;
}

/* ---- Single post ------------------------------------------------------ */

.zen-article {
  /* A readable measure. Past ~70 characters the eye loses the next line. */
  max-width: 44rem;
  margin-inline: auto;
  padding: 0 var(--zen-space-4, 1rem) var(--zen-space-7, 3rem);
}

.zen-article__cat {
  margin: 0 0 var(--zen-space-2, 0.5rem);
  font-size: var(--zen-step--1, 0.8rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.zen-article__cat a { color: var(--zen-blue-600, #1560bd); text-decoration: none; }

.zen-article__title { margin: 0 0 var(--zen-space-3, 0.75rem); color: var(--zen-blue-900, #0b2545); }

.zen-article__meta {
  margin: 0 0 var(--zen-space-6, 2rem);
  color: var(--zen-ink-3, #6b7885);
  font-size: var(--zen-step--1, 0.875rem);
}

.zen-article__media { margin: 0 0 var(--zen-space-6, 2rem); }

.zen-article__img {
  width: 100%;
  height: auto;
  border-radius: var(--zen-radius-lg, 14px);
}

.zen-article__body > * + * { margin-top: var(--zen-space-4, 1rem); }
.zen-article__body h2 { margin-top: var(--zen-space-6, 2rem); color: var(--zen-blue-900, #0b2545); }
.zen-article__body h3 { margin-top: var(--zen-space-5, 1.5rem); color: var(--zen-blue-900, #0b2545); }
.zen-article__body img { max-width: 100%; height: auto; border-radius: var(--zen-radius, 8px); }

.zen-article__body blockquote {
  margin-inline: 0;
  padding-inline-start: var(--zen-space-5, 1.5rem);
  border-inline-start: 3px solid var(--zen-blue-600, #1560bd);
  color: var(--zen-ink-2, #48555f);
  font-style: italic;
}

.zen-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zen-space-2, 0.5rem);
  margin-top: var(--zen-space-6, 2rem);
}

.zen-article__cta {
  margin-top: var(--zen-space-7, 3rem);
  padding: var(--zen-space-6, 2rem);
  background: var(--zen-blue-050, #f4f8fd);
  border-radius: var(--zen-radius-lg, 14px);
  text-align: center;
}

.zen-article__cta h2 { margin-top: 0; }
.zen-article__cta .zen-cluster { justify-content: center; }

.zen-postnav { margin-top: var(--zen-space-6, 2rem); }

.zen-postnav .nav-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--zen-space-4, 1rem);
}

.zen-postnav a {
  display: block;
  padding: var(--zen-space-4, 1rem);
  border: 1px solid var(--zen-line, #dde3e9);
  border-radius: var(--zen-radius, 8px);
  text-decoration: none;
}

.zen-postnav a:hover { border-color: var(--zen-blue-600, #1560bd); }
.zen-navlink__label { display: block; color: var(--zen-ink-3, #6b7885); font-size: var(--zen-step--1, 0.8rem); }
.zen-navlink__title { display: block; color: var(--zen-blue-900, #0b2545); font-weight: 700; }
.zen-postnav .nav-next { text-align: end; }

/* ---- Single product --------------------------------------------------- */

.zen-product-page { padding-bottom: var(--zen-space-7, 3rem); }

.zen-product-page__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zen-space-6, 2rem);
  align-items: start;
}

@media (min-width: 860px) {
  .zen-product-page__top { grid-template-columns: 5fr 6fr; }
}

.zen-product-page__media {
  display: grid;
  place-items: center;
  padding: var(--zen-space-6, 2rem);
  background: var(--zen-sunk, #f5f7fa);
  border-radius: var(--zen-radius-lg, 14px);
  aspect-ratio: 4 / 3;
}

.zen-product-page__img { max-width: 100%; max-height: 100%; object-fit: contain; }

.zen-product-page__intro { display: flex; flex-direction: column; gap: var(--zen-space-3, 0.75rem); }

.zen-product-page__tier {
  margin: 0;
  color: var(--zen-blue-600, #1560bd);
  font-size: var(--zen-step--1, 0.8rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.zen-product-page__title { margin: 0; color: var(--zen-blue-900, #0b2545); }

.zen-product-page__spec {
  margin: 0;
  color: var(--zen-ink-3, #6b7885);
  font-size: var(--zen-step-0, 1rem);
  font-weight: 600;
}

.zen-product-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zen-space-3, 0.75rem);
  margin: var(--zen-space-3, 0.75rem) 0 0;
}

.zen-product-page__body,
.zen-product-page__specs { margin-top: var(--zen-space-7, 3rem); }

.zen-product-page__specs table { width: 100%; border-collapse: collapse; }

.zen-product-page__specs th,
.zen-product-page__specs td {
  padding: var(--zen-space-3, 0.75rem);
  border-bottom: 1px solid var(--zen-line, #dde3e9);
  text-align: start;
}

.zen-product-page__specs th { width: 12rem; color: var(--zen-ink-3, #6b7885); font-weight: 600; }

.zen-product-page__quote { margin-top: var(--zen-space-7, 3rem); }

.zen-related { padding-block: var(--zen-space-7, 3rem); border-top: 1px solid var(--zen-line, #dde3e9); }
.zen-related h2 { margin-top: 0; color: var(--zen-blue-900, #0b2545); }