/**
 * Technical Guides — index + article pages.
 *
 * Colors and spacing come from the --zenova-* tokens in global.css only;
 * this file adds nothing to the palette. Bare values in this file, each
 * with its reason: the media-query widths below (structural breakpoints,
 * not design values — the same exception customization.css documents);
 * the eyebrow font-size / letter-spacing (verbatim copy of
 * .zenova-customization__eyebrow so the two pages cannot drift, per the
 * comment above that rule); the unitless line-heights (ratios, the same
 * shape global.css uses); the 1px table and closing borders (hairline
 * thickness around the token border color — the same pattern as the moved
 * FAQ block); width/height 100% + auto (structural). The reading measure
 * is the shared --zenova-reading-width token (global.css).
 *
 * @package Zenova_Child
 */

.zenova-technical-guides {
	padding-block-end: var(--zenova-space-xl);
}

/* Header blocks (breadcrumb → H1 → intro on the index; breadcrumb →
 * eyebrow → H1 on articles). The breadcrumb-header gap lives here
 * on the first block after the breadcrumb — the site-wide pattern the
 * other virtual pages follow; the breadcrumb itself carries no margin. */
.zenova-technical-guides__header,
.zenova-guide-article__header {
	padding-block-start: var(--zenova-breadcrumb-header-gap);
}

.zenova-technical-guides__title {
	margin: 0 0 var(--zenova-space-xs);
	color: var(--zenova-color-text);
}

.zenova-technical-guides__intro {
	margin: 0 0 var(--zenova-space-md);
	max-width: var(--zenova-reading-width);
	line-height: 1.65;
	color: var(--zenova-color-muted);
}

/* Groups — one per guide group, published cards only. */
.zenova-guide-group {
	padding-block: var(--zenova-space-lg) 0;
}

.zenova-guide-group__title {
	margin: 0 0 var(--zenova-space-md);
	color: var(--zenova-color-text);
}

/* Card grid: three columns from 1024px, two from 640px, one below. Two
 * cards in a three-column grid stay left-aligned by construction — no
 * stretching (the grid repeats the column track, it does not flex the
 * items). */
.zenova-guide-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--zenova-space-md);
}

.zenova-guide-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.zenova-guide-card__image-link {
	display: block;
	margin: 0 0 var(--zenova-space-sm);
}

/* The registered zenova-guide-card size is a 3:2 hard crop, so the
 * aspect-ratio pins the exact frame the crop produces — it stabilises the
 * grid even before an image loads and keeps a future off-ratio source
 * from stretching the row. */
.zenova-guide-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--zenova-radius);
}

.zenova-guide-card__title {
	margin: 0 0 var(--zenova-space-xs);
	color: var(--zenova-color-text);
}

.zenova-guide-card__link {
	color: inherit;
	text-decoration: none;
}

.zenova-guide-card__link:hover,
.zenova-guide-card__link:focus-visible {
	color: var(--zenova-color-accent);
	text-decoration: underline;
}

.zenova-guide-card__summary {
	margin: 0;
	line-height: 1.65;
	color: var(--zenova-color-muted);
}

/* Article header — the eyebrow is the same shape the customization page
 * uses (customization.css .zenova-customization__eyebrow), so the two
 * pages cannot drift in look. */
.zenova-guide-article__eyebrow {
	margin: 0 0 var(--zenova-space-xs);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zenova-color-muted);
}

.zenova-guide-article__title {
	margin: 0;
	color: var(--zenova-color-text);
}

/* LCP figure. The image always renders at its natural ratio — no height
 * cap, no clipping — the same rule customization.css documents. */
.zenova-guide-article__figure {
	margin: var(--zenova-space-md) 0 var(--zenova-space-lg);
}

.zenova-guide-article__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--zenova-radius);
}

.zenova-guide-article__caption {
	margin: var(--zenova-space-xs) 0 0;
	color: var(--zenova-color-muted);
}

/* Body column: the shared reading measure, table content scrolls INSIDE
 * the column so a 375px viewport never scrolls the page horizontally. */
.zenova-guide-article__body {
	max-width: var(--zenova-reading-width);
	line-height: 1.7;
	color: var(--zenova-color-text);
}

.zenova-guide-article__body h2 {
	margin: var(--zenova-space-lg) 0 var(--zenova-space-sm);
	line-height: 1.3;
	color: var(--zenova-color-text);
}

.zenova-guide-article__body h3 {
	margin: var(--zenova-space-md) 0 var(--zenova-space-xs);
	color: var(--zenova-color-text);
}

.zenova-guide-article__body p,
.zenova-guide-article__body ul,
.zenova-guide-article__body ol {
	margin: 0 0 var(--zenova-space-sm);
}

.zenova-guide__table-scroll {
	overflow-x: auto;
	margin: 0 0 var(--zenova-space-md);
}

.zenova-guide__table-scroll table {
	width: 100%;
	border-collapse: collapse;
}

.zenova-guide__table-scroll th,
.zenova-guide__table-scroll td {
	padding: var(--zenova-space-xs) var(--zenova-space-sm);
	border: 1px solid var(--zenova-color-border);
	text-align: left;
	vertical-align: top;
}

/* In-body specification drawing (static theme SVG). The image fills the
 * body column at its natural ratio — the SVG has its own white
 * background, no border needed; the caption is the same shape the LCP
 * figure uses above. */
.zenova-guide-drawing {
	margin: 0 0 var(--zenova-space-md);
}

.zenova-guide-drawing__image {
	display: block;
	width: 100%;
	height: auto;
}

.zenova-guide-drawing__caption {
	margin: var(--zenova-space-xs) 0 0;
	color: var(--zenova-color-muted);
}

/* More block — other published articles, same group first, max 3; the
 * template skips the whole block when there is nothing to show. */
.zenova-guide-more {
	margin-top: var(--zenova-space-xl);
}

.zenova-guide-more__title {
	margin: 0 0 var(--zenova-space-md);
	color: var(--zenova-color-text);
}

/* Closing CTA — one sentence + the shared primary button. */
.zenova-technical-guides__closing {
	margin-top: var(--zenova-space-xl);
	padding-block: var(--zenova-space-lg);
	border-block: 1px solid var(--zenova-color-border);
}

.zenova-technical-guides__closing-text {
	margin: 0 0 var(--zenova-space-md);
	max-width: var(--zenova-reading-width);
	line-height: 1.65;
	color: var(--zenova-color-muted);
}

@media (max-width: 1023px) {
	.zenova-guide-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.zenova-guide-grid {
		grid-template-columns: 1fr;
	}
}