/**
 * Editorial & blog styling (spec §25).
 *
 * Loaded only on posts, the blog index, and non-shop archives (see
 * inc/enqueue.php). Covers long-form prose, the post grid, single articles,
 * archive headers, and pagination. Tokens/components only — no hard-coded
 * values, logical properties throughout for RTL.
 */

/* ===========================================================================
 * ARCHIVE / LISTING SHELL
 * ======================================================================== */
.aknb-archive {
	padding-block: var(--section-gap-sm);
}
.aknb-archive__head {
	max-inline-size: var(--content-width-narrow);
	margin-block-end: var(--space-10);
}
.aknb-archive__title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	margin: 0;
}
.aknb-archive__desc {
	margin-block-start: var(--space-4);
	color: var(--color-text-secondary);
}

/* ===========================================================================
 * POST GRID (blog index / archives)
 * ======================================================================== */
.aknb-postgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: var(--space-8) var(--grid-gap);
}
.aknb-postcard {
	position: relative;
}
.aknb-postcard__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	text-decoration: none;
	color: inherit;
	block-size: 100%;
}
.aknb-postcard__media {
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-surface-sunken);
}
.aknb-postcard__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}
.aknb-postcard__link:hover .aknb-postcard__media img {
	transform: scale(1.04);
}
.aknb-postcard__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.aknb-postcard__cat {
	font-size: var(--text-2xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--color-accent);
}
.aknb-postcard__title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--color-text);
	transition: color var(--dur-fast) var(--ease-standard);
}
.aknb-postcard__link:hover .aknb-postcard__title {
	color: var(--color-link-hover);
}
.aknb-postcard__excerpt {
	color: var(--color-text-secondary);
	font-size: var(--text-sm);
	line-height: var(--lh-relaxed);
}
.aknb-postcard__meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-block-start: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

/* ===========================================================================
 * SINGLE ARTICLE
 * ======================================================================== */
.aknb-article {
	max-inline-size: none;
	margin-inline: auto;
}
.aknb-article__head {
	text-align: center;
	margin-block-end: var(--space-8);
}
.aknb-article__title {
	font-family: var(--font-display);
	font-size: var(--text-4xl);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	margin: var(--space-2) 0 0;
}
.aknb-article__media {
	margin-block-end: var(--space-10);
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--color-surface-sunken);
}
.aknb-article__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* ===========================================================================
 * PROSE — long-form typographic rhythm (spec §25)
 * ======================================================================== */
.aknb-prose {
	color: var(--color-text);
	font-size: var(--text-md);
	line-height: var(--lh-relaxed);
}
.aknb-prose > * + * {
	margin-block-start: var(--space-5);
}
.aknb-prose h2 {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	margin-block-start: var(--space-10);
}
.aknb-prose h3 {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	line-height: var(--lh-snug);
	margin-block-start: var(--space-8);
}
.aknb-prose a {
	color: var(--color-link);
	text-underline-offset: 0.2em;
}
.aknb-prose a:hover {
	color: var(--color-link-hover);
}
.aknb-prose img,
.aknb-prose figure {
	border-radius: var(--radius-lg);
	max-inline-size: 100%;
	block-size: auto;
}
.aknb-prose figcaption {
	margin-block-start: var(--space-2);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-align: center;
}
.aknb-prose blockquote {
	margin-inline: 0;
	padding-inline-start: var(--space-5);
	border-inline-start: 3px solid var(--color-accent);
	font-family: var(--font-display);
	font-size: var(--text-lg);
	line-height: var(--lh-snug);
	color: var(--color-text-secondary);
}
.aknb-prose ul,
.aknb-prose ol {
	padding-inline-start: var(--space-6);
}
.aknb-prose li + li {
	margin-block-start: var(--space-2);
}
.aknb-prose code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--color-surface-sunken);
	padding: 0.15em 0.4em;
	border-radius: var(--radius-xs);
}
.aknb-prose pre {
	background: var(--color-surface-inverse);
	color: var(--color-text-inverse);
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	overflow-x: auto;
}
.aknb-prose pre code {
	background: none;
	padding: 0;
	color: inherit;
}
.aknb-prose hr {
	border: 0;
	border-block-start: 1px solid var(--color-border);
	margin-block: var(--space-10);
}

