/**
 * Customization page — the Main Customization Options section (four columns,
 * full vertical expansion, no JS).
 *
 * Layout arithmetic: the page content
 * is .zenova-container — min(100% - 2rem, 1200 px) — so at a 1440 px viewport
 * the container is 1200 px, each of the four columns is 300 px, and the image
 * renders at 260 px (20 px column padding each side), not 306 px. The
 * registered zenova-customization-opt size (612 px) covers both 260 px and
 * 306 px at DPR2; inc/customization.php owns that arithmetic.
 *
 * The image box must never constrain height or clip: the reference page the
 * owner measured ships a fixed-height carousel viewport with
 * overflow: hidden that silently crops 63% of a square image. Here every
 * <img> flows at its natural height and its container grows with it —
 * acceptance criterion 11 measures exactly that. No height cap, no
 * overflow rule, no aspect-ratio pinning may be added to this file.
 *
 * Colors come from the --zenova-* tokens in global.css only; this file adds
 * nothing to the palette. The 1.25rem below is a deliberate 20 px column
 * padding — the token scale has no 20 px step (space-sm is 1rem, space-md
 * is 1.5rem).
 *
 * @package Zenova_Child
 */

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

/* Page header (breadcrumb → H1 → intro). The breadcrumb-header gap lives
 * here on the first block after the breadcrumb — the site-wide pattern the
 * other six pages follow (about-us / certifications / contact-us / factory /
 * legal / request-a-quote each absorb it into their first section). */
.zenova-customization__header {
	padding-block-start: var(--zenova-breadcrumb-header-gap);
}

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

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

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

.zenova-customization__columns {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	align-items: start;
}

.zenova-customization__column {
	padding-inline: 1.25rem; /* 20 px — see the file header: the token scale has no 20 px step. */
	scroll-margin-top: 6rem; /* Clearance for the fixed site header when the mobile jump chips anchor here. */
}

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

.zenova-customization__item {
	margin: 0;
}

.zenova-customization__item + .zenova-customization__item {
	margin-top: var(--zenova-space-md);
}

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

.zenova-customization__name {
	margin-top: var(--zenova-space-xs);
	text-align: center;
	color: var(--zenova-color-muted);
}

/* Jump chips — pure anchors into the four columns, shown only below 768 px
 * where the columns stack (wider than that all four are on screen at once).
 * Label and target come from the column array in options.php, not from CSS. */
.zenova-customization__jump {
	display: none;
}

/* Intro area (eyebrow + introduction), ACF-filled and rendered only when
 * the fields are not empty. */
.zenova-customization__eyebrow {
	margin: 0 0 var(--zenova-space-md);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zenova-color-muted);
}

.zenova-customization__intro {
	margin-bottom: var(--zenova-space-md);
}

.zenova-customization__intro-body {
	line-height: 1.65;
	color: var(--zenova-color-text);
}

/* Intro paragraph rhythm is fixed, not inherited from the theme's default
 * <p> margin: the eyebrow → body gap must be at least as wide as the gap
 * between body paragraphs, or the eyebrow reads as an orphan. */
.zenova-customization__intro-body p {
	margin: 0 0 var(--zenova-space-sm);
}

.zenova-customization__intro-body > :first-child {
	margin-top: 0;
}

/* The last paragraph's bottom margin belongs to the intro block's own
 * margin-bottom — the two must not stack. */
.zenova-customization__intro-body > :last-child {
	margin-bottom: 0;
}

/* Closing CTA block after the columns, ACF-filled and rendered only when
 * the fields are not empty. */
.zenova-customization__closing {
	margin-top: var(--zenova-space-lg);
}

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

.zenova-customization__closing-body {
	margin: 0 0 var(--zenova-space-md);
	line-height: 1.65;
	color: var(--zenova-color-muted);
}

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

	.zenova-customization__column + .zenova-customization__column {
		margin-top: var(--zenova-space-lg);
	}

	.zenova-customization__jump {
		display: flex;
		flex-wrap: wrap;
		gap: var(--zenova-space-xs);
		margin-bottom: var(--zenova-space-md);
	}

	.zenova-customization__jump-chip {
		padding: 0.375rem 0.875rem;
		border: 1px solid var(--zenova-color-border);
		border-radius: var(--zenova-radius);
		font-size: 0.875rem;
		color: var(--zenova-color-text);
		text-decoration: none;
		background: var(--zenova-color-surface);
	}
}