.hot-content-filter {
	--hcf-gap: 24px;
	--hcf-radius: 14px;
	--hcf-tab-radius: 999px;
	--hcf-border: #d9dee7;
	--hcf-border-strong: #c5ccd8;
	--hcf-text: #1e2430;
	--hcf-muted: #667085;
	--hcf-bg: #ffffff;
	--hcf-bg-soft: #f7f9fc;
	--hcf-accent: #111827;
	--hcf-accent-contrast: #ffffff;
	--hcf-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
	--hcf-shadow-hover: 0 14px 34px rgba(16, 24, 40, 0.1);
	--hcf-animation-speed: 220ms;
	--hcf-transition: var(--hcf-animation-speed) ease;
	color: var(--hcf-text);
}

.hot-content-filter * {
	box-sizing: border-box;
}

.hot-content-filter__tabs-wrap {
	margin-bottom: 50px;
}

.hot-content-filter__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.hot-content-filter .hot-content-filter__tab {
	appearance: none;
	border: 1px solid var(--hcf-border);
	background: var(--hcf-bg);
	color: var(--hcf-text);
	border-radius: var(--hcf-tab-radius);
	padding: 11px 18px;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition:
		background var(--hcf-transition),
		color var(--hcf-transition),
		border-color var(--hcf-transition),
		transform var(--hcf-transition),
		box-shadow var(--hcf-transition);
	box-shadow: 0 2px 8px rgba(16, 24, 40, 0.03);
}

.hot-content-filter__tab:hover {
	transform: translateY(-1px);
	border-color: var(--hcf-border-strong);
	background: var(--hcf-bg-soft);
}

.hot-content-filter__tab:focus-visible {
	outline: none;
	border-color: var(--hcf-accent);
	box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12);
}

.hot-content-filter__tab.is-active {
	background: var(--hcf-accent);
	border-color: var(--hcf-accent);
	color: var(--hcf-accent-contrast);
	box-shadow: 0 8px 18px rgba(17, 24, 39, 0.18);
}

.hot-content-filter--tabstyle-underline .hot-content-filter__tabs {
	justify-content: center;
	gap: 18px;
	padding-bottom: 2px;
}

.hot-content-filter--tabstyle-underline .hot-content-filter__tab {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	box-shadow: none;
	padding: 10px 2px 12px;
}

.hot-content-filter--tabstyle-underline .hot-content-filter__tab:hover {
	background: transparent;
	border-color: transparent;
	color: var(--hcf-accent);
	transform: none;
}

.hot-content-filter--tabstyle-underline .hot-content-filter__tab.is-active {
	background: transparent;
	border-color: transparent transparent var(--hcf-accent) transparent;
	color: var(--hcf-accent);
	box-shadow: none;
}

.hot-content-filter--tabstyle-underline .hot-content-filter__tab:focus-visible {
	border-radius: 4px;
	box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12);
}

.hot-content-filter__message,
.hot-content-filter__notice {
	background: var(--hcf-bg-soft);
	border: 1px solid var(--hcf-border);
	border-radius: var(--hcf-radius);
	color: var(--hcf-muted);
	padding: 18px 20px;
}

.hot-content-filter__message {
	margin-bottom: 18px;
}

.hot-content-filter__message.is-hidden {
	display: none;
}

.hot-content-filter__panels {
	position: relative;
}

.hot-content-filter__panel {
	display: none;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--hcf-animation-speed) ease, transform var(--hcf-animation-speed) ease;
}

.hot-content-filter__panel.is-active {
	display: block;
}

.hot-content-filter__panel.is-active.is-entering {
	opacity: 1;
	transform: translateY(0);
}

.hot-content-filter__panel.is-leaving {
	opacity: 0;
	transform: translateY(-8px);
}

.hot-content-filter__grid {
	display: grid;
	grid-template-columns: repeat(var(--hcf-columns, 3), minmax(0, 1fr));
	gap: var(--hcf-gap);
}

