/* ==========================================================================
   ERAS® Society – Profiles
   ========================================================================== */

.eras-profiles {
	--profiles-blue: #064487;
	--profiles-blue-dark: #043565;

	--profiles-text: #40596b;
	--profiles-muted: #718696;

	--profiles-border: #dce7ed;
	--profiles-light-blue: #edf6fa;

	background: #fff;
	color: var(--profiles-text);
}


/* ==========================================================================
   Container
   ========================================================================== */

.eras-profiles .container {
	width: min(
		1200px,
		calc(100% - 48px)
	);

	margin-inline: auto;
	padding: 0;
}


/* ==========================================================================
   Hero
   ========================================================================== */

.eras-profiles__hero {
	position: relative;

	overflow: hidden;

	padding: 95px 0 100px;

	background:
		linear-gradient(
			135deg,
			#f8fbfd 0%,
			#edf6fa 100%
		);
}


.eras-profiles__hero::before,
.eras-profiles__hero::after {
	content: "";

	position: absolute;

	border:
		1px solid rgba(6, 68, 135, .06);

	border-radius: 50%;

	pointer-events: none;
}


.eras-profiles__hero::before {
	top: -380px;
	right: -210px;

	width: 700px;
	height: 700px;
}


.eras-profiles__hero::after {
	bottom: -470px;
	left: -340px;

	width: 680px;
	height: 680px;
}


.eras-profiles__hero-grid {
	position: relative;
	z-index: 2;

	display: grid;

	grid-template-columns:
		minmax(0, .95fr)
		minmax(0, 1fr);

	gap: clamp(
		70px,
		9vw,
		145px
	);

	align-items: center;
}


.eras-profiles__kicker,
.eras-profiles__section-kicker {
	display: flex;
	align-items: center;
	gap: 11px;

	color: var(--profiles-blue);

	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .11em;

	text-transform: uppercase;
}


.eras-profiles__kicker {
	margin-bottom: 18px;
}


.eras-profiles__kicker span,
.eras-profiles__section-kicker span {
	width: 28px;
	height: 2px;

	flex: 0 0 auto;

	background: var(--profiles-blue);
}


.eras-profiles__kicker sup {
	font-size: .55em;
}


.eras-profiles__hero h1 {
	margin: 0;

	color: var(--profiles-blue);

	font-size: clamp(
		50px,
		5vw,
		68px
	);

	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -.04em;
}


.eras-profiles__hero-right {
	max-width: 590px;
}


.eras-profiles__hero-right > p {
	margin: 0;

	color: #536c7e;

	font-size: 17px;
	line-height: 1.75;
}


/* ==========================================================================
   Hero stat
   ========================================================================== */

.eras-profiles__hero-stat {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	margin-top: 27px;

	padding: 6px 14px 6px 6px;

	border:
		1px solid var(--profiles-border);

	border-radius: 999px;

	background: rgba(255,255,255,.75);
}


.eras-profiles__hero-stat strong {
	display: grid;
	place-items: center;

	min-width: 36px;
	height: 36px;

	padding-inline: 7px;

	border-radius: 999px;

	background: var(--profiles-blue);
	color: #fff;

	font-size: 12px;
	font-weight: 700;
}


