/*
 * Dlaždice funkcionalít — Produkt, sekcia „Funkcionality systému detailne".
 * Vzor zo **core blokov**: `core/group` → `core/paragraph` (názov)
 * + `core/list` (detail). V `docs/06` je to pattern B9 „feature-tiles".
 *
 * Štýl visí na `core/group` (`functions/BlockStyles.php`).
 *
 * ── Odmerané na ráme `1280 Produkt` (snímka 09-01 13-27-41) ───────────────
 *
 * Mierka: rám 1957 px = 1280 dizajnových. Overené na pozadí — vyšlo presne
 * `#F5F3F1`, teda token `base`, takže snímka farby neposúva.
 *
 *   mriežka        3 stĺpce, medzera **12** (3 × 333,3 + 2 × 12 = 1024)
 *   dlaždica       333 × **140**, ľavá hrana na 130 → sedí na obsahový stĺpec
 *   pozadie        **#EAE5E1**
 *   radius         ~16
 *   odsadenie      názov začína 21 od ľavej hrany a 18 od hornej → **20**
 *
 * 🔴 **Farba `#EAE5E1` v palete nie je a token `tile` to nie je**, hoci sa volá
 * „Povrch – dlaždica". `docs/11:106` ho vedie ako „obal segmentovaných
 * prepínačov" (`#F0EDEA`) a používa ho spodná lišta — pochádza z prototypu,
 * nie z tohto rámu. Rozdiel nie je kozmetický: proti pozadiu `#F5F3F1` je
 * `#F0EDEA` o polovicu menej kontrastné a dlaždice by takmer zmizli.
 * Je to teda literál, kým sa nerozhodne, či pribudne do palety.
 *
 * ── Prečo je detail v stránke a nie v atribútoch bloku ────────────────────
 *
 * Obsah modálu je `core/list` **vnútri dlaždice** — teda bežný blok, ktorý je
 * editovateľný, preložiteľný cez WPML a seedovaný z repa ako všetko ostatné
 * (rozhodol Lukáš 2026-09-15). Modal v jadre WordPressu neexistuje, takže JS
 * tam byť musí; obsah v ňom ale nie je.
 *
 * 🔴 **Detail je viditeľný, kým ho JS neskryje.** Trieda `is-enhanced` pribudne
 * až v `feature-tiles.js` — bez JS teda zostane zoznam pod názvom čitateľný,
 * namiesto toho, aby bol obsah nedostupný.
 */

.egrant-feature-tiles.wp-block-group {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30); /* 12 */
}

/*
 * ── Zbaľovanie na mobile ──────────────────────────────────────────────────
 *
 * Sú tu **dve úrovne** a každá má vlastný zbaľovač:
 *
 *   `.egrant-feature-sections`  šesť sekcií (nadpis + mriežka), na mobile
 *                               vidieť **prvú**; ostatné za pilulkou
 *   `.egrant-feature-tiles`     dlaždice v jednej sekcii, viditeľných **5**
 *
 * Rám `375 Produkt` (snímka 09-04 10-27-56) ukazuje práve tú vonkajšiu:
 * za poslednou dlaždicou „Administrácie systému" — ktorá má presne päť, teda
 * nezbalených — stojí pilulka a za ňou ide rovno ďalšia sekcia stránky.
 * Vnútorná úroveň je pravidlo do zásoby: dnes nemá ani jedna skupina viac než
 * päť dlaždíc, takže sa v nej pilulka nezjaví (blok si ju sám odstráni).
 *
 * Nad vonkajšou pilulkou je **56**: v tej snímke spodok poslednej dlaždice
 * y 726, vrch pilulky y 901, mierka 3,101 → 56,1.
 *
 * Premenná sedí na obale zbaľovača, nie na mriežke — pilulka je súrodenec
 * obalenej nádoby, nie jej dieťa.
 */
.egrant-collapsible-list:has(> .egrant-feature-sections) {
	--egrant-collapsible-gap: 56px;
}

.egrant-feature-tile.wp-block-group {
	position: relative;
	box-sizing: border-box;
	min-height: 140px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); /* 16 / 20 */
	border-radius: var(--wp--custom--radius--xl); /* 16 */
	background: #EAE5E1;
}

.egrant-feature-tile .egrant-feature-tile__name {
	margin-block: 0;
	/* Miesto pre chevron vpravo hore: 16 znak + 20 odsadenie + 8 medzera. */
	padding-right: var(--wp--preset--spacing--90); /* 48 */
	/*
	 * **14,4** (preset `button`). Do 2026-09-15 tu bolo 14 (`tiny`) a komentár
	 * to odvodzoval z **rozteče riadkov**: dvojriadkový názov má 17,7, čo pri
	 * 1,25 dáva 14,16. To meranie nebolo zlé, len nejednoznačné — 14,4 × 1,25
	 * dáva 18, teda prakticky tú istú rozteč.
	 *
	 * Rozhodla **šírka reťazca**, ktorá meria priamo to, o čo ide. Štyri
	 * nezávislé merania na ráme `1280 Produkt` dávajú zhodný pomer 1,027–1,029:
	 * „Notifikácie" 70,93 / 69 · „Nastavenie inštancie a prístupov" 216,07 / 210
	 * · „Tvorba exportov a export dát" 191,11 / 186 · „Správa rôznych
	 * dotačných" 176,66 / 172.
	 *
	 * Výšku dlaždice to neohrozuje: dvojriadkový názov je 2 × 18 = 36 a do
	 * 140 (mobil 100) sa zmestí. Pôvodná obava platila pre 16, nie pre 14,4.
	 */
	font-size: var(--wp--preset--font-size--button);
	font-weight: 600;
	line-height: 1.25;
}

