/*
 * Форум под урока — СПИСЪКЪТ с теми (AU-3053, фаза A / PR 2 от 4): само вид,
 * нула промени в базата. Картовия изглед на списъка, заглавие/подредба,
 * „покажи още теми", свиване на описанието на урока, формата за нова тема.
 *
 * НЕ покрива приемането на отговор (viж forum-accept.css) и отворената
 * тема + гласуване (viж forum-thread.css) — те са в съседни PR-ове/файлове.
 *
 * Живее в СОБСТВЕН файл, а не в style.css: policy gate-ът сканира целия
 * променен файл, а style.css носи ~200 наследени hardcoded цвята — всяко
 * докосване го прави червен. Тук всичко е през променливи от colors.css.
 *
 * Мобилно-първо: базовите правила важат за телефон, а @media разширява нагоре.
 * Обратното (desktop-first с тънка кръпка) е точно състоянието, което
 * поправяме — в social.css само 2% от редовете са в @media блокове.
 */

.forum-question-row {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	position: relative; /* котва за overlay-а, който прави цялата карта кликаема */
	padding: 1rem;
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-base, .5rem);
	background: var(--color-bg-surface);
	/*
	 * Изрично `0` отляво/отдясно: наследеното правило дава на реда ~3px
	 * хоризонтален отстъп от времето на табличния изглед. Заради него картите
	 * стояха 3px по-навътре от формата и от заглавието отгоре — разминаване,
	 * което се вижда чак когато кутиите имат рамка (Любо, 14.08).
	 */
	margin: 0 0 .75rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* Само за устройства с истинско посочване — на тъч hover „залепва". */
@media (hover: hover) {
	.forum-question-row:hover {
		border-color: var(--color-primary);
		box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
	}
}

.forum-question-main-cont {
	flex: 1 1 auto;
	min-width: 0; /* без това дългите заглавия разпъват реда и чупят flex-а */
}

/* Заглавието е първото, което се чете — то решава дали темата ще се отвори. */
.forum-question-title-cont {
	margin-bottom: .25rem;
}

.forum-question-title-link {
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-text-primary);
	text-decoration: none;
	display: block;
}

.forum-question-title-link:hover,
.forum-question-title-link:focus-visible {
	color: var(--color-primary);
	text-decoration: underline;
}

/*
 * Цялата карта отваря темата — хората приемат кутийката за линк и кликат
 * встрани от заглавието (Иван, 14.08).
 *
 * Похватът е overlay върху заглавния линк, а НЕ <a> около целия ред: вложен
 * <a> в <a> е невалидна разметка и би убил линковете към профила на автора.
 * Понеже overlay-ът е част от заглавния линк, hover-ът върху цялата карта
 * подчертава заглавието — точно каквото очаква окото.
 */
.forum-question-title-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Вдигнати над overlay-а, за да си останат отделни линкове към профила. */
.forum-question-avatar-link,
.forum-question-user-name-link {
	position: relative;
	z-index: 1;
}

.forum-question-meta-cont {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	font-size: .85rem;
	color: var(--color-text-secondary);
	margin-bottom: .35rem;
}

.forum-question-user-name-link {
	color: var(--color-text-secondary);
	text-decoration: none;
}

.forum-question-user-name-link:hover,
.forum-question-user-name-link:focus-visible {
	text-decoration: underline;
}

.forum-question-meta-sep {
	opacity: .6;
}

