/* CSS Document */

/* =========================================================
   DOMMERINFORMASJON
========================================================= */

.dommer-section {
	position: relative;
	padding: 85px 0 105px;
}

.dommer-container {
	width: 100%;
	max-width: 1540px;

	margin: 0 auto;
	padding: 0 24px;
}


/* =========================================================
   OVERSKRIFT
========================================================= */

.dommer-heading {
	max-width: 900px;

	margin: 0 auto 55px;

	text-align: center;
}

.dommer-heading-label {
	display: block;

	margin-bottom: 9px;

	color: #FF2D75;

	font-size: 11px;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: .13em;
}

.dommer-heading h2 {
	margin: 0;

	color: #FFFFFF;

	font-family: "Outfit", sans-serif;
	font-size: clamp(42px, 5vw, 67px);
	font-weight: 850;
	line-height: 1.04;
	letter-spacing: -.04em;

	text-wrap: balance;
}

.dommer-heading .pinkline {
	margin-right: auto;
	margin-left: auto;
}

.dommer-heading p {
	max-width: 760px;

	margin: 24px auto 0;

	color: rgba(255, 255, 255, .60);

	font-size: 16px;
	line-height: 1.68;
}


/* =========================================================
   PÅMELDINGSKORT
========================================================= */

.dommer-register-card {
	position: relative;
	isolation: isolate;

	display: grid;
	grid-template-columns:
		auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px;

	overflow: hidden;

	margin-bottom: 35px;
	padding: 30px 32px;

	border: 1px solid rgba(255, 45, 117, .27);
	border-radius: 24px;

	background:
		linear-gradient(
			120deg,
			rgba(255, 45, 117, .09),
			rgba(122, 58, 255, .07) 55%,
			rgba(0, 229, 255, .035)
		),
		rgba(255, 255, 255, .035);

	box-shadow:
		0 28px 80px rgba(0, 0, 0, .22),
		inset 0 1px 0 rgba(255, 255, 255, .045);
}

.dommer-register-glow {
	position: absolute;
	top: -140px;
	right: -80px;
	z-index: -1;

	width: 380px;
	height: 380px;

	border-radius: 50%;

	background: rgba(255, 45, 117, .13);
	filter: blur(80px);
}

.dommer-register-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;

	width: 68px;
	height: 68px;

	border: 1px solid rgba(255, 45, 117, .29);
	border-radius: 20px;

	background: rgba(255, 45, 117, .13);
	color: #FF2D75;

	font-size: 25px;

	box-shadow:
		0 0 30px rgba(255, 45, 117, .08);
}

.dommer-register-content span {
	display: block;

	margin-bottom: 5px;

	color: #FF5A93;

	font-size: 10px;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: .11em;
}

.dommer-register-content h3 {
	margin: 0 0 7px;

	color: #FFFFFF;

	font-family: "Outfit", sans-serif;
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 820;
	line-height: 1.08;
	letter-spacing: -.03em;
}

.dommer-register-content p {
	max-width: 720px;

	margin: 0;

	color: rgba(255, 255, 255, .58);

	font-size: 14px;
	line-height: 1.62;
}

.dommer-register-action {
	flex: 0 0 auto;
}

.dommer-register-action .btn {
	min-width: 220px;
}


/* =========================================================
   GRID
========================================================= */

.dommer-grid {
	display: grid;
	grid-template-columns:
		repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 24px;
}


/* =========================================================
   DOMMERKORT
========================================================= */

.dommer-card {
	display: flex;
	flex-direction: column;

	min-width: 0;
	overflow: hidden;

	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 25px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 45, 117, .026),
			rgba(122, 58, 255, .025),
			rgba(0, 229, 255, .015)
		),
		rgba(255, 255, 255, .042);

	box-shadow:
		0 29px 78px rgba(0, 0, 0, .23),
		inset 0 1px 0 rgba(255, 255, 255, .035);

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

	transition:
		transform .28s ease,
		border-color .28s ease,
		box-shadow .28s ease;
}

.dommer-card:hover {
	transform: translateY(-5px);

	border-color: rgba(255, 45, 117, .28);

	box-shadow:
		0 37px 90px rgba(0, 0, 0, .29),
		0 0 32px rgba(255, 45, 117, .045);
}


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

.dommer-card-image {
	position: relative;
	overflow: hidden;

	aspect-ratio: 16 / 9;

	background: #111628;
}

.dommer-card-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform .55s ease,
		filter .55s ease;
}

.dommer-card:hover .dommer-card-image img {
	transform: scale(1.025);
	filter: brightness(1.04);
}

