/**
 * Buy hub page — Figma 864:7759 (desktop) / 864:8425 (mobile).
 * Hero: 864:7790 (desktop) / 864:8447 (mobile).
 * Tokens from base.css. Coin/method/country lists are static stubs for now
 * (wire to xcoins-core Data Matrix later).
 */

body.page-template-buy-hub,
body.page-template-page-templatesbuy-hub-php {
	background: var(--xc-rich-black);
	color: var(--xc-off-white);
	font-family: var(--xc-body);
	-webkit-font-smoothing: antialiased;
}

.buy-hub {
	background: var(--xc-rich-black);
	color: var(--xc-off-white);
}
.buy-hub .xc-container {
	max-width: 1240px;
}

/* Coins section aligns to the 1240 column (Figma x=100 on 1440) */
.buy-coins .xc-container {
	padding-inline: 0;
}
@media (max-width: 1295px) {
	.buy-coins .xc-container {
		padding-inline: 28px;
	}
}

/* ---------- Breadcrumbs (Figma 864:7807 / 864:8450) ---------- */
.buy-crumbs {
	display: flex;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	min-height: 52px;
	padding: 16px 0;
	font-family: var(--xc-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--xc-slate);
}
.buy-crumbs a {
	color: var(--xc-slate);
}
.buy-crumbs a:hover {
	color: var(--xc-off-white);
}
.buy-crumbs__sep {
	display: inline-flex;
	flex: 0 0 12px;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	color: var(--xc-slate);
}
.buy-crumbs__sep svg {
	display: block;
	width: 100%;
	height: 100%;
}
.buy-crumbs [aria-current="page"] {
	color: var(--xc-off-white);
}

