/**
 * Native homepage layout (Elementor decommission, Phase 4).
 * Replaces the 30-container flex tree of template 180472 with the shell it actually
 * renders as. Every number here was MEASURED off the live Elementor page with
 * playwright-tests/hp-geometry.js — see inc/routing/homepage.php for why the Elementor
 * settings could not be trusted (a declared 79/25 split that sums to 104%, and a mobile
 * padding asymmetry that only shows up in the computed styles).
 *
 * Card visuals (#fff, radius 10, shadow, dark mode) come from the EXISTING `.info-card`
 * rules in style.css + bs-dark-mode.css, which this markup reuses. Only padding and the
 * shell live here.
 */

/* -- Shell: full-bleed, 1700px inner, 10px column gap ---------------------- */
.bs-hp {
	width: 100%;
}
.bs-hp-inner {
	display: flex;
	flex-direction: row;
	gap: 10px;
	max-width: 1700px;
	width: 100%;
	margin: 0 auto;
}

/* The split must be expressed as explicit percentages that OVERFLOW and then shrink —
   exactly what Elementor does (79% + 25% = 104%, shrunk to an effective 75.93/24.07 of
   width-gap). A `flex: 79 1 0` / `flex: 25 1 0` ratio looks equivalent and is not: with
   flex-basis 0 the sidebar cannot shrink below its min-content width (measured 417px),
   so it claimed 417 instead of 407 and stole 10px from the main column at every width.
   With an explicit width + min-width:0 it shrinks properly. Verified by hp-geometry-cmp.js.
   Horizontal padding is 20px, not 10: Elementor nests a second container inside the main
   column that adds another 10px, and the cards sit 20px in from the column edge. */
.bs-hp-main,
.bs-hp-side {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	box-sizing: border-box;
}
.bs-hp-main {
	width: 79%;
	padding: 10px 20px;
}
.bs-hp-side {
	width: 25%;
	padding: 10px;
}

/* -- Cards ----------------------------------------------------------------- */
.bs-hp-card {
	padding: 20px;
	box-sizing: border-box;
}
/* Cards whose last child carries its own bottom spacing (coin list, posts, advertise). */
.bs-hp-card--tight {
	padding: 20px 20px 10px;
}

/* Section headings. These are the ORIGINAL Elementor values, measured off the old render
   and confirmed by the operator — not the .bs-cns-heading spec the CPT singles use.
   Roboto 600 20/30 #171717, and #c8c8d8 in dark mode.
   The margin is measured, not guessed: the original heading sits 30px below the card's
   top edge (20px card padding + 10) with exactly 20px between its baseline box and the
   first chart. It reads as `margin: 0` in the computed styles because Elementor supplied
   that spacing from wrapper containers this markup does not have. */
.bs-hp-heading {
	margin: 10px 0 20px;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	color: #171717;
}
html.bs-dark .bs-hp-heading {
	color: #c8c8d8;
}

/* -- Three-across rows (market charts, prediction cards) ------------------- */
.bs-hp-row3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
	/* Elementor's row sat inside a wrapper that added 10px underneath: measured 30px
	   from the chart's bottom edge to the card's (10 here + the card's 20 padding). */
	margin-bottom: 10px;
}
/* 26px is the whole measured gap, not a delta. Margins here COLLAPSE rather than add,
   twice over: the row's 10px bottom margin against this element's top margin (adjacent
   siblings -> max), and this element's top margin against its child .bs-hp-pp-sl's own
   16px (parent/child -> max). So the largest single value wins and it must be the full
   26px the original renders. */
.bs-hp-predlist { margin-top: 26px; }

/* Newsletter sits in its own narrower box (measured boxed_width 1400px). */
.bs-hp-newsletter {
	max-width: 1400px;
	width: 100%;
	margin: 20px auto;
}

/* -- Breakpoints ----------------------------------------------------------- */
/* 1024: the shell stacks. Matches Elementor's flex_direction_tablet=column, which fires
   at its 1024 breakpoint, NOT at 767. */
@media (max-width: 1024px) {
	.bs-hp-inner {
		flex-direction: column;
		max-width: min(100%, 1140px);
	}
	.bs-hp-main,
	.bs-hp-side { width: 100%; }
}

/* 767: the three-across rows wrap to one column (Elementor's --flex-wrap-mobile). */
@media (max-width: 767px) {
	.bs-hp-row3 { grid-template-columns: 1fr; }

	/* Measured asymmetry, deliberately preserved: the MAIN column loses its padding and
	   gap on mobile so its cards run edge-to-edge, while the SIDEBAR keeps the 10px
	   inset. Equalising them would visibly change the current mobile layout. */
	.bs-hp-main {
		padding: 0;
		gap: 0;
	}
	.bs-hp-main > .bs-hp-card { border-radius: 0; }
}