/* Úvod — „Jak to funguje“: důvody střídavě obrázek vlevo / vpravo (návrh homepage). */

.as-duvody { background: var(--as-bila); padding-bottom: 72px; }
.as-duvody .as-sekce-hlava { margin-bottom: 72px; }

.as-duvod {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center;
	margin-bottom: 76px;
}
.as-duvod__obraz {
	height: 380px;
	border-radius: 24px;
	background: linear-gradient(160deg, var(--as-levandule), var(--as-merunka-svetla));
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 8px 8px 0 var(--as-levandule);
}
.as-duvod:nth-child(even) .as-duvod__obraz { order: 2; box-shadow: var(--as-stin-8); }
.as-duvod__obraz img {
	max-height: 86%;
	max-width: 80%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.as-duvod__text { max-width: 480px; }
.as-duvod:nth-child(even) .as-duvod__text { justify-self: end; }
.as-duvod__cislo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--as-merunka);
	color: var(--as-inkoust);
	font-family: var(--as-pismo-nadpis);
	font-size: 22px;
	font-weight: 800;
	transform: rotate(-5deg);
}
.as-duvod:nth-child(2) .as-duvod__cislo { transform: rotate(4deg); }
.as-duvod:nth-child(3) .as-duvod__cislo { transform: rotate(-4deg); }
.as-duvod:nth-child(4) .as-duvod__cislo { transform: rotate(5deg); }
.as-duvod:nth-child(5) .as-duvod__cislo { transform: rotate(-3deg); }
.as-duvod:nth-child(6) .as-duvod__cislo { transform: rotate(4deg); }
.as-duvod__nadpis { font-size: 28px; line-height: 1.2; letter-spacing: -.015em; margin: 14px 0; }
.as-duvod__popis { font-size: 15.5px; line-height: 1.7; color: var(--as-text-2); margin: 0; }

@media (max-width: 1024px) {
	.as-duvody { padding-bottom: 60px; }
	.as-duvody .as-sekce-hlava { margin-bottom: 52px; }
	.as-duvod { gap: 40px; margin-bottom: 56px; }
	.as-duvod__obraz { height: 300px; }
	.as-duvod__nadpis { font-size: 24px; margin: 12px 0; }
	.as-duvod__popis { font-size: 15px; }
}

/* Mobil: obrázek nad textem, číslo v řádku s nadpisem. */
@media (max-width: 768px) {
	.as-duvody { padding-bottom: 40px; }
	.as-duvody .as-sekce-hlava { margin-bottom: 36px; }
	.as-duvod { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 40px; }
	.as-duvod:nth-child(even) .as-duvod__obraz { order: 0; }
	.as-duvod__obraz { height: 220px; border-radius: 20px; box-shadow: 6px 6px 0 var(--as-levandule); }
	.as-duvod:nth-child(even) .as-duvod__obraz { box-shadow: var(--as-stin-6); }
	.as-duvod__obraz img { max-width: 72%; }
	.as-duvod__text,
	.as-duvod:nth-child(even) .as-duvod__text {
		justify-self: stretch;
		max-width: none;
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 12px;
		align-items: center;
	}
	.as-duvod__cislo,
	.as-duvod:nth-child(n) .as-duvod__cislo { width: 40px; height: 40px; font-size: 18px; transform: none; }
	.as-duvod__nadpis { font-size: 22px; line-height: 1.15; margin: 0; }
	.as-duvod__popis { grid-column: 1 / -1; margin-top: 10px; font-size: 15px; line-height: 1.65; }
}