/* CSS Document */

/* =========================================================
   PARAIDRETT
========================================================= */

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

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

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


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

.para-heading {
	max-width: 880px;

	margin: 0 auto 55px;

	text-align: center;
}

.para-heading-label {
	display: block;

	margin-bottom: 9px;

	color: #FF2D75;

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

.para-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;
}

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

.para-heading p {
	max-width: 720px;

	margin: 24px auto 0;

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

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


/* =========================================================
   CAMP OG BANKETT
========================================================= */

.para-party {
	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: 29px 31px;

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

	background:
		linear-gradient(
			120deg,
			rgba(255, 210, 0, .09),
			rgba(255, 45, 117, .07) 48%,
			rgba(122, 58, 255, .08)
		),
		rgba(255, 255, 255, .038);

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

.para-party-glow {
	position: absolute;
	right: -70px;
	top: -120px;
	z-index: -1;

	width: 360px;
	height: 360px;

	border-radius: 50%;

	background: rgba(255, 45, 117, .12);
	filter: blur(75px);
}

.para-party-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;

	width: 68px;
	height: 68px;

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

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

	font-size: 25px;

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

.para-party-label {
	display: block;

	margin-bottom: 5px;

	color: #FFD200;

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

.para-party h3 {
	margin: 0 0 7px;

	color: #FFFFFF;

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

.para-party-text {
	max-width: 720px;

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

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

.para-party-actions {
	display: flex;
	align-items: flex-end;
	flex-direction: column;
	gap: 11px;

	min-width: 225px;
}

.para-party-note {
	display: inline-flex;
	align-items: flex-start;
	gap: 7px;

	max-width: 260px;

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

	font-size: 10px;
	line-height: 1.45;

	text-align: right;
}

.para-party-note i {
	margin-top: 2px;

	color: #FFD200;
}


/* =========================================================
   KLASSEGRID
========================================================= */

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


/* =========================================================
   KLASSEKORT
========================================================= */

.para-class-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;
}

.para-class-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
========================================================= */

.para-class-image {
	position: relative;
	overflow: hidden;

	aspect-ratio: 16 / 9;

	background: #111628;
}

.para-class-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

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

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

.para-class-image-overlay {
	position: absolute;
	inset: 0;

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

.para-class-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, .28);
	border-radius: 999px;

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

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

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

.para-class-el .para-class-badge {
	border-color: rgba(0, 229, 255, .28);
	color: #00E5FF;
}


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

.para-class-content {
	display: flex;
	flex: 1;
	flex-direction: column;

	padding: 29px 28px 27px;
}

.para-class-label {
	display: block;

	margin-bottom: 7px;

	color: #FF2D75;

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

.para-class-el .para-class-label {
	color: #00E5FF;
}

.para-class-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;

	text-wrap: balance;
}

.para-class-accent {
	width: 74px;
	height: 5px;

	margin: 22px 0 23px;

	border-radius: 999px;

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

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

.para-class-el .para-class-accent {
	background:
		linear-gradient(
			to right,
			#00E5FF,
			#7A3AFF
		);

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

.para-class-text {
	margin-bottom: 27px;

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

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


/* =========================================================
   PÅMELDING
========================================================= */

.para-class-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;

	margin-top: auto;
	padding-top: 22px;

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

.para-register-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 210px;
}

.para-register-disabled {
	cursor: default;
	opacity: .83;
}

.para-register-disabled:hover {
	transform: none;
}

.para-deadline {
	display: inline-flex;
	align-items: center;
	gap: 7px;

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

	font-size: 11px;
	font-weight: 600;
}

.para-deadline i {
	color: #FF2D75;
}

.para-class-el .para-deadline i {
	color: #00E5FF;
}


/* =========================================================
   KONTAKTINTRODUKSJON
========================================================= */

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

	margin-top: 70px;
	padding: 25px 27px;

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

	background:
		linear-gradient(
			135deg,
			rgba(0, 229, 255, .055),
			rgba(122, 58, 255, .04),
			rgba(255, 45, 117, .025)
		),
		rgba(255, 255, 255, .032);

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

.para-contact-intro-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 57px;
	height: 57px;

	border-radius: 17px;

	background: rgba(0, 229, 255, .11);
	color: #00E5FF;

	font-size: 21px;
}

.para-contact-intro span {
	display: block;

	margin-bottom: 4px;

	color: #00E5FF;

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

.para-contact-intro h3 {
	margin: 0 0 5px;

	color: #FFFFFF;

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

.para-contact-intro p {
	margin: 0;

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

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


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

@media (max-width: 991px) {

	.para-party {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.para-party-actions {
		grid-column: 1 / -1;

		align-items: flex-start;
		flex-direction: row;
		justify-content: space-between;

		width: 100%;
	}

	.para-party-note {
		text-align: left;
	}

	.para-classes-grid {
		grid-template-columns: 1fr;
	}

}


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

@media (max-width: 767px) {

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

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

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

		text-align: left;
	}

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

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

	.para-party {
		grid-template-columns: 1fr;

		padding: 23px 21px;
	}

	.para-party-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.para-party-actions .btn {
		width: 100%;
	}

	.para-party-note {
		max-width: none;

		text-align: left;
	}

	.para-class-card {
		border-radius: 21px;
	}

	.para-class-image {
		aspect-ratio: 4 / 3;
	}

	.para-class-content {
		padding: 25px 21px 22px;
	}

	.para-class-text {
		font-size: 14px;
		line-height: 1.64;
	}

	.para-class-footer {
		align-items: stretch;
		flex-direction: column;
	}

	.para-register-button {
		width: 100%;
	}

	.para-contact-intro {
		grid-template-columns: 1fr;

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

	.para-contact-intro .btn {
		width: 100%;
	}

}


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

@media (max-width: 420px) {

	.para-class-badge {
		left: 13px;
		bottom: 13px;
	}

}