/*
 * ZARAK - blog.
 *
 * Loaded on the Posts page, single articles and post archives only
 * (mu-plugins/zarak-core/inc/blog.php), so no other page downloads it. The
 * page frame, title, gold rule, standfirst and long-form typography come from
 * the .zk-doc / .zk-shell / .zk-note system in components.css. This file adds
 * only the article grid and card, the article frame, and what an editor can
 * drop into content (figures, quotes, FAQ details, tables, buttons).
 */

/* ---------- category row ---------- */
.zk-blog { padding-block-end: var(--zk-space-10); }

.zk-blog-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--zk-space-2); margin: 0 0 var(--zk-space-7); padding: 0; list-style: none; }
.zk-blog-cats a {
  display: inline-flex; align-items: center; min-block-size: var(--zk-tap-min); padding-inline: var(--zk-space-4);
  border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-pill); background-color: var(--zk-white);
  color: var(--zk-ink); font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-medium); text-decoration: none;
  transition: background-color var(--zk-dur-fast) var(--zk-ease), border-color var(--zk-dur-fast) var(--zk-ease);
}
.zk-blog-cats a:hover { border-color: var(--zk-cocoa); background-color: var(--zk-ivory); }
.zk-blog-cats a[aria-current="page"] { border-color: var(--zk-cocoa-soft); background-color: var(--zk-cocoa-soft); color: var(--zk-white); }
.zk-blog-cats a:focus-visible { outline: var(--zk-focus-width) solid var(--zk-focus); outline-offset: var(--zk-focus-offset); }

/* ---------- article grid ---------- */
.zk-blog-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--zk-space-5); }
@media (min-width: 640px) { .zk-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zk-space-6); } }
@media (min-width: 1024px) { .zk-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- article card ---------- */
.zk-blog-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background-color: var(--zk-white); border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-lg);
  transition: border-color var(--zk-dur-base) var(--zk-ease);
}
.zk-blog-card:hover { border-color: var(--zk-cocoa); }
.zk-blog-card:focus-within { border-color: var(--zk-cocoa); outline: var(--zk-focus-width) solid var(--zk-focus); outline-offset: var(--zk-focus-offset); }
/* An article with no featured image gets a gold top edge, so it reads as a deliberate text card beside image cards. */
.zk-blog-card--text { border-block-start: 3px solid var(--zk-gold); }
.zk-blog-card__media { aspect-ratio: 3 / 2; background-color: var(--zk-ivory); overflow: hidden; }
.zk-blog-card__img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.zk-blog-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--zk-space-2); padding: var(--zk-space-5); }
.zk-blog-card__cat { font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-semibold); color: var(--zk-gold-deep); }
.zk-blog-card__title { margin: 0; font-family: var(--zk-font-display); font-size: var(--zk-fs-h3); font-weight: var(--zk-fw-semibold); line-height: 1.35; color: var(--zk-ink); text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.zk-blog-card__title a { color: inherit; text-decoration: none; }
/* One link per card: the title's hit area covers the whole card. */
.zk-blog-card__title a::after { content: ""; position: absolute; inset: 0; }
.zk-blog-card__title a:focus-visible { outline: none; }
.zk-blog-card__excerpt {
  margin: 0; font-size: var(--zk-fs-body-sm); line-height: 1.6; color: var(--zk-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.zk-blog-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--zk-space-3); margin-block-start: auto; padding-block-start: var(--zk-space-3); font-size: var(--zk-fs-caption); color: var(--zk-muted); }
.zk-blog-card__more { display: inline-flex; align-items: center; gap: var(--zk-space-1); margin-inline-start: auto; font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-semibold); color: var(--zk-cocoa); }
.zk-blog-card:hover .zk-blog-card__more svg { transform: translateX(2px); }
.zk-blog-card__more svg { transition: transform var(--zk-dur-base) var(--zk-ease); }

/* ---------- empty state ---------- */
.zk-blog-empty { max-inline-size: 36rem; margin-inline: auto; padding: var(--zk-space-8) var(--zk-space-5); text-align: center; background-color: var(--zk-ivory); border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-lg); }
.zk-blog-empty__title { margin: 0; font-family: var(--zk-font-display); font-size: var(--zk-fs-h2); font-weight: var(--zk-fw-semibold); color: var(--zk-ink); }
.zk-blog-empty p { margin: var(--zk-space-3) 0 var(--zk-space-6); color: var(--zk-muted); }

