/**
 * Company single native layout (Elementor decommission, Phase 3).
 * Reproduces Theme Builder template 162168's structure with a native grid:
 * facts grid → 75/25 body (main + sidebar). Every content block is a white bordered
 * "card" (the site-wide block/border design, shared with the country single + the
 * dead-coins/dead-exchanges recipe): 1px border, 10px radius, subtle .bs-dt-like
 * shadow, light + dark. Component styling (.bs-ef fields, .bs-lw-* lists, media
 * carousel, advertise-sidebar, newsletter, posts grid) comes from their own
 * already-loaded stylesheets; this file owns the scaffolding + cards. Spacing is
 * gap-based throughout (no card margins) so nothing double-spaces.
 */

.bs-company-single {
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 10px 40px;
	box-sizing: border-box;
}

/* body.single's overflow-x:hidden makes the body a scroll container, which breaks
   position:sticky (the tab nav). overflow-x:clip prevents the same horizontal
   overflow WITHOUT creating a scroll container. Higher specificity (html body…)
   beats the global body.single rule; on pre-2022 browsers clip is invalid → falls
   back to the inherited hidden (sticky simply no-ops there, still no h-scroll). */
html body.single-company {
	overflow-x: clip;
}

/* Full-width grey band behind the facts + body cards — matches the original
   #f4f4f4 section background (edge-to-edge) so the white cards have contrast.
   margin-top is the white gap under the tab nav. The ::before full-bleeds via inset
   calc (no 100vw → no scrollbar overflow); content stays inset to the container. */
.bs-cs-band {
	position: relative;
	z-index: 0;
	margin-top: 20px;
	padding: 24px 0 40px;
}
.bs-cs-band::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: calc(-50vw + 50%);
	right: calc(-50vw + 50%);
	background: #f4f4f4;
}

/* ── Card shell (every content block) ─────────────────── */
.bs-cs-card,
.bs-company-facts__col,
.bs-cs-section {
	background: #fff;
	border: 1px solid #e4e7ed;
	border-radius: 10px;
	padding: 20px; /* matches the original Elementor cards (was 28px — too airy) */
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
	box-sizing: border-box;
}

/* Sticky tab nav (quick jumps) — pinned to the top while scrolling (the site
   header is static and scrolls away). Full-bleed background matching the page so it
   cleanly covers content behind it; the list already scrolls horizontally on mobile
   (bs-coin-tabs.css overflow-x:auto). */
.bs-company-single .bs-company-tab-nav {
	position: sticky;
	top: 0;
	z-index: 30;
	margin: 20px 0 0;
	padding: 12px 0;
}
.bs-company-single .bs-company-tab-nav::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: calc(-50vw + 50%);
	right: calc(-50vw + 50%);
	background: #fff;
	border-bottom: 1px solid #e4e7ed;
}
html.bs-dark .bs-company-single .bs-company-tab-nav::before {
	background: #141422;
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Anchor targets for the sticky tab nav. scroll-margin-top clears the pinned nav. */
.bs-cs-anchor {
	display: block;
	visibility: hidden;
	height: 0;
	scroll-margin-top: 28px;
}

/* ── Section headings (inside cards) ──────────────────── */
/* Body-section headings — one H2 spec: Roboto Flex 500, 24px / 29px line-height. */
.bs-cs-heading,
.bs-cs-heading--p {
	margin: 0 0 18px;
	scroll-margin-top: 90px;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 29px;
}
.bs-cs-heading--p {
	margin-bottom: 14px;
}

/* ── Facts grid (4 cards, equal height) ───────────────── */
.bs-company-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	align-items: stretch;
	margin: 0 0 10px;
}
.bs-company-facts__col {
	min-width: 0;
}
.bs-cf-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 16px;
	line-height: 1.3;
}
.bs-cf-title--sub {
	margin-top: 24px;
}
.bs-cf-fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bs-cf-fields .bs-ef {
	margin: 0;
}
@media (max-width: 900px) {
	.bs-company-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.bs-company-facts { grid-template-columns: 1fr; }
}

/* ── Body: shares the facts grid's 4-column track so the sidebar lines up exactly
   under the 4th facts card (main spans cols 1-3, sidebar is col 4). ── */
.bs-cs-body {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	align-items: start;
}
.bs-cs-main {
	grid-column: 1 / 4;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bs-cs-sidebar {
	grid-column: 4 / 5;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
@media (max-width: 1024px) {
	.bs-cs-body { grid-template-columns: 1fr; }
	.bs-cs-main,
	.bs-cs-sidebar { grid-column: auto; }
}

/* About | FAQ side-by-side row (stacks on mobile). */
.bs-cs-subcols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	align-items: start;
}
@media (max-width: 768px) {
	.bs-cs-subcols { grid-template-columns: 1fr; }
}

/* About card: What is X? + clamped description + Read-more button. .cpt_description
   clamp/fade come from style.css (global); public.js toggles them via #description-
   readmore. Reproduces the original Elementor button (small brand-blue pill). */
.bs-cs-about .bs-cs-readmore {
	display: inline-block;
	margin-top: 14px;
	padding: 7px 16px;
	background: #1db0e1;
	color: #fff;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
}
.bs-cs-about .bs-cs-readmore:hover {
	background: #189bc7;
	color: #fff;
}

/* Posts sections: h2 heading + "see more" link on one row, grid below. */
.bs-cs-posts-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.bs-cs-posts-head .bs-cs-heading {
	margin: 0;
}
.bs-cs-morelink {
	margin: 0;
	font-size: 14px;
}
.bs-cs-morelink a {
	color: #206389;
	text-decoration: none;
	white-space: nowrap;
}
.bs-cs-morelink a:hover {
	text-decoration: underline;
}
/* The posts grid's own <h4> label (unused here — we render our own head), keep tidy. */
.bs-cs-posts .bs-posts-grid { margin-top: 0; }

/* Newsletter: the widget carries its own visual container, so no extra card. */
.bs-cs-newsletter-inline > * {
	margin: 0;
}

/* ── Sidebar: "All company categories" tag cloud ──────── */
.bs-company-single .bs-all-tags-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bs-company-single .bs-all-tags-cloud .related-tags {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border: 1px solid #e4e7ed;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.2;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease;
}
.bs-company-single .bs-all-tags-cloud .related-tags:hover {
	border-color: #1db0e1;
}
.bs-company-single .bs-all-tags-cloud .tag-icon svg {
	width: 15px;
	height: 15px;
}

/* ── Dark mode ────────────────────────────────────────── */
html.bs-dark .bs-cs-card,
html.bs-dark .bs-company-facts__col,
html.bs-dark .bs-cs-section {
	background: #22223a;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
html.bs-dark .bs-cs-band::before {
	background: #16161f;
}
html.bs-dark .bs-company-single .bs-all-tags-cloud .related-tags {
	border-color: rgba(255, 255, 255, 0.12);
}