/* ==========================================================================
   ERAS® Society – Specialties
   ========================================================================== */

.eras-specialties {
	--specialties-blue: #064487;
	--specialties-blue-light: #0b5ca8;

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

	--specialties-border: #dce7ed;
	--specialties-border-soft: #eaf0f3;

	--specialties-light: #f4f8fb;
	--specialties-light-blue: #edf6fa;

	background: #fff;

	color: var(--specialties-text);
}


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

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

	margin-inline: auto;

	padding: 0;
}


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

.eras-specialties__hero {
	position: relative;

	overflow: hidden;

	padding: 95px 0 100px;

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


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

	position: absolute;

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

	border-radius: 50%;

	pointer-events: none;
}


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

	width: 700px;
	height: 700px;
}


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

	width: 680px;
	height: 680px;
}


.eras-specialties__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-specialties__hero-left,
.eras-specialties__hero-right {
	min-width: 0;
}


/* ==========================================================================
   Kicker
   ========================================================================== */

.eras-specialties__kicker,
.eras-specialties__section-kicker {
	display: flex;

	align-items: center;

	gap: 11px;

	color:
		var(--specialties-blue);

	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: .11em;

	text-transform: uppercase;
}


.eras-specialties__kicker {
	margin: 0 0 18px;
}


.eras-specialties__kicker span,
.eras-specialties__section-kicker span {
	flex: 0 0 auto;

	width: 28px;
	height: 2px;

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


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

.eras-specialties__hero h1 {
	margin: 0;

	color:
		var(--specialties-blue);

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

	font-weight: 500;
	line-height: 1.04;

	letter-spacing: -.04em;
}


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


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

	color: #536c7e;

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


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

.eras-specialties__hero-stat {
	display: inline-flex;

	align-items: center;

	gap: 10px;

	margin-top: 27px;

	padding: 6px 14px 6px 6px;

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

	border-radius: 999px;

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

	box-shadow:
		0 7px 20px
		rgba(
			25,
			55,
			80,
			.045
		);
}


.eras-specialties__hero-stat strong {
	display: grid;

	place-items: center;

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

	padding-inline: 7px;

	border-radius: 999px;

	background:
		var(--specialties-blue);

	color: #fff;

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


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

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


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

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


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

.eras-specialties__intro {
	display: grid;

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

	gap: 80px;

	align-items: end;

	margin: 0 0 42px;
}


.eras-specialties__section-kicker {
	margin: 0 0 12px;
}


.eras-specialties__intro h2 {
	margin: 0;

	color:
		var(--specialties-blue);

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

	font-weight: 500;
	line-height: 1.12;

	letter-spacing: -.035em;
}


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

	margin: 0;

	color:
		var(--specialties-muted);

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


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

.eras-specialties__toolbar {
	display: grid;

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

	gap: 20px;

	align-items: center;

	margin: 0 0 34px;

	padding: 14px;

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

	border-radius: 12px;

	background: #f8fbfd;
}


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

.eras-specialties__search {
	position: relative;

	display: flex;

	align-items: center;
}


.eras-specialties__search > i {
	position: absolute;

	left: 17px;

	color: #8499a8;

	font-size: 13px;

	pointer-events: none;
}


.eras-specialties__search input {
	width: 100%;
	height: 50px;

	padding:
		0
		48px
		0
		45px;

	border:
		1px solid
		#cfdee7;

	border-radius: 8px;

	background: #fff;

	color:
		var(--specialties-text);

	font: inherit;

	font-size: 13px;

	outline: 0;

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


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


.eras-specialties__search input:focus {
	border-color:
		rgba(
			6,
			68,
			135,
			.45
		);

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


.eras-specialties__search-clear {
	position: absolute;

	right: 8px;

	display: grid;

	place-items: center;

	width: 34px;
	height: 34px;

	padding: 0;

	border: 0;
	border-radius: 6px;

	background: transparent;

	color: #8297a5;

	cursor: pointer;

	transition:
		background .18s ease,
		color .18s ease;
}


.eras-specialties__search-clear:hover {
	background:
		var(--specialties-light);

	color:
		var(--specialties-blue);
}


/* ==========================================================================
   Result count
   ========================================================================== */

.eras-specialties__result-count {
	display: flex;

	align-items: center;

	gap: 6px;

	padding: 0 12px;

	white-space: nowrap;

	color: #7b909e;

	font-size: 11px;
}


.eras-specialties__result-count > span:first-child {
	color:
		var(--specialties-blue);

	font-weight: 700;
}


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

.eras-specialties__grid {
	display: grid;

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

	gap: 22px;
}


/* ==========================================================================
   Card
   ========================================================================== */

.eras-specialty-card {
	min-width: 0;
}


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


.eras-specialty-card__link {
	display: flex;

	flex-direction: column;

	height: 100%;

	overflow: hidden;

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

	border-radius: 12px;

	background: #fff;

	color: inherit;

	text-decoration: none;

	box-shadow:
		0 9px 28px
		rgba(
			25,
			55,
			80,
			.045
		);

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


.eras-specialty-card__link:hover {
	border-color:
		rgba(
			6,
			68,
			135,
			.22
		);

	transform:
		translateY(-5px);

	box-shadow:
		0 20px 42px
		rgba(
			25,
			55,
			80,
			.10
		);
}


/* ==========================================================================
   Card image
   ========================================================================== */

.eras-specialty-card__image {
	position: relative;

	height: 225px;

	overflow: hidden;

	background:
		var(--specialties-light);
}


.eras-specialty-card__image > img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform .4s ease;
}


.eras-specialty-card__link:hover
.eras-specialty-card__image > img {
	transform: scale(1.035);
}


.eras-specialty-card__placeholder {
	display: grid;

	place-items: center;

	width: 100%;
	height: 100%;

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

	color: #aec0cb;

	font-size: 42px;
}


/* ==========================================================================
   Image overlay
   ========================================================================== */

.eras-specialty-card__image-overlay {
	position: absolute;

	right: 12px;
	bottom: 12px;

	display: inline-flex;

	align-items: center;

	gap: 8px;

	padding: 8px 11px;

	border-radius: 6px;

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

	color:
		var(--specialties-blue);

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

	box-shadow:
		0 6px 18px
		rgba(
			20,
			50,
			75,
			.11
		);

	opacity: 0;

	transform:
		translateY(5px);

	transition:
		opacity .2s ease,
		transform .2s ease;
}


.eras-specialty-card__link:hover
.eras-specialty-card__image-overlay {
	opacity: 1;

	transform: translateY(0);
}


/* ==========================================================================
   Card body
   ========================================================================== */

.eras-specialty-card__body {
	display: flex;

	flex: 1;

	flex-direction: column;

	justify-content: space-between;

	min-height: 245px;

	padding: 23px;
}


.eras-specialty-card__eyebrow {
	display: block;

	margin: 0 0 8px;

	color: #899da9;

	font-size: 8px;
	font-weight: 700;

	letter-spacing: .1em;

	text-transform: uppercase;
}


.eras-specialty-card__body h2 {
	margin: 0;

	color:
		var(--specialties-blue);

	font-size: 21px;
	font-weight: 580;
	line-height: 1.25;

	letter-spacing: -.02em;
}


.eras-specialty-card__body p {
	margin: 11px 0 0;

	color:
		var(--specialties-muted);

	font-size: 12px;
	line-height: 1.65;
}


/* ==========================================================================
   Card footer
   ========================================================================== */

.eras-specialty-card__footer {
	display: flex;

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

	gap: 14px;

	margin-top: 23px;

	padding-top: 17px;

	border-top:
		1px solid
		var(--specialties-border-soft);
}


/* ==========================================================================
   People
   ========================================================================== */

.eras-specialty-card__people {
	display: flex;

	align-items: center;

	padding-left: 5px;
}


.eras-specialty-card__person {
	display: grid;

	place-items: center;

	width: 30px;
	height: 30px;

	margin-left: -5px;

	overflow: hidden;

	border: 2px solid #fff;
	border-radius: 50%;

	background:
		var(--specialties-light-blue);

	color:
		var(--specialties-blue);

	font-size: 9px;

	box-shadow:
		0 1px 5px
		rgba(
			25,
			55,
			80,
			.08
		);
}


.eras-specialty-card__person img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}


.eras-specialty-card__person--more {
	background:
		var(--specialties-blue);

	color: #fff;

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


.eras-specialty-card__resource-label {
	color: #8095a3;

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


/* ==========================================================================
   Arrow
   ========================================================================== */

.eras-specialty-card__arrow {
	display: grid;

	place-items: center;

	width: 34px;
	height: 34px;

	border-radius: 50%;

	background:
		var(--specialties-light-blue);

	color:
		var(--specialties-blue);

	font-size: 11px;

	transition:
		background-color .18s ease,
		color .18s ease,
		transform .18s ease;
}


.eras-specialty-card__link:hover
.eras-specialty-card__arrow {
	background:
		var(--specialties-blue);

	color: #fff;

	transform:
		translateX(3px);
}


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

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

	text-align: center;
}


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


.eras-specialties__empty-icon {
	display: grid;

	place-items: center;

	width: 60px;
	height: 60px;

	margin: 0 auto 17px;

	border-radius: 50%;

	background:
		var(--specialties-light-blue);

	color:
		var(--specialties-blue);

	font-size: 19px;
}


.eras-specialties__empty h3 {
	margin: 0;

	color:
		var(--specialties-blue);

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


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

	color:
		var(--specialties-muted);

	font-size: 13px;
}


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

@media (max-width: 1000px) {

	.eras-specialties__hero-grid {
		gap: 60px;
	}


	.eras-specialties__intro {
		gap: 50px;
	}


	.eras-specialties__grid {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}

}


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

@media (max-width: 750px) {

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


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


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

		gap: 30px;
	}


	.eras-specialties__hero-right {
		max-width: 650px;
	}


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


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

		gap: 18px;

		margin-bottom: 32px;
	}


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

		gap: 10px;
	}


	.eras-specialties__result-count {
		padding:
			0 5px 2px;
	}

}


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

@media (max-width: 560px) {

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


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


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


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


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

		gap: 16px;
	}


	.eras-specialty-card__image {
		height: 215px;
	}


	.eras-specialty-card__body {
		min-height: 0;

		padding: 21px;
	}


	.eras-specialty-card__image-overlay {
		display: none;
	}

}