.hot-content-filter__item {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--hcf-bg);
	border: 1px solid var(--hcf-border);
	border-radius: var(--hcf-radius);
	overflow: hidden;
	box-shadow: var(--hcf-shadow);
	transition:
		transform var(--hcf-transition),
		box-shadow var(--hcf-transition),
		border-color var(--hcf-transition);
}

.hot-content-filter__item:hover {
	box-shadow: var(--hcf-shadow-hover);
	border-color: var(--hcf-border-strong);
}

.hot-content-filter__image {
	overflow: hidden;
	background: var(--hcf-bg-soft);
}

.hot-content-filter__image a {
	display: block;
}

.hot-content-filter__image img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform calc(var(--hcf-animation-speed) + 130ms) ease;
}

.hot-content-filter__item:hover .hot-content-filter__image img {
	transform: scale(1.02);
}

.hot-content-filter__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 20px;
}

.hot-content-filter__title {
}

.hot-content-filter__title a {
	color: inherit;
	text-decoration: none;
}

.hot-content-filter__introtext {
	color: var(--hcf-muted);
	line-height: 1.65;
	margin-bottom: 18px;
}

.hot-content-filter__readmore {
	margin-top: auto;
}

.hot-content-filter__readmore a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	text-decoration: none;
	color: var(--hcf-text);
	transition: color var(--hcf-transition);
}

.hot-content-filter__readmore a::after {
	content: "→";
	font-size: 1em;
	line-height: 1;
	transition: transform var(--hcf-transition);
}

.hot-content-filter__readmore a:hover,
.hot-content-filter__readmore a:focus-visible {
	color: var(--hcf-accent);
}

.hot-content-filter__readmore a:hover::after,
.hot-content-filter__readmore a:focus-visible::after {
	transform: translateX(3px);
}

.hot-content-filter[style*="--hcf-animation-speed: 0ms"] .hot-content-filter__panel,
.hot-content-filter[style*="--hcf-animation-speed: 0ms"] .hot-content-filter__item,
.hot-content-filter[style*="--hcf-animation-speed: 0ms"] .hot-content-filter__tab,
.hot-content-filter[style*="--hcf-animation-speed: 0ms"] .hot-content-filter__image img,
.hot-content-filter[style*="--hcf-animation-speed: 0ms"] .hot-content-filter__readmore a::after {
	transition: none !important;
}

@media (max-width: 991px) {
	.hot-content-filter {
		--hcf-gap: 20px;
	}

	.hot-content-filter__content {
		padding: 18px;
	}
}

@media (max-width: 767px) {
	.hot-content-filter__grid {
		grid-template-columns: 1fr;
	}

	.hot-content-filter__tabs {
		gap: 8px;
	}

	.hot-content-filter__tab {
		padding: 10px 15px;
	}
}

@media (prefers-color-scheme: dark) {
	.hot-content-filter {
		--hcf-border: #2b3445;
		--hcf-border-strong: #3a465c;
		--hcf-text: #e5e7eb;
		--hcf-muted: #a7b0c0;
		--hcf-bg: #121826;
		--hcf-bg-soft: #192132;
		--hcf-accent: #f3f4f6;
		--hcf-accent-contrast: #111827;
		--hcf-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
		--hcf-shadow-hover: 0 14px 34px rgba(0, 0, 0, 0.34);
	}

	.hot-content-filter__tab {
		box-shadow: none;
	}

	.hot-content-filter__tab:focus-visible {
		box-shadow: 0 0 0 3px rgba(243, 244, 246, 0.14);
	}

	.hot-content-filter--tabstyle-underline .hot-content-filter__tab:focus-visible {
		box-shadow: 0 0 0 3px rgba(243, 244, 246, 0.14);
	}

	.hot-content-filter__item:hover {
		box-shadow: var(--hcf-shadow-hover);
	}
}