/**
 * B166 blocks: «Organisasjonsbrikker» (.ut-pv-orgchips) and «Personer»
 * (.ut-pv-people). Fasit: wp-tema-arkitektur/mockup-seksjoner-sidemaler-2026-09-29.
 *
 * The blocks style themselves (the theme does not style plugin classes). Every
 * colour, radius and font comes from ui-core's semantic roles under `.ut-ui`
 * (the block wrapper carries the class), so the blocks follow the node's brand
 * and match the theme's «Kort» card. Breakpoints are the theme's card-row
 * breakpoints. Loaded only where a block renders (block.json `style`).
 */

/* ------------------------------------------------------------------ */
/* Organisasjonsbrikker: four → two → one                               */
/* ------------------------------------------------------------------ */

.ut-pv-orgchips .ut-pv-orgchips__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ut-pv-orgchips .ut-pv-orgchips__list > li {
	margin: 0;
	min-width: 0;
}

.ut-pv-orgchips .ut-pv-orgchip {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	height: 100%;
	padding: 0.75rem 0.875rem;
	background: var(--ut-surface);
	color: var(--ut-content);
	border: 1px solid var(--ut-border);
	border-radius: var(--ut-radius-card);
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: border-color var(--ut-motion-fast, 0.15s) ease;
}

.ut-pv-orgchips .ut-pv-orgchip::before {
	content: "";
	flex: none;
	width: 0.5625rem;
	height: 0.5625rem;
	border-radius: 50%;
	background: var(--ut-brand);
}

.ut-pv-orgchips a.ut-pv-orgchip:hover {
	border-color: var(--ut-brand);
}

.ut-pv-orgchips a.ut-pv-orgchip:focus-visible {
	outline: var(--ut-focus-ring-width, 2px) solid var(--ut-focus-ring-color, var(--ut-brand));
	outline-offset: var(--ut-focus-ring-offset, 2px);
}

@media (max-width: 980px) {
	.ut-pv-orgchips .ut-pv-orgchips__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 420px) {
	.ut-pv-orgchips .ut-pv-orgchips__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------ */
/* Personer: four → two → one; three → three → two → one                */
/* ------------------------------------------------------------------ */

.ut-pv-people .ut-pv-people__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ut-pv-people .ut-pv-people__list--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ut-pv-people .ut-pv-people__card {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-width: 0;
	margin: 0;
	padding: 1.5rem;
	background: var(--ut-surface);
	color: var(--ut-content);
	border: 1px solid var(--ut-border);
	border-radius: var(--ut-radius-container);
}

.ut-pv-people .ut-pv-people__face {
	flex: none;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--ut-brand-surface);
	color: var(--ut-brand-strong);
	font-size: 1.125rem;
	font-weight: 700;
	object-fit: cover;
}

.ut-pv-people .ut-pv-people__body {
	min-width: 0;
	overflow-wrap: anywhere;
}

.ut-pv-people .ut-pv-people__name {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	color: var(--ut-content);
}

.ut-pv-people .ut-pv-people__name a {
	color: inherit;
	text-decoration: none;
}

.ut-pv-people .ut-pv-people__name a:hover {
	text-decoration: underline;
}

.ut-pv-people .ut-pv-people__role {
	margin: 0.125rem 0 0;
	color: var(--ut-content-muted);
	font-size: 0.875rem;
	line-height: 1.4;
}

.ut-pv-people .ut-pv-people__mail {
	display: inline-block;
	margin-top: 0.25rem;
	color: var(--ut-link);
	font-size: 0.875rem;
	font-weight: 600;
}

/* The theme ships no .screen-reader-text; the block carries its own. */
.ut-pv-people .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ut-pv-people a:focus-visible {
	outline: var(--ut-focus-ring-width, 2px) solid var(--ut-focus-ring-color, var(--ut-brand));
	outline-offset: var(--ut-focus-ring-offset, 2px);
}

@media (max-width: 980px) {
	.ut-pv-people .ut-pv-people__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ut-pv-people .ut-pv-people__list--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.ut-pv-people .ut-pv-people__list.ut-pv-people__list--three {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.ut-pv-people .ut-pv-people__list.ut-pv-people__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Editor preview only: why the block is empty. */
.ut-pv-blockhint {
	margin: 0;
	padding: 1rem;
	border: 1px dashed currentColor;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	opacity: 0.8;
}