/*
 * Kontaktná výzva na konci Produktu — biely box s leadom, osobou a tlačidlom.
 * V `docs/06` je to pattern B10 „cta-contact". Vzor zo **core blokov**:
 * `core/group` → `core/paragraph` + `core/group` (riadok) s `core/image`,
 * `core/paragraph` a `core/buttons`.
 *
 * Štýl visí na `core/group` (`functions/BlockStyles.php`).
 *
 * ── Odmerané na ráme `1280 Produkt` (snímka 09-01 13-28-01) ───────────────
 *
 *   box        x 130, šírka **1020** — teda celý obsahový stĺpec
 *   pozadie    biele (`surface`), radius ~**16**
 *   padding    **32** — fotka začína 32 od ľavej hrany, tlačidlo končí 32
 *              od pravej, a pod fotkou je 32 po spodok
 *   tlačidlo   148 × 38, zarovnané doprava
 *
 * Riadok pod leadom drží `core/group` s `layout: flex` a `space-between`,
 * teda natívne — nie vlastným CSS, aby ho redaktor videl v editore ako
 * usporiadanie bloku.
 */

.egrant-cta-contact.wp-block-group {
	box-sizing: border-box;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--xl); /* 16 */
	padding: var(--wp--preset--spacing--70); /* 32 */
}

/*
 * Lead má na desktope obmedzenú šírku — v ráme sa láme na **3 riadky**
 * (najdlhší 644,3, box 263,4 vysoký), render ho mal na celých 960 a lámal na
 * **2** (835,2 a 817,4, box 238). Sadzba je v oboch 22,4/1,2, box 1024 široký,
 * padding 32 aj tlačidlo 150 × 38 na x 970 sedia — jediný rozdiel bolo
 * zalomenie, takže chýbal len limit šírky.
 *
 * ⚠️ **Nie je to odmeraná hrana, je to interval.** Z polohy zlomov sa dá určiť
 * len pás, v ktorom limit leží; presnú hodnotu rám nenesie. Odmerané v rendri
 * (Playwright, 1280, krok 5 px): to isté zalomenie ako v ráme — prvý riadok
 * 639,3, druhý 613, tretí 395,4 — drží od **640 do 715**. Pod 640 sa prvý
 * riadok skráti na 611,6, nad 715 narastie na 718,5.
 *
 * **680** je zvolené ako stred toho pásu (640…715 má stred 677,5): má 40 px
 * rezervu nadol a 35 nahor, takže drobný rozdiel v metrike písma (iný
 * renderer, hinting, iná verzia fontu) zalomenie neprehodí. Zároveň je to celé
 * číslo deliteľné ôsmimi, teda v rytme škály. Hodnota z pomeru (2/3 × 1024 =
 * 682,7) by ležala prakticky tam isto, ale 1024 je **vonkajšia** šírka boxu —
 * odstavec sa láme vnútri 960, takže ten pomer nič negeometrizuje.
 *
 * `measure` (552) sa použiť nedá — je pod celým pásom a lead by sa zlomil na
 * štyri riadky.
 */
.egrant-cta-contact > p {
	max-width: 680px;
}

.egrant-cta-contact .egrant-cta-contact__photo img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 50%;
}

/* `core/image` je blok s vlastným marginom — v riadku ho nesmie posúvať. */
.egrant-cta-contact .egrant-cta-contact__photo {
	margin-block: 0;
}

.egrant-cta-contact .egrant-cta-contact__person p {
	margin-block: 0;
}

/*
 * E-mail je `mailto:` odkaz, ale v ráme nie je podčiarknutý ani inak farebný —
 * je to údaj, nie navigácia. Farbu berie z odstavca (`muted`), podčiarknutie
 * pribudne až pri hoveri, nech je zrejmé, že sa dá kliknúť. Rovnako je to
 * riešené na karte osoby na Kontakte.
 */
.egrant-cta-contact .egrant-cta-contact__lines a {
	color: inherit;
	text-decoration: none;
}

.egrant-cta-contact .egrant-cta-contact__lines a:hover,
.egrant-cta-contact .egrant-cta-contact__lines a:focus-visible {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}

/*
 * ── Mobil, odmerané na ráme `375 Produkt` (snímky 09-04 10-27-56 a 10-28-07,
 *    mierka 3,104) ──────────────────────────────────────────────────────────
 *
 *   box       x 20 → 354,4, teda celý obsahový stĺpec ako na desktope
 *   padding   **24**, nie 32 — tlačidlo začína na 44,1 a končí na 330,2,
 *             pod ním je do spodku boxu 24,2
 *   tlačidlo  **286,4 × 37,7**, teda celá šírka vnútra boxu; nie 148 vpravo
 *             ako na desktope
 *
 * Do 2026-09-15 tu stálo, že mobilný rám odmeraný nie je, a tlačidlo zostalo
 * široké podľa textu a odsadené o desktopových 32.
 */
@media (max-width: 720px) {
	.egrant-cta-contact.wp-block-group {
		padding: var(--wp--preset--spacing--60); /* 24 */
	}

	/*
	 * Na mobile lead šírku **nemá obmedzenú**. Rám `375 Produkt` aj render ho
	 * zhodne lámu na 6 riadkov cez celých 287 (vnútro boxu), takže limit
	 * z desktopu sem nepatrí — patrí nad mobilný zlom.
	 */
	.egrant-cta-contact > p {
		max-width: none;
	}

	.egrant-cta-contact .egrant-cta-contact__row {
		flex-direction: column;
		/* `stretch` kvôli tlačidlu; fotka má pevných 64, takže ju to nerozťahuje. */
		align-items: stretch;
	}

	/*
	 * Fotka patrí na vlastný riadok, meno až pod ňu — tak to stojí na ráme
	 * `375 Produkt`. Bez toho je `__person` naďalej riadok a susedné meno
	 * fotku ako flex položku zoskrutkuje na 43,5 × 64, takže tvár je
	 * vodorovne stlačená. Nejde teda o zlý rozmer, ale o deformáciu:
	 * `flex: 0 0 64px` s pevnou šírkou drží kruh kruhom v oboch smeroch.
	 */
	.egrant-cta-contact .egrant-cta-contact__person {
		flex-direction: column;
		align-items: flex-start;
	}

	.egrant-cta-contact .egrant-cta-contact__photo {
		flex: 0 0 64px;
		width: 64px;
	}

	/*
	 * Tlačidlo na celú šírku vnútra boxu. `core/buttons` je flex, preto to
	 * chce šírku na troch úrovniach — obal, položku aj samotný odkaz.
	 */
	.egrant-cta-contact .wp-block-buttons,
	.egrant-cta-contact .wp-block-button,
	.egrant-cta-contact .wp-block-button__link {
		width: 100%;
	}

	.egrant-cta-contact .wp-block-button__link {
		text-align: center;
	}
}