.eras-profiles__hero-stat span {
	color: #617989;

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


/* ==========================================================================
   Content
   ========================================================================== */

.eras-profiles__content {
	padding: 88px 0 115px;
}


/* ==========================================================================
   Intro
   ========================================================================== */

.eras-profiles__intro {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		minmax(0, .75fr);

	gap: 80px;

	align-items: end;

	margin-bottom: 42px;
}


.eras-profiles__section-kicker {
	margin-bottom: 12px;
}


.eras-profiles__intro h2 {
	margin: 0;

	color: var(--profiles-blue);

	font-size: clamp(
		34px,
		3.5vw,
		46px
	);

	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -.035em;
}


.eras-profiles__intro > p {
	max-width: 480px;

	margin: 0;

	color: var(--profiles-muted);

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


/* ==========================================================================
   Toolbar
   ========================================================================== */

.eras-profiles__toolbar {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		280px;

	gap: 12px;

	margin-bottom: 16px;
}


/* ==========================================================================
   Search
   ========================================================================== */

.eras-profiles__search,
.eras-profiles__filter {
	position: relative;

	display: flex;
	align-items: center;
}


.eras-profiles__search > i,
.eras-profiles__filter > i {
	position: absolute;

	left: 18px;

	z-index: 2;

	color: #8196a5;

	font-size: 13px;

	pointer-events: none;
}


.eras-profiles__search input,
.eras-profiles__filter select {
	width: 100%;
	height: 54px;

	border:
		1px solid #cedde6;

	border-radius: 9px;

	background-color: #fff;

	color: var(--profiles-text);

	font: inherit;
	font-size: 13px;

	outline: none;

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


.eras-profiles__search input {
	padding:
		0
		48px
		0
		47px;
}


.eras-profiles__search input::placeholder {
	color: #91a3af;
}


.eras-profiles__filter select {
	padding:
		0
		44px
		0
		46px;

	color: var(--profiles-blue);

	font-weight: 600;

	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;

	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23064487' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	background-repeat: no-repeat;

	background-position:
		right 17px center;
}


.eras-profiles__search input:focus,
.eras-profiles__filter select:focus {
	border-color: rgba(6,68,135,.42);

	box-shadow:
		0 0 0 3px rgba(6,68,135,.07);
}


/* ==========================================================================
   Clear
   ========================================================================== */

.eras-profiles__search-clear {
	position: absolute;

	right: 9px;

	display: grid;
	place-items: center;

	width: 34px;
	height: 34px;

	padding: 0;

	border: 0;
	border-radius: 6px;

	background: transparent;
	color: #8499a7;

	cursor: pointer;
}


.eras-profiles__search-clear:hover {
	background: var(--profiles-light-blue);
	color: var(--profiles-blue);
}


/* ==========================================================================
   Results
   ========================================================================== */

.eras-profiles__results {
	display: flex;

	align-items: center;
	justify-content: space-between;

	min-height: 50px;

	margin-bottom: 28px;

	padding:
		0
		2px
		14px;

	border-bottom:
		1px solid var(--profiles-border);
}


.eras-profiles__results p {
	margin: 0;

	color: var(--profiles-muted);

	font-size: 11px;
}


.eras-profiles__results strong {
	color: var(--profiles-blue);
}


.eras-profiles__reset {
	padding: 0;

	border: 0;

	background: transparent;
	color: var(--profiles-blue);

	font-size: 11px;
	font-weight: 650;

	cursor: pointer;
}


/* ==========================================================================
   Grid

   Själva kortens utseende finns i style.css.
   ========================================================================== */

.eras-profiles__grid {
	display: grid;

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

	gap: 18px;
}


.eras-profiles__item {
	min-width: 0;
}


.eras-profiles__item[hidden] {
	display: none !important;
}


/*
 * Gör dina globala contact cards lika höga i gridden.
 */

.eras-profiles__item > .eras-contact_card {
	height: 100%;
}


/*
 * Håller knapparna samlade längst ned utan att ändra
 * själva globala kortstilen.
 */

.eras-profiles__card-actions {
	display: flex;
	flex-wrap: wrap;

	gap: 8px;

	margin-top: auto;
	padding-top: 16px;
}


/* ==========================================================================
   Empty
   ========================================================================== */

.eras-profiles__empty {
	padding: 80px 20px;

	text-align: center;
}


.eras-profiles__empty[hidden] {
	display: none;
}


.eras-profiles__empty-icon {
	display: grid;
	place-items: center;

	width: 60px;
	height: 60px;

	margin: 0 auto 17px;

	border-radius: 50%;

	background: var(--profiles-light-blue);
	color: var(--profiles-blue);

	font-size: 19px;
}


.eras-profiles__empty h3 {
	margin: 0;

	color: var(--profiles-blue);

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


.eras-profiles__empty p {
	margin: 8px 0 0;

	color: var(--profiles-muted);

	font-size: 13px;
}


.eras-profiles__empty button {
	margin-top: 20px;

	padding: 10px 17px;

	border: 0;
	border-radius: 6px;

	background: var(--profiles-blue);
	color: #fff;

	font-size: 11px;
	font-weight: 650;

	cursor: pointer;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 900px) {

	.eras-profiles__hero-grid {
		gap: 55px;
	}


	.eras-profiles__intro {
		gap: 45px;
	}

}


/* ==========================================================================
   Small tablet
   ========================================================================== */

@media (max-width: 750px) {

	.eras-profiles .container {
		width: calc(100% - 40px);
	}


	.eras-profiles__hero {
		padding: 60px 0 65px;
	}


	.eras-profiles__hero-grid {
		grid-template-columns: 1fr;

		gap: 30px;
	}


	.eras-profiles__content {
		padding: 65px 0 85px;
	}


	.eras-profiles__intro {
		grid-template-columns: 1fr;

		gap: 18px;
	}


	.eras-profiles__toolbar {
		grid-template-columns: 1fr;
	}


	.eras-profiles__grid {
		grid-template-columns: 1fr;
	}

}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 520px) {

	.eras-profiles .container {
		width: calc(100% - 32px);
	}


	.eras-profiles__hero {
		padding: 46px 0 52px;
	}


	.eras-profiles__hero h1 {
		font-size: 42px;
	}


	.eras-profiles__hero-right > p {
		font-size: 15px;
	}

}