/* Откъсът е ограничен до два реда — иначе дългите въпроси изяждат списъка. */
.forum-question-excerpt {
	font-size: .9rem;
	line-height: 1.45;
	color: var(--color-text-secondary);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.forum-question-avatar-cont {
	flex: 0 0 auto;
}

.forum-question-avatar {
	width: 2.75rem;   /* 44px — минималната цел за докосване */
	height: 2.75rem;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* На телефон аватарите на отговорилите са шум — броят им е достатъчен. */
.forum-question-answer-users-cont {
	display: none;
}

/*
 * Харесвания и коментари стоят един под друг вдясно на картата. Вертикално, за
 * да не разпъват реда на тесен екран. Нула гласа изобщо не се рендира — „0"
 * изглежда като отхвърлена тема, а значи само че никой още не е гласувал.
 */
.forum-question-counts-cont {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .25rem;
	flex: 0 0 auto;
	align-self: center;
	min-width: 2.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--color-text-secondary);
}

.forum-question-count {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

@media (min-width: 768px) {
	.forum-question-row {
		gap: 1rem;
		padding: 1rem 1.25rem;
	}

	.forum-question-avatar {
		width: 3rem;
		height: 3rem;
	}

	/*
	 * style.css скрива всички отговорили след първия под 991px и заковава
	 * контейнера на 220px над него. Тук взимаме контрола за целия диапазон,
	 * иначе между 768 и 991px контейнерът се вижда, но е празен.
	 */
	.forum-question-answer-users-cont {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		width: auto;
		flex-basis: auto;
	}

	.forum-question-answer-user:nth-child(n+2),
	.forum-question-answer-users-more {
		display: inline-block;
	}

	/*
	 * `flex: 0 0 auto` НЕ е излишен: аватарът е flex дете и по подразбиране
	 * може да се свива. При ЕДИН отговорил контейнерът се получаваше по-тесен
	 * от 1.75rem и кръгът се сплескваше във вертикална елипса — височината
	 * оставаше 28px, ширината падаше на 20px (Иван, 14.08).
	 * `aspect-ratio` е втората защита: пази кръга кръг дори ако ширината пак
	 * бъде притисната отнякъде.
	 */
	.forum-question-answer-user {
		flex: 0 0 auto;
		width: 1.75rem;
		height: 1.75rem;
		aspect-ratio: 1;
		border-radius: 50%;
		object-fit: cover;
		margin-left: -.5rem;
		border: 2px solid var(--color-bg-surface);
	}

	/* Застъпването важи от втория нататък — първият няма какво да застъпи. */
	.forum-question-answer-user:first-child {
		margin-left: 0;
	}

	.forum-question-answer-users-more {
		font-size: .8rem;
		color: var(--color-text-secondary);
		margin-left: .35rem;
	}
}

/* ── Заглавие на секцията и подредба ─────────────────────────── */

.forum-questions-header-cont {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: flex-start;
	justify-content: space-between;
	/*
	 * САМО хоризонталните отстъпи, не `margin` накратко. Наследеното правило
	 * в `style.css` дава на този клас `margin: 1rem .2em 0` над 991px — тоест
	 * и хоризонталния отстъп (.2em ≈ 3px), заради който заглавието стоеше
	 * навътре спрямо формата, И вертикалното разстояние от урока отгоре.
	 * Съкратеният запис би нулирал и второто.
	 */
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 1rem;
}

.forum-questions-header-left {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	min-width: 0;
}

.forum-questions-title {
	/* h3 — заглавието на секция трябва да е heading, а не само едър текст:
	   и заради екранните четци, и защото smoke тестът разчита на него. */
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--color-text-primary);
}

.forum-questions-subtitle {
	font-size: .9rem;
	line-height: 1.4;
	color: var(--color-text-secondary);
}

.forum-questions-header-right {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: 0 0 auto;
}

.forum-sort-label {
	font-size: .85rem;
	color: var(--color-text-secondary);
	margin: 0;
}

.forum-sort-select {
	font-size: .9rem;
	padding: .4rem .6rem;
	min-height: 2.75rem;      /* 44px — цел за докосване */
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-sm);
	background: var(--color-bg-surface);
	color: var(--color-text-primary);
}

/* ── „Покажи още теми" ───────────────────────────────────────── */

.forum-questions-more-cont {
	display: flex;
	justify-content: center;
	margin-top: .5rem;
}

.forum-questions-more-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.75rem;
	padding: .5rem 1.25rem;
	font-size: .95rem;
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-base);
	background: var(--color-bg-surface);
	color: var(--color-text-primary);
	cursor: pointer;
}

@media (hover: hover) {
	.forum-questions-more-btn:hover {
		border-color: var(--color-primary);
		color: var(--color-primary);
	}
}

/* ── Свиване на описанието на урока ──────────────────────────── */

/*
 * САМО от 1200px нагоре. Под този праг `changeLessonView()` мести децата на
 * `.single-video-description` в мобилния акордеон — wrapper-ът остава празен,
 * селекторите отдолу спират да мачват, а и самият акордеон вече е свиване.
 * Двойно свиване на телефон значи две кликвания за един текст.
 */