.dommer-card-image-overlay {
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			to top,
			rgba(9, 14, 27, .76),
			transparent 53%
		);
}

.dommer-card-badge {
	position: absolute;
	left: 18px;
	bottom: 17px;
	z-index: 2;

	display: inline-flex;
	align-items: center;
	gap: 8px;

	padding: 9px 12px;

	border: 1px solid rgba(255, 45, 117, .27);
	border-radius: 999px;

	background: rgba(15, 19, 36, .80);
	color: #FF5A93;

	font-size: 10px;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: .075em;

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.dommer-card-small .dommer-card-badge {
	border-color: rgba(0, 229, 255, .26);
	color: #00E5FF;
}


/* =========================================================
   KORTINNHOLD
========================================================= */

.dommer-card-content {
	display: flex;
	flex: 1;
	flex-direction: column;

	padding: 29px 28px 30px;
}

.dommer-card-label {
	display: block;

	margin-bottom: 7px;

	color: #FF2D75;

	font-size: 10px;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: .11em;
}

.dommer-card-small .dommer-card-label {
	color: #00E5FF;
}

.dommer-card-content h3 {
	margin: 0;

	color: #FFFFFF;

	font-family: "Outfit", sans-serif;
	font-size: clamp(29px, 3.5vw, 43px);
	font-weight: 820;
	line-height: 1.08;
	letter-spacing: -.035em;
}

.dommer-card-accent {
	width: 74px;
	height: 5px;

	margin: 22px 0 24px;

	border-radius: 999px;

	background:
		linear-gradient(
			to right,
			#FF2D75,
			#FF5A93
		);

	box-shadow:
		0 0 19px rgba(255, 45, 117, .38);
}

.dommer-card-small .dommer-card-accent {
	background:
		linear-gradient(
			to right,
			#00E5FF,
			#7A3AFF
		);

	box-shadow:
		0 0 19px rgba(0, 229, 255, .26);
}


/* =========================================================
   INFORMASJONSLISTE
========================================================= */

.dommer-list {
	display: grid;
	gap: 12px;

	margin: 0;
	padding: 0;

	list-style: none;
}

.dommer-list li {
	display: grid;
	grid-template-columns:
		auto minmax(0, 1fr);
	align-items: flex-start;
	gap: 13px;

	padding: 15px 16px;

	border: 1px solid rgba(255, 255, 255, .075);
	border-radius: 15px;

	background: rgba(255, 255, 255, .025);

	color: rgba(255, 255, 255, .62);

	font-size: 14px;
	line-height: 1.58;
}

.dommer-list li strong {
	color: #FFFFFF;
	font-weight: 700;
}

.dommer-list-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 37px;
	height: 37px;

	border-radius: 11px;

	background: rgba(255, 45, 117, .11);
	color: #FF2D75;

	font-size: 13px;
}

.dommer-card-small .dommer-list-icon {
	background: rgba(0, 229, 255, .09);
	color: #00E5FF;
}


/* =========================================================
   TAKKEKORT
========================================================= */

.dommer-thanks {
	display: grid;
	grid-template-columns:
		auto minmax(0, 1fr);
	align-items: center;
	gap: 19px;

	max-width: 1000px;

	margin: 72px auto 0;
	padding: 25px 27px;

	border: 1px solid rgba(255, 210, 0, .20);
	border-radius: 20px;

	background:
		linear-gradient(
			135deg,
			rgba(255, 210, 0, .06),
			rgba(255, 45, 117, .035),
			rgba(122, 58, 255, .03)
		),
		rgba(255, 255, 255, .032);

	box-shadow:
		0 23px 60px rgba(0, 0, 0, .18);
}

.dommer-thanks-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 56px;
	height: 56px;

	border-radius: 17px;

	background: rgba(255, 210, 0, .12);
	color: #FFD200;

	font-size: 21px;
}

.dommer-thanks span {
	display: block;

	margin-bottom: 4px;

	color: #FFD200;

	font-size: 9px;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: .11em;
}

.dommer-thanks h3 {
	margin: 0 0 5px;

	color: #FFFFFF;

	font-size: 22px;
	font-weight: 790;
	letter-spacing: -.022em;
}

.dommer-thanks p {
	margin: 0;

	color: rgba(255, 255, 255, .53);

	font-size: 13px;
	line-height: 1.55;
}


/* =========================================================
   NETTBRETT
========================================================= */

@media (max-width: 991px) {

	.dommer-register-card {
		grid-template-columns:
			auto minmax(0, 1fr);
	}

	.dommer-register-action {
		grid-column: 1 / -1;
	}

}


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

