/**
 * Projects — collection page (/projects/) and case detail pages.
 *
 * Layout only: the copy lives in the zenova_project posts (entered in
 * wp-admin) and in the template-parts, approved in
 * docs/projects-copy-draft.md. Colors and spacing come from the --zenova-*
 * tokens in global.css; nothing is added to the palette.
 *
 * The breadcrumb-header gap lives on the first block after the breadcrumb
 * — the hero on the collection page (padding-block-start in
 * .zenova-projects__hero) and the case header on the detail page
 * (.zenova-project-single__header) — per the site-wide pattern; the
 * breadcrumbs themselves carry no margin.
 *
 * @package Zenova_Child
 */

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

/* Hero ------------------------------------------------------------------- */

.zenova-projects__hero {
	padding-block-start: var(--zenova-breadcrumb-header-gap);
}

.zenova-projects__title {
	margin: 0 0 var(--zenova-space-sm);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	line-height: 1.2;
	color: var(--zenova-color-text);
}

.zenova-projects__intro {
	margin: 0 0 var(--zenova-space-md);
	max-width: var(--zenova-reading-width);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--zenova-color-text);
}

/* Supply-scope note + disclaimer — the shared part rendered in the hero
   above and in the detail page notes block (scope-note.php). The supply
   sentence is set off so it is not mistaken for case copy. */
.zenova-project-scope-note__supply {
	margin: 0 0 var(--zenova-space-md);
	padding: var(--zenova-space-sm) var(--zenova-space-md);
	border-left: 3px solid var(--zenova-color-accent);
	background: var(--zenova-color-surface);
	border-radius: var(--zenova-radius);
	box-shadow: 0 0 0 1px var(--zenova-color-border) inset;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--zenova-color-text);
}

.zenova-project-scope-note__disclaimer {
	margin: 0;
	max-width: var(--zenova-reading-width);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--zenova-color-muted);
}

.zenova-project-scope-note__disclaimer a {
	color: var(--zenova-color-accent);
}

/* Case grid — three columns from 1024px, two from 640px, one below; the
   same breakpoints and arithmetic as the technical-guides grid, so the
   card sizes attribute in template-parts/projects/card.php stays in sync
   with the one in template-parts/technical-guides/card.php. */
.zenova-projects__grid {
	margin-block-start: var(--zenova-space-md);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--zenova-space-md);
}

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

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

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

/* The frame is pinned at 3:4 — 16 of the 18 case photos are 3:4 portrait
   sources; a landscape source is cropped into the frame, which is
   acceptable on a card. The pin also stabilises the grid before an image
   loads. */
.zenova-project-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--zenova-radius);
}

/* Same shape the customization page uses (.zenova-customization__eyebrow),
   copied so the two cannot drift. */
.zenova-project-card__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-project-card__title {
	margin: 0 0 var(--zenova-space-xs);
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--zenova-color-text);
}

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

.zenova-project-card__link:hover,
.zenova-project-card__link:focus-visible {
	color: var(--zenova-color-accent);
}

.zenova-project-card__one-liner {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--zenova-color-muted);
}

/* Case detail page (single-zenova_project.php) ---------------------------- */

.zenova-project-single__header {
	padding-block-start: var(--zenova-breadcrumb-header-gap);
}

.zenova-project-single__title {
	margin: 0 0 var(--zenova-space-md);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	line-height: 1.2;
	color: var(--zenova-color-text);
}

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

.zenova-project-single__facts {
	margin: var(--zenova-space-md) 0 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--zenova-space-sm) var(--zenova-space-md);
}

.zenova-project-single__fact {
	margin: 0;
}

.zenova-project-single__fact dt {
	margin: 0 0 var(--zenova-space-xs);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--zenova-color-muted);
}

.zenova-project-single__fact dd {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--zenova-color-text);
}

.zenova-project-single__block {
	margin-block-start: var(--zenova-space-lg);
}

.zenova-project-single__block-title {
	margin: 0 0 var(--zenova-space-xs);
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--zenova-color-text);
}

.zenova-project-single__block p,
.zenova-project-single__solution {
	max-width: var(--zenova-reading-width);
}

.zenova-project-single__solution {
	margin: 0;
	padding-inline-start: 1.25rem;
}

.zenova-project-single__solution li {
	margin-block-end: var(--zenova-space-xs);
}

/* The one-liner quote — same border-led shape the one-page version used. */
.zenova-project-single__one-liner {
	margin: var(--zenova-space-lg) 0 0;
	padding: var(--zenova-space-xs) 0 var(--zenova-space-xs) var(--zenova-space-sm);
	border-inline-start: 3px solid var(--zenova-color-border);
	font-style: italic;
}

.zenova-project-single__one-liner p {
	margin: 0;
	color: var(--zenova-color-text);
}

/* Gallery — two columns on desktop, one on mobile; cells keep their own
   ratio (no crop, no aspect-ratio pin), so the 4:3 landscape sources can
   never be cropped into portrait cells. */
.zenova-project-single__gallery {
	margin-block-start: var(--zenova-space-lg);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--zenova-space-sm);
}

.zenova-project-single__figure {
	margin: 0;
}

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

.zenova-project-single__notes {
	margin-block-start: var(--zenova-space-lg);
}

.zenova-project-single__more {
	margin-block-start: var(--zenova-space-lg);
}

.zenova-project-single__more-title {
	margin: 0 0 var(--zenova-space-sm);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	line-height: 1.2;
	color: var(--zenova-color-text);
}

/* CTA -------------------------------------------------------------------- */

.zenova-projects__cta {
	padding-block: var(--zenova-space-lg) 0;
}

.zenova-projects__cta-title {
	margin: 0 0 var(--zenova-space-sm);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	line-height: 1.2;
	color: var(--zenova-color-text);
}

.zenova-projects__cta-text {
	margin: 0 0 var(--zenova-space-md);
	max-width: var(--zenova-reading-width);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--zenova-color-text);
}

.zenova-projects__actions {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--zenova-space-sm);
}

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

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

	.zenova-project-single__facts {
		grid-template-columns: 1fr;
	}

	.zenova-project-single__gallery {
		grid-template-columns: 1fr;
	}
}