/**
 * "Saját csoportjaim" blokk + "Tanulj valami újat" cím a `/csoportok`
 * oldal tetején.
 *
 * A kártyák maguk a natív LearnDash Course Grid ("Tanulj valami újat")
 * kártyáival AZONOS DOM-szerkezetet és class-okat kapnak
 * (`.ld_course_grid`, `.col-sm-8.col-md-4`, `.thumbnail.course`,
 * `.caption`, `.entry-title`, `.ld_course_grid_button .btn`) — lásd
 * class-ld-ice-my-groups-showcase.php render_card() / render_my_groups_html().
 * Emiatt a két szekció kártyái automatikusan öröklik ugyanazt, az
 * oldalon már betöltött LearnDash Course Grid stílust, és pontosan
 * ugyanakkorák lesznek, mint alattuk a többi csoport.
 *
 * Itt csak azt a néhány dolgot állítjuk be, amit a natív grid nem ad:
 * a szekció címét, a borítókép nélküli csoportokhoz tartozó
 * "kezdőbetű" jelvényt, és a cím alatti, 2 sorra vágott leírást
 * (`.ld-ice-grid-description`, lásd lent).
 */

.ld-ice-my-groups-showcase {
	margin: 0 0 28px;
	box-sizing: border-box;
}

.ld-ice-my-groups-showcase *,
.ld-ice-my-groups-showcase *::before,
.ld-ice-my-groups-showcase *::after {
	box-sizing: border-box;
}

.ld-ice-my-groups-showcase__title,
.ld-ice-my-groups-section-title {
	margin: 0 0 14px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 19px;
	font-weight: 800;
	color: #1f2430;
}

.ld-ice-my-groups-section-title {
	margin-top: 4px;
}

/* Cím + szerkesztés ikon sora a "Saját csoportjaim" kártyákon — az
   ikon csak a csoport tulajdonosának/oktatójának jelenik meg, lásd
   class-ld-ice-my-groups-showcase.php render_card(). */
.ld-ice-my-groups-showcase__title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 6px;
}

.ld-ice-my-groups-showcase__title-row .entry-title {
	flex: 1 1 auto;
	min-width: 0;
}

.ld-ice-my-groups-showcase__edit-link {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	border-radius: 4px;
	color: #6b7290;
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.ld-ice-my-groups-showcase__edit-link:hover,
.ld-ice-my-groups-showcase__edit-link:focus {
	color: #2c3e91;
	background-color: #eef0fb;
}

.ld-ice-my-groups-showcase__edit-icon {
	pointer-events: none;
}

/* Borítókép nélküli csoportoknál megjelenő kezdőbetű-jelvény —
   ugyanakkora területet foglal el, mint a natív kártyák borítóképe
   (300x259 arány), hogy a sor igazodása ne törjön meg. */
.ld-ice-my-groups-showcase__avatar-fallback {
	width: 100%;
	aspect-ratio: 300 / 259;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eef0fb;
	color: #2c3e91;
	font-size: 48px;
	font-weight: 800;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Csoportleírás a cím alatt — mind a "Saját csoportjaim" kártyáknál
   (szerver-oldalon renderelve), mind a natív "Tanulj valami újat"
   (LearnDash Course Grid) kártyáknál, ahol JS illeszti be a cím alá
   (lásd class-ld-ice-my-groups-showcase.php). 2 sorra vágva, a végén
   automatikus "…"-tal. */
.ld-ice-grid-description {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: #6b7290;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* A natív LearnDash Course Grid gomb-konténerének extra belső
   térköze a /csoportok oldalon (mind a "Saját csoportjaim"/"Tanulj
   valami újat" kártyákon, mind az alattuk lévő teljes natív rácson —
   ez a stíluslap az egész oldalra betöltődik). */
.ld_course_grid_button {
	box-sizing: border-box !important;
	padding: 10px !important;
	transition: none !important;
}

.ld_course_grid_button * {
	box-sizing: border-box !important;
}

/* A natív téma/LearnDash a kártya gombjának hoverére a teljes
   kártyát (article.course/thumbnail) is "megemeli" (transform),
   mert a gomb a kártyán belül van, és a kártya :hover állapota a
   gomb hoverelésekor is aktiválódik - ez a /csoportok oldalon úgy
   tűnt, mintha a kártyák a gombok hoverénél megmozdulnának. Mivel a
   kártya-mozgatás vizuálisan zavaró (és a "Saját csoportjaim" /
   "Tanulj valami újat" kártyák így is teljesen ugyanúgy néznek ki
   natív hover-effekt nélkül), itt kikapcsoljuk a mozgást - csak a
   kártya, ill. a gomb transform-alapú elmozdulását, a többi natív
   hover-stílust (pl. szín-, árnyékváltozás) nem érinti. */
.ld_course_grid article.course:hover,
.ld_course_grid article.thumbnail:hover {
	transform: none !important;
}

.ld_course_grid_button .btn:hover {
	transform: none !important;
}