/* The two things core's wp-block-styles layer would have covered and nothing
 * else here does. Declined in inc/setup.php because its quote/pullquote rules
 * use physical borders and land on the wrong edge in Arabic, so the replacements
 * are logical-property equivalents on the block classes the editor emits. */
.aknb-prose .wp-block-pullquote {
	padding-block: var(--space-6);
	border-block: 2px solid var(--color-accent);
	text-align: center;
}
.aknb-prose .wp-block-pullquote blockquote {
	padding-inline: 0;
	border-inline-start: 0;
	font-size: var(--text-xl);
}
.aknb-prose .wp-block-pullquote cite {
	display: block;
	margin-block-start: var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-style: normal;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.aknb-prose table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}
.aknb-prose th,
.aknb-prose td {
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	text-align: start;
}
.aknb-prose th {
	font-weight: 600;
	background: var(--color-surface-sunken);
}
/* Wide tables scroll instead of forcing the page sideways (spec §27). */
.aknb-prose figure.wp-block-table {
	overflow-x: auto;
	border-radius: 0;
}

/* ===========================================================================
 * BLOCK ALIGNMENT FLOW — what makes add_theme_support( 'align-wide' ) real
 *
 * Core ships no front-end rules for .alignwide / .alignfull in a classic theme.
 * Its alignment layout lives under .is-layout-constrained, a class the block
 * editor puts on Group blocks and a block theme puts on the document root —
 * neither of which exists around the_content() here. Without this, the wide and
 * full alignment buttons appear in the editor and then do nothing on the page.
 *
 * A named-line grid rather than negative margins: no viewport units (so the
 * scrollbar can't push .alignfull past the edge and into body's overflow-x
 * clip), no width arithmetic to keep in sync, and the column order follows the
 * writing mode, so it mirrors for Arabic on its own.
 *
 * Column widths intentionally equal theme.json's layout.contentSize (1280) and
 * layout.wideSize (1400), so the editor canvas and the rendered page agree. The
 * content track is a min() rather than a minmax() because grid distributes free
 * space equally across flexible tracks: with three minmax(0, Npx) tracks and a
 * viewport too narrow for all of them, the 60px side tracks would steal from the
 * content column instead of collapsing first.
 * ======================================================================== */
.aknb-flow {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--gutter), 1fr)
		[wide-start] minmax(0, calc((var(--content-width-wide) - var(--content-width)) / 2))
		[content-start] min(var(--content-width), 100% - var(--gutter) * 2) [content-end]
		minmax(0, calc((var(--content-width-wide) - var(--content-width)) / 2)) [wide-end]
		minmax(var(--gutter), 1fr) [full-end];
}

.aknb-flow > * {
	grid-column: content;
	min-inline-size: 0;
}

.aknb-flow > .alignwide {
	grid-column: wide;
}

.aknb-flow > .alignfull {
	grid-column: full;
}

/* alignfull spans the gutters, so anything that relies on them for breathing
   room has to reinstate its own. Images and colour bands want the edge. */
.aknb-flow > .alignfull:not(figure):not(.wp-block-image):not(.wp-block-cover) {
	padding-inline: var(--gutter);
}

/* In the reading templates (page.php, single.php) the article is a deliberate
   768px measure inside the page container, and the measure is the point — a
   1400px line length is not an improvement on a policy page or a journal post.
   So wide and full alignment resolve to the full measure here rather than
   breaking out of it: an author who wants edge-to-edge composition assigns the
   "Full Width" page template, which is built on .aknb-flow above.
   Stated in CSS rather than left implicit, because "the button did nothing" and
   "the button is scoped" look identical from the editor. */
