/* ==========================================================================
   ERAS® Society – Events
   ========================================================================== */

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

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

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

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

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


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

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

	margin-inline: auto;
	padding: 0;
}


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

.eras-events__hero {
	position: relative;

	overflow: hidden;

	padding: 94px 0 100px;

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


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

	position: absolute;

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

	border-radius: 50%;

	pointer-events: none;
}


.eras-events__hero::before {
	top: -380px;
	right: -215px;

	width: 700px;
	height: 700px;
}


.eras-events__hero::after {
	bottom: -480px;
	left: -335px;

	width: 680px;
	height: 680px;
}


.eras-events__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-events__kicker,
.eras-events__section-kicker {
	display: flex;
	align-items: center;
	gap: 11px;

	color: var(--events-blue);

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

	text-transform: uppercase;
}


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


.eras-events__kicker span,
.eras-events__section-kicker span {
	width: 28px;
	height: 2px;

	flex: 0 0 auto;

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


.eras-events__hero h1 {
	margin: 0;

	color: var(--events-blue);

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

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


.eras-events__hero-right > p {
	max-width: 580px;

	margin: 0;

	color: #536c7e;

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


/* ==========================================================================
   Stats
   ========================================================================== */

.eras-events__stats {
	display: flex;

	margin-top: 28px;
}


.eras-events__stats > div {
	min-width: 130px;

	padding-right: 28px;
}


.eras-events__stats > div + div {
	padding-left: 28px;

	border-left:
		1px solid rgba(6,68,135,.13);
}


.eras-events__stats strong {
	display: block;

	color: var(--events-blue);

	font-size: 32px;
	font-weight: 500;
	line-height: 1;
}


.eras-events__stats span {
	display: block;

	margin-top: 7px;

	color: var(--events-muted);

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


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

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


.eras-events__intro {
	display: grid;

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

	gap: 80px;

	align-items: end;

	margin-bottom: 38px;
}


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


.eras-events__intro h2 {
	margin: 0;

	color: var(--events-blue);

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

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


.eras-events__intro > p {
	margin: 0;

	color: var(--events-muted);

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


/* ==========================================================================
   Period tabs
   ========================================================================== */

.eras-events__tabs {
	display: inline-flex;

	gap: 4px;

	margin-bottom: 18px;
	padding: 4px;

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

	border-radius: 9px;

	background: #f7fafc;
}


.eras-events__tabs button {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	min-height: 38px;

	padding: 0 14px;

	border: 0;
	border-radius: 6px;

	background: transparent;
	color: #647b8b;

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

	cursor: pointer;
}


.eras-events__tabs button span {
	display: grid;
	place-items: center;

	min-width: 22px;
	height: 22px;

	padding: 0 5px;

	border-radius: 999px;

	background: #e9f0f4;

	font-size: 8px;
}


.eras-events__tabs button.is-active {
	background: var(--events-blue);
	color: #fff;

	box-shadow:
		0 5px 13px rgba(6,68,135,.15);
}


.eras-events__tabs button.is-active span {
	background: rgba(255,255,255,.17);
}


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

.eras-events__toolbar {
	display: grid;

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

	gap: 10px;

	margin-bottom: 14px;
}


.eras-events__search,
.eras-events__filter {
	position: relative;
}


.eras-events__search > i {
	position: absolute;

	top: 50%;
	left: 18px;

	color: #8296a4;

	font-size: 13px;

	transform: translateY(-50%);

	pointer-events: none;
}


.eras-events__search input,
.eras-events__filter select {
	width: 100%;
	height: 52px;

	border:
		1px solid #cedde6;

	border-radius: 8px;

	background-color: #fff;

	color: var(--events-text);

	font: inherit;
	font-size: 12px;

	outline: none;
}


.eras-events__search input {
	padding:
		0
		48px
		0
		46px;
}


.eras-events__filter select {
	padding:
		0
		40px
		0
		15px;

	color: var(--events-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 15px center;
}


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

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


.eras-events__search button {
	position: absolute;

	top: 50%;
	right: 9px;

	display: grid;
	place-items: center;

	width: 34px;
	height: 34px;

	padding: 0;

	border: 0;
	border-radius: 6px;

	background: transparent;
	color: #8296a4;

	transform: translateY(-50%);

	cursor: pointer;
}


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

.eras-events__results {
	display: flex;

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

	margin-bottom: 27px;
	padding:
		0
		2px
		14px;

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


.eras-events__results p {
	margin: 0;

	color: var(--events-muted);

	font-size: 11px;
}


.eras-events__results strong {
	color: var(--events-blue);
}


.eras-events__results button {
	padding: 0;

	border: 0;

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

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

	cursor: pointer;
}


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

.eras-events__grid {
	display: grid;

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

	gap: 20px;
}


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


.eras-event-card__link {
	display: flex;
	flex-direction: column;

	height: 100%;

	overflow: hidden;

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

	border-radius: 12px;

	background: #fff;
	color: inherit;

	text-decoration: none;

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

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


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

	transform: translateY(-4px);

	box-shadow:
		0 17px 38px rgba(25,55,80,.105);
}


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

.eras-event-card__image {
	height: 190px;

	overflow: hidden;

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


.eras-event-card__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform .3s ease;
}


.eras-event-card__link:hover
.eras-event-card__image img {
	transform: scale(1.025);
}


.eras-event-card__image--placeholder {
	display: grid;
	place-items: center;

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

	color: #a1b7c4;

	font-size: 40px;
}


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

.eras-event-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;

	padding: 21px;
}


.eras-event-card__top {
	display: flex;

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

	gap: 12px;

	margin-bottom: 16px;
}


.eras-event-card__date {
	display: flex;
	align-items: center;
	gap: 8px;
}


.eras-event-card__date strong {
	color: var(--events-blue);

	font-size: 27px;
	font-weight: 500;
	line-height: 1;
}


.eras-event-card__date span {
	max-width: 45px;

	color: #7a8f9d;

	font-size: 9px;
	font-weight: 650;
	line-height: 1.2;

	text-transform: uppercase;
}


.eras-event-card__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;

	gap: 4px;
}


.eras-event-card__badges span,
.eras-event-card__specialities span {
	display: inline-flex;
	align-items: center;

	min-height: 22px;

	padding: 3px 7px;

	border-radius: 999px;

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

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


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

	color: var(--events-blue);

	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.018em;
}


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

	color: var(--events-muted);

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


.eras-event-card__specialities {
	display: flex;
	flex-wrap: wrap;

	gap: 4px;

	margin-top: 17px;
}


.eras-event-card__footer {
	display: flex;

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

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

	color: var(--events-blue);

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


.eras-event-card__footer i {
	transition: transform .18s ease;
}


.eras-event-card__link:hover
.eras-event-card__footer i {
	transform: translateX(3px);
}


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

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

	text-align: center;
}


.eras-events__empty i {
	color: #9eb4c2;

	font-size: 35px;
}


.eras-events__empty h3 {
	margin: 15px 0 0;

	color: var(--events-blue);

	font-size: 22px;
}


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

	color: var(--events-muted);

	font-size: 13px;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {

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


	.eras-events__toolbar {
		grid-template-columns:
			minmax(0, 1fr)
			200px
			220px;
	}

}


@media (max-width: 760px) {

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


	.eras-events__hero-grid,
	.eras-events__intro {
		grid-template-columns: 1fr;

		gap: 28px;
	}


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


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


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

}


@media (max-width: 520px) {

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


	.eras-events__hero {
		padding: 48px 0 55px;
	}


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


	.eras-events__tabs {
		display: grid;

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

		width: 100%;
	}


	.eras-events__tabs button {
		justify-content: center;

		padding-inline: 7px;
	}

}