/* ── Stav s JS ──────────────────────────────────────────────────────────── */

.egrant-feature-tiles.is-enhanced .egrant-feature-tile__detail {
	display: none;
}

.egrant-feature-tiles.is-enhanced .egrant-feature-tile {
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--base, 0.2s ease);
}

.egrant-feature-tiles.is-enhanced .egrant-feature-tile:hover,
.egrant-feature-tiles.is-enhanced .egrant-feature-tile:focus-visible {
	background: var(--wp--preset--color--surface-2); /* #E4E2DD */
}

/*
 * Chevron. Je to `::after`, nie znak v markupe — je to ozdoba, nie obsah,
 * a prekladateľ by ho inak dostal do balíka.
 */
.egrant-feature-tiles.is-enhanced .egrant-feature-tile::after {
	content: '';
	position: absolute;
	top: var(--wp--preset--spacing--40); /* 16 — rovnako ako horný padding */
	right: var(--wp--preset--spacing--50); /* 20 */
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14' fill='none'%3E%3Cpath d='M1 1L7 7L1 13' stroke='%23141414' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Modal detailu ──────────────────────────────────────────────────────── */

/*
 * Okno kreslí `_modal.scss` (`.egrant-modal*`) — to isté, čo modal odberu,
 * takže sa nemôžu rozísť. Tu je len telo, ktoré odber nemá: zoznam položiek
 * oddelených linkou, bez odrážok (rám `600 modal detail`, snímka 12-57-59).
 */
/*
 * Okno detailu je **600**, nie 650 ako odber — popisok rámu je priamo
 * `600 modal detail`. Trieda ide z `feature-tiles.js`.
 */
.egrant-modal.egrant-modal--detail {
	/* Dve triedy, nie jedna: `.egrant-modal { width: 650px }` z `_modal.scss`
	   má rovnakú špecificitu a pri remíze rozhoduje poradie v `<head>` —
	   odmerané, 600 neprešlo. */
	width: 600px;

	/*
	 * 🔴 **Dlhý detail sa musí zmestiť.** „Prijímanie žiadostí o dotácie" má
	 * 34 odrážok a okno bolo vyššie než obrazovka — a keďže overlay centruje
	 * cez `align-items: center`, vrch okna sa vytlačil **mimo rolovateľnú
	 * oblasť** a nedal sa dosiahnuť vôbec. Je to známa vlastnosť flexboxu,
	 * nie chyba obsahu.
	 *
	 * Figma to nerieši: jediný rám `600 modal detail` má sedem položiek
	 * a zmestí sa. Riešenie je teda naše — **roluje sa zoznam, nie okno**,
	 * aby titulok a krížik zostali na mieste.
	 *
	 * 48 = odsadenie overlayu (24 hore aj dole); pod `xs` je 0, preto 100svh.
	 * `svh` a nie `vh`: na mobile sa `vh` počíta z okna bez adresného riadku
	 * a okno by pod ním vytieklo.
	 */
	max-height: calc(100svh - 48px);
}

@media (max-width: 640px) {
	.egrant-modal.egrant-modal--detail {
		max-height: 100svh;
	}
}

/* `min-height: 0` — bez neho flex dieťa odmietne byť menšie než jeho obsah
   a `overflow` na zozname sa neuplatní. */
.egrant-modal--detail .egrant-modal__panel {
	min-height: 0;
	overflow: hidden;
}

.egrant-modal__detail {
	margin: 0;
	padding: 0;
	list-style: none;
	min-height: 0;
	overflow-y: auto;
	/* Rolovanie sa nesmie preniesť na stránku pod modálom. */
	overscroll-behavior: contain;
}

.egrant-modal__detail li {
	padding-block: var(--wp--preset--spacing--40); /* 16 */
	border-top: 1px solid var(--wp--preset--color--line);
}

.egrant-modal__detail li:first-child {
	border-top: 0;
}

@media (max-width: 900px) {
	.egrant-feature-tiles.wp-block-group {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * Mobilný rám `375 Produkt` (sada 09-04) je **odmeraný od 2026-09-15** — do
 * tej chvíle tu stálo, že odmeraný nie je a že jeden stĺpec je len odvodený
 * z toho, že dlaždica 333 sa na 375 nezmestí. Jeden stĺpec rám potvrdil.
 *
 * Výška dlaždice je v ňom **100** — odmerané na štyroch dlaždiciach v jednej
 * snímke (100,0 / 100,4 / 100,0 / 100,0), medzera medzi nimi 11,9 ≈ 12, čo
 * render už má.
 *
 * Zostáva `min-height`, nie `height`: pri dlhšom názve má dlaždica narásť,
 * nie text pretiecť. V ráme sa názov zalomí po „Nastavenie inštancie a" /
 * „prístupov", takže dvojriadkové názvy sú očakávaný stav, nie výnimka.
 */
@media (max-width: 640px) {
	.egrant-feature-tiles.wp-block-group {
		grid-template-columns: 1fr;
	}

	.egrant-feature-tiles .egrant-feature-tile {
		min-height: 100px;
	}
}