@media (min-width: 1200px) {
	/*
	 * 12rem, не 9rem: при 9rem на уроци, чието описание започва със заглавие,
	 * се виждаше само заглавието и нищо от текста — свитото състояние не
	 * казваше нищо за съдържанието (Любо, 14.08). 12rem минус избледняването
	 * оставя заглавие + няколко реда четими.
	 */
	.lesson-description-collapsible .lesson-description-body {
		max-height: 12rem;
		overflow: hidden;
		position: relative;
	}

	/*
	 * Избледняване към дъното — подсказва, че текстът продължава.
	 * 2rem, не 3rem: избледняването яде от четимата височина, а целта е точно
	 * тя да стигне за няколко реда.
	 */
	.lesson-description-collapsible .lesson-description-body::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2rem;
		background: linear-gradient(to bottom, transparent, var(--color-bg-surface));
		pointer-events: none;
	}

	.lesson-description-collapsible.is-open .lesson-description-body {
		max-height: none;
	}

	/*
	 * `is-flat` слага скриптът, когато текстът се събира изцяло в свитата
	 * височина. Тогава няма какво да се отваря: махат се и мъглата, и бутонът,
	 * за да не обещават скрито съдържание, каквото няма.
	 */
	.lesson-description-collapsible.is-flat .lesson-description-body::after,
	.lesson-description-collapsible.is-flat .lesson-description-toggle {
		display: none;
	}

	.lesson-description-collapsible.is-open .lesson-description-body::after {
		display: none;
	}

	.lesson-description-toggle {
		display: inline-flex;
		align-items: center;
		gap: .4rem;
		min-height: 2.75rem;
		padding: .35rem 0;
		border: 0;
		background: none;
		color: var(--color-primary);
		font-size: .95rem;
		cursor: pointer;
	}

	.lesson-description-toggle .fa-chevron-down {
		transition: transform .15s ease;
	}

	.lesson-description-collapsible.is-open .lesson-description-toggle .fa-chevron-down {
		transform: rotate(180deg);
	}
}

/* Под 1200px бутонът няма какво да свива — акордеонът се грижи. */
@media (max-width: 1199.98px) {
	.lesson-description-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.lesson-description-toggle .fa-chevron-down { transition: none; }
}

/* ── Формата за нова тема ────────────────────────────────────── */

/*
 * Формата стои РАЗГЪНАТА по подразбиране (Любо, 14.08 — след като пробвахме
 * свиване при фокус и го отхвърли). Тук се прави само едно: кутийката да е
 * широка колкото картите с темите под нея.
 *
 * ⚠️ Всяко правило е scoped под `.forum-question-form-cont`. Същият widget се
 * рендира и на главната страница на форума (`activity.php`), която в тази
 * фаза не пипаме — затова тук няма нито едно глобално правило.
 */
.forum-question-form-cont {
	margin-bottom: 1.25rem;
}

/*
 * `!important` не е мързел: `#soc-post-shell` носи `max-width: 960px` в
 * INLINE style атрибут в самия widget. Inline бие всяка специфичност — само
 * `!important` го надвива. Затова кутийката оставаше по-тясна от темите под
 * нея. Ширината пада на 100%, тъй че мобилното се свива пропорционално само.
 */
.forum-question-form-cont #soc-post-shell {
	max-width: 100% !important;
	width: 100%;
}

/*
 * Селекторът е с ID нарочно: кутийката е и `#soc-post`, а `social.css` ѝ дава
 * през ID-то рамка 2px, радиус 10px и фон `--color-white`. ID бие клас
 * независимо от реда на файловете, тъй че `.forum-question-form-cont .qbox`
 * беше мъртво правило. Освен подравняването това поправя и тъмната тема —
 * `--color-white` е буквално бяло и не се сменя с темата.
 */
.forum-question-form-cont #soc-post {
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-base, .5rem);
	background-color: var(--color-bg-surface);
	padding: 1rem;
	margin-bottom: 0;
}

/* Полето няма нужда от собствена рамка — рамката е на кутийката. */
.forum-question-form-cont .post-input-title {
	width: 100%;
	border: 0;
	background: none;
	padding: .25rem 0;
	font-size: 1rem;
	color: var(--color-text-primary);
}

/*
 * Синият накъсан контур, който Любо видя, идва от `social.css`:
 * `.post-input-title:focus` рисува `box-shadow: 0 0 0 .2rem rgba(0,123,255,.25)`
 * — чужд син halo, който при видим брояч се и накъсва. Затова първо се гаси
 * (`box-shadow: none`), после се слага наш цял контур.
 *
 * `outline-offset` изнася контура ИЗВЪН кутията на полето — така броячът
 * „0/90 символа", който живее вътре с `z-index: 10`, не го застъпва.
 *
 * Но изнасянето навън създава втори проблем: описанието отдолу започва точно
 * на долния ръб на полето (нула разстояние) и е СЛЕДВАЩ съсед с бял фон —
 * рисува се след полето и изяжда долната част на пръстена, който става „U".
 * Затова `z-index` при фокус: вдига полето над описанието, но остава под
 * брояча (10), тъй че и той си остава четим върху дълго заглавие.
 */
.forum-question-form-cont .post-input-title:focus,
.forum-question-form-cont .post-input-title:focus-visible {
	z-index: 2;
	box-shadow: none;
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

.forum-questions-empty {
	margin: 0;
	padding: 1rem;
	color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
	.lesson-description-toggle .fa-chevron-down { transition: none; }
}