/*
 * Единый нативный блок «Элемент кейса».
 * Верхняя часть и вывод снизу остаются двумя дочерними частями одного блока:
 * общий контейнер отвечает за скругление и скрывает разрыв между ними.
 */

.case-feature {
	--case-feature-bg: var(--color-darkblue-25);
	--case-feature-footer: var(--color-darkblue-50);
	--case-feature-border: var(--color-darkblue-100);
	--case-feature-accent: var(--color-darkblue-600);
	--case-feature-title: var(--color-darkblue-950);
	--case-feature-heading: var(--case-feature-title);
	--case-feature-text: var(--case-feature-title);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
	margin: var(--spacing-none);
	margin-block-end: 32px;
	background: var(--case-feature-footer);
	color: var(--case-feature-text);
	border-radius: var(--control-radius-md);
	overflow: hidden;
}

.case-feature__body {
	display: flex;
	flex-direction: column;
	gap: var(--surface-gap-md);
	box-sizing: border-box;
	padding: var(--surface-padding-md);
	background: var(--case-feature-bg);
	color: var(--case-feature-text);
}

.case-feature__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--surface-gap-md);
	width: 100%;
	margin-bottom: calc(-1 * var(--control-radius-md));
}

.case-feature__emoji-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--icon-size-md);
	width: var(--icon-size-md);
	height: var(--icon-size-md);
	min-height: var(--icon-size-md);
	margin: var(--spacing-none);
	padding: var(--spacing-none);
	border: var(--spacing-none);
	background: var(--color-transparent);
	box-shadow: none;
}

.case-feature__emoji {
	display: block;
	width: var(--icon-size-md);
	height: var(--icon-size-md);
	object-fit: contain;
	user-select: none;
}

.case-feature .case-feature__label,
.case-feature .case-feature__pair strong {
	font: var(--font-text-lg-semibold);
	letter-spacing: var(--tracking-text-lg);
}

.case-feature .case-feature__label {
	min-width: 0;
	color: var(--case-feature-accent);
	white-space: nowrap;
}

.case-feature .case-feature__title {
	margin: var(--spacing-none);
	color: var(--case-feature-title);
	font: var(--font-display-xs-semibold);
	letter-spacing: var(--tracking-display-xs);
}

.case-feature .case-feature__pair {
	display: flex;
	flex-direction: column;
	gap: var(--control-gap-md);
	margin: var(--spacing-none);
	color: var(--case-feature-text);
	font: var(--font-text-lg-regular);
	letter-spacing: var(--tracking-text-lg);
}

.case-feature .case-feature__pair strong {
	color: var(--case-feature-heading);
}

.case-feature .case-feature__pair p,
.case-feature .case-feature__intro,
.case-feature .case-feature__after {
	margin-block: var(--spacing-none);
	color: inherit;
	font: var(--font-text-lg-regular);
	letter-spacing: var(--tracking-text-lg);
}

.case-feature .case-feature__intro { color: var(--case-feature-text); }

.case-feature .case-feature__after {
	box-sizing: border-box;
	width: 100%;
	padding: var(--surface-padding-sm) var(--surface-padding-md) var(--surface-padding-md);
	border-top: 1px solid var(--case-feature-border);
	background: var(--case-feature-footer);
	color: var(--case-feature-text);
}

.case-feature--accent-darkblue {
	--case-feature-bg: var(--color-darkblue-25);
	--case-feature-footer: var(--color-darkblue-50);
	--case-feature-border: var(--color-darkblue-100);
	--case-feature-accent: var(--color-darkblue-600);
	--case-feature-title: var(--color-darkblue-950);
}

.case-feature--accent-sand {
	--case-feature-bg: var(--color-sand-50);
	--case-feature-footer: var(--color-sand-100);
	--case-feature-border: var(--color-sand-200);
	--case-feature-accent: var(--color-sand-700);
	--case-feature-title: var(--color-sand-950);
}

.case-feature--accent-blue,
.case-feature--accent-cyan {
	--case-feature-bg: var(--color-blue-25);
	--case-feature-footer: var(--color-blue-50);
	--case-feature-border: var(--color-blue-200);
	--case-feature-accent: var(--color-blue-700);
	--case-feature-title: var(--color-blue-950);
}

.case-feature--accent-green {
	--case-feature-bg: var(--color-green-50);
	--case-feature-footer: var(--color-green-100);
	--case-feature-border: var(--color-green-200);
	--case-feature-accent: var(--color-green-700);
	--case-feature-title: var(--color-green-950);
}

.case-feature--accent-violet {
	--case-feature-bg: var(--color-violet-50);
	--case-feature-footer: var(--color-violet-100);
	--case-feature-border: var(--color-violet-200);
	--case-feature-accent: var(--color-violet-700);
	--case-feature-title: var(--color-violet-950);
}

.case-feature--accent-orange {
	--case-feature-bg: var(--color-orange-dark-25);
	--case-feature-footer: var(--color-orange-dark-50);
	--case-feature-border: var(--color-orange-dark-200);
	--case-feature-accent: var(--color-orange-dark-300);
	--case-feature-title: var(--color-orange-dark-950);
}

.case-feature--accent-red {
	--case-feature-bg: var(--color-red-25);
	--case-feature-footer: var(--color-red-50);
	--case-feature-border: var(--color-red-100);
	--case-feature-accent: var(--color-red-600);
	--case-feature-title: var(--color-red-950);
	--case-feature-heading: var(--color-red-950);
}

/* Артефакты: группа ссылок без общей оболочки, каждый пункт — отдельная карточка. */
.case-feature--artifacts {
	display: block;
	box-sizing: border-box;
	padding: var(--spacing-none);
	background: var(--color-transparent);
	border-radius: var(--radius-none);
	overflow: visible;
}

.case-feature--artifacts .case-feature__artifact-list {
	display: flex;
	flex-direction: column;
	gap: var(--control-padding-block);
}

.case-feature__artifact {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 90px;
	gap: var(--control-padding-block);
	padding: var(--surface-padding-sm);
	border: var(--border-width-hairline) solid var(--color-blue-25);
	border-radius: var(--control-radius-md);
	color: var(--color-green-950);
	background: var(--color-darkblue-25);
	box-shadow: 0 1px 1px rgb(16 24 40 / 5%);
	text-decoration: none;
}

.case-feature__artifact-logo,
.case-feature__artifact-arrow { flex: 0 0 auto; }
.case-feature__artifact-logo { width: 54px; height: 54px; object-fit: contain; }
.case-feature__artifact-copy { display: grid; gap: var(--spacing-xs); min-width: 0; }
.case-feature__artifact-title { color: var(--color-cyan-800); font: var(--font-text-xl-medium); }
.case-feature__artifact-meta { color: var(--color-darkblue-300); font: var(--font-text-sm-regular); }
.case-feature__artifact-arrow { margin-left: auto; }

@media (min-width: 768px) {
	.case-feature__body { padding: var(--surface-padding-md); }
	.case-feature .case-feature__after { padding-inline: var(--surface-padding-md); }
}

@media (max-width: 767px) {
	.case-feature .case-feature__label { white-space: normal; }
}