/* Family styles for naval — populated by its presentation template contract. */

/* ============================================================
   NAVAL — refinements over the .msi-nv-* base in equipment.css
   Horizontal nautical composition: wide media band, overlapping
   identity block, glass waterline strip. Cobalt family accent.
   ============================================================ */

/* Hero identity — display title + mono designation */
.msi-nv-hero__title {
	font-family: var(--ms-font-display);
	font-size: var(--ms-fs-hero);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -.015em;
	margin-block: var(--ms-space-4) var(--ms-space-3);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ms-space-3);
	color: var(--ms-color-text);
}
.msi-nv-hero__title small {
	font-family: var(--ms-font-mono);
	font-size: var(--ms-fs-h4);
	font-weight: 500;
	color: var(--ms-family-accent, var(--ms-color-cobalt));
	letter-spacing: .02em;
}
.msi-nv-hero__excerpt {
	color: var(--ms-color-text-secondary);
	font-size: calc(var(--ms-fs-body) * 1.1);
	max-inline-size: 66ch;
	margin-block: 0 var(--ms-space-2);
}

/* Waterline strip — band spacing + glass cell feedback */
.msi-nv-waterline-wrap {
	padding-block: var(--ms-space-6) var(--ms-space-2);
}
.msi-nv-waterline {
	box-shadow: var(--ms-shadow-2);
}
.msi-nv-waterline__cell {
	transition: background-color var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-nv-waterline__cell strong {
	transition: color var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-nv-waterline__cell:hover {
	background: var(--ms-color-surface-hi);
}
.msi-nv-waterline__cell:hover strong {
	color: var(--ms-family-accent, var(--ms-color-cobalt));
}
.msi-nv-waterline__cell .msi-unit {
	font-style: normal;
}

/* Operators chip cloud (dossier + aside panel instance) */
.msi-nv-operators {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ms-space-2);
	margin-block-start: var(--ms-space-4);
}
.msi-nv-operators--panel {
	margin-block-start: 0;
}

/* RESPONSIVE */
@media (max-width: 900px) {
	.msi-nv-hero__title { font-size: var(--ms-fs-display); }
	.msi-nv-hero__inner { padding-block-end: var(--ms-space-6); }
	.msi-nv-waterline-wrap { padding-block: var(--ms-space-5) var(--ms-space-2); }
}
@media (max-width: 640px) {
	.msi-nv-hero__inner {
		margin-block-start: calc(-1 * var(--ms-space-6));
		padding-block-end: var(--ms-space-5);
	}
	.msi-nv-hero__title {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ms-space-1);
	}
	.msi-nv-waterline__cell { flex: 1 1 40%; }
	.msi-nv-operators { margin-block-start: var(--ms-space-3); }
}