/* ---------- pagination ---------- */
.zk-blog-pager { margin-block-start: var(--zk-space-8); }
.zk-blog-pager ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--zk-space-2); margin: 0; padding: 0; list-style: none; }
.zk-blog-pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--zk-tap-min); min-block-size: var(--zk-tap-min); padding-inline: var(--zk-space-3);
  border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-sm); background-color: var(--zk-white); color: var(--zk-ink);
  font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-medium); line-height: 1; text-decoration: none; font-variant-numeric: tabular-nums;
}
.zk-blog-pager a.page-numbers:hover { border-color: var(--zk-cocoa); background-color: var(--zk-ivory); }
.zk-blog-pager a.page-numbers:focus-visible { outline: var(--zk-focus-width) solid var(--zk-focus); outline-offset: var(--zk-focus-offset); }
.zk-blog-pager .page-numbers.current { border-color: var(--zk-cocoa-soft); background-color: var(--zk-cocoa-soft); color: var(--zk-white); font-weight: var(--zk-fw-semibold); }
.zk-blog-pager .page-numbers.dots { border-color: transparent; background: none; color: var(--zk-muted); }

/* ---------- article head (ADR-078) ---------- */
/* Left-aligned editorial head: eyebrow, title, one quiet row of facts. */
.zk-post__head { padding-block: var(--zk-space-7) var(--zk-space-6); }
/* Eyebrows: the category above the title and the sidebar title share one treatment. */
.zk-post__cat, .zk-toc-side__title { display: flex; align-items: center; gap: var(--zk-space-3); font-size: var(--zk-fs-caption); font-weight: var(--zk-fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; }
.zk-post__cat::before, .zk-toc-side__title::before { content: ""; inline-size: var(--zk-space-5); block-size: 2px; background-color: var(--zk-gold); }
.zk-post__cat { position: relative; display: inline-flex; color: var(--zk-gold-deep); text-decoration: none; }
/* The label is visually small; its hit area still reaches the 44px floor. */
.zk-post__cat::after { content: ""; position: absolute; inset: calc(var(--zk-space-4) * -1) calc(var(--zk-space-2) * -1); }
.zk-post__title { max-inline-size: 22em; margin: var(--zk-space-4) 0 0; font-family: var(--zk-font-display); font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); font-weight: var(--zk-fw-bold); line-height: 1.15; letter-spacing: -0.02em; color: var(--zk-ink); text-wrap: balance; }

.zk-post__meta { display: flex; flex-wrap: wrap; gap: var(--zk-space-3) var(--zk-space-5); margin: var(--zk-space-6) 0 0; padding-block-start: var(--zk-space-5); border-block-start: 1px solid var(--zk-hairline); }
.zk-post__fact dt, .zk-post-author .zk-post-author__label { margin: 0; font-size: var(--zk-fs-caption); font-weight: var(--zk-fw-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--zk-muted); }
.zk-post__fact dd { margin: var(--zk-space-1) 0 0; font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-semibold); color: var(--zk-ink); }

.zk-post__media { margin: 0 0 var(--zk-space-7); overflow: hidden; border-radius: var(--zk-radius-lg); background-color: var(--zk-ivory); }
.zk-post__media img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- article layout ---------- */
.zk-post__layout { padding-block-end: var(--zk-space-10); }
.zk-post__layout:not(.has-aside) .zk-post__main { max-inline-size: 46rem; margin-inline: auto; }
.zk-post__aside { display: none; }

@media (min-width: 1024px) {
  .zk-post__head { padding-block: var(--zk-space-9) var(--zk-space-7); }
  .zk-post__media { margin-block-end: var(--zk-space-9); }
  .zk-post__layout.has-aside { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: var(--zk-space-9); align-items: start; }
  .zk-post__aside { display: flex; flex-direction: column; gap: var(--zk-space-8); align-self: stretch; }
  .zk-post__track { flex: 1; }
  .zk-toc-m { display: none; }
}
@media (min-width: 1200px) { .zk-post__layout.has-aside { gap: var(--zk-space-10); } }

/* ---------- On this page ---------- */
.zk-toc-list { margin: 0; padding: 0; list-style: none; }
.zk-toc-list a { display: block; color: var(--zk-ink); text-decoration: none; }
.zk-toc-list a:hover { color: var(--zk-cocoa); }

