/*
 * Нативные блоки контента кейса: раздел и медиа с подписью.
 * Один файл используется на фронтенде и в Gutenberg.
 */

.case-section,
.wp-block-aneoz-case-section {
	--case-section-accent: var(--color-blue-700);
	scroll-margin-top: var(--spacing-4xl);
}

.case-section--accent-orange { --case-section-accent: var(--color-orange-dark-600); }
.case-section--accent-green { --case-section-accent: var(--color-green-700); }
.case-section--accent-violet { --case-section-accent: var(--color-violet-700); }
.case-section--accent-cyan { --case-section-accent: var(--color-cyan-700); }
.case-section--accent-darkblue { --case-section-accent: var(--color-darkblue-950); }

.case-section__title {
	padding-top: var(--spacing-6xl);
	margin: var(--spacing-none) var(--spacing-none) var(--spacing-4xl);
	color: var(--color-darkblue-950);
	font: var(--font-display-md-semibold);
	letter-spacing: var(--tracking-display-md);
}

.case-section__title-accent {
	color: var(--case-section-accent);
}

.case-section__title-accent:not(:empty)::after {
	content: ' ';
}

.case-section__content > h3 {
	padding-top: var(--spacing-3xl);
	margin: var(--spacing-none) var(--spacing-none) var(--spacing-xl);
	color: var(--color-darkblue-950);
	font: var(--font-display-xs-semibold);
}

.case-section__content > :is(p, ul, ol, figure, .case-media, .wp-block-aneoz-case-media, .base-block, .wp-block-aneoz-base-block, .anti-example, .wp-block-aneoz-anti-example, .wp-block-group) {
	margin-top: var(--spacing-none);
	margin-bottom: var(--spacing-4xl);
}

.case-section__content > p,
.case-section__content > ul,
.case-section__content > ol {
	color: var(--color-darkblue-800);
	font: var(--font-text-lg-regular);
}

.case-section__content > ul,
.case-section__content > ol {
	display: grid;
	gap: var(--spacing-lg);
	padding-left: var(--spacing-4xl);
}

/* The launch intro is a two-paragraph Figma text group with an 18px split. */
.case-section#launch .case-section__content > p:first-child {
	margin-bottom: 18px;
}

.case-section#launch .case-section__content > p:nth-child(2) {
	margin-bottom: var(--spacing-4xl);
}

.case-media,
.wp-block-aneoz-case-media {
	--case-media-caption-bg: var(--color-darkblue-950);
	--case-media-caption-color: var(--color-base-white);
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: var(--spacing-none) var(--spacing-none) var(--spacing-4xl);
	border-radius: var(--radius-surface-lg);
}

.case-media--caption-bg-blue { --case-media-caption-bg: var(--color-blue-700); }
.case-media--caption-bg-orange { --case-media-caption-bg: var(--color-orange-dark-600); }
.case-media--caption-bg-white { --case-media-caption-bg: var(--color-base-white); }
.case-media--caption-text-darkblue { --case-media-caption-color: var(--color-darkblue-950); }

.case-media__image {
	display: block;
	width: 100%;
	height: auto;
}

.case-media__caption {
	position: absolute;
	right: var(--spacing-3xl);
	bottom: var(--spacing-3xl);
	max-width: 220px;
	margin: var(--spacing-none);
	padding: var(--spacing-lg) var(--spacing-xl);
	border-radius: var(--radius-xl);
	color: var(--case-media-caption-color);
	background: color-mix(in srgb, var(--case-media-caption-bg) 82%, transparent);
	font: var(--font-text-sm-medium);
}

.case-media__placeholder {
	display: grid;
	min-height: 260px;
	place-items: center;
	color: var(--color-darkblue-400);
	background: var(--color-darkblue-25);
	font: var(--font-text-md-medium);
}

@media (max-width: 767px) {
	.case-section__title {
		font: var(--font-display-sm-semibold);
	}
}