/*
--------------------------------------
Containers
--------------------------------------
*/

.categories {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px;
}

/*
--------------------------------------
Items
--------------------------------------
*/

.category-card {
	position: relative;
	border-radius: 25px;
	overflow: hidden;
	transform: translateZ(0);
	will-change: transform, opacity;
	transition: all 0.5s ease;
	cursor: pointer;
}

.category-card * {
	position: relative;
	font-family: var(--e-global-typography-primary-font-family);
	color: #fff;
	text-align: left;
}

.category-card__link {
	display: block;
	text-decoration: none;
	border-radius: 25px;
}

/*img*/

.category-card__img-container {
	position: relative;
	overflow: hidden;
	border-radius: 25px;
}

.category-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transform-origin: center center;
	transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.6s ease;
	filter: brightness(0.9);
}

.category-card__img-overlay {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0);
	border-radius: 25px;
	transition: background 0.35s ease;
}

.category-card:hover .category-card__img-overlay {
	background: rgba(255, 255, 255, 0.1);
}

.category-card__link:hover .category-card__img,
.category-card__img-container:hover .category-card__img {
	transform: scale(1.08);
	filter: brightness(1.05);
}

.category-card__img-container::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.45),
			rgba(0, 0, 0, 0.1)
	);
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

.category-card__link:hover .category-card__img-container::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.category-card__img {
		transition: none;
	}
}

/*content*/

.category-card__content {
	position: absolute;
	z-index: 3;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: calc(16px + (32 - 16) * ((100vw - 320px) / (1920 - 320)));
}

/*subtitle*/

.category-card__subtitle {
	font-size: 16px;
	font-weight: 400;
	line-height: calc(18px + (38 - 18) * ((100vw - 320px) / (1920 - 320)));
	text-transform: uppercase;
}

/*title*/

.category-card__title-container {
	display: flex;
	flex-direction: column;
	row-gap: 7px;
	line-height: 0.75;
}

.category-card__title {
	font-size: calc(28px + (32 - 28) * ((100vw - 320px) / (1920 - 320)));
	font-weight: 700;
	line-height: 1;
	transition: transform 0.4s ease, opacity 0.4s ease;
}

.category-card__link:hover .category-card__title {
	transform: translateY(-3px);
	opacity: 0.95;
}

/*tag list*/

.category-card__formation-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.category-card__formation {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: calc(12px + (15 - 12) * ((100vw - 320px) / (1920 - 320)));
	font-weight: 600;
	background: rgba(22, 28, 34, 0.20);
	backdrop-filter: blur(7.5px);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	line-height: 1;
	padding: 9px calc(7px + (16 - 7) * ((100vw - 320px) / (1920 - 320)));
	text-align: center;
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-card__formation:hover {
	background: rgba(255, 255, 255, 0.40);
}

.category-card__formation:hover .category-card__formation-link {
	color: #fff;
}

/*btn*/

.category-card__btn-container {
	padding-top: 1em;
}

.category-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.20);
	backdrop-filter: blur(7.5px);
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	padding: 10px 32px;
}

.category-card__btn:hover,
.category-card__btn:focus {
	background: rgba(255, 255, 255, 0.40);
}