/*
 * Felszólalás-kártya: a borítókép helyén a felirat szövegrészlete.
 *
 * A kártya külső mérete szándékosan ugyanaz, mint a szokásos anyag-kártyáé,
 * hogy a csúszkában egy sorba rendeződjenek. A részlet doboza ezért fix
 * magasságú, és ami nem fér ki, az elhalványodva elfogy — így nem a leghosszabb
 * szövegrészlet szabja meg az egész sor magasságát.
 */

.felszolalas-card .felszolalas-reszlet {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 180px;
	padding: 16px;
	overflow: hidden;
	border-radius: 12px;
	background: #1c1c1c;
	border: 1px solid #2e2e2e;
}

.felszolalas-card .felszolalas-fej {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.felszolalas-card .felszolalas-ki {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

/* A kerek fotó ugyanaz a kép, mint a videóoldal felszólalás-listájában. */
.felszolalas-card .felszolalas-ki .avatar {
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
}

/* A hosszú név nem törheti két sorba a fejlécet. */
.felszolalas-card .felszolalas-nev {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #f8f8f8;
	font-size: 14px;
}

/*
 * Az idő MINDIG a jobb szélen áll, akkor is, ha nincs felszólaló a kártyán.
 * Korábban a fejléc space-between-nel rendezett, ami két elemnél széthúzta,
 * egyetlen elemnél viszont balra tette — így az idő kártyánként ugrált.
 * A margin-left: auto mindkét esetben a jobb szélre viszi.
 */
.felszolalas-card .felszolalas-ido {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	color: #2ea5e8;
	font-size: 14px;
	line-height: 1;
}

.felszolalas-card .felszolalas-szoveg {
	margin: 0;
	color: #c8c8c8;
	font-size: 15px;
	line-height: 1.55;
}

/* A kifutó szöveg elhalványodik, hogy ne vágja el élesen egy betű közepén. */
.felszolalas-card .felszolalas-reszlet::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 52px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(28, 28, 28, 0), #1c1c1c);
}

.felszolalas-card .felszolalas-szoveg mark {
	padding: 0 2px;
	border-radius: 3px;
	background: #2ea5e8;
	color: #ffffff;
}

/* Csökkentett mozgás mellett sincs semmi mozgó elem, de a kiemelés kontrasztja
   így is elegendő — nem kell külön szabály. */