/* =========================================================
UTMERKELSER
Æresmedlemmer / Årets TOSK
========================================================= */

.utmerkelser {
	position: relative;
	padding: 40px 0 75px;
}


/* =========================================================
HOVEDOVERSKRIFT
========================================================= */

.utmerkelser-heading {
	margin-bottom: 48px;
}

.utmerkelser-heading h2 {
	margin: 0 0 10px;

	color: #e8e8e8;

	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.utmerkelser-heading p {
	max-width: 720px;
	margin: 0;

	color: rgba(232, 232, 232, 0.65);

	font-size: 1rem;
	line-height: 1.65;
}


/* =========================================================
SEKSJONER
========================================================= */

.utmerkelser-section {
	margin-top: 58px;
}

.utmerkelser-section:first-of-type {
	margin-top: 0;
}

.utmerkelser-section-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;

	gap: 20px;

	margin-bottom: 22px;
}

.utmerkelser-section-title {
	margin: 0;

	color: #e8e8e8;

	font-size: clamp(1.45rem, 2.5vw, 2rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.utmerkelser-section-subtitle {
	margin: 6px 0 0;

	color: rgba(232, 232, 232, 0.52);

	font-size: 0.94rem;
	line-height: 1.55;
}


/* =========================================================
GRID – ÆRESMEDLEMMER
========================================================= */

.utmerkelser-grid {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 18px;
}


/* =========================================================
KORT
========================================================= */

.utmerkelse-card {
	position: relative;

	overflow: hidden;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.075),
			rgba(255, 255, 255, 0.022)
		);

	border:
		1px solid
		rgba(255, 255, 255, 0.10);

	border-radius: 18px;

	box-shadow:
		0 12px 35px rgba(0, 0, 0, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.035);

	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);

	transition:
		transform 0.25s ease,
		border-color 0.25s ease,
		background 0.25s ease,
		box-shadow 0.25s ease;
}

.utmerkelse-card--clickable .utmerkelse-main {
	cursor: pointer;
}

@media (hover: hover) {

	.utmerkelse-card--clickable:hover {
		transform: translateY(-2px);

		border-color:
			rgba(255, 255, 255, 0.16);

		background:
			linear-gradient(
				135deg,
				rgba(255, 255, 255, 0.09),
				rgba(255, 255, 255, 0.03)
			);

		box-shadow:
			0 16px 42px rgba(0, 0, 0, 0.20),
			inset 0 1px 0 rgba(255, 255, 255, 0.045);
	}

}


/* =========================================================
ÆRESMEDLEM – GUL AKSENT
========================================================= */

.utmerkelse-card--honor::before {
	content: "";

	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 2px;

	background:
		linear-gradient(
			90deg,
			rgba(255, 210, 0, 0),
			rgba(255, 210, 0, 0.82),
			rgba(255, 210, 0, 0)
		);

	opacity: 0.65;

	z-index: 5;
}


/* Åpent æresmedlem bruker hele raden */

.utmerkelse-card--honor:has(
	.utmerkelse-main[aria-expanded="true"]
) {
	grid-column: 1 / -1;
}


/* =========================================================
HEADER / HOVEDDEL
========================================================= */

.utmerkelse-main {
	display: flex;
	align-items: stretch;

	position: relative;

	min-height: 150px;

	outline: none;
}

.utmerkelse-main:focus-visible {
	box-shadow:
		inset 0 0 0 2px rgba(255, 210, 0, 0.38);
}


/* =========================================================
LITE BILDE
========================================================= */

.utmerkelse-image {
	position: relative;

	flex: 0 0 120px;

	width: 120px;

	aspect-ratio: 4 / 5;

	overflow: hidden;

	background:
		rgba(255, 255, 255, 0.025);
}

.utmerkelse-image img:not(.utmerkelse-logo) {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center top;
}

.utmerkelse-image::after {
	content: "";

	position: absolute;

	top: 0;
	right: 0;
	bottom: 0;

	width: 20px;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(15, 15, 25, 0.16)
		);

	pointer-events: none;
}


/* =========================================================
PLACEHOLDER
========================================================= */

.utmerkelse-image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	background:
		radial-gradient(
			circle at 50% 38%,
			rgba(255, 210, 0, 0.11),
			transparent 55%
		),
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.055),
			rgba(255, 255, 255, 0.012)
		);
}

