/* ---------------------------------------------------------------------------
 * Design System 4 — Tribal Mosaic
 * Textured · Cultural · Modern Asymmetry
 *
 * Irregular mosaic / broken grid, subtle pattern overlays, dense but
 * organized visual interest, rich accent colors.
 * ------------------------------------------------------------------------- */

/* Diamond-motif weave overlay used sparingly on section heads. */
body.np-system-tribal-mosaic .np-section__head {
	position: relative;
	border-bottom: 0;
	padding-bottom: 1rem;
}

body.np-system-tribal-mosaic .np-section__head::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	background-image: repeating-linear-gradient(
		45deg,
		var(--np-color-accent) 0 2px,
		transparent 2px 10px
	);
	opacity: 0.55;
}

/* Broken mosaic grid: irregular spans and varied card heights. */
body.np-system-tribal-mosaic .np-mosaic__grid {
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: minmax(120px, auto);
}

body.np-system-tribal-mosaic .np-mosaic__cell:nth-child(1) {
	grid-column: span 3;
	grid-row: span 2;
}

body.np-system-tribal-mosaic .np-mosaic__cell:nth-child(2) {
	grid-column: span 2;
	grid-row: span 1;
}

body.np-system-tribal-mosaic .np-mosaic__cell:nth-child(3) {
	grid-column: span 1;
	grid-row: span 2;
}

body.np-system-tribal-mosaic .np-mosaic__cell:nth-child(4) {
	grid-column: span 2;
	grid-row: span 1;
}

body.np-system-tribal-mosaic .np-mosaic__cell:nth-child(5) {
	grid-column: span 3;
	grid-row: span 1;
}

body.np-system-tribal-mosaic .np-mosaic__cell:nth-child(6) {
	grid-column: span 1;
	grid-row: span 1;
}

body.np-system-tribal-mosaic .np-mosaic__media img {
	aspect-ratio: auto;
	height: 100%;
}

/* Cards carry a woven corner motif. */
body.np-system-tribal-mosaic .np-card {
	border-radius: var(--np-radius-md);
	position: relative;
}

body.np-system-tribal-mosaic .np-card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 22px;
	height: 22px;
	background: repeating-linear-gradient(
		135deg,
		var(--np-color-accent) 0 3px,
		transparent 3px 7px
	);
	opacity: 0.5;
	border-radius: 0 0 0 var(--np-radius-md);
}

/* Rich accent chips on meta. */
body.np-system-tribal-mosaic .np-card__cat,
body.np-system-tribal-mosaic .np-eyebrow {
	color: var(--np-color-accent);
}

/* Hero rail: dense but organized, alternating media side. */
body.np-system-tribal-mosaic .np-hero__item:nth-child(even) {
	flex-direction: row-reverse;
	text-align: right;
}

/* Article: textured lead media frame. */
body.np-system-tribal-mosaic .np-article__lead-media {
	position: relative;
}

body.np-system-tribal-mosaic .np-article__lead-img {
	border-radius: var(--np-radius-sm);
	border: 4px solid var(--np-color-surface);
	box-shadow: var(--np-shadow-md);
}

/* Pattern accent on the newsletter block. */
body.np-system-tribal-mosaic .np-newsletter {
	background: linear-gradient(
			135deg,
			transparent 0 60%,
			color-mix(in srgb, var(--np-color-accent) 25%, transparent) 60% 100%
		),
		var(--np-color-primary);
}