/*
 * Shared responsive safeguards for every KatanaSteel component.
 * Component styles retain visual control; this layer prevents user-provided
 * content from forcing a layout beyond its available inline size.
 */
:where(
	.ks-hero,
	.ks-nav,
	.ks-engineering,
	.ks-why,
	.ks-scene,
	.ks-contact,
	.ks-footer,
	.ks-products,
	.ks-families,
	.ksa-applications,
	.ksh-history,
	.ksv-manifesto,
	.ksv-editorial,
	.ksv-system
) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

:where(
	.ks-hero,
	.ks-nav,
	.ks-engineering,
	.ks-why,
	.ks-scene,
	.ks-contact,
	.ks-footer,
	.ks-products,
	.ks-families,
	.ksa-applications,
	.ksh-history,
	.ksv-manifesto,
	.ksv-editorial,
	.ksv-system
) *,
:where(
	.ks-hero,
	.ks-nav,
	.ks-engineering,
	.ks-why,
	.ks-scene,
	.ks-contact,
	.ks-footer,
	.ks-products,
	.ks-families,
	.ksa-applications,
	.ksh-history,
	.ksv-manifesto,
	.ksv-editorial,
	.ksv-system
) *::before,
:where(
	.ks-hero,
	.ks-nav,
	.ks-engineering,
	.ks-why,
	.ks-scene,
	.ks-contact,
	.ks-footer,
	.ks-products,
	.ks-families,
	.ksa-applications,
	.ksh-history,
	.ksv-manifesto,
	.ksv-editorial,
	.ksv-system
) *::after {
	box-sizing: border-box;
}

:where(
	.ks-hero,
	.ks-nav,
	.ks-engineering,
	.ks-why,
	.ks-scene,
	.ks-contact,
	.ks-footer,
	.ks-products,
	.ks-families,
	.ksa-applications,
	.ksh-history,
	.ksv-manifesto,
	.ksv-editorial,
	.ksv-system
) :where(
	[class*="__inner"],
	[class*="__header"],
	[class*="__heading"],
	[class*="__content"],
	[class*="__copy"],
	[class*="__body"],
	[class*="__text"],
	[class*="__meta"],
	[class*="__actions"],
	[class*="__column"],
	[class*="__card"],
	[class*="__panel"]
) {
	min-width: 0;
	max-width: 100%;
}

:where(
	.ks-hero,
	.ks-nav,
	.ks-engineering,
	.ks-why,
	.ks-scene,
	.ks-contact,
	.ks-footer,
	.ks-products,
	.ks-families,
	.ksa-applications,
	.ksh-history,
	.ksv-manifesto,
	.ksv-editorial,
	.ksv-system
) :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, strong, small) {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: normal;
	hyphens: auto;
}

:where(
	.ks-hero,
	.ks-nav,
	.ks-engineering,
	.ks-why,
	.ks-scene,
	.ks-contact,
	.ks-footer,
	.ks-products,
	.ks-families,
	.ksa-applications,
	.ksh-history,
	.ksv-manifesto,
	.ksv-editorial,
	.ksv-system
) :where(a, button, input, select, textarea) {
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: normal;
}

:where(
	.ks-hero,
	.ks-nav,
	.ks-engineering,
	.ks-why,
	.ks-scene,
	.ks-contact,
	.ks-footer,
	.ks-products,
	.ks-families,
	.ksa-applications,
	.ksh-history,
	.ksv-manifesto,
	.ksv-editorial,
	.ksv-system
) :where(img, picture, video, iframe, svg) {
	max-width: 100%;
}

:where(
	.ks-hero__button,
	.ks-nav__cta,
	.ks-scene__button,
	.ks-contact__submit,
	.ks-footer__cta-button,
	.ks-product-card__button,
	.ks-families__general-cta,
	.ks-family__link,
	.ksa-material__link,
	.ksh-milestone__link,
	.ksv-cta__link
) {
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: center;
}

@media (max-width: 767px) {
	:where(
		.ks-hero,
		.ks-engineering,
		.ks-why,
		.ks-scene,
		.ks-contact,
		.ks-footer,
		.ks-products,
		.ks-families,
		.ksa-applications,
		.ksh-history,
		.ksv-manifesto,
		.ksv-editorial,
		.ksv-system
	) :where(h1, h2, h3, h4) {
		text-wrap: pretty;
	}
}