/* Sekcja: Zdrowy glos / Doctor Vox. */

.ajs-dv {
	background: linear-gradient(
		115deg,
		color-mix(in srgb, var(--ajs-dark) 12%, var(--ajs-bg)) 0%,
		var(--ajs-bg) 55%,
		color-mix(in srgb, var(--ajs-pink-soft) 45%, var(--ajs-bg)) 100%
	);
	padding-block: clamp(3rem, 6vw, 7.5rem) 0;
}

.ajs-dv--no-images {
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.ajs-dv__blob {
	position: absolute;
	border-radius: 9999px;
	pointer-events: none;
}

.ajs-dv__blob--a {
	bottom: -8.75rem;
	right: -13.75rem;
	width: 40rem;
	height: 40rem;
	background: color-mix(in srgb, var(--ajs-dark) 14%, var(--ajs-bg));
}

.ajs-dv__blob--b {
	top: 11.875rem;
	left: -15rem;
	width: 37.5rem;
	height: 31.25rem;
	background: color-mix(in srgb, var(--ajs-dark) 8%, var(--ajs-bg));
}

.ajs-dv__header {
	position: relative;
	text-align: center;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.ajs-dv__title {
	font-weight: 300;
	font-size: clamp(1.9rem, 1.2rem + 3.4vw, 2.75rem);
	line-height: 1.18;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin: 0;
}

.ajs-dv__subtitle {
	font-family: 'Montserrat', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.6rem, 1.05rem + 2.8vw, 2.375rem);
	line-height: 1.2;
	color: var(--ajs-pink-ink);
	letter-spacing: -0.01em;
	text-transform: uppercase;
	margin: 4px 0 0;
}

.ajs-dv__body {
	position: relative;
	max-width: 51.25rem;
	margin-inline: auto;
	padding: clamp(1.25rem, 3vw, 1.875rem) clamp(1.25rem, 4vw, 2.5rem) 0;
	font-size: clamp(0.875rem, 0.84rem + 0.18vw, 0.906rem);
}

.ajs-dv__list {
	margin: 1.375rem 0 1.125rem;
}

.ajs-dv__list-title {
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	margin: 0 0 8px;
}

.ajs-dv__actions {
	display: flex;
	justify-content: center;
	margin-top: 1.625rem;
}

/*
 * Design wciaga wycinki pod tekst ujemnym marginesem. Na waskich ekranach
 * takie nachodzenie zjadalo tresc, wiec ujemny margines wchodzi dopiero od 62rem.
 */
.ajs-dv__figures {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: end;
	gap: 1.5rem;
	margin-top: 2rem;
	/*
	 * Blok wjezdza ujemnym marginesem na tekst i jest w DOM po nim, wiec bez tego
	 * jego przezroczysty srodek przechwytywalby klikniecia w przycisk CTA.
	 */
	pointer-events: none;
}

.ajs-dv__figure {
	margin: 0;
}

.ajs-dv__figure img {
	width: auto;
	max-width: 100%;
	object-fit: contain;
	margin-bottom: -1px;
}

.ajs-dv__figure--left {
	justify-self: start;
}

.ajs-dv__figure--left img {
	height: clamp(9rem, 26vw, 18.75rem);
	object-position: bottom left;
}

.ajs-dv__figure--right {
	justify-self: end;
}

.ajs-dv__figure--right img {
	height: clamp(11rem, 34vw, 27.5rem);
	object-position: bottom right;
}

@media (min-width: 62rem) {
	.ajs-dv__figures {
		grid-template-columns: 1fr auto 1fr;
		margin-top: clamp(-23.75rem, -19vw, -11.875rem);
	}

	.ajs-dv__figure--left img {
		margin-left: -1.875rem;
	}

	.ajs-dv__figure--right {
		grid-column: 3;
	}

	.ajs-dv__figure--right img {
		margin-right: 2.5rem;
	}
}