/**
 * Blog - listing grid and article detail.
 *
 * Mobile-first. Two breakpoints only, both already used elsewhere in the theme:
 * 768px and 1024px. Colour, type, radius and shadow all come from _tokens.css.
 *
 * @package Qyx
 */

:root {
	/* The landing builder defines these in landing-cpt.css, which is enqueued
	   only on that CPT. Same values, redeclared so the blog gets the theme's
	   container rhythm without loading an unrelated stylesheet. */
	--qyx-blog-gutter: clamp(1rem, 4vw, 2rem);
	--qyx-blog-maxw: 78rem;
	/* Reading measure for the article body. */
	--qyx-blog-measure: 68ch;
}

/* -------------------------------------------------------------------------
 * Shell
 * ---------------------------------------------------------------------- */

.qyx-blog,
.qyx-blog__post {
	display: block;
	padding-block: clamp(2.75rem, 5.5vw, 5rem);
	background: var(--qyx-bg-light);
}

.qyx-blog__wrap {
	width: 100%;
	max-width: var(--qyx-blog-maxw);
	margin-inline: auto;
	padding-inline: var(--qyx-blog-gutter);
}

.qyx-blog__wrap--article {
	max-width: calc(var(--qyx-blog-measure) + 2 * var(--qyx-blog-gutter));
}

.qyx-blog__intro {
	margin-block-end: clamp(2rem, 4vw, 3rem);
}

.qyx-blog__title {
	font-family: var(--qyx-font-heading);
	font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--qyx-heading);
}

.qyx-blog__archive-description {
	margin-block-start: 0.75rem;
	max-width: var(--qyx-blog-measure);
	color: var(--qyx-text-muted);
}

.qyx-blog__empty {
	padding-block: clamp(2rem, 6vw, 4rem);
	color: var(--qyx-text-muted);
	font-size: 1.125rem;
}

/* -------------------------------------------------------------------------
 * Card grid
 * ---------------------------------------------------------------------- */

.qyx-blog__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 768px) {
	.qyx-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.qyx-blog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.qyx-blog__card {
	display: flex;
	background: var(--qyx-card-bg-light);
	border: 1px solid var(--qyx-card-border-light);
	border-radius: var(--qyx-card-radius);
	box-shadow: var(--qyx-card-shadow);
	overflow: hidden;
	transition: transform 220ms ease, box-shadow 220ms ease;
}

.qyx-blog__card:hover,
.qyx-blog__card:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.1);
}

.qyx-blog__card-link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.qyx-blog__card-link:focus-visible {
	outline: 2px solid var(--qyx-primary);
	outline-offset: -2px;
}

.qyx-blog__card-figure {
	margin: 0;
	aspect-ratio: 16 / 9;
	background: var(--qyx-bg-light);
}

.qyx-blog__card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.qyx-blog__card-body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1rem, 2.4vw, 1.5rem);
}

.qyx-blog__card-category {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qyx-text-muted);
}

.qyx-blog__card-title {
	font-family: var(--qyx-font-heading);
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--qyx-heading);
}

.qyx-blog__card-excerpt {
	color: var(--qyx-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.qyx-blog__card-meta {
	margin-block-start: auto;
	padding-block-start: 0.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: 0.8125rem;
	color: var(--qyx-text-muted);
}

.qyx-blog__card-dot { opacity: 0.5; }

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

.qyx-blog__pagination {
	margin-block-start: clamp(2rem, 5vw, 3.5rem);
}

.qyx-blog__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.qyx-blog__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: 0.75rem;
	border: 1px solid var(--qyx-card-border-light);
	border-radius: var(--qyx-radius);
	background: var(--qyx-card-bg-light);
	color: var(--qyx-text);
	text-decoration: none;
	font-size: 0.9375rem;
	transition: border-color 180ms ease, background 180ms ease;
}

.qyx-blog__pagination .page-numbers:hover {
	border-color: var(--qyx-primary);
}

.qyx-blog__pagination .page-numbers.current {
	background: var(--qyx-primary);
	border-color: var(--qyx-primary);
	color: var(--qyx-primary-fg);
}

/* -------------------------------------------------------------------------
 * Article header
 * ---------------------------------------------------------------------- */

.qyx-blog__breadcrumb {
	margin-block-end: 1.5rem;
	font-size: 0.8125rem;
	color: var(--qyx-text-muted);
}

.qyx-blog__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.qyx-blog__breadcrumb-item + .qyx-blog__breadcrumb-item::before {
	content: "/";
	margin-inline-end: 0.4rem;
	opacity: 0.45;
}

.qyx-blog__breadcrumb-link {
	color: inherit;
	text-decoration: none;
}

.qyx-blog__breadcrumb-link:hover { color: var(--qyx-text); }

.qyx-blog__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: 0.875rem;
	color: var(--qyx-text-muted);
}