.utmerkelse-logo {
	display: block;

	width: 58%;
	height: auto;

	max-height: 65%;

	object-fit: contain;

	opacity: 0.17;

	filter:
		grayscale(1)
		brightness(1.6);

	transform: scale(0.96);
}


/* =========================================================
INFO
========================================================= */

.utmerkelse-info {
	position: relative;

	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;

	min-width: 0;

	padding:
		22px
		58px
		22px
		22px;
}

.utmerkelse-name {
	position: relative;

	z-index: 3;

	margin: 0;

	color: #eeeeee;

	font-size: 1.18rem;
	font-weight: 700;
	line-height: 1.25;

	letter-spacing: -0.01em;
}

.utmerkelse-type {
	position: relative;

	z-index: 3;

	margin-top: 6px;

	color: rgba(232, 232, 232, 0.50);

	font-size: 0.85rem;
	font-weight: 500;
}


/* =========================================================
ÅR
========================================================= */

.utmerkelse-year {
	position: relative;

	z-index: 3;

	margin-bottom: 5px;

	color: #ffd200;

	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.08em;

	text-transform: uppercase;
}


/* =========================================================
PLUS / MINUS
========================================================= */

.utmerkelse-toggle {
	position: absolute;

	top: 50%;
	right: 18px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 34px;
	height: 34px;

	border:
		1px solid
		rgba(255, 255, 255, 0.11);

	border-radius: 50%;

	background:
		rgba(255, 255, 255, 0.035);

	color:
		rgba(255, 255, 255, 0.72);

	transform:
		translateY(-50%);

	pointer-events: none;

	z-index: 5;

	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

.utmerkelse-toggle::before,
.utmerkelse-toggle::after {
	content: "";

	position: absolute;

	width: 10px;
	height: 1.5px;

	border-radius: 2px;

	background: currentColor;

	transition:
		transform 0.25s ease;
}

.utmerkelse-toggle::after {
	transform: rotate(90deg);
}

.utmerkelse-main[aria-expanded="true"]
.utmerkelse-toggle::after {
	transform: rotate(0deg);
}

.utmerkelse-main[aria-expanded="true"]
.utmerkelse-toggle {
	background:
		rgba(255, 255, 255, 0.05);

	border-color:
		rgba(255, 255, 255, 0.16);

	color: #ffffff;
}


/* =========================================================
ÅPENT INNHOLD
========================================================= */

.utmerkelse-content {
	position: relative;
}

.utmerkelse-content-inner {
	position: relative;

	margin:
		0
		22px
		22px;

	padding-top: 22px;

	border-top:
		1px solid
		rgba(255, 255, 255, 0.075);
}


/* =========================================================
STORT BILDE + TEKST
========================================================= */

.utmerkelse-expanded-layout {
	display: grid;

	grid-template-columns:
		clamp(175px, 20vw, 240px)
		minmax(0, 1fr);

	gap:
		clamp(20px, 3vw, 30px);

	align-items: start;
}

.utmerkelse-expanded-layout--no-image {
	grid-template-columns: 1fr;
}


/* Æresmedlem kan få litt større bilde på bred skjerm */

.utmerkelse-card--honor:has(
	.utmerkelse-main[aria-expanded="true"]
)
.utmerkelse-expanded-layout {
	grid-template-columns:
		clamp(190px, 24vw, 280px)
		minmax(0, 1fr);
}


.utmerkelse-expanded-image {
	position: relative;

	width: 100%;

	aspect-ratio: 4 / 5;

	overflow: hidden;

	border-radius: 14px;

	background:
		rgba(255, 255, 255, 0.025);

	box-shadow:
		0 8px 24px
		rgba(0, 0, 0, 0.16);
}

.utmerkelse-expanded-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center top;
}

.utmerkelse-expanded-text {
	position: relative;

	z-index: 3;

	color:
		rgba(232, 232, 232, 0.76);

	font-size: 0.95rem;
	line-height: 1.72;
}


/* =========================================================
SKJUL LITE BILDE NÅR KORTET ER ÅPENT
========================================================= */

.utmerkelse-main[aria-expanded="true"]
.utmerkelse-image--small {
	display: none;
}

.utmerkelse-main[aria-expanded="true"]
.utmerkelse-info {
	padding-left: 22px;
}


/* =========================================================
ÅRETS TOSK
========================================================= */