.aknb-prose > .alignwide,
.aknb-prose > .alignfull {
	inline-size: 100%;
	max-inline-size: 100%;
	margin-inline: 0;
}

/* --- Full Width page template (page-full-width.php) ---------------------- */

/* Vertical rhythm comes from row-gap rather than child margins, so a block the
   owner drops in from a pattern doesn't need to know what sits above it. */
.aknb-page--full {
	row-gap: var(--space-8);
	padding-block: 0 var(--space-16);
}

/* Top spacing belongs to the first child, not the article: a full-bleed opener
   (featured image, Cover block) has to touch the header to read as full-bleed,
   while a Heading or paragraph needs air. Expressed with :not() rather than
   :has() so it doesn't depend on browser support for one rule of breathing room. */
.aknb-page--full > *:first-child:not(.alignfull) {
	margin-block-start: var(--space-10);
}

/* Full-bleed featured image. Height is capped in vh so a tall upload can't push
   the whole page below the fold on a laptop. */
.aknb-page--full__media {
	margin: 0;
	background: var(--color-surface-sunken);
}

.aknb-page--full__media img {
	inline-size: 100%;
	max-block-size: 68vh;
	object-fit: cover;
}

/* Page-break links (wp_link_pages) */
.aknb-pagelinks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-block-start: var(--space-8);
}
.aknb-pagelinks a,
.aknb-pagelinks > span {
	min-inline-size: var(--tap-target);
	min-block-size: var(--tap-target);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-decoration: none;
}

/* ===========================================================================
 * PAGINATION (the_posts_pagination)
 * ======================================================================== */
.aknb-pagination {
	margin-block-start: var(--space-12);
}
.aknb-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
}
.aknb-pagination .page-numbers {
	min-inline-size: var(--tap-target);
	min-block-size: var(--tap-target);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--color-text);
	font-variant-numeric: tabular-nums;
	transition: border-color var(--dur-fast) var(--ease-standard),
		background-color var(--dur-fast) var(--ease-standard);
}
.aknb-pagination .page-numbers:hover {
	border-color: var(--color-border-strong);
	background: var(--color-surface-sunken);
}
.aknb-pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary);
}
.aknb-pagination .page-numbers.dots {
	border-color: transparent;
}

/* Empty-state search form spacing (index.php fallback) */
.aknb-state__action {
	margin-block-start: var(--space-6);
	display: flex;
	justify-content: center;
}

/* ===========================================================================
 * SINGLE POST — meta, caption, footer, tags, author, post-nav (spec §25)
 * ======================================================================== */
.aknb-single-post {
	padding-block: var(--space-10) var(--space-16);
}
.aknb-article__cat {
	display: inline-block;
	margin-block-end: var(--space-3);
}
.aknb-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin-block-start: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}
.aknb-article__caption {
	margin-block-start: var(--space-2);
	padding-inline: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	text-align: center;
}
.aknb-article__footer {
	max-inline-size: var(--content-width-narrow);
	margin: var(--space-10) auto 0;
}
.aknb-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.aknb-tag {
	display: inline-flex;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.aknb-tag:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}
.aknb-author {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
	margin-block-start: var(--space-8);
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface-sunken);
}
.aknb-author__avatar {
	flex: none;
}
.aknb-author__img {
	inline-size: 56px;
	block-size: 56px;
	border-radius: var(--radius-full);
}
.aknb-author__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.aknb-author__name {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
}
.aknb-author__bio {
	color: var(--color-text-secondary);
	font-size: var(--text-sm);
	line-height: var(--lh-relaxed);
}
.aknb-postnav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
	max-inline-size: var(--content-width-narrow);
	margin: var(--space-12) auto 0;
}
.aknb-postnav__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	text-decoration: none;
	color: var(--color-text);
	transition: border-color var(--dur-fast) var(--ease-standard);
}
.aknb-postnav__link:hover {
	border-color: var(--color-accent);
}
.aknb-postnav__link--next {
	text-align: end;
}
.aknb-postnav__link--prev:only-child {
	grid-column: 1;
}
.aknb-postnav__link--next:only-child {
	grid-column: 2;
}
.aknb-postnav__dir {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
}
.aknb-postnav__title {
	font-weight: var(--fw-medium);
}

