/* vince-community:page — CSS-ul paginii /lumea-vince/ (generator create-bricks-lumea-community.php).
   Încărcat de mu-plugins/vince-community-view.php doar pe paginile Lumea.
   Ce e aici NU se putea exprima din controalele Bricks: stări din URL (tab / grup activ
   prin clasele de pe body), pseudo-elemente, iconuri SVG inline, canvas-ul cu cercuri
   scalat prin container queries, chip-urile din sidebar la <1024. Tot restul (spacing,
   tipografie, culori) e în setările elementelor. */

:root {
	--lc-ink: #222021;
	--lc-muted: #5a5a5a;
	--lc-gray: #999;
	--lc-line: #e5e5e5;
	--lc-orange: #fa9111;
	--lc-navy: #003d6d;
	--lc-band: #e7f1f9;
	--lc-cream: #fdffed;
	--lc-gold: #b29008;
}

body.vince-lumea .lc-svg { display: block; width: 100%; height: 100%; }

/* Iconuri: <i> gol colorat prin mask (fișierul .svg e setat per icon din PHP,
   vince_community_view_icon_css — URL-ul de uploads diferă local/live).
   `background-color: currentColor` face iconul să moștenească culoarea textului. */
.lc-i {
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

/* ─── Hero: canvas 1920×700 din Figma (59:9797), scalat uniform cu lățimea benzii ─── */
/* CSS-ul global al site-ului forțează padding lateral pe orice secțiune
   (`.brxe-section,.brxe-section.brxe-section{padding-inline:var(--vince-pad-x)!important}`),
   ceea ce ar lăsa banda hero la 1264px în loc de lățimea ferestrei — iar colajul,
   scalat în `cqw` din lățimea benzii, ar ieși mai mic decât în Figma. Specificitate
   0,3,1 ca să depășească regula globală. */
body.vince-lumea .lc-hero.brxe-section { padding-left: 0 !important; padding-right: 0 !important; }
.lc-hero-band {
	position: relative;
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	container-type: inline-size;
	aspect-ratio: 1920 / 700;
	overflow: hidden;
}
.lc-circle {
	position: absolute;
	width: calc(var(--sz) / 1920 * 100cqw);
	height: calc(var(--sz) / 1920 * 100cqw);
	left: calc(var(--x) / 1920 * 100cqw);
	top: calc(var(--y) / 1920 * 100cqw);
	border-radius: 50%;
	overflow: hidden;
}
.lc-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-hero-cta {
	position: absolute;
	left: 50%;
	top: calc(138 / 700 * 100%);
	transform: translateX(-50%);
	width: min(902px, 92%);
	z-index: 2;
}
.lc-hero-cta .lc-hero-word img { height: 56px; width: auto; object-fit: contain; }
.lc-hero-sub { width: 100%; max-width: 712px; }
.lc-stat-label { color: rgba(90, 90, 90, .6); }

@media (max-width: 1023px) {
	.lc-hero-band { aspect-ratio: auto; padding: 56px 24px; }
	.lc-circle { display: none; }
	.lc-hero-cta { position: static; transform: none; width: 100%; }
	.lc-hero-cta .lc-hero-word img { height: 40px; }
}

/* ─── Bară tab-uri: activul vine din clasa de pe body (tab-ul e decis în PHP din ?tab=) ─── */
.lc-tab { color: var(--lc-muted); text-decoration: none; border-bottom: 3px solid transparent; }
.lc-tab:hover { color: var(--lc-ink); }
.lc-tab .lc-ico { width: 24px; height: 24px; flex: 0 0 24px; display: block; }
/* Wrapper-ele de icon sunt <span> în interiorul unui text-basic: fără `block` ar
   rămâne inline și `<i>`-ul mascat n-ar avea dimensiune (lățime/înălțime 0). */
.lc-ico, .lc-group-ico, .lc-group-card-ico, .lc-meta-ico, .lc-chevron, .lc-photo-heart { display: block; }
.lc-tab .brxe-text-basic { font-weight: 500; }
body.vince-tab-discutii .lc-tab--discutii,
body.vince-tab-galerie .lc-tab--galerie {
	color: var(--lc-navy);
	border-bottom-color: var(--lc-navy);
}
body.vince-tab-discutii .lc-tab--discutii .brxe-text-basic,
body.vince-tab-galerie .lc-tab--galerie .brxe-text-basic { font-weight: 600; }

/* ─── Sidebar grupuri ─── */
.lc-group {
	text-decoration: none;
	color: var(--lc-ink);
	border-left: 3px solid transparent;
	transition: background-color .15s ease;
}
.lc-group:hover { background: #fafafa; }
.lc-group[data-active="1"] { background: var(--lc-cream); border-left-color: var(--lc-gold); }
.lc-group .lc-group-ico { width: 20px; height: 20px; flex: 0 0 20px; color: var(--lc-orange); }
.lc-group .lc-group-ico .lc-i--group-scissors { color: #7c3aed; }
.lc-group .lc-group-ico .lc-i--group-sunrise { color: #0891b2; }

/* ─── Card grup selectat ─── */
.lc-group-card .lc-group-card-ico { width: 32px; height: 32px; flex: 0 0 32px; color: var(--lc-orange); }
.lc-meta-ico { width: 16px; height: 16px; flex: 0 0 16px; color: var(--lc-muted); }

/* ─── Listă topicuri ─── */
.lc-topic { text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.lc-topic:hover { border-color: #cfcfcf !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .04); }
.lc-topic .lc-topic-title { transition: color .15s ease; }
.lc-topic:hover .lc-topic-title { color: var(--lc-navy); }
.lc-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex: 0 0 auto;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.lc-avatar--topic { width: 40px; height: 40px; background: rgba(8, 145, 178, .13); color: #0891b2; font-size: 14px; font-weight: 600; }
.lc-avatar--photo { width: 28px; height: 28px; background: rgba(250, 145, 17, .13); color: var(--lc-orange); font-size: 9.8px; font-weight: 600; }
.lc-topic-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.lc-topic-meta .lc-ico { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; color: var(--lc-gray); }
.lc-chevron { width: 24px; height: 24px; flex: 0 0 24px; color: var(--lc-muted); }
.lc-empty { border: 1px dashed var(--lc-line); }

/* ─── Paginare (?pg=N) ─── */
.lc-pagination { display: flex; align-items: center; gap: 4px; justify-content: center; width: 100%; }
.lc-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border: 1px solid var(--lc-line);
	color: var(--lc-ink);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}
a.lc-page:hover { border-color: var(--lc-navy); color: var(--lc-navy); }
.lc-page.is-current { background: var(--lc-ink); color: #fff; border-color: var(--lc-ink); }
.lc-page.is-disabled { opacity: .4; pointer-events: none; }
.lc-page--dots { border-color: transparent; }
.lc-page--prev .lc-svg, .lc-page--next .lc-svg { width: 20px; height: 20px; }
.lc-page--prev .lc-svg { transform: rotate(180deg); }

/* ─── Empty state (Discuții fără subiecte / Galerie fără fotografii) ─── */
.lc-empty-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--lc-band);
	color: var(--lc-navy);
}
/* `body.vince-lumea .lc-svg { width:100%; height:100% }` (0,2,1) e mai specific decât
   `.lc-empty-ico .lc-i` (0,2,0), deci iconul umplea tot cercul de 64px și fundalul
   tonal nu se mai vedea. Aceeași specificitate + 1 clasă. */
body.vince-lumea .lc-empty-ico .lc-i { width: 28px; height: 28px; }
.lc-empty-text { max-width: 420px; }

/* ─── Galerie (cardurile sunt deschise în lightbox de JS-ul agentului D pe [data-vince-photo]) ─── */
.lc-photo { cursor: pointer; }
.lc-photo-img { width: 100%; height: 485px; overflow: hidden; background: #f5f5f5; }
.lc-photo-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.lc-photo:hover .lc-photo-img img { transform: scale(1.03); }
.lc-photo-heart { width: 18px; height: 18px; flex: 0 0 18px; color: var(--lc-muted); }
.lc-photo-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ─── Banda „Alătură-te comunității” + FAQ: Figma are gap 64 între ele, nu 96 + 96 ─── */
.lc-join + .brxe-template .va-faq-section { padding-top: 64px; }

/* ─── Responsive (spec: <1024 sidebar → chip-uri orizontale, galerie 2 col; <640 1 col) ─── */
@media (max-width: 1279px) {
	.lc-photo-img { height: clamp(260px, 30vw, 420px); }
}
@media (max-width: 1023px) {
	/* `!important` peste tot unde suprascriem o proprietate pe care Bricks o scrie
	   ca regulă de ID (`#brxe-lcdisc{flex-direction:row}`, specificitate 1,0,0):
	   fără el layout-ul rămânea pe două coloane și pagina se lățea la 953px. */
	.lc-disc { flex-direction: column !important; min-width: 0; }
	/* Sub 1024px grupurile rămân o LISTĂ VERTICALĂ, pe toată lățimea — una sub alta,
	   ca pe desktop. (Varianta din DESIGN-SPEC era o bandă de chip-uri cu scroll
	   orizontal; userul a cerut explicit coloană, pentru că pe telefon chip-urile
	   ascundeau jumătate din grupuri după marginea ecranului.)
	   `min-width: 0` rămâne, ca nimic să nu lățească documentul. */
	.lc-sidebar { width: 100% !important; min-width: 0; max-width: 100%; }
	.lc-groups {
		flex-direction: column !important;
		flex-wrap: nowrap;
		min-width: 0;
		max-width: 100%;
		gap: 4px;
	}
	.lc-group {
		flex: 0 0 auto;
		width: 100% !important;
		height: 64px !important;
		padding: 0 16px !important;
		box-sizing: border-box;
		border-bottom: 1px solid var(--lc-line);
	}
	.lc-group:last-child { border-bottom: 0; }
	.lc-group-card { flex-direction: column !important; gap: 16px; }
	.lc-group-card .lc-group-card-left { width: 100% !important; }
	.lc-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.lc-photo-img { height: clamp(220px, 36vw, 360px); }
}
@media (max-width: 767px) {
	.lc-cta { flex-direction: column !important; align-items: flex-start !important; gap: 16px; }
	.lc-join-in { flex-direction: column; align-items: flex-start !important; gap: 16px; }
	.lc-topic { padding: 16px !important; }
	.lc-topic-meta { gap: 12px !important; }
}
@media (max-width: 639px) {
	.lc-gallery { grid-template-columns: 1fr !important; }
	.lc-photo-img { height: clamp(240px, 70vw, 360px); }
}