/**
 * Blackjack hub — /blackjack/
 *
 * Sits on top of game-hub.css, which the Game Hub template already loads and
 * which owns .section-title, .path-card, .icon-card, .g-grid and the
 * cs--coming-soon treatment. Only what is genuinely new to this hub is here:
 * the pending-link state, the computed edge section, the strategy path, the
 * offer strip and the casino rows.
 */

/* ── pending destinations ───────────────────────────────────────────────── */
.bjh-edge, .bjh-strategy-layout, .bjh-offers, .bjh-casinos { --bjh-hair: var( --rule ); }

.path-link.is-pending { color: var( --ink3 ); cursor: default; }
.path-link.is-pending i { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.path-link.is-pending .path-arrow { opacity: .4; }

/* ── the computed section ───────────────────────────────────────────────── */
/* This section sits on section-felt. game-hub.css lightens .section-title and
   bare <p> for that background but knows nothing about the elements below, so
   every one of them states its own colour — inheriting here means near-black
   text on dark green. Same trap as the masterclass port. */
.bjh-edge .bjh-h3,
.bjh-edge .bjh-bust-card,
.bjh-edge .bjh-bust-v,
.bjh-edge .bjh-rulecost-k { color: var( --on-dark ); }
.bjh-edge .bjh-live-cap,
.bjh-edge .bjh-edge-note,
.bjh-edge .bjh-live-fallback { color: rgba( 247, 243, 232, .62 ); }
.bjh-edge .bjh-more { color: var( --on-dark ); }
.bjh-edge .bjh-edge-col p b { color: var( --on-dark ); }

.bjh-edge .bjh-edge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; margin-top: 3.2rem; }
.bjh-edge .bjh-edge-col { min-width: 0; }
.bjh-edge .bjh-h3 { font-family: 'Instrument Serif', serif; font-weight: 500; font-size: 1.3rem; letter-spacing: -.01em; margin: 0 0 .6rem; }
.bjh-edge .bjh-p { font-size: 1.05rem; line-height: 1.65; margin: 0 0 .9rem; color: rgba( 255, 255, 255, .55 ); }
.bjh-edge .bjh-live { margin: 1.2rem 0; }
.bjh-edge .bjh-live-fallback { font-size: .88rem; line-height: 1.7; }
.bjh-edge .bjh-live-cap { font-size: .78rem; line-height: 1.55; margin: .8rem 0 0; }
.bjh-edge .bjh-edge-note { margin: 2rem 0 0; font-size: .78rem; line-height: 1.55; }
.bjh-edge .bjh-edge-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: 1.2rem; }
.bjh-edge .bjh-more { font-size: .88rem; font-weight: 600; text-decoration: none; }

