/**
 * Exchange single native layout (Elementor decommission, Phase 3).
 * Reproduces Theme Builder template 163662's structure with a native grid:
 * facts grid → 74.5/24.5 body (main + sidebar). Every content block is a white
 * bordered "card" (shared card design with country/company/wallet singles): 1px
 * border, 10px radius, subtle .bs-dt-like shadow, light + dark. Component styling
 * (.bs-ef fields, copy buttons, .bs-lw-* lists, media carousel, advertise-sidebar,
 * newsletter, posts grid, .bs-dt markets table / .bs-ec-* fallback, .bs-gh-* github)
 * comes from their own already-loaded stylesheets; this file owns the scaffolding +
 * cards. Gap-based spacing (no card margins) so nothing double-spaces. Self-contained.
 */

.bs-exchange-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. */
html body.single-exchange {
	overflow-x: clip;
}

/* Full-width grey band behind the facts + body cards (matches the original #f4f4f4
   section background). ::before full-bleeds via inset calc (no 100vw → no scrollbar). */
.bs-es-band {
	position: relative;
	z-index: 0;
	margin-top: 20px;
	padding: 24px 0 40px;
}
.bs-es-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-es-card,
.bs-exchange-facts__col,
.bs-es-section {
	background: #fff;
	border: 1px solid #e4e7ed;
	border-radius: 10px;
	padding: 20px;
	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. */
.bs-exchange-single .bs-exchange-tab-nav {
	position: sticky;
	top: 0;
	z-index: 30;
	margin: 20px 0 0;
	padding: 12px 0;
}
.bs-exchange-single .bs-exchange-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-exchange-single .bs-exchange-tab-nav::before {
	background: #141422;
	border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* Hide the Claim/Update CTA pill once the nav pins to the top (operator pattern). */
.bs-exchange-single .bs-exchange-tab-nav--stuck .bs-coin-tab-nav__item:has(> .bs-coin-tab-nav__link--cta) {
	display: none;
}

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

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

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

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

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

/* About card: heading + full description (no clamp/read-more on exchanges). */
.bs-es-about-desc :last-child { margin-bottom: 0; }

/* Posts sections: h2 heading + "see more" link on one row, grid below. */
.bs-es-posts-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.bs-es-posts-head .bs-es-heading {
	margin: 0;
}
.bs-es-morelink {
	margin: 0;
	font-size: 14px;
}
.bs-es-morelink a {
	color: #206389;
	text-decoration: none;
	white-space: nowrap;
}
.bs-es-morelink a:hover {
	text-decoration: underline;
}
.bs-es-posts .bs-posts-grid { margin-top: 0; }

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

/* ── Markets card (full-width): holds either the CoinPaprika markets table
   (#bs-em-widget, deliberately borderless) or the no-CP supported-coins fallback
   (.bs-ec-box, self-bordered). Wrap both in ONE card and neutralise the fallback's
   own border so it isn't a box-in-box; the CP toolbar's own top padding is dropped
   since the card supplies it. ── */
.bs-es-markets .bs-ec-box {
	border: 0;
	border-radius: 0;
	background: transparent;
}
.bs-es-markets .bs-ec-title { margin-top: 0; }
.bs-es-markets #bs-em-widget .bs-dt-toolbar { padding-top: 0; }
.bs-es-markets .bs-ec-grid { padding-left: 0; padding-right: 0; }
.bs-es-markets .bs-ec-bar,
.bs-es-markets .bs-ec-foot { padding-left: 0; padding-right: 0; }

/* github-statistics card: the widget content.php carries all .bs-gh-* styling. */
.bs-es-github .bs-gh-wrap { margin-top: 4px; }

/* Media block — moved from the sidebar INTO the About card, under the description,
   at the description width (16/9 carousel sizes to the About column; lone-YT facade
   gets an explicit aspect box so it can't collapse). Matches the wallet single. */
.bs-es-media { margin-top: 16px; }
.bs-es-media-heading {
	margin: 0 0 10px;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
}
.bs-es-media > .bs-yt-facade {
	display: block;
	aspect-ratio: 16 / 9;
	height: auto;
	border-radius: 8px;
	overflow: hidden;
}

/* ── Dark mode ────────────────────────────────────────── */
html.bs-dark .bs-es-card,
html.bs-dark .bs-exchange-facts__col,
html.bs-dark .bs-es-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-es-band::before {
	background: #16161f;
}