/* BlackSite public block and list pages. Colors follow Steyle-V4 (dark). */

:root {
	--bs-bg: #17191f;
	--bs-bg2: #23252c;
	--bs-border: #383b46;
	--bs-text: #ffffff;
	--bs-muted: #a3a8b8;
	--bs-accent: #af6700;
	--bs-blue: #557ea0;
	--bs-radius: 8px;
}

/* ---------------------------------------------------------------- banners */
.bs_banners { margin: 10px 0; text-align: center; }
.bs_banner_item img { max-width: 100%; max-height: 300px; object-fit: contain; border-radius: var(--bs-radius); vertical-align: middle; }

/* ---------------------------------------------------------------- hub (board index) */
.bs_hub {
	margin: 10px 0 14px;
	padding: 14px;
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	background: linear-gradient(to right, var(--bs-bg), var(--bs-bg2));
}
.bs_hub_head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bs_hub_title { font-size: 1.35em; margin: 0; color: var(--bs-text); }
.bs_hub_text { margin: 2px 0 0; color: var(--bs-muted); }
.bs_support {
	display: inline-block; padding: 7px 14px; border-radius: 20px;
	background: var(--bs-accent); color: #fff !important; font-weight: bold; white-space: nowrap;
}
.bs_support:hover { filter: brightness(1.15); text-decoration: none; }

.bs_tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.bs_tile, .bs_contact {
	display: flex; gap: 10px; align-items: center;
	padding: 12px; border-radius: var(--bs-radius);
	border: 1px solid var(--bs-border); background: rgba(255, 255, 255, .03);
	color: var(--bs-text) !important; transition: border-color .15s, background .15s, transform .15s;
}
.bs_tile:hover, .bs_contact:hover { border-color: var(--bs-accent); background: rgba(175, 103, 0, .08); text-decoration: none; transform: translateY(-1px); }
.bs_tile_icon { font-size: 1.9em; line-height: 1; flex: none; display: inline-flex; color: #fff; }
.bs_svg { width: 1em; height: 1em; display: block; }
.bs_icon_tg_bot { color: rgb(11, 117, 183); } /* FaTelegram colour on black.lc */
.bs_tabs .bs_svg { display: inline-block; vertical-align: -0.15em; }
.bs_tile_body { display: flex; flex-direction: column; min-width: 0; }
.bs_tile_title { font-weight: bold; font-size: 1.08em; }
.bs_tile_desc { color: var(--bs-muted); font-size: .92em; overflow: hidden; text-overflow: ellipsis; }
.bs_tile_count {
	display: inline-block; min-width: 1.6em; padding: 0 6px; margin-left: 4px; border-radius: 10px;
	background: var(--bs-blue); color: #fff; font-size: .8em; text-align: center; vertical-align: middle;
}

.bs_contacts { margin-top: 10px; }
.bs_contacts > summary { cursor: pointer; color: var(--bs-muted); padding: 4px 0; user-select: none; }
.bs_contacts > summary:hover { color: var(--bs-text); }
.bs_contact_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; margin-top: 6px; }
.bs_contact { padding: 9px 10px; }
.bs_contact .bs_tile_icon { font-size: 1.3em; }

/* ---------------------------------------------------------------- list page */
.bs_page_head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 6px 0 12px; }
.bs_page_title { margin: 0; font-size: 1.4em; }
.bs_tabs { display: flex; gap: 6px; }
.bs_tabs a {
	padding: 6px 12px; border-radius: 20px; border: 1px solid var(--bs-border);
	color: var(--bs-text) !important; background: rgba(255, 255, 255, .03);
}
.bs_tabs a:hover { border-color: var(--bs-accent); text-decoration: none; }
.bs_tabs a.bs_tab_active { background: var(--bs-blue); border-color: var(--bs-blue); }
.bs_group_bar { margin-top: 14px; }
.bs_group_count { opacity: .6; font-weight: normal; margin-left: 4px; }

.bs_cards { display: flex; flex-direction: column; gap: 14px; margin: 10px 0 4px; }
.bs_card {
	display: flex; gap: 20px; align-items: center; padding: 24px;
	border: 1px solid var(--bs-border); border-radius: 16px;
	background: linear-gradient(135deg, var(--bs-bg2), var(--bs-bg));
	box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
	transition: border-color .3s, transform .3s, box-shadow .3s;
}
.bs_card:hover { border-color: rgba(175, 103, 0, .7); box-shadow: 0 6px 26px rgba(0, 0, 0, .35); }
.bs_card_pinned { border-color: rgba(175, 103, 0, .6); }
.bs_card_body { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bs_card_icon { font-size: 2.6em; line-height: 1; color: #fff; display: inline-flex; }
.bs_card_title { margin: 0; font-size: 1.7em; font-weight: 600; word-wrap: break-word; }
.bs_card_desc { margin: 0; max-width: 560px; font-size: 1.15em; line-height: 1.55; color: var(--bs-muted); word-wrap: break-word; }
.bs_card_links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.bs_card_link {
	display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 12px; font-size: 1.05em;
	border: 1px solid var(--bs-border); background: rgba(85, 126, 160, .2); color: var(--bs-text) !important;
	transition: background .2s, border-color .2s;
}
.bs_card_link:hover { background: rgba(85, 126, 160, .38); border-color: var(--bs-accent); text-decoration: none; }
.bs_card_media { flex: none; }
.bs_card_media img, .bs_card_media video { display: block; max-width: 250px; max-height: 250px; border-radius: 12px; object-fit: cover; }

/* Fade-up on scroll (class added by JS only, so no-JS users see the cards) */
.bs_fade { opacity: 0; transform: translateY(40px); transition: opacity .35s ease, transform .35s ease, border-color .3s, box-shadow .3s; }
.bs_fade.bs_in { opacity: 1; transform: none; }

.bs_empty, .bs_guest_note { padding: 14px; color: var(--bs-muted); text-align: center; }

@media (max-width: 768px) {
	.bs_hub { padding: 10px; }
	.bs_tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
	.bs_tile { flex-direction: column; text-align: center; gap: 4px; padding: 10px 6px; }
	.bs_tile_desc { display: none; }
	.bs_card { flex-direction: column-reverse; align-items: stretch; padding: 18px; text-align: center; }
	.bs_card_body { align-items: center; }
	.bs_card_links { justify-content: center; }
	.bs_card_media img, .bs_card_media video { margin: 0 auto; max-width: 100%; max-height: 220px; }
	.bs_card_title { font-size: 1.45em; }
}