/*
 * Sekce „Obrázek + text" (image-text).
 *
 * Layout:
 *   Desktop: 2 sloupce 1:1, image vlevo nebo vpravo (modifier).
 *   Mobil:   stack pod sebe — obrázek nahoře nebo dole (modifier, default dole).
 *
 * Image figura:
 *   border-radius 12 px, overflow hidden
 *   ::after = linear gradient overlay (jako Hero)
 *   .image-text__bullets = absolutně dole vlevo, NAD gradientem (z-index)
 */

/* ── Layout container ────────────────────────────────────── */
.image-text {
	display: flex;
	gap: var(--rp-space-7);                        /* 48 px mezi sloupci */
	align-items: stretch;
}

.image-text--image-right { flex-direction: row-reverse; }

.image-text__media,
.image-text__content {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 767px) {
	.image-text,
	.image-text--image-right {
		flex-direction: column;
		gap: var(--rp-space-5);                    /* 24 px stack gap */
	}
	/* Obrázek dole (default) — text vykreslen jako první. */
	.image-text--mobile-image-bottom .image-text__media   { order: 2; }
	.image-text--mobile-image-bottom .image-text__content { order: 1; }
	/* Obrázek nahoře — obrázek vykreslen jako první (zachová DOM pořadí). */
	.image-text--mobile-image-top .image-text__media   { order: 1; }
	.image-text--mobile-image-top .image-text__content { order: 2; }
}

/* ── Figura s obrázkem + gradient overlay ──────────────── */
.image-text__figure {
	position: relative;
	margin: 0;
	border: 1px solid rgba(243, 244, 246, 0.07);   /* 1 px bílá 7 % */
	border-radius: var(--rp-radius-md);            /* 12 px */
	overflow: hidden;
	width: 100%;
}

.image-text--aspect-4-3   .image-text__figure { aspect-ratio: 4 / 3; }
.image-text--aspect-3-4   .image-text__figure { aspect-ratio: 3 / 4; }
.image-text--aspect-1-1   .image-text__figure { aspect-ratio: 1 / 1; }
.image-text--aspect-16-10 .image-text__figure { aspect-ratio: 16 / 10; }

@media (max-width: 1023px) {
	/* Na tabletu/mobilu vždy širší poměr, ať obrázek nezabírá moc místa */
	.image-text--aspect-3-4 .image-text__figure { aspect-ratio: 4 / 5; }
}

.image-text__image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* Gradient overlay — totožný jako Hero (#111827 20 % → 100 %) */
.image-text__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(17, 24, 39, 0.20) 0%,
		rgba(17, 24, 39, 1.00) 100%);
	pointer-events: none;
	z-index: 1;
}

/* ── Odrážky absolutně na obrázku ─────────────────────── */
.image-text__bullets {
	position: absolute;
	left: var(--rp-space-5);                       /* 24 px od levého okraje */
	right: var(--rp-space-5);                      /* aby long text wrapnul, ne přetekl */
	bottom: var(--rp-space-5);                     /* 24 px od dolního okraje */
	z-index: 2;                                    /* nad gradient overlay */
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;                                     /* 16 px mezi položkami */
	color: var(--rp-color-text);
}

.image-text__bullet {
	display: flex;
	align-items: flex-start;
	gap: 12px;                                     /* 12 px mezi ikonou a textem */
}

.image-text__bullet-icon {
	flex: 0 0 12px;
	width: 12px;
	height: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 3px;                               /* vyrovnání s první řádkou textu */
}
.image-text__bullet-icon svg,
.image-text__bullet-icon img {
	width: 100%;
	height: 100%;
	display: block;
}

.image-text__bullet-text {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--rp-color-text);
	font-size: 13px;
	font-weight: var(--rp-fw-medium);
	letter-spacing: -0.02em;
	line-height: 1.4;
}

/* ── Pravý sloupec — text content ──────────────────────── */
.image-text__content {
	display: flex;
	flex-direction: column;
	justify-content: center;                       /* vertikálně centruj textový sloupec */
	gap: var(--rp-space-4);                        /* 16 px mezi prvky default */
}

.image-text__eyebrow {
	margin: 0;
	color: var(--rp-color-text);
	font-size: var(--rp-fs-sm);                    /* 16 px */
	font-weight: var(--rp-fw-regular);
	letter-spacing: -0.02em;
	line-height: 1;
}

.image-text__title {
	margin: 0;
	color: var(--rp-color-text);
	font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); /* 28→40 px */
	font-weight: var(--rp-fw-medium);              /* 500 dle Figmy */
	line-height: var(--rp-lh-tight);               /* 110 % */
	letter-spacing: var(--rp-tracking-tight);      /* -3 % */
}

.image-text__subtitle {
	margin: 0;
	color: var(--rp-color-text);
	font-size: 16px;
	font-weight: var(--rp-fw-bold);                /* 700 */
	letter-spacing: -0.02em;
	line-height: var(--rp-lh-normal);
}

.image-text__body {
	color: var(--rp-color-text);
	font-size: var(--rp-fs-sm);                    /* 16 px */
	font-weight: var(--rp-fw-regular);
	line-height: var(--rp-lh-normal);              /* 150 % */
	letter-spacing: -0.02em;
	max-width: 60ch;
	margin-top: var(--rp-space-3);                 /* 12 px navíc nad body */
}

.image-text__body p { margin: 0 0 var(--rp-space-3); color: inherit; }
.image-text__body p:last-child { margin-bottom: 0; }