/**
 * Certifications page styles.
 *
 * Structurally this is the legal-page layout (a measure-limited column of
 * rule-separated sections) with one addition: the certificate cards. It does
 * not reuse legal.css because these two pages are not the same document type —
 * a change to the legal pages' rhythm should not silently restyle a marketing
 * trust page, and vice versa. Every value below is an existing token; nothing
 * new enters the palette.
 *
 * @package Zenova_Child
 */

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

/*
 * The intro and the sections share one measure so the page reads as a single
 * column. The CTA band below is deliberately outside this wrapper — it is
 * full-bleed, same as .zenova-factory__cta.
 */
.zenova-certifications__header {
	padding-block: var(--zenova-breadcrumb-header-gap) var(--zenova-space-lg);
	max-width: 820px;
}

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

.zenova-certifications__lead {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--zenova-color-muted);
}

.zenova-certifications__section {
	max-width: 820px;
	padding-block: var(--zenova-space-lg);
	border-top: 1px solid var(--zenova-color-border);
}

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

.zenova-certifications__section p {
	margin: 0 0 var(--zenova-space-sm);
	line-height: 1.7;
	color: var(--zenova-color-text);
}

.zenova-certifications__section p:last-child {
	margin-bottom: 0;
}

/* Certificate card */
.zenova-certifications__cert {
	padding: var(--zenova-space-md);
	border: 1px solid var(--zenova-color-border);
	border-radius: var(--zenova-radius);
}

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

.zenova-certifications__cert-name {
	margin: 0 0 var(--zenova-space-xs);
	font-size: 1.125rem;
	color: var(--zenova-color-text);
}

/*
 * The licensee line is the one that says these certificates belong to the glass
 * factory rather than to us. It is muted so the card reads name-first, but it
 * must stay legible body-size text — it is not fine print, it is the point.
 */
.zenova-certifications__cert-licensee {
	color: var(--zenova-color-muted);
}

.zenova-certifications__sep {
	padding-inline: 0.25rem;
	color: var(--zenova-color-border);
}

.zenova-certifications__verify {
	color: var(--zenova-color-muted);
}

.zenova-certifications__link {
	color: var(--zenova-color-accent);
	font-weight: 600;
	text-decoration: none;
}

.zenova-certifications__link:hover,
.zenova-certifications__link:focus-visible {
	text-decoration: underline;
}

/* Closing CTA band — same inversion as .zenova-factory__cta, same tokens. */
.zenova-certifications__cta {
	margin-top: var(--zenova-space-xl);
	padding-block: var(--zenova-space-xl);
	background: var(--zenova-color-text);
}

.zenova-certifications__cta-heading {
	margin: 0 0 var(--zenova-space-sm);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	color: var(--zenova-color-surface);
}

.zenova-certifications__cta-body {
	margin: 0 0 var(--zenova-space-md);
	max-width: 60ch;
	line-height: 1.7;
	color: var(--zenova-color-border);
}

.zenova-certifications__cta-body p {
	margin: 0;
}

.zenova-certifications__cta .zenova-button--primary {
	background: var(--zenova-color-surface);
	color: var(--zenova-color-text);
}

.zenova-certifications__cta .zenova-button--primary:hover,
.zenova-certifications__cta .zenova-button--primary:focus-visible {
	background: var(--zenova-color-border);
	color: var(--zenova-color-text);
}

.zenova-certifications__cta .zenova-button:focus-visible {
	outline-color: var(--zenova-color-surface);
}