/* ===========================================================================
 * SEARCH RESULTS — split product / article sections (spec §24)
 * ======================================================================== */
.aknb-search-results {
	padding-block: var(--space-10) var(--space-16);
}
.aknb-search-results__head {
	text-align: start;
}
.aknb-search-results__count {
	margin-block-start: var(--space-2);
	color: var(--color-text-muted);
}
.aknb-search-results__section + .aknb-search-results__section {
	margin-block-start: var(--space-16);
}
.aknb-search-results__section .aknb-section__head {
	margin-block-end: var(--space-6);
}

/* ===========================================================================
 * 404
 * ======================================================================== */
.aknb-404 {
	padding-block: var(--space-16);
}
.aknb-404__inner {
	max-inline-size: 40rem;
	margin-inline: auto;
	text-align: center;
}
.aknb-404__title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	margin-block: var(--space-2) var(--space-3);
}
.aknb-404__text {
	color: var(--color-text-secondary);
	font-size: var(--text-lg);
	margin: 0 auto var(--space-6);
	max-inline-size: 34rem;
}
.aknb-404__search {
	margin-block-end: var(--space-6);
}
.aknb-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
}

/* ===========================================================================
 * COMMENTS (spec §25)
 * ======================================================================== */
.aknb-comments {
	max-inline-size: var(--content-width-narrow);
	margin: var(--space-16) auto 0;
	padding-block-start: var(--space-10);
	border-block-start: 1px solid var(--color-border);
}
.aknb-comments__title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	margin-block-end: var(--space-6);
}
.aknb-comments__list {
	margin: 0 0 var(--space-8);
	padding: 0;
	list-style: none;
}
.aknb-comments__list ol.children {
	list-style: none;
	margin-block-start: var(--space-5);
	padding-inline-start: var(--space-6);
	border-inline-start: 1px solid var(--color-border);
}
.aknb-comments__list .comment-body {
	padding-block: var(--space-4);
}
.aknb-comments__list .comment + .comment {
	margin-block-start: var(--space-4);
	border-block-start: 1px solid var(--color-border);
}
.aknb-comments__list .comment-author {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-weight: var(--fw-medium);
}
.aknb-comments__list .comment-author img {
	border-radius: var(--radius-full);
}
.aknb-comments__list .comment-meta {
	margin-block: var(--space-1) var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}
.aknb-comments__list .comment-meta a {
	color: inherit;
	text-decoration: none;
}
.aknb-comments__list .reply {
	margin-block-start: var(--space-2);
	font-size: var(--text-sm);
}
.aknb-comments__closed {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	margin-block-end: var(--space-6);
}
.aknb-comments__reply-title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	margin-block-end: var(--space-4);
}
.aknb-comments__textarea {
	inline-size: 100%;
	resize: vertical;
}

/* ===========================================================================
 * RESPONSIVE
 * ======================================================================== */
@media (max-width: 600px) {
	.aknb-article__title {
		font-size: var(--text-3xl);
	}
	.aknb-archive__title {
		font-size: var(--text-2xl);
	}
	.aknb-postnav {
		grid-template-columns: 1fr;
	}
	.aknb-postnav__link--next {
		text-align: start;
	}
	.aknb-postnav__link--next:only-child,
	.aknb-postnav__link--prev:only-child {
		grid-column: 1;
	}
	.aknb-author {
		flex-direction: column;
	}
}