.arets-tosk-list {
	display: flex;
	flex-direction: column;

	gap: 12px;
}

.utmerkelse-card--tosk .utmerkelse-main {
	min-height: 120px;
}

.utmerkelse-card--tosk .utmerkelse-image {
	flex-basis: 96px;

	width: 96px;
}

.utmerkelse-card--tosk .utmerkelse-info {
	padding-top: 18px;
	padding-bottom: 18px;
}


/* stort årstall */

.utmerkelse-card--tosk::after {
	content: attr(data-year);

	position: absolute;

	right: 68px;
	top: 50%;

	transform:
		translateY(-50%);

	color:
		rgba(255, 255, 255, 0.026);

	font-size:
		clamp(3rem, 6vw, 5.2rem);

	font-weight: 800;
	line-height: 1;

	letter-spacing: -0.05em;

	pointer-events: none;

	z-index: 1;
}


/* åpnet Årets TOSK */

.utmerkelse-card--tosk:has(
	.utmerkelse-main[aria-expanded="true"]
)::after {
	top: 52%;

	font-size:
		clamp(4rem, 9vw, 7rem);

	color:
		rgba(255, 255, 255, 0.022);
}


/* =========================================================
ÅPENT KORT
========================================================= */

.utmerkelse-card:has(
	.utmerkelse-main[aria-expanded="true"]
) {
	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.085),
			rgba(255, 255, 255, 0.028)
		);

	border-color:
		rgba(255, 255, 255, 0.14);

	box-shadow:
		0 18px 46px
		rgba(0, 0, 0, 0.20);
}


/* =========================================================
TABLET
========================================================= */

@media (max-width: 991px) {

	.utmerkelser-grid {
		grid-template-columns: 1fr;
	}

	.utmerkelse-expanded-layout {
		grid-template-columns:
			clamp(170px, 28vw, 210px)
			minmax(0, 1fr);

		gap: 24px;
	}

	.utmerkelse-card--honor:has(
		.utmerkelse-main[aria-expanded="true"]
	)
	.utmerkelse-expanded-layout {
		grid-template-columns:
			clamp(180px, 30vw, 230px)
			minmax(0, 1fr);
	}

}


/* =========================================================
MINDRE TABLET / STOR MOBIL
========================================================= */

@media (max-width: 767px) {

	.utmerkelse-expanded-layout,
	.utmerkelse-card--honor:has(
		.utmerkelse-main[aria-expanded="true"]
	)
	.utmerkelse-expanded-layout {
		display: flex;

		flex-direction: column;

		gap: 22px;
	}

	.utmerkelse-expanded-image {
		width: min(220px, 55vw);

		margin: 0;
	}

	.utmerkelse-expanded-text {
		width: 100%;
	}

}


/* =========================================================
MOBIL
========================================================= */

@media (max-width: 575px) {

	.utmerkelser {
		padding:
			25px
			0
			50px;
	}

	.utmerkelser-heading {
		margin-bottom: 36px;
	}

	.utmerkelser-section {
		margin-top: 44px;
	}

	.utmerkelser-section-heading {
		margin-bottom: 16px;
	}

	.utmerkelse-card {
		border-radius: 15px;
	}

	.utmerkelse-main {
		min-height: 112px;
	}

	.utmerkelse-image {
		flex-basis: 90px;

		width: 90px;
	}

	.utmerkelse-card--tosk .utmerkelse-image {
		flex-basis: 78px;

		width: 78px;
	}

	.utmerkelse-info {
		padding:
			16px
			49px
			16px
			16px;
	}

	.utmerkelse-name {
		font-size: 1.03rem;
	}

	.utmerkelse-type {
		margin-top: 5px;

		font-size: 0.79rem;
	}

	.utmerkelse-year {
		font-size: 0.74rem;
	}

	.utmerkelse-toggle {
		right: 12px;

		width: 31px;
		height: 31px;
	}

	.utmerkelse-content-inner {
		margin:
			0
			16px
			18px;

		padding-top: 18px;
	}

	.utmerkelse-expanded-layout {
		gap: 20px;
	}

	.utmerkelse-expanded-image {
		width: min(190px, 58vw);

		margin: 0;
	}

	.utmerkelse-expanded-text {
		font-size: 0.90rem;
		line-height: 1.65;
	}

	.utmerkelse-card--tosk::after {
		display: none;
	}

}