/**
 * Pillar page layout (template-parts/pillar-page/*), scoped under .hr-pillar.
 * Shared components (buttons, cards, FAQ, steps, facts table, reviewer, CTA, TOC, breadcrumb,
 * certifications) are in ui.css; legacy Manufacturing sections keep their own files
 * (style.css + factory-proof, hero, workflow components). Values come from tokens.css.
 */

.hr-pillar img {
	max-width: 100%;
	height: auto;
}

.hr-pillar__section {
	padding-top: var(--hr-section-padding-y);
	padding-bottom: var(--hr-section-padding-y);
}

/* 1 Hero */
/* Padding, not margin, so the hero band covers the space under the content. */
.hr-pillar__hero {
	padding-bottom: var(--hr-band-padding-y);
}

.hr-pillar__hero--media {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.hr-page .hr-pillar__hero .hub-hero {
	max-width: 56rem;
	margin-bottom: 0;
}

.hr-pillar__hero-media {
	margin: 0;
}

/* Space above the card and certification grids */
.hr-pillar :is(.hr-cards, .hr-hubcards) {
	margin-top: 30px;
}

.hr-pillar .hr-certs {
	margin-top: 2.5rem;
}

/* 3 Company + table of contents */
.hr-pillar__company {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.hr-pillar__prose > :last-child {
	margin-bottom: 0;
}

/* 5 Capability blocks: legacy grids, plus a 2-column variant for four items */
.hr-page .hr-pillar .capability-grid.hr-pillar__grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hr-page .hr-pillar .capability-grid {
	margin-top: 40px;
}

/* Card padding from the token, so a 16:9 card photo (ui.css .hr-card__photo) can bleed to the edges. */
.hr-page .hr-pillar .capability-card {
	padding: var(--hr-card-padding);
}

.hr-page .hr-pillar .factory-stats {
	margin-top: 40px;
}

.hr-pillar__stat-value {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.5rem;
	color: var(--hr-color-heading);
}

.hr-pillar .factory-stats p {
	margin-bottom: 0;
}

/* 6 Factory evidence photos */
.hr-pillar__gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 30px;
}

.hr-pillar__gallery figure {
	margin: 0;
}

.hr-pillar__gallery-img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--hr-radius-md);
	background: var(--hr-color-placeholder);
}

.hr-pillar figcaption {
	font-size: var(--hr-fs-xs);
	color: var(--hr-color-muted);
	margin-top: 0.5rem;
}

/* 10 Why choose us */
.hr-pillar__evidence-note {
	font-size: var(--hr-fs-small);
	color: var(--hr-color-muted);
	border-top: 1px solid var(--hr-color-border);
	padding-top: 0.75rem;
	margin-top: 0.75rem;
}

/* Tablet */
@media (max-width: 921px) {
	.hr-pillar__hero--media,
	.hr-pillar__company {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/* Hero image stays after the text (DOM order): H1, subtitle, summary, numbers, buttons, review line. */
	.hr-pillar__gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phone */
@media (max-width: 544px) {
	.hr-page .hr-pillar .capability-grid.hr-pillar__grid--2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.hr-pillar__gallery {
		grid-template-columns: minmax(0, 1fr);
	}
}