.qyx-blog__meta-category {
	color: var(--qyx-text);
	font-weight: 600;
	text-decoration: none;
}

.qyx-blog__meta-dot { opacity: 0.5; }

.qyx-blog__post-title {
	margin-block: 0.75rem 0;
	font-family: var(--qyx-font-heading);
	font-size: clamp(2rem, 1.1rem + 3.8vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--qyx-heading);
}

/* TL;DR - the summary an answer engine lifts, so it stays a plain readable
   paragraph rather than a visually-hidden aside. */
.qyx-blog__tldr {
	margin-block-start: 1.25rem;
	padding-inline-start: 1rem;
	border-inline-start: 3px solid var(--qyx-grad-1);
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--qyx-text);
}

.qyx-blog__figure {
	margin: clamp(1.75rem, 4vw, 2.5rem) 0;
}

.qyx-blog__figure-image {
	width: 100%;
	height: auto;
	border-radius: var(--qyx-card-radius);
}

/* -------------------------------------------------------------------------
 * Article body
 * ---------------------------------------------------------------------- */

.qyx-blog__content {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--qyx-text);
}

.qyx-blog__content > * + * { margin-block-start: 1.25rem; }

.qyx-blog__content h2 {
	margin-block-start: clamp(2rem, 4vw, 2.75rem);
	font-family: var(--qyx-font-heading);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	line-height: 1.2;
	color: var(--qyx-heading);
	scroll-margin-top: calc(var(--qyx-header-h) + 1rem);
}

.qyx-blog__content h3 {
	margin-block-start: 2rem;
	font-family: var(--qyx-font-heading);
	font-size: 1.25rem;
	color: var(--qyx-heading);
}

/* Body links get the underline. The TOC and the in-article CTA are injected
   into the_content() by inc/blog.php, so they live inside this wrapper too -
   and a bare `.qyx-blog__content a` rule outranks their own class (0-1-1 beats
   0-1-0), which painted the CTA label dark-on-black and underlined it. They are
   excluded here rather than fought with higher specificity further down. */
.qyx-blog__content a:not(.qyx-blog__toc-link, .qyx-blog__midcta-link) {
	color: var(--qyx-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.qyx-blog__content a:not(.qyx-blog__toc-link, .qyx-blog__midcta-link):hover {
	color: var(--qyx-grad-2);
}

.qyx-blog__content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--qyx-radius);
}

.qyx-blog__content figure { margin-inline: 0; }

.qyx-blog__content figcaption {
	margin-block-start: 0.5rem;
	font-size: 0.875rem;
	color: var(--qyx-text-muted);
}

.qyx-blog__content ul,
.qyx-blog__content ol { padding-inline-start: 1.5rem; }

.qyx-blog__content li + li { margin-block-start: 0.4rem; }

.qyx-blog__content blockquote {
	padding-inline-start: 1.25rem;
	border-inline-start: 3px solid var(--qyx-border);
	color: var(--qyx-text-muted);
	font-style: italic;
}

.qyx-blog__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.qyx-blog__content th,
.qyx-blog__content td {
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--qyx-border);
	text-align: start;
}

/* -------------------------------------------------------------------------
 * Table of contents
 * ---------------------------------------------------------------------- */

.qyx-blog__toc {
	margin-block: clamp(1.5rem, 3vw, 2rem);
	padding: clamp(1rem, 2.4vw, 1.25rem);
	background: var(--qyx-card-bg-light);
	border: 1px solid var(--qyx-card-border-light);
	border-radius: var(--qyx-radius);
}

.qyx-blog__toc-summary {
	font-family: var(--qyx-font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--qyx-text-muted);
	cursor: pointer;
}

