/**
 * Coin single native layout (Elementor decommission, Phase 3 — the last + biggest CPT).
 * Reproduces Theme Builder template 161481's structure with a native grid:
 * facts grid (4 cards, historical-prices embedded in col 1) -> 74.5/24.5 body
 * (main + sidebar). Every content block is a white bordered "card" (shared card
 * design with country/company/wallet/exchange 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 exchange-list table, .bs-gh-* github, price-chart / historical /
 * what-if / currency-converter / voting / blockchain-tokens / get-verified widget
 * markup) comes from their own already-loaded stylesheets; this file owns the
 * scaffolding + cards. Gap-based spacing (no card margins). Self-contained.
 *
 * Prefix: .bs-cns-* (coin native single) — distinct from .bs-cs-* (country/company),
 * .bs-es-* (exchange), .bs-ws-* (wallet), and the .bs-coin-* hero/tab-nav classes.
 */

.bs-coin-single {
	max-width: 1500px;
	margin: 0 auto;
	/* 10px top matches the price-prediction sub-page's container top spacing so the hero
	   starts at the same Y on both (pixel-perfect switch via the blue buttons). */
	padding: 10px 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-coin {
	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-cns-band {
	position: relative;
	z-index: 0;
	margin-top: 20px;
	padding: 24px 0 40px;
}
.bs-cns-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-cns-card,
.bs-coin-facts__col,
.bs-cns-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. Scoped to
   .bs-coin-single so it never affects the price-prediction sub-page's nav (which
   is not wrapped in .bs-coin-single). Overrides the critical-CSS margin. */
.bs-coin-single .bs-coin-tab-nav {
	position: sticky;
	top: 0;
	z-index: 30;
	/* margin-top 29 + padding-top 12 = 41px above the tab row, matching the price-
	   prediction sub-page's nav resting position (its static nav sits ~41px below the
	   hero) so the tab bar lands at the same Y on both pages; sticky only kicks in on
	   scroll, so the resting switch stays pixel-perfect. */
	margin: 29px 0 0;
	padding: 12px 0;
}
.bs-coin-single .bs-coin-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-coin-single .bs-coin-tab-nav::before {
	background: #141422;
	border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* Hide the Claim & Verify / Update Coin Data CTA pill once the nav pins to the top
   (operator pattern from wallet/exchange), but KEEP the Price Prediction pill visible in
   the sticky bar (operator: mirrors the "Coin Overview" pill kept on the prediction page). */
.bs-coin-single .bs-coin-tab-nav--stuck .bs-coin-tab-nav__item:has(> .bs-coin-tab-nav__link--cta):not(.bs-coin-tab-nav__item--pred-cta) {
	display: none;
}

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

/* -- Section headings (inside cards) — one H2 spec: Roboto Flex 500 24/29. -- */
.bs-cns-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-coin-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	align-items: stretch;
	margin: 0 0 10px;
}
.bs-coin-facts__col {
	min-width: 0;
}
.bs-ef-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 16px;
	line-height: 1.3;
}
/* Every heading group after the first in a facts column gets top separation
   (Price Statistics in col1; Fully Diluted / Coin Supply / Explorers in col2;
   Extra Links in col3). */
