/*
 * Ugyanaz a ket-oszlopos elrendezes (flexbox: kep balra, tartalom jobbra),
 * mint a khek/publication-fields blokknal a kiadvany oldalakon (lasd
 * publication-fields/style.css .khek-publication-detail__layout/__image/
 * __content) - itt a "khek-program-fields__detail*" a megfelelo osztaly.
 * A hosszu leiras (post_content) is ide, a __content oszlopba kerul
 * kirenderelesre (lasd render.php), igy a kep es minden szoveg egyetlen,
 * onmagaban lezart blokk resze, nem lebegtetesre/kereszt-blokkos trukkre
 * van szukseg.
 */
/*
 * MIERT VAN MINDEN ".khek-program-fields__detail*" SZABALY ELE ILLESZTVE A
 * ".wp-block-khek-program-detail"?
 * Ugyanezeket az osztalyneveket hasznalja a khek/program-fields blokk
 * szerkesztoi feluletenek "Teljes nezet" resze is, sajat merettel/margokkal
 * (lasd program-fields/editor.css) - a ket szabalykeszlet azonos, egy
 * osztalynyi (0,1,0) specificitasu volt, tehat csak a stiluslapok betoltesi
 * sorrendje dontott kozottuk. A frontenden ez sosem latszott, mert ott csak a
 * tenylegesen hasznalt blokkok stiluslapja toltodik be; a SZERKESZTOBEN
 * viszont MINDEGYIK betoltodik, es az itteni (kesobb erkezo) szabalyok
 * ratelepedtek a program-szerkeszto sajat feluletere. A blokk sajat wrapper
 * osztalyaval (0,2,0) a ket keszlet mar nem tud osszeernii.
 * FIGYELEM: a gyoker elemen a ket osztaly UGYANAZON az elemen van
 * (get_block_wrapper_attributes), ezert ott osszevont - nem leszarmazott -
 * szelektor kell.
 */
.wp-block-khek-program-detail.khek-program-fields__detail {
	padding: 60px 0;
}

.khek-program-fields__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 40px;
	font-size: 20px;
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--green);
}

.khek-program-fields__back:hover {
	text-decoration: underline;
}

.khek-program-fields__back-icon {
	display: block;
	transform: rotate(180deg);
}

.khek-program-fields__detail-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px;
}

.khek-program-fields__detail-image {
	order: 2;
	flex: 1 1 380px;
	max-width: 450px;
}

.khek-program-fields__detail-image img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--green);
	border-radius: 4px;
}

.wp-block-khek-program-detail .khek-program-fields__detail-content {
	order: 1;
	flex: 2 1 420px;
	min-width: 0;
}

.wp-block-khek-program-detail .khek-program-fields__detail-title {
	margin: 0  0 28px 0 !important;
	font-family: var( --wp--preset--font-family--display );
	font-size: 36px;
	line-height: 1.2;
	font-weight: 700;
	color: var( --wp--preset--color--green );
}

.wp-block-khek-program-detail .khek-program-fields__detail-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0 0;
}

.wp-block-khek-program-detail .khek-program-fields__detail-dates {
	margin: 8px 0 0;
	font-size: 15px;
	color: var( --wp--preset--color--green );
font-weight: 600 !important;
}

/*
 * A hosszu leiras. Ugyanezt az osztalyt viseli a khek/program-fields blokk
 * szerkesztoi "Teljes nezet" mezoje is - szandekosan, hogy a ket nezet
 * tipografiaja egyetlen helyrol jojjon, es ne tudjon elcsuszni egymastol.
 * (Ezert nincs ez a szabaly a ".wp-block-khek-program-detail" wrapperhez
 * kotve, ellentetben a fenti tobbivel.)
 *
 * "pre-wrap" es nem "pre-line": a szerkesztoben a Gutenberg a szerkesztheto
 * elemre INLINE stilussal teszi ki a "pre-wrap"-ot (a RichText
 * "preserveWhiteSpace" beallitasa miatt), amit stiluslapbol csak
 * "!important"-tal lehetne felulirni - a szerkeszto sajat mukodese ellen. Igy
 * viszont a ket nezet magatol azonos: amit a szerkeszto begepel (tobb szokoz
 * is), pontosan ugy jelenik meg a kesz oldalon.
 */
.khek-program-fields__detail-text {
	margin: 20px 0 0;
	white-space: pre-wrap;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--green);
}

/* A cimke-chip ugyanaz a ".khek-program-slider__tag" osztaly, mint a Program
   lapozoban - a sajat, ITTENI margojat viszont csak a program teljes nezeten
   szabad ervenyre juttatni, ezert a szulo ".khek-program-fields__detail-tags"
   parositasa. Enelkul ez a szabaly (azonos, 0,1,0 specificitas mellett, csak a
   stiluslapok betoltesi sorrendje miatt) a LAPOZO chipjeire is atragadt: a
   frontenden ez rejtve maradt, mert ott csak a tenylegesen hasznalt blokkok
   stiluslapjai toltodnek be, a SZERKESZTOBEN viszont mindegyik - ott a
   lapozo cimkesora 15px helyett 30px-es also margot kapott. */
.khek-program-fields__detail-tags .khek-program-slider__tag {
	font-size: 12px;
	font-weight: 600;
	padding: 8px;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--green);
	border-radius: 2px;
	line-height: 1;
	white-space: nowrap;
	margin-bottom: 30px;
}