/* ---------- Hero — desktop 864:7790 (1440×526) ---------- */
.buy-hero {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	min-height: 526px;
	padding: 0;
	/* Figma: linear-gradient(221.26deg, True Blue 12.42%, Rich Black 86.27%) */
	background: linear-gradient(
		221.26deg,
		var(--xc-true-blue) 12.423%,
		var(--xc-rich-black) 86.271%
	);
}
.buy-hero__visual {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.buy-hero__visual img {
	position: absolute;
	/* Figma 864:7791: x=542 on 1440 → right:0; y=-31; 898×599; opacity 80% */
	right: 0;
	top: -31px;
	width: 898px;
	height: 599px;
	max-width: none;
	object-fit: cover;
	opacity: .8;
}
.buy-hero__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/* Figma 864:7792: y=366, h=160 on 526-tall frame */
	height: 160px;
	z-index: 1;
	background: linear-gradient(180deg, rgba(17, 22, 32, 0) 0%, var(--xc-rich-black) 100%);
	pointer-events: none;
}
.buy-hero .xc-container {
	position: relative;
	z-index: 2;
	/* Figma content flush to 1240 column (x=100 on 1440) — no extra 28px inset */
	padding-inline: 0;
}
.buy-hero__copy {
	/* breadcrumbs frame ends at y=52; copy starts at y=147 → 95px gap */
	margin-top: 95px;
	max-width: 656px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.buy-hero h1 {
	margin: 0;
	font-family: var(--xc-display);
	font-weight: 800;
	font-size: 76px;
	line-height: 1;
	letter-spacing: 0;
	color: var(--xc-off-white);
	font-variation-settings: "wdth" 100;
}
.buy-hero__sub {
	margin: 0;
	max-width: 560px;
	font-family: var(--xc-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
	color: #cfd6e2;
}
/* Figma 864:7800 — 440×64, p=21, bg dark-grey/50, border off-white/10, r=100 */
.buy-search {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	max-width: 440px;
	height: 64px;
	margin: 0;
	padding: 0 21px;
	background: rgba(31, 36, 45, .5);
	/* stroke + glint from .glass-border; keep pill radius */
	border-radius: 100px;
}
.buy-search__icon {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	line-height: 0;
}
.buy-search__icon svg {
	display: block;
	width: 16px;
	height: 16px;
}
.buy-search input {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: 0;
	color: var(--xc-off-white);
	font-family: var(--xc-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}
.buy-search input::placeholder {
	color: rgba(255, 255, 255, .5);
}

.buy-hub .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ---------- Section chrome ---------- */
.buy-section {
	padding: 64px 0;
}
.buy-section__head {
	margin: 0 0 24px;
	max-width: 820px;
}
.buy-section__eyebrow {
	display: block;
	margin: 0 0 12px;
	font-family: var(--xc-body);
	font-size: 14px;
	line-height: 1.25;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--xc-bright-blue);
}
.buy-section__head h2 {
	margin: 0 0 16px;
	font-family: var(--xc-display);
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	color: var(--xc-off-white);
}
.buy-section__sub {
	margin: 0;
	font-size: 16px;
	line-height: 1.25;
	color: #cfd6e2;
}
.buy-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 16px;
	font-family: var(--xc-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	color: var(--xc-bright-blue);
	text-decoration: none;
}
.buy-link:hover {
	color: #4fb5fd;
	text-decoration: none;
}
.buy-link svg {
	display: block;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}

/* ---------- Coin grid — Figma 864:7814 / 864:8470 ---------- */
.buy-coins__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 19px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.buy-coins__grid > li.is-hidden,
.buy-coins__grid > li[hidden] {
	display: none;
}
.buy-coin {
	/* Desktop card: stacked left column + % on the right */
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"id   chg"
		"price chg"
		"cta  chg";
	column-gap: 12px;
	row-gap: 16px;
	align-items: start;
	box-sizing: border-box;
	min-height: 151px;
	padding: 24px;
	border-radius: 12px;
	background: rgba(249, 253, 255, .05);
	text-decoration: none;
	color: inherit;
	transition: border-color .2s ease, background .2s ease;
}
.buy-coin:hover {
	border-color: rgba(26, 156, 252, .45);
	background: rgba(249, 253, 255, .08);
}
.buy-coin__id {
	grid-area: id;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}
.buy-coin__labels {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.buy-coin__icon {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, var(--xc-true-blue), var(--xc-bright-blue));
	display: grid;
	place-items: center;
	font-family: var(--xc-display);
	font-weight: 700;
	font-size: 11px;
	color: #fff;
	line-height: 0;
}
.buy-coin__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.buy-coin__name {
	display: block;
	font-family: var(--xc-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: var(--xc-off-white);
	font-variation-settings: "wdth" 100;
}
.buy-coin__symbol {
	display: block;
	font-family: var(--xc-body);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--xc-slate);
}
.buy-coin__meta {
	display: contents;
}
.buy-coin__price {
	grid-area: price;
	margin: 0;
	font-family: var(--xc-display);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	color: var(--xc-off-white);
	font-variation-settings: "wdth" 100;
}
.buy-coin__cta {
	grid-area: cta;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--xc-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	color: var(--xc-bright-blue);
	font-variation-settings: "wdth" 100;
}
.buy-coin__cta svg {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}
/*
 * 24h change — Figma 864:7991 (down, red) / 864:7824 (up, green).
 * One class per direction, all three explicit: assets/js/xcoins-rates.js toggles
 * them when it refreshes, so no state may rely on being the unclassed default.
 */
.buy-coin__chg {
	grid-area: chg;
	align-self: center;
	justify-self: end;
	padding: 8px;
	font-family: var(--xc-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--xc-slate);
	white-space: nowrap;
}
.buy-coin__chg.is-up {
	color: #00b67a;
}
.buy-coin__chg.is-down {
	color: #e04848;
}
.buy-coin__chg.is-flat {
	color: var(--xc-slate);
}

/* ---------- Routes — Figma 864:8110 / 864:8736 ---------- */
.buy-routes {
	padding: 64px 0;
}
.buy-routes .xc-container {
	padding-inline: 0;
}
@media (max-width: 1295px) {
	.buy-routes .xc-container {
		padding-inline: 28px;
	}
}
.buy-routes__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 25px;
	align-items: stretch;
}
.buy-route-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-sizing: border-box;
	min-height: 300px;
	padding: 40px 24px;
	border-radius: 12px;
	background: rgba(249, 253, 255, .05);
}
.buy-route-card__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.buy-route-card h2 {
	margin: 0;
	font-family: var(--xc-display);
	font-weight: 700;
	font-size: 32px;
	line-height: 1;
	color: var(--xc-off-white);
	font-variation-settings: "wdth" 100;
}
.buy-route-card__head p {
	margin: 0;
	font-family: var(--xc-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--xc-slate);
}
.buy-pills {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	/* Desktop chip block height from Figma (88px / two rows) */
	min-height: 88px;
}
.buy-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 38px;
	padding: 12px 20px;
	border-radius: 21.5px;
	border: 1px solid var(--xc-slate);
	background: transparent;
	color: var(--xc-soft-white);
	font-family: var(--xc-display);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	font-variation-settings: "wdth" 100;
	transition: border-color .2s ease, color .2s ease;
}
.buy-pill:hover {
	border-color: var(--xc-bright-blue);
	color: var(--xc-bright-blue);
}
.buy-route-card .buy-link {
	margin-top: auto;
	padding: 10px 12px 10px 0;
	font-size: 16px;
	font-weight: 700;
}

