/* VHHC Agritech Premium — component & layout styles, built on ported design tokens. */

.vhhc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-primary);
	color: var(--text-inverse);
	padding: var(--space-3) var(--space-4);
	z-index: 100;
}
.vhhc-skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* ---------- Layout ---------- */
.vhhc-container {
	max-width: var(--layout-max);
	margin: 0 auto;
	padding: 0 var(--layout-gutter);
}
@media (min-width: 1440px) {
	.vhhc-container { max-width: var(--layout-max-wide); padding: 0 var(--layout-gutter-lg); }
}
.vhhc-section { padding: var(--section-pad-y) 0; }
.vhhc-section--sm { padding: var(--section-pad-y-sm) 0; }
.vhhc-section--soft { background: var(--color-surface-soft); }
.vhhc-section--inverse { background: var(--surface-inverse); color: var(--text-inverse); }
.vhhc-section--full-bleed { padding-left: 0; padding-right: 0; }

img { max-width: 100%; display: block; }

/* ---------- Type helpers ---------- */
.vhhc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-secondary);
}
.vhhc-section--inverse .vhhc-eyebrow { color: var(--color-accent-support); }
.vhhc-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-accent-growth);
	flex: none;
}
.vhhc-h1 { font: var(--type-h1); letter-spacing: var(--tracking-heading); margin: 0 0 var(--space-4); }
.vhhc-display { font: var(--type-display); letter-spacing: var(--tracking-heading); margin: 0 0 var(--space-4); }
.vhhc-h2 { font: var(--type-h2); letter-spacing: var(--tracking-heading); margin: 0 0 var(--space-4); }
.vhhc-h3 { font: var(--type-h3); margin: 0 0 var(--space-3); }
.vhhc-subheading { font: var(--type-subheading); color: var(--text-secondary); margin: 0 0 var(--space-6); }
.vhhc-body { font: var(--type-body); color: var(--text-secondary); }
.vhhc-caption { font: var(--type-caption); color: var(--text-secondary); }

/* ---------- NavBar ---------- */
.vhhc-navbar {
	position: sticky;
	top: 0;
	z-index: 40;
	height: 76px;
	display: flex;
	align-items: center;
	background: var(--veil-light);
	backdrop-filter: var(--blur-veil);
	-webkit-backdrop-filter: var(--blur-veil);
	border-bottom: 1px solid var(--border-subtle);
}
.vhhc-navbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.vhhc-navbar__logo { display: flex; align-items: center; gap: var(--space-2); }
.vhhc-navbar__logo img { height: 32px; width: auto; }
.vhhc-navbar__links {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	list-style: none;
	margin: 0;
	padding: 0;
}
.vhhc-navbar__links a {
	color: var(--text-primary);
	font: var(--type-body);
	font-weight: var(--weight-medium);
	padding-bottom: var(--space-1);
	border-bottom: 2px solid transparent;
	transition: var(--transition-control);
}
.vhhc-navbar__links a:hover,
.vhhc-navbar__links a[aria-current="page"] {
	color: var(--text-primary);
	border-bottom-color: var(--color-primary);
	text-decoration: none;
}
.vhhc-navbar__cta { display: flex; align-items: center; gap: var(--space-4); }
.vhhc-navbar__toggle { display: none; }

@media (max-width: 900px) {
	.vhhc-navbar { height: auto; min-height: 76px; align-items: flex-start; }
	.vhhc-navbar__inner { flex-wrap: wrap; padding-top: var(--space-3); padding-bottom: var(--space-3); }
	.vhhc-navbar__inner > nav {
		order: 3;
		width: 100%;
	}
	.vhhc-navbar__links {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
		width: 100%;
		padding-top: var(--space-4);
		margin-top: var(--space-3);
		border-top: 1px solid var(--border-subtle);
	}
	.vhhc-navbar__links.is-open { display: flex; }
	.vhhc-navbar__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		background: none;
		border: 1px solid var(--border-subtle);
		border-radius: var(--radius-control);
	}
}