/* Desktop: sticky below the site header inside .zk-post__track; the list scrolls inside itself only on a short screen. */
.zk-post__sticky { --top: var(--zk-sticky-top, calc(var(--zk-space-10) + var(--zk-space-6))); position: sticky; inset-block-start: var(--top); display: flex; flex-direction: column; max-block-size: calc(100vh - var(--top) - var(--zk-space-6)); }
.zk-toc-side__title { margin: 0 0 var(--zk-space-3); color: var(--zk-cocoa); }
.zk-toc-side .zk-toc-list { position: relative; overflow-y: auto; overscroll-behavior: contain; border-inline-start: 1px solid var(--zk-hairline); }
.zk-toc-side .zk-toc-list a { margin-inline-start: -1px; padding: var(--zk-space-2) var(--zk-space-2) var(--zk-space-2) var(--zk-space-4); border-inline-start: 2px solid transparent; font-size: var(--zk-fs-body-sm); line-height: 1.45; color: var(--zk-muted); }
.zk-toc-side .zk-toc-list a[aria-current] { border-inline-start-color: var(--zk-gold); color: var(--zk-cocoa); font-weight: var(--zk-fw-semibold); }

/* Mobile and tablet: one collapsed row above the text. */
.zk-toc-m { margin-block-end: var(--zk-space-7); border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-md); background-color: var(--zk-white); }
.zk-toc-m summary { padding-inline: var(--zk-space-4); font-size: var(--zk-fs-body-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--zk-cocoa); }
.zk-toc-m .zk-toc-list { padding: 0 var(--zk-space-4) var(--zk-space-3); border-block-start: 1px solid var(--zk-hairline); }
.zk-toc-m .zk-toc-list a { padding-block: var(--zk-space-3); font-size: var(--zk-fs-body); line-height: 1.4; }
.zk-toc-m li + li { border-block-start: 1px solid var(--zk-hairline); }

/* ---------- sidebar shop card, secondary to the article ---------- */
.zk-post-shop { flex: none; padding: var(--zk-space-5); background-color: var(--zk-ivory); border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-md); }
.zk-post-shop__title { margin: 0 0 var(--zk-space-4); font-size: var(--zk-fs-body); font-weight: var(--zk-fw-semibold); line-height: 1.4; color: var(--zk-ink); }

/* ---------- end of article ---------- */
.zk-post__foot { margin-block-start: var(--zk-space-8); }
.zk-post__foot .zk-btn { margin-block-start: var(--zk-space-1); }
.zk-post-author { margin-block-start: var(--zk-space-9); padding-block-start: var(--zk-space-6); border-block-start: 1px solid var(--zk-hairline); }
.zk-post-author p { margin: var(--zk-space-1) 0 0; }
.zk-post-author__name { font-size: var(--zk-fs-h3); font-weight: var(--zk-fw-semibold); color: var(--zk-ink); }
.zk-post-author__bio { max-inline-size: 38rem; font-size: var(--zk-fs-body); line-height: 1.6; color: var(--zk-muted); }

.zk-post-related { padding-block: var(--zk-space-9) var(--zk-space-10); border-block-start: 1px solid var(--zk-hairline); }
.zk-post-related__title { margin: 0 0 var(--zk-space-6); text-align: center; font-family: var(--zk-font-display); font-size: var(--zk-fs-h1); font-weight: var(--zk-fw-semibold); color: var(--zk-ink); }