/* ---------- How it works — Figma 864:8161 / 864:8787 ---------- */
.buy-steps .xc-container {
	padding-inline: 0;
}
@media (max-width: 1295px) {
	.buy-steps .xc-container {
		padding-inline: 28px;
	}
}
.buy-steps .buy-section__head {
	/* Figma: head ends; grid at y=150 → 40px gap after 110px head */
	margin-bottom: 40px;
}
.buy-steps__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.buy-step {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	box-sizing: border-box;
	min-height: 266px;
	padding: 24px;
	background: rgba(249, 253, 255, .05);
	/* border + glint from .glass-border */
}
.buy-step__copy {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 7.4px;
	max-width: 210px;
}
.buy-step__label {
	display: block;
	margin: 0;
	font-family: var(--xc-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	color: var(--xc-bright-blue);
	font-variation-settings: "wdth" 100;
}
.buy-step h3 {
	margin: 0;
	font-family: var(--xc-display);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	color: var(--xc-off-white);
	font-variation-settings: "wdth" 100;
}
.buy-step p {
	margin: 0;
	font-family: var(--xc-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--xc-slate);
}
.buy-step__visual {
	position: relative;
	flex: 0 0 132px;
	width: 132px;
	align-self: stretch;
	min-height: 218px;
	pointer-events: none;
}
.buy-step__art {
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	width: auto;
	height: auto;
	max-width: 132px;
	object-fit: contain;
}
.buy-step:nth-child(1) .buy-step__art {
	width: 132px;
	height: 98px;
}
.buy-step:nth-child(2) .buy-step__art {
	width: 127px;
	height: 150px;
	right: 2px;
}
.buy-step:nth-child(3) .buy-step__art {
	width: 130px;
	height: 205px;
	bottom: 6px;
}
.buy-step__art--ph {
	inset: auto 0 0 auto;
	width: 100px;
	height: 120px;
	border-radius: 12px;
	background: linear-gradient(160deg, rgba(26, 156, 252, .35), transparent 70%);
}
.buy-steps .buy-link {
	margin-top: 40px;
}

/* FAQ styles live in sections-shared.css (.xc-faq*) — shared with T1 + other hubs. */

/* Hero: keep side gutters when the 1240 column can't float with 100px margins */
@media (max-width: 1295px) {
	.buy-hero .xc-container {
		padding-inline: 28px;
	}
}

/* ---------- Mobile — Figma 864:8447 (375×481) ---------- */
@media (max-width: 960px) {
	.buy-hero {
		/* mobile frame height; bottom fade + visual sit under copy */
		min-height: 481px;
		padding: 0;
		/* Figma: gradient top→bottom rich-black → true-blue */
		background: linear-gradient(
			180deg,
			var(--xc-rich-black) 0%,
			var(--xc-true-blue) 100%
		);
	}
	.buy-hero .xc-container {
		padding-inline: 16px;
	}
	.buy-coins .xc-container {
		padding-inline: 16px;
	}
	.buy-hero__copy {
		/* crumbs end ~52; copy at y=56 → ~4px */
		margin-top: 4px;
		max-width: none;
	}
	.buy-hero h1 {
		font-size: 40px;
	}
	.buy-hero__sub {
		max-width: none;
	}
	.buy-hero__visual img {
		/* Figma 864:8448: 472.5×315 at x=-61, y=181; opacity 60% */
		left: 50%;
		right: auto;
		top: 181px;
		width: 472.5px;
		height: 315px;
		transform: translateX(calc(-50% - 12.25px));
		opacity: .6;
	}
	.buy-hero__fade {
		/* soft lift under the coins into rich black */
		height: 180px;
		background: linear-gradient(180deg, rgba(17, 22, 32, 0) 0%, var(--xc-rich-black) 100%);
	}
	.buy-search {
		max-width: none;
	}
	.buy-section {
		padding: 32px 0;
	}
	.buy-section__head h2 {
		font-size: 24px;
	}
	.buy-coins__grid {
		grid-template-columns: 1fr;
		gap: 12px;
		padding-top: 12px;
	}
	/* Mobile row: [id] …… [price/chg] [arrow] — Figma 864:8470 */
	.buy-coin {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 76px;
		padding: 17px 16px;
		grid-template-columns: none;
		grid-template-areas: none;
		row-gap: 0;
		column-gap: 0;
	}
	.buy-coin__id {
		flex: 1 1 auto;
		min-width: 0;
	}
	.buy-coin__meta {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 4px;
		flex: 0 0 auto;
	}
	.buy-coin__price {
		font-size: 16px;
		line-height: 1.25;
	}
	.buy-coin__chg {
		padding: 0;
		align-self: auto;
		justify-self: auto;
	}
	.buy-coin__cta-label {
		display: none;
	}
	.buy-coin__cta {
		flex: 0 0 16px;
		width: 16px;
		height: 16px;
		overflow: hidden;
	}
	.buy-routes {
		padding: 32px 0;
	}
	.buy-routes .xc-container {
		padding-inline: 16px;
	}
	.buy-routes__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.buy-route-card {
		min-height: 0;
		padding: 40px 24px;
	}
	.buy-route-card h2 {
		font-size: 32px;
	}
	.buy-pills {
		min-height: 138px;
	}
	.buy-steps .xc-container {
		padding-inline: 16px;
	}
	.buy-steps .buy-section__head {
		margin-bottom: 12px;
	}
	.buy-steps .buy-section__head h2 {
		font-size: 24px;
	}
	.buy-steps__grid {
		grid-template-columns: 1fr;
		gap: 12px;
		padding-top: 12px;
	}
	.buy-step {
		min-height: 266px;
	}
	.buy-step__copy {
		max-width: none;
	}
	.buy-steps .buy-link {
		margin-top: 12px;
	}
}

@media (max-width: 480px) {
	.buy-hub .xc-container {
		padding-left: 16px;
		padding-right: 16px;
	}
}