/*
 * Sekce „Intro text" — dvousloupcová intro.
 *
 * Desktop: 1fr / 2fr grid (levý úzký + pravý široký)
 * Mobil:   stack pod sebe
 *
 * Levý sloupec: eyebrow nahoře + button pod ním.
 * Pravý sloupec: paragraf(-y).
 */

.intro-text {
	display: grid;
	grid-template-columns: minmax(180px, 1fr) 2fr;
	gap: var(--rp-space-7);                       /* 48 px mezi sloupci */
	align-items: stretch;                         /* sloupce mají stejnou výšku */
}

/* ── Levý sloupec ───────────────────────────────────────── */
.intro-text__left {
	display: flex;
	flex-direction: column;
	justify-content: space-between;               /* eyebrow nahoře, button dole */
	align-items: flex-start;
	height: 100%;
	gap: var(--rp-space-5);
}

.intro-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: var(--rp-tracking-normal);
	line-height: 1;
}

.intro-text__btn {
	align-self: flex-start;
}

/* ── Pravý sloupec — body text ──────────────────────────── */
.intro-text__body {
	color: var(--rp-color-text);
	font-size: 32px;                              /* dle Figmy */
	font-weight: var(--rp-fw-regular);            /* 400 */
	line-height: var(--rp-lh-normal);             /* 150 % */
	letter-spacing: -0.02em;                      /* -2 % */
	max-width: 60ch;
}

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

/* ── Tablet (768–1023 px) — pravý sloupec je 2/3 šířky (~448 px na 768 px),
   32 px font dává jen ~14 znaků na řádek. Snížíme na 22 px. */
@media (max-width: 1023px) {
	.intro-text__body {
		font-size: 22px;
	}
}

/* ── Mobil ──────────────────────────────────────────────────
   Pořadí: eyebrow → text → button.
   .intro-text__left má dva potomky (eyebrow + btn), které potřebujeme
   prostřídat s body textem. display: contents zploští levý wrapper do
   gridu, takže order pak funguje napříč všemi 3 prvky. */
@media (max-width: 767px) {
	.intro-text {
		grid-template-columns: 1fr;
		gap: var(--rp-space-4);                   /* 16 px mezi prvky */
	}
	.intro-text__left {
		display: contents;
	}
	.intro-text__eyebrow { order: 1; }
	.intro-text__body    { order: 2; }
	.intro-text__btn     { order: 3; justify-self: start; }

	.intro-text__body {
		font-size: 18px;                          /* z 32 px — čitelnější na mobilu */
	}
}