/* Industrial demo palette and narrow compatibility fixes.
 * Layout, breakpoints and module composition remain inherited from r118-stable.
 */
:root {
	--ark-primary: #17669b;
	--ark-primary-hover: #0f5484;
	--ark-primary-deep: #0c3555;
	--ark-bg-soft: #f5f7fa;
	--ark-tag-bg: #e8f0f7;
	--ark-border: #dce5ed;
	--ark-focus-ring: 0 0 0 3px rgba(23, 102, 155, .22);
}

/* Empty demo media never falls back to botanical artwork. */
.ark-demo-media-placeholder {
	display: block;
	width: 100%;
	min-height: 180px;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--ark-border);
	border-radius: inherit;
	background:
		linear-gradient(135deg, rgba(23, 102, 155, .045), transparent 55%),
		#eef2f6;
}

.ark-product-card__media .ark-demo-media-placeholder,
.ark-content-card__media .ark-demo-media-placeholder,
.ark-pa-card__media .ark-demo-media-placeholder {
	height: 100%;
	min-height: 0;
	aspect-ratio: inherit;
	border: 0;
	border-radius: 0;
}

/* Keep translated or longer data values inside their native grid cells. */
.ark-stats__grid article,
.ark-hero__data-grid > div {
	min-width: 0;
}

.ark-stats__grid strong,
.ark-hero__data-grid strong {
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: normal;
}

/* One numbering system only. The card component supplies the sequence. */
.ark-card-grid__eyebrow:empty {
	display: none;
}

@media (max-width: 1180px) {
	.ark-stats--columns-4 .ark-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Media-bearing modules keep their original r118 grid, now with real photos. */
.ark-hero__media,
.ark-compact-banner__media,
.ark-case-study__media,
.ark-laboratory__media,
.ark-tabs__media,
.ark-gallery__item {
	background: #e9eef3;
	overflow: hidden;
}

.ark-hero__media img,
.ark-compact-banner__media img,
.ark-case-study__media img,
.ark-laboratory__media img,
.ark-tabs__media img,
.ark-gallery__item img,
.ark-product-card__media img,
.ark-content-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Do not let a translated heading turn the adjacent media column into empty space. */
.ark-compact-banner__grid > *,
.ark-case-study__grid > *,
.ark-hero__grid > * {
	min-width: 0;
}

.ark-compact-banner__media {
	min-height: 280px;
}

.ark-case-study__media {
	min-height: 420px;
}

.ark-faq__sidebar .ark-rich-text {
	max-width: 34rem;
	margin-top: 18px;
}

@media (max-width: 820px) {
	.ark-compact-banner__media,
	.ark-case-study__media {
		min-height: 0;
	}
}