.bs-coin-facts__col .bs-ef-title:not(:first-child) {
	margin-top: 24px;
}
.bs-ef-fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bs-ef-fields .bs-ef {
	margin: 0;
}
/* historical-prices embedded under "Price Statistics" in facts col 1. */
.bs-coin-facts__col .bs-historical-price {
	margin-top: 4px;
}
@media (max-width: 900px) {
	.bs-coin-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.bs-coin-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-cns-body {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	align-items: start;
}
.bs-cns-main {
	grid-column: 1 / 4;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bs-cns-sidebar {
	grid-column: 4 / 5;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
@media (max-width: 1024px) {
	.bs-cns-body { grid-template-columns: 1fr; }
	.bs-cns-main,
	.bs-cns-sidebar { grid-column: auto; }
}

/* Two-up rows (About | What-If, FAQ | Media). Stack on mobile. */
.bs-cns-subcols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	align-items: start;
}
@media (max-width: 768px) {
	.bs-cns-subcols { grid-template-columns: 1fr; }
}

/* About card: heading + clamped description + read-more (globals in style.css +
   public.js drive the clamp; assets.php pre-decides the unclamped case in <head>). */
.bs-cns-about .cpt_description { margin-top: 4px; }
.bs-cns-readmore {
	display: inline-block;
	margin-top: 8px;
	color: #206389;
	cursor: pointer;
	font-weight: 500;
}

/* What-If + Currency-Converter card. The what-if widget self-hides the WHOLE card
   (class .bs-hide-no-mcap) via an inline <style> when the coin has no market data. */
.bs-cns-whatif .bs-cns-heading { margin-top: 18px; }

/* Price Chart card: heading + "Set Live Price Alert" pill + the uPlot chart. */
.bs-cns-pricechart-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.bs-cns-pricechart-head .bs-cns-heading { margin: 0; }
/* `a.` element prefix + :link,:visited (specificity 0,2,1) so the white text out-
   specifies the theme's global `.single a:link{color:#2B7BB9}` (also 0,2,1) — bare
   `.bs-cns-alert-btn:link` (0,2,0) loses and the label falls back to blue in light mode.
   Same gotcha-8 light-mode fix as the company/exchange CTAs. */
a.bs-cns-alert-btn,
a.bs-cns-alert-btn:link,
a.bs-cns-alert-btn:visited {
	display: inline-block;
	background: #206389;
	color: #fff;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.4;
}
a.bs-cns-alert-btn:hover { background: #1a5273; color: #fff; }

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

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

/* Markets card: the exchange-list widget renders a .bs-dt datatable (self-bordered,
   radius 20px). Fold its heading into this card and neutralise the inner box so it's
   not a box-in-box (mirrors the exchange single markets-card trick). */
.bs-cns-markets .bs-dt {
	border: 0;
	box-shadow: none;
	border-radius: 0;
	background: transparent;
}
.bs-cns-markets .bs-dt-title { margin-top: 0; }

/* Empty-section fallback lines — shown under the "{Ticker} Markets…" heading (no tracked
   exchange listings) or the "{Name} Price Chart" heading (no price data source) instead of
   a blank card. Body copy, so they must read exactly like the About description: colour,
   font-size and line-height are deliberately NOT set here, because .cpt_description does
   not set them either — both simply inherit from body (16px / 24px / #333, and #e4e4ed in
   dark mode). That inheritance is also why no html.bs-dark override is needed; adding one
   would re-introduce the drift. Only the box metrics and the italic belong here.

   Italic is the ONE intentional difference (operator request): it marks the line as a
   notice rather than content, while keeping the body-copy colour/size — unlike the earlier
   grey + 15px treatment, which read as a different, lighter font. Keep this to font-style;
   do not re-add colour or font-size here. */
.bs-cns-no-markets,
.bs-cns-no-chart {
	margin: 0;
	padding: 4px 0 0;
	font-style: italic;
}

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

/* Media (youtube carousel / facade) — moved INTO the About card, under the
   description + read-more (wallet/exchange post-cutover pattern). The whole
   .bs-cns-media block self-hides via #youtube-container when there's no video, so
   the description stays. Sized to the About column (16/9). */
.bs-cns-media { margin-top: 16px; }
.bs-cns-media-heading {
	margin: 0 0 10px;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
}
.bs-cns-media > .bs-yt-facade {
	display: block;
	aspect-ratio: 16 / 9;
	height: auto;
	border-radius: 8px;
	overflow: hidden;
}

/* Full-width FAQ card (below the About | What-If row): lay the Q&A pairs out in two
   columns. Each .bs-faq-item (question + its collapsible answer, wrapped by
   content.php when $GLOBALS['bs_faq_two_col'] is set) is one grid cell, so a
   question is never split from its answer; align-items:start keeps a short item in
   one column from stretching to a taller sibling's height. Stacks to 1 col on mobile. */
.bs-cns-faq .bs-faq-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 40px;
	align-items: start;
}
.bs-cns-faq .bs-faq-item { min-width: 0; }
@media (max-width: 768px) {
	.bs-cns-faq .bs-faq-grid { grid-template-columns: 1fr; }
}

/* -- Dark mode ----------------------------------------- */
html.bs-dark .bs-cns-card,
html.bs-dark .bs-coin-facts__col,
html.bs-dark .bs-cns-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-cns-band::before {
	background: #16161f;
}
html.bs-dark .bs-cns-readmore,
html.bs-dark .bs-cns-morelink a { color: #6cb6e0; }