/* dealer bust bars */
.bjh-bust { display: flex; flex-direction: column; gap: .3rem; }
.bjh-bust-row { display: grid; grid-template-columns: 2rem 1fr 3rem; gap: .7rem; align-items: center; }
.bjh-bust-card { font-family: 'Instrument Serif', serif; font-size: 1rem; text-align: center; background: rgba( 247, 243, 232, .12 ); border-radius: 5px; padding: .2rem 0; }
.bjh-bust-track { height: 13px; background: rgba( 247, 243, 232, .12 ); border-radius: 4px; overflow: hidden; }
.bjh-bust-track i { display: block; height: 100%; background: rgba( 247, 243, 232, .42 ); border-radius: 4px; }
.bjh-bust-row.is-weak .bjh-bust-track i { background: #C9A24A; }
.bjh-bust-row.is-weak .bjh-bust-card { background: rgba( 201, 162, 74, .28 ); }
.bjh-bust-v { font-family: 'JetBrains Mono', monospace; font-size: .76rem; text-align: right; }

/* rule cost bars */
.bjh-rulecost { display: flex; flex-direction: column; gap: .45rem; }
.bjh-rulecost-row { display: grid; grid-template-columns: 1fr 5.5rem 3.6rem; gap: .7rem; align-items: center; }
.bjh-rulecost-k { font-size: .86rem; line-height: 1.35; }
.bjh-rulecost-track { height: 13px; background: rgba( 247, 243, 232, .12 ); border-radius: 4px; overflow: hidden; }
.bjh-rulecost-track i { display: block; height: 100%; border-radius: 4px; }
.bjh-rulecost-track i.neg { background: #C97A6A; }
.bjh-rulecost-track i.pos { background: #7FBF8F; }
.bjh-rulecost-v { font-family: 'JetBrains Mono', monospace; font-size: .76rem; text-align: right; }
.bjh-rulecost-v.bad { color: #E08A8A; } .bjh-rulecost-v.good { color: #7FBF8F; }

/* ── the strategy path ──────────────────────────────────────────────────── */
.bjh-strategy-layout { display: grid; grid-template-columns: 1fr 20rem; gap: 2.4rem; align-items: start; margin-top: 1.8rem; }
.bjh-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bjh-steps li { margin: 0; padding: 0; }
.bjh-step { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: baseline; padding: .95rem .6rem; border-bottom: 1px solid var( --rule ); text-decoration: none; color: inherit; border-radius: 8px; transition: background .12s; }
a.bjh-step:hover { background: var( --bg2 ); }
.bjh-step { border-radius: var( --radius-sm ); }
.bjh-step-n { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var( --ink3 ); letter-spacing: .06em; }
.bjh-step-body { min-width: 0; }
.bjh-step-body b { display: block; font-size: 1.02rem; font-weight: 700; color: var( --ink ); margin-bottom: .18rem; }
.bjh-step-body b i { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var( --ink3 ); border: 1px solid var( --rule ); border-radius: 20px; padding: .15rem .45rem; vertical-align: 2px; margin-left: .4rem; font-weight: 400; }
.bjh-step-body span { display: block; font-size: .89rem; line-height: 1.5; color: var( --ink2 ); }
.bjh-step.is-pending { opacity: .55; }

.bjh-aside { background: var( --felt ); border-radius: var( --radius ); padding: 1.5rem 1.6rem; }
.bjh-aside .eyebrow { color: rgba( 244, 239, 230, .45 ); }
.bjh-aside .bjh-h3 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.3rem; margin: .4rem 0 .6rem; color: var( --on-dark ); }
.bjh-aside .bjh-p { font-size: .89rem; line-height: 1.55; color: var( --on-dark-muted ); margin: 0 0 1.1rem; }
.bjh-aside .bjh-more { display: block; margin-top: .9rem; font-size: .88rem; font-weight: 600; color: var( --on-dark ); text-decoration: none; }

/* ── offers ─────────────────────────────────────────────────────────────── */
.bjh-offers { display: grid; grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) ); gap: 1rem; margin-top: 1.8rem; }
.bjh-offer { position: relative; background: var( --surface ); border: 1px solid var( --rule ); border-radius: var( --radius ); padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.bjh-offer.is-pick { border-color: var( --brass ); box-shadow: 0 0 0 1px var( --brass ); }
.bjh-offer-ribbon { position: absolute; top: -.65rem; left: 1.2rem; background: var( --brass ); color: var( --bg ); font-family: 'JetBrains Mono', monospace; font-size: .56rem; letter-spacing: .09em; text-transform: uppercase; padding: .22rem .6rem; border-radius: 20px; }
.bjh-offer-name { font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var( --ink3 ); }
.bjh-offer-headline { font-family: 'Instrument Serif', serif; font-weight: 500; font-size: 1.35rem; line-height: 1.2; color: var( --ink ); }
.bjh-offer-terms { display: flex; flex-direction: column; gap: .25rem; margin: .3rem 0 .6rem; }
.bjh-offer-terms span { font-size: .82rem; color: var( --ink2 ); }
.bjh-offer-terms i { font-style: normal; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var( --ink ); }
.bjh-offer-cta { margin-top: auto; align-self: flex-start; font-size: .82rem; padding: 9px 16px; border-radius: var( --radius-sm ); }

/* ── casinos ────────────────────────────────────────────────────────────── */
.bjh-casinos { display: grid; grid-template-columns: repeat( auto-fit, minmax( 17rem, 1fr ) ); gap: .8rem; margin-top: 1.8rem; }
.bjh-casino { display: grid; grid-template-columns: 44px 1fr auto; gap: .9rem; align-items: center; padding: .9rem 1rem; background: var( --surface ); border: 1px solid var( --rule ); border-radius: var( --radius-sm ); text-decoration: none; color: inherit; transition: transform .12s, box-shadow .12s; }
.bjh-casino:hover { transform: translateY( -2px ); box-shadow: 0 6px 18px rgba( 0, 0, 0, .07 ); }
.bjh-casino-avi { width: 44px; height: 44px; border-radius: var( --radius-sm ); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; overflow: hidden; }
.bjh-casino-body { min-width: 0; }
.bjh-casino-body b { display: block; font-size: .96rem; color: var( --ink ); }
.bjh-casino-body i { display: block; font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var( --ink3 ); margin-top: .12rem; }
.bjh-casino-go { font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var( --felt ); }
.bjh-disclosure { margin: 1.4rem 0 0; font-size: .76rem; line-height: 1.55; color: var( --ink3 ); }

/* ── selection on the felt section ──────────────────────────────────────── */
.bjh-edge ::selection { background: rgba( 212, 180, 74, .4 ); color: var( --on-dark ); }

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media ( max-width: 900px ) {
	.bjh-edge .bjh-edge-grid { grid-template-columns: 1fr; gap: 2rem; }
	.bjh-strategy-layout { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media ( max-width: 600px ) {
	.bjh-rulecost-row { grid-template-columns: 1fr 3.4rem; }
	.bjh-rulecost-track { display: none; }
	.bjh-step { grid-template-columns: 2.2rem 1fr; gap: .7rem; padding: .85rem .3rem; }
	.bjh-casino { grid-template-columns: 40px 1fr; }
	.bjh-casino-go { display: none; }
}

/* A grid whose pages are all still pending reads as broken without a word of
   explanation. The note removes itself as soon as one card goes live. */
.bjh-roadmap { margin: 1.2rem 0 0; font-size: .88rem; line-height: 1.6; color: var( --ink3 ); text-align: center; }
.bjh-roadmap a { color: var( --felt ); font-weight: 600; }

/* ── the basic strategy chart ───────────────────────────────────────────── */
/* Action colours match the strategy calculator exactly, so a cell means the
   same thing on both pages. Three of the four are theme tokens; split has no
   token, so it is the same literal the calculator uses. */
.bjh-chart-wrap { --bjh-hit: var( --red ); --bjh-stand: var( --felt ); --bjh-double: var( --amber ); --bjh-split: #1A3A6B; --bjh-sur: #5A5A5A; margin-top: 1.6rem; }

.bjh-chart-tabs { display: flex; gap: .4rem; margin-bottom: .9rem; flex-wrap: wrap; }
.bjh-chart-tab { font: inherit; font-size: .85rem; padding: .5rem .9rem; background: var( --bg2 ); border: 1px solid var( --rule ); border-radius: var( --radius-sm ); cursor: pointer; color: var( --ink2 ); transition: all .12s; }
.bjh-chart-tab:hover { border-color: var( --felt ); }
.bjh-chart-tab.active { background: var( --felt ); border-color: var( --felt ); color: var( --on-dark ); font-weight: 600; }

.bjh-chart-scroll { overflow-x: auto; }
.bjh-chart-grid { width: 100%; border-collapse: separate; border-spacing: 2px; min-width: 30rem; }
.bjh-chart-grid th { font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 600; color: var( --ink2 ); padding: .35rem; }
.bjh-chart-grid thead th { background: var( --bg2 ); border-radius: 4px; }
.bjh-chart-grid td { text-align: center; padding: .42rem .2rem; border-radius: 4px; }
.bjh-chart-grid td abbr { font-family: 'JetBrains Mono', monospace; font-size: .74rem; font-weight: 700; color: #fff; text-decoration: none; border: 0; cursor: help; }
.bjh-chart-grid .c-hit { background: var( --bjh-hit ); } .bjh-chart-grid .c-stand { background: var( --bjh-stand ); }
.bjh-chart-grid .c-double { background: var( --bjh-double ); } .bjh-chart-grid .c-split { background: var( --bjh-split ); }
.bjh-chart-grid .c-surrender { background: var( --bjh-sur ); }

.bjh-chart-key { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .9rem; font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; color: var( --ink3 ); }
.bjh-chart-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.bjh-chart-key .k-hit { background: var( --bjh-hit ); } .bjh-chart-key .k-stand { background: var( --bjh-stand ); }
.bjh-chart-key .k-double { background: var( --bjh-double ); } .bjh-chart-key .k-split { background: var( --bjh-split ); }

/* Replaced by the solved grid the moment the engine runs. */
.bjh-chart-fallback { font-size: .95rem; line-height: 1.6; color: var( --ink2 ); }
.bjh-chart-fallback ul { margin: .7rem 0 0; padding-left: 1.1rem; }
.bjh-chart-fallback li { margin-bottom: .35rem; }

.bjh-chart-wrap ::selection { background: rgba( 212, 180, 74, .4 ); color: var( --on-dark ); }

@media ( max-width: 600px ) {
	.bjh-chart-grid { min-width: 26rem; border-spacing: 1px; }
	.bjh-chart-grid td { padding: .38rem .1rem; }
}