@media (max-width: 767px) {

	.dommer-section {
		padding: 58px 0 78px;
	}

	.dommer-container {
		padding-right: 16px;
		padding-left: 16px;
	}

	.dommer-heading {
		margin-bottom: 40px;

		text-align: left;
	}

	.dommer-heading .pinkline {
		margin-right: 0;
		margin-left: 0;
	}

	.dommer-heading p {
		margin-right: 0;
		margin-left: 0;
	}

	.dommer-register-card {
		grid-template-columns: 1fr;

		padding: 23px 21px;
	}

	.dommer-register-action .btn {
		width: 100%;
	}

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

	.dommer-card {
		border-radius: 21px;
	}

	.dommer-card-image {
		aspect-ratio: 4 / 3;
	}

	.dommer-card-content {
		padding: 25px 21px 22px;
	}

	.dommer-list li {
		padding: 13px;
	}

	.dommer-thanks {
		grid-template-columns: 1fr;

		margin-top: 52px;
		padding: 22px;
	}

}

/* =========================================================
   PRAKTISK INFORMASJON FOR DOMMERE
========================================================= */

.dommer-practical {
	display: grid;
	grid-template-columns: minmax(420px, .95fr) minmax(0, 1.05fr);

	overflow: hidden;

	margin-top: 35px;

	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 25px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 45, 117, .025),
			rgba(122, 58, 255, .025),
			rgba(0, 229, 255, .015)
		),
		rgba(255, 255, 255, .042);

	box-shadow:
		0 29px 78px rgba(0, 0, 0, .23),
		inset 0 1px 0 rgba(255, 255, 255, .035);

	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}


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

.dommer-practical-image {
	position: relative;
	overflow: hidden;

	min-height: 560px;

	background: #111628;
}

.dommer-practical-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

.dommer-practical-image-overlay {
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			to top,
			rgba(9, 14, 27, .68),
			transparent 48%
		);
}

.dommer-practical-badge {
	position: absolute;
	left: 18px;
	bottom: 18px;
	z-index: 2;

	display: inline-flex;
	align-items: center;
	gap: 8px;

	padding: 9px 12px;

	border: 1px solid rgba(255, 45, 117, .28);
	border-radius: 999px;

	background: rgba(15, 19, 36, .80);
	color: #FF5A93;

	font-size: 10px;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: .075em;

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}


/* =========================================================
   INNHOLD
========================================================= */

.dommer-practical-content {
	padding: 36px 34px;
}

.dommer-practical-label {
	display: block;

	margin-bottom: 7px;

	color: #FF2D75;

	font-size: 10px;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: .11em;
}

.dommer-practical-content h3 {
	margin: 0;

	color: #FFFFFF;

	font-family: "Outfit", sans-serif;
	font-size: clamp(30px, 3.5vw, 44px);
	font-weight: 820;
	line-height: 1.08;
	letter-spacing: -.035em;
}

.dommer-practical-accent {
	width: 74px;
	height: 5px;

	margin: 22px 0 25px;

	border-radius: 999px;

	background:
		linear-gradient(
			to right,
			#FF2D75,
			#7A3AFF
		);

	box-shadow:
		0 0 19px rgba(255, 45, 117, .32);
}


/* =========================================================
   PRAKTISK LISTE
========================================================= */

.dommer-practical-list {
	display: grid;
	gap: 10px;

	margin: 0;
	padding: 0;

	list-style: none;
}

.dommer-practical-list li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: flex-start;
	gap: 13px;

	padding: 13px 14px;

	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 14px;

	background: rgba(255, 255, 255, .022);

	color: rgba(255, 255, 255, .61);

	font-size: 14px;
	line-height: 1.55;
}

.dommer-practical-list-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;

	width: 36px;
	height: 36px;

	border-radius: 11px;

	background: rgba(255, 45, 117, .11);
	color: #FF2D75;

	font-size: 12px;
}

.dommer-practical-list a {
	color: #FF5A93;

	font-weight: 650;
	text-decoration: none;

	border-bottom: 1px solid rgba(255, 90, 147, .35);

	transition:
		color .2s ease,
		border-color .2s ease;
}

.dommer-practical-list a:hover {
	color: #FFFFFF;

	border-color: #FF5A93;
}


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

@media (max-width: 991px) {

	.dommer-practical {
		grid-template-columns: 1fr;
	}

	.dommer-practical-image {
		min-height: 420px;
	}

}


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

@media (max-width: 767px) {

	.dommer-practical {
		margin-top: 24px;

		border-radius: 21px;
	}

	.dommer-practical-image {
		min-height: 320px;
	}

	.dommer-practical-content {
		padding: 25px 21px 22px;
	}

	.dommer-practical-list li {
		padding: 12px;
	}

}