/* ---------- Footer ---------- */
.vhhc-footer {
	background: var(--surface-inverse);
	color: var(--text-inverse);
	padding: var(--space-16) 0 var(--space-8);
}
.vhhc-footer__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: var(--space-12);
	padding-bottom: var(--space-12);
	border-bottom: 1px solid var(--border-inverse);
}
.vhhc-footer__brand img { height: 30px; margin-bottom: var(--space-4); }
.vhhc-footer__brand p { color: rgba(247,248,241,.68); max-width: 36ch; }
.vhhc-footer h4 {
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--color-accent-support);
	margin: 0 0 var(--space-4);
}
.vhhc-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.vhhc-footer a { color: rgba(247,248,241,.82); }
.vhhc-footer a:hover { color: var(--color-accent-growth); }
.vhhc-footer__bottom {
	padding-top: var(--space-6);
	display: flex;
	justify-content: space-between;
	color: rgba(247,248,241,.56);
	font: var(--type-caption);
}
@media (max-width: 780px) {
	.vhhc-footer__grid { grid-template-columns: 1fr; }
	.vhhc-footer__bottom { flex-direction: column; gap: var(--space-2); }
}

/* ---------- Buttons ---------- */
.vhhc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	height: var(--control-h);
	padding: 0 var(--space-6);
	border-radius: var(--radius-control);
	font: var(--type-body);
	font-weight: var(--weight-semibold);
	border: 1px solid transparent;
	cursor: pointer;
	transition: var(--transition-control);
	text-decoration: none !important;
}
.vhhc-btn:active { transform: scale(var(--press-scale)); }
.vhhc-btn--lg { height: var(--control-h-lg); padding: 0 var(--space-8); }
.vhhc-btn--sm { height: var(--control-h-sm); padding: 0 var(--space-4); font-size: var(--text-body-sm); }
.vhhc-btn--primary { background: var(--color-primary); color: var(--text-inverse); }
.vhhc-btn--primary:hover { background: var(--color-primary-hover); color: var(--text-inverse); }
.vhhc-btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.vhhc-btn--secondary:hover { background: var(--color-surface-soft); }
.vhhc-btn--ghost { background: transparent; color: var(--text-primary); }
.vhhc-btn--ghost:hover { background: var(--color-surface-soft); }
.vhhc-btn--inverse { background: var(--color-accent-growth); color: var(--color-primary); }
.vhhc-btn--inverse:hover { background: var(--color-accent-support); }
.vhhc-btn--on-inverse { background: transparent; color: var(--text-inverse); border-color: var(--border-inverse); }
.vhhc-btn--on-inverse:hover { background: rgba(247,248,241,.1); }
.vhhc-btn--full { width: 100%; }
.vhhc-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ---------- Badge / Tag ---------- */
.vhhc-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	height: 28px;
	padding: 0 var(--space-3);
	border-radius: var(--radius-badge);
	font: var(--type-caption);
	font-weight: var(--weight-semibold);
	background: var(--color-surface-soft);
	color: var(--text-primary);
	border: 1px solid var(--border-subtle);
}
.vhhc-badge--premium {
	background: var(--gradient-gold-trust);
	color: var(--color-primary);
	border-color: transparent;
}
.vhhc-badge--on-inverse {
	background: rgba(247,248,241,.12);
	color: var(--text-inverse);
	border-color: var(--border-inverse);
}
.vhhc-tag {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 var(--space-3);
	border-radius: var(--radius-sm);
	background: var(--color-neutral);
	color: var(--text-primary);
	font: var(--type-caption);
	font-weight: var(--weight-medium);
}

/* ---------- Card ---------- */
.vhhc-card {
	background: var(--surface-card);
	color: var(--text-primary);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
	padding: var(--space-6);
	box-shadow: var(--shadow-xs);
	transition: var(--transition-surface);
}
.vhhc-card .vhhc-caption { color: var(--text-secondary); }
.vhhc-card--soft { background: var(--surface-card-soft); }
.vhhc-card--inverse { background: var(--surface-inverse); color: var(--text-inverse); border-color: var(--border-inverse); }
.vhhc-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.vhhc-card--accent { position: relative; }
.vhhc-card--accent::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--space-6);
	width: 56px;
	height: 3px;
	background: var(--color-accent-premium);
}
.vhhc-card__icon-chip {
	width: 34px;
	height: 34px;
	border-radius: var(--radius-sm);
	background: rgba(183,227,58,.16);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	margin-bottom: var(--space-4);
}
.vhhc-card--inverse .vhhc-card__icon-chip { background: rgba(183,227,58,.16); color: var(--color-accent-growth); }