/* Long article titles never wrap the trail into a block: the current page truncates. */
.zk-blog-page .zk-breadcrumb .zk-container { max-inline-size: 1120px; }
.zk-blog-page .zk-breadcrumb__list { flex-wrap: nowrap; }
.zk-blog-page .zk-breadcrumb__item { flex: none; }
.zk-blog-page .zk-breadcrumb__item:last-child { flex: 0 1 auto; min-inline-size: 0; }
.zk-blog-page .zk-breadcrumb__current { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- article typography ---------- */
.zk-post__body { font-size: 16px; line-height: 1.75; }
.zk-post__body h2 { margin-block-start: var(--zk-space-10); font-size: 22px; font-weight: var(--zk-fw-bold); line-height: 1.25; letter-spacing: -0.01em; }
/* One short gold rule marks each section start. */
.zk-post__body h2::before { content: ""; display: block; inline-size: var(--zk-space-7); block-size: 2px; margin-block-end: var(--zk-space-4); background-color: var(--zk-gold); }
.zk-post__body h2 + * { margin-block-start: var(--zk-space-4); }
.zk-post__body h3 { font-size: 18px; }
@media (min-width: 1024px) {
  .zk-post__body { font-size: 17px; }
  .zk-post__body h2 { font-size: 28px; }
}

/* Direct answer at the top of a section: a paragraph given the `zk-answer` class. */
.zk-post__body .zk-answer { max-inline-size: none; padding: var(--zk-space-4) var(--zk-space-5); background-color: var(--zk-ivory); border-inline-start: 3px solid var(--zk-gold); border-radius: var(--zk-radius-md); color: var(--zk-cocoa); font-weight: var(--zk-fw-medium); }

/* ---------- editor content ---------- */
/* base.css strips markers from every list that carries a class, and the block editor classes its lists. */
.zk-post__body ul { list-style: disc; }
.zk-post__body ol { list-style: decimal; }
.zk-post__body h2, .zk-post__body h3 { scroll-margin-block-start: calc(var(--zk-space-10) + var(--zk-space-4)); text-wrap: pretty; }
.zk-post__body :is(img, video, iframe) { max-inline-size: 100%; block-size: auto; }
.zk-post__body figure { margin-inline: 0; }
.zk-post__body > .wp-block-image { margin-block: var(--zk-space-7); }
.zk-post__body figure img { display: block; inline-size: 100%; border-radius: var(--zk-radius-md); background-color: var(--zk-ivory); }
.zk-post__body :is(.alignwide, .alignfull, .alignleft, .alignright) { float: none; max-inline-size: 100%; margin-inline: 0; }

.zk-post__body blockquote { margin-inline: 0; padding: var(--zk-space-4) var(--zk-space-5); border-inline-start: 3px solid var(--zk-gold); }
.zk-post__body blockquote p { max-inline-size: none; margin: 0; }

/* Tables: a framed block that scrolls inside itself on a phone, never the page. */
.zk-post__body .wp-block-table { margin-block: var(--zk-space-6); overflow-x: auto; border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-md); }
.zk-post__body .wp-block-table table { margin: 0; font-size: var(--zk-fs-body-sm); line-height: 1.55; }
.zk-post__body thead th { padding-block: var(--zk-space-3); background-color: var(--zk-cocoa-soft); color: var(--zk-white); font-size: var(--zk-fs-caption); letter-spacing: 0.06em; text-transform: uppercase; border: 0; }
.zk-post__body td, .zk-post__body th { padding-inline: var(--zk-space-3); }
.zk-post__body td:first-child { font-weight: var(--zk-fw-semibold); color: var(--zk-cocoa); }
.zk-post__body tbody tr:last-child td { border-block-end: 0; }
.zk-post__body tbody tr:nth-child(even) { background-color: var(--zk-ivory); }
@media (min-width: 1024px) {
  .zk-post__body .wp-block-table table { font-size: var(--zk-fs-body); }
  .zk-post__body td, .zk-post__body th { padding-inline: var(--zk-space-4); }
}

/* FAQ: native <details>, from the Details block or plain HTML. */
.zk-post__body details { border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-md); }
.zk-post__body details + details { margin-block-start: var(--zk-space-3); }
.zk-post__body details[open] { border-color: var(--zk-cocoa-soft); }
.zk-post summary { display: flex; align-items: center; justify-content: space-between; gap: var(--zk-space-4); min-block-size: var(--zk-control-h-lg); font-weight: var(--zk-fw-semibold); cursor: pointer; list-style: none; }
.zk-post summary::-webkit-details-marker { display: none; }
.zk-post summary::after { content: ""; flex: none; inline-size: 16px; block-size: 16px; background: var(--zk-chevron) center / contain no-repeat; transition: transform var(--zk-dur-base) var(--zk-ease); }
.zk-post details[open] > summary::after { transform: rotate(180deg); }
.zk-post__body summary { padding: var(--zk-space-4) var(--zk-space-5); line-height: 1.45; color: var(--zk-ink); }
.zk-post__body details > :not(summary) { margin: 0; padding: 0 var(--zk-space-5) var(--zk-space-5); color: var(--zk-ink); }

/* An article's own closing call to action: a Group block with the `zk-post-cta` class. */
.zk-post__body .zk-post-cta { margin-block-start: var(--zk-space-9); padding: var(--zk-space-6); background-color: var(--zk-ivory); border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-lg); }
.zk-post__body .zk-post-cta > * + * { margin-block-start: var(--zk-space-4); }
.zk-post__body .zk-post-cta p { max-inline-size: none; }

/* Buttons block: the same primary button the storefront uses. */
.zk-post__body .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--zk-control-h); padding: 0 var(--zk-space-6); font-size: var(--zk-fs-button); line-height: 1.2;
  border-radius: var(--zk-radius-md); background-color: var(--zk-cocoa-soft); color: var(--zk-white); font-weight: var(--zk-fw-semibold); text-decoration: none;
}
.zk-post__body .wp-block-button__link:hover { background-color: var(--zk-cocoa-soft-hover); }
:is(.zk-post__cat, .zk-toc-list a, .zk-post summary, .zk-post__body .wp-block-button__link):focus-visible { outline: var(--zk-focus-width) solid var(--zk-focus); outline-offset: var(--zk-focus-offset); }