/*
 * Sekce CTA — zelená horizontální karta.
 *
 * Layout:
 *   .cta__card (flex row, overflow: visible)
 *     .cta__content  — text, určuje výšku karty
 *     .cta__visual   — position: absolute; right; top: 0; bottom: 0;
 *                      flex-end → tlačítko dole, obrázek přirozeně přetéká nahoru
 *
 * Výška karty = VÝHRADNĚ levý obsah.
 * Obrázek nikdy nerozpíná kartu — visual je vyjmutý z flow.
 */

/* ── Wrapper ────────────────────────────────────────────────────── */
.cta {
	width: 100%;
	max-width: var(--rp-content-max);
	margin-inline: auto;
	padding-inline: var(--rp-space-5);
}

/* ── Karta ──────────────────────────────────────────────────────── */
.cta__card {
	position: relative;
	background: linear-gradient(180deg, var(--rp-color-accent-light) 0%, var(--rp-color-accent) 100%);
	color: var(--rp-color-bg);
	border-radius: 20px;
	padding: 60px 56px 52px;           /* nahoře 60px, dole 52px dle Figmy */
	overflow: visible;                 /* obrázek smí přetéct nad kartu */
	display: flex;
	align-items: center;
}

/* S vizuálem — vyhraď místo vpravo pro visual sloupec */
.cta__card--has-visual {
	padding-right: calc(var(--cta-img-w, 190px) + 56px + 32px);
}

/* Wrapper dostane padding-top = prostor pro obrázek nad kartou */
.cta--has-visual {
	padding-top: 120px;
}

/* ── Levý obsah (určuje výšku karty) ────────────────────────────── */
.cta__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	flex: 1 1 auto;
}

.cta__title {
	margin: 0;
	color: var(--rp-color-bg);
	font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
	font-weight: var(--rp-fw-medium);
	letter-spacing: var(--rp-tracking-tight);
	line-height: var(--rp-lh-tight);
}

.cta__text {
	color: var(--rp-color-bg);
	font-size: 14px;
	font-weight: var(--rp-fw-regular);
	letter-spacing: -0.02em;
	line-height: var(--rp-lh-normal);
	max-width: 520px;
}
.cta__text p { margin: 0; color: inherit; }
.cta__text p + p { margin-top: 8px; }

/* ── Pravý vizuální sloupec — absolutní, nezasahuje do výšky karty ─ */
.cta__visual {
	position: absolute;
	right: 56px;                       /* stejný odstup jako padding karty */
	top: 0;
	bottom: 0;
	width: var(--cta-img-w, 190px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;         /* tlačítko přilepeno ke dnu karty */
	gap: 0;
	overflow: visible;                 /* obrázek přetéká nad kartu */
	padding-bottom: 52px;              /* stejný spodní padding jako karta */
}

/* ── Obrázek — v normálním flex flow nad tlačítkem ──────────────── */
.cta__image-wrap {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	pointer-events: none;
	width: 100%;
	/* Obrázek "leží" přesně na tlačítku — no gap, tight */
}

.cta__image {
	display: block;
	width: 100%;
	max-width: var(--cta-img-w, 190px);
	height: auto;
	object-fit: contain;
}

/* ── Tlačítko — přilepeno dole ───────────────────────────────────── */
.cta__btn-wrap {
	flex-shrink: 0;
}

/* CTA tlačítko — symetrický padding jako .hero-btn--no-icon,
 * ikonka inline bez kruhového kontejneru */
.cta__btn.hero-btn {
	padding: 17px 28px;
	gap: 10px;
	justify-content: center;
}

.cta__btn .hero-btn__icon {
	width: auto;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: transparent !important;
	flex-shrink: 0;
}
.cta__btn .hero-btn__icon svg,
.cta__btn .hero-btn__icon img {
	width: 16px;
	height: 16px;
	display: block;
}

/* ── Tablet ──────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.cta__card,
	.cta__card--has-visual {
		padding: 40px 40px;
		padding-right: calc(var(--cta-img-w, 180px) + 40px + 24px);
	}
	.cta--has-visual {
		padding-top: 100px;
	}
	.cta__visual {
		right: 40px;
		width: var(--cta-img-w, 180px);
		padding-bottom: 40px;
	}
}

/* ── Mobil (< 768 px) — stack pod sebe ──────────────────────────── */
@media (max-width: 767px) {
	/* Reset wrapper padding-top — obrázek jde dole, ne nad kartu */
	.cta--has-visual {
		padding-top: 0;
	}

	.cta__card,
	.cta__card--has-visual {
		flex-direction: column;
		align-items: flex-start;
		padding: 32px 24px 0;          /* 0 dole — obrázek nalepený na spodní hranu */
		padding-right: 24px;
		overflow: hidden;              /* ořízne obrázek na border-radius karty */
	}

	/* Vrátíme visual do normálního flow */
	.cta__visual {
		position: static;
		width: 100%;
		flex-direction: column-reverse; /* tlačítko nahoře, obrázek dole */
		align-items: flex-start;        /* tlačítko doleva */
		padding-bottom: 0;
		margin-top: 24px;
	}

	/* Obrázek zůstane centrovaný — image-wrap má width: 100% */
	.cta__image-wrap {
		align-self: center;
	}

	.cta__image-wrap {
		justify-content: center;
		margin-top: 16px;
	}

	.cta__image {
		max-width: 200px;
	}
}