.qyx-blog__toc-list {
	margin-block-start: 0.75rem;
	padding-inline-start: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-size: 0.9375rem;
}

.qyx-blog__toc-link {
	color: var(--qyx-text-muted);
	text-decoration: none;
	transition: color 160ms ease;
}

.qyx-blog__toc-link:hover { color: var(--qyx-text); }

.qyx-blog__toc-link--active {
	color: var(--qyx-text);
	font-weight: 600;
}

/* From 768px the toggle disappears and the list is simply always open. The
   markup ships <details open>, so removing the summary cannot hide anything. */
@media (min-width: 768px) {
	.qyx-blog__toc-summary { display: none; }
	.qyx-blog__toc-list { margin-block-start: 0; }
}

/* -------------------------------------------------------------------------
 * CTAs
 * ---------------------------------------------------------------------- */

.qyx-blog__midcta {
	margin-block: clamp(1.75rem, 4vw, 2.5rem);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem;
	background: var(--qyx-card-pastel-1);
	border-radius: var(--qyx-card-radius);
}

.qyx-blog__midcta-title {
	font-family: var(--qyx-font-heading);
	font-size: 1.125rem;
	line-height: 1.35;
	color: var(--qyx-heading);
}

.qyx-blog__midcta-link {
	display: inline-flex;
	align-items: center;
	height: 2.75rem;
	padding-inline: 1.25rem;
	border-radius: 999px;
	background: var(--qyx-primary);
	color: var(--qyx-primary-fg);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.qyx-blog__cta {
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	background: var(--qyx-card-bg-dark);
	border-radius: var(--qyx-card-radius);
	color: var(--qyx-text-dark);
}

.qyx-blog__cta-title {
	font-family: var(--qyx-font-heading);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	line-height: 1.25;
	color: var(--qyx-text-dark);
}

.qyx-blog__cta-sub {
	color: var(--qyx-text-dark-muted);
	font-size: 0.9375rem;
}

/* -------------------------------------------------------------------------
 * Author, share, related
 * ---------------------------------------------------------------------- */

.qyx-blog__author {
	margin-block-start: clamp(2rem, 4vw, 3rem);
	padding-block-start: clamp(1.5rem, 3vw, 2rem);
	border-block-start: 1px solid var(--qyx-border);
	display: flex;
	gap: 1rem;
	font-style: normal;
}

.qyx-blog__author-avatar {
	flex-shrink: 0;
	border-radius: 999px;
}

.qyx-blog__author-body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.qyx-blog__author-name {
	font-weight: 600;
	color: var(--qyx-heading);
}

.qyx-blog__author-bio {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--qyx-text-muted);
}

.qyx-blog__share {
	margin-block-start: clamp(1.75rem, 3.5vw, 2.5rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.qyx-blog__share-heading {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qyx-text-muted);
}

.qyx-blog__share-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.qyx-blog__share-link {
	display: inline-flex;
	align-items: center;
	height: 2.25rem;
	padding-inline: 0.875rem;
	border: 1px solid var(--qyx-card-border-light);
	border-radius: 999px;
	background: var(--qyx-card-bg-light);
	color: var(--qyx-text);
	font-size: 0.875rem;
	text-decoration: none;
	transition: border-color 180ms ease;
}

.qyx-blog__share-link:hover { border-color: var(--qyx-primary); }

.qyx-blog__related {
	margin-block-start: clamp(2.5rem, 5vw, 4rem);
	padding-block-start: clamp(1.5rem, 3vw, 2rem);
	border-block-start: 1px solid var(--qyx-border);
}

.qyx-blog__related-heading {
	margin-block-end: clamp(1.25rem, 3vw, 1.75rem);
	font-family: var(--qyx-font-heading);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	color: var(--qyx-heading);
}

/* Related cards sit inside the narrow article column, so they stay single-file
   until there is genuinely room for a row of three. */
.qyx-blog__related .qyx-blog__grid { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1024px) {
	.qyx-blog__related .qyx-blog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.qyx-blog__card,
	.qyx-blog__toc-link,
	.qyx-blog__share-link,
	.qyx-blog__pagination .page-numbers { transition: none; }

	.qyx-blog__card:hover,
	.qyx-blog__card:focus-within { transform: none; }
}