/* ---------- Stat ---------- */
.vhhc-stat-row { display: grid; gap: var(--space-8); }
.vhhc-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.vhhc-stat__value { font: var(--type-h1); letter-spacing: var(--tracking-heading); }
.vhhc-stat__label { font: var(--type-caption); color: var(--text-secondary); }
.vhhc-stat--inverse .vhhc-stat__label { color: rgba(247,248,241,.68); }
.vhhc-stat--panel {
	background: rgba(13,40,28,.42);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--border-inverse);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

/* ---------- Divider ---------- */
.vhhc-divider { border: none; border-top: 1px solid var(--border-subtle); margin: var(--space-8) 0; }
.vhhc-divider--premium { border-top-color: var(--divider-premium); width: 120px; }

/* ---------- Breadcrumb ---------- */
.vhhc-breadcrumb { display: flex; align-items: center; gap: var(--space-2); font: var(--type-caption); color: var(--text-secondary); margin-bottom: var(--space-4); }
.vhhc-breadcrumb a { color: var(--text-secondary); }
.vhhc-breadcrumb a:hover { color: var(--text-link-hover); }

.vhhc-products-layout {
	display: grid;
	grid-template-columns: 1.4fr .6fr;
	gap: var(--space-10);
	margin-top: var(--space-8);
	align-items: start;
}
@media (max-width: 900px) {
	.vhhc-products-layout { grid-template-columns: 1fr; }
}

.vhhc-contact-layout {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: var(--space-10);
	align-items: start;
}
@media (max-width: 900px) {
	.vhhc-contact-layout { grid-template-columns: 1fr; }
}

/* ---------- Tabs ---------- */
.vhhc-tabs__list { display: flex; gap: var(--space-8); border-bottom: 1px solid var(--border-subtle); list-style: none; margin: 0; padding: 0; }
.vhhc-tabs__btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--space-4) 0;
	font: var(--type-subheading);
	font-size: var(--text-body);
	color: var(--text-secondary);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: var(--transition-control);
}
.vhhc-tabs__btn:hover { color: var(--text-primary); }
.vhhc-tabs__btn[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--color-primary); font-weight: var(--weight-semibold); }
.vhhc-tabs__panel { display: none; }
.vhhc-tabs__panel[data-active="true"] { display: block; }

/* ---------- Table ---------- */
.vhhc-table { width: 100%; border-collapse: collapse; }
.vhhc-table th, .vhhc-table td {
	text-align: left;
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--border-subtle);
	font: var(--type-body);
}
.vhhc-table th {
	font: var(--type-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--text-secondary);
	background: var(--color-surface-soft);
}
.vhhc-table td:first-child, .vhhc-table th:first-child { font-weight: var(--weight-semibold); }

/* ---------- Alert ---------- */
.vhhc-alert {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	font: var(--type-body-sm, var(--type-body));
}
.vhhc-alert--positive { background: var(--status-positive-soft); border-color: var(--status-positive); color: var(--color-primary); }
.vhhc-alert--info { background: var(--status-info-soft); border-color: var(--status-info); color: var(--color-primary); }
.vhhc-alert--attention { background: var(--status-attention-soft); border-color: var(--status-attention); color: var(--color-primary); }
.vhhc-alert[hidden] { display: none; }

/* ---------- ProgressBar ---------- */
.vhhc-progress { display: flex; flex-direction: column; gap: var(--space-2); }
.vhhc-progress__track { height: 8px; border-radius: var(--radius-pill); background: var(--color-neutral); overflow: hidden; }
.vhhc-progress__fill { height: 100%; background: var(--color-secondary); border-radius: var(--radius-pill); transition: width var(--duration-slow) var(--ease-standard); }
.vhhc-progress__meta { display: flex; justify-content: space-between; font: var(--type-caption); color: var(--text-secondary); }
.vhhc-section--inverse .vhhc-progress__track { background: rgba(247,248,241,.18); }

/* ---------- Forms ---------- */
.vhhc-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.vhhc-field label { font: var(--type-caption); font-weight: var(--weight-semibold); color: var(--text-primary); }
.vhhc-field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) {
	.vhhc-field--row { grid-template-columns: 1fr; }
}
.vhhc-input, .vhhc-select, .vhhc-textarea {
	height: var(--control-h);
	padding: 0 var(--space-4);
	border: 1px solid var(--color-neutral);
	border-radius: var(--radius-control);
	background: var(--surface-card);
	font: var(--type-body);
	color: var(--text-primary);
	transition: var(--transition-control);
	width: 100%;
	font-family: var(--font-sans);
}
.vhhc-textarea { height: auto; padding: var(--space-3) var(--space-4); min-height: 120px; resize: vertical; }
.vhhc-input:focus, .vhhc-select:focus, .vhhc-textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: var(--shadow-focus);
}
.vhhc-radio-group, .vhhc-checkbox-group { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.vhhc-radio, .vhhc-checkbox { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-body); }
.vhhc-radio input, .vhhc-checkbox input { accent-color: var(--color-primary); width: 18px; height: 18px; }

/* ---------- Media placeholder ---------- */
.vhhc-media {
	background: var(--gradient-premium-growth);
	border-radius: var(--radius-card);
	display: flex;
	align-items: flex-end;
	min-height: 320px;
	padding: var(--space-6);
	position: relative;
	overflow: hidden;
}
.vhhc-media__label {
	color: var(--text-inverse);
	font: var(--type-caption);
	background: rgba(18,53,36,.35);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
}
.vhhc-media--ratio-34 { aspect-ratio: 3 / 4; }
.vhhc-media--ratio-169 { aspect-ratio: 16 / 9; }
.vhhc-media--photo { background: var(--color-neutral); }
.vhhc-media--photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.vhhc-media--photo .vhhc-media__label { position: relative; z-index: 1; }
.vhhc-media--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gradient-protect-bottom);
}

/* ---------- Grids ---------- */
.vhhc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.vhhc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.vhhc-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 900px) {
	.vhhc-grid-2, .vhhc-grid-3 { grid-template-columns: 1fr; }
	.vhhc-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.vhhc-stat-row { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
	.vhhc-grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Hero ---------- */
.vhhc-hero {
	background: var(--gradient-agritech-hero);
	color: var(--text-inverse);
	padding: 120px 0 104px;
}
.vhhc-hero__grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: var(--space-12);
	align-items: center;
}
.vhhc-hero h1 { color: var(--text-inverse); }
.vhhc-hero__grid > div:first-child p { color: rgba(247,248,241,.82); max-width: 46ch; }
.vhhc-hero__actions { display: flex; gap: var(--space-4); margin-top: var(--space-8); flex-wrap: wrap; }
.vhhc-hero__badges { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-8); }
@media (max-width: 900px) {
	.vhhc-hero { padding: 64px 0; }
	.vhhc-hero__grid { grid-template-columns: 1fr; }
}

/* ---------- Page header band (secondary pages) ---------- */
.vhhc-page-header {
	background: var(--gradient-fresh-surface);
	padding: var(--space-16) 0;
}
.vhhc-page-header--inverse {
	background: var(--surface-inverse);
	color: var(--text-inverse);
}
.vhhc-page-header--photo {
	background-size: cover;
	background-position: center;
}
.vhhc-page-header--inverse .vhhc-breadcrumb,
.vhhc-page-header--inverse .vhhc-breadcrumb a {
	color: rgba(247,248,241,.68);
}
.vhhc-page-header--inverse .vhhc-breadcrumb a:hover { color: var(--color-accent-growth); }

/* ---------- Traceability / numbered steps ---------- */
.vhhc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.vhhc-step__chip {
	width: 34px;
	height: 34px;
	border-radius: var(--radius-sm);
	background: rgba(183,227,58,.16);
	color: var(--color-accent-growth);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--weight-bold);
	margin-bottom: var(--space-4);
}
@media (max-width: 900px) { .vhhc-steps { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.vhhc-cta-band {
	background: var(--surface-inverse);
	border-radius: var(--radius-xl);
	padding: var(--space-10) var(--space-10);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	color: var(--text-inverse);
}
@media (max-width: 780px) {
	.vhhc-cta-band { flex-direction: column; align-items: flex-start; }
}