/* ============================================================
   BLACKJACK SCHOOL (v2)  -  page-blackjack-school.php
   Loads AFTER article.css, so it inherits the .av2- shell and the
   .av2-prose treatment for raw post_content. Two halves:

   1. .bjs- CHROME: the school-specific navigation dressed in the v2
      idiom - hero eyebrow, course table-of-contents card, prev/next
      pager. New markup, token-based.

   2. .bjs-prose CONTENT SUPPORT: the lesson bodies are stored HTML we
      must not edit, and several lessons embed the GameMaster's
      colour-coded basic-strategy charts and a legacy bootstrap grid.
      The legacy stylesheet (style.css / bootstrap) does NOT load on the
      v2 stack, so the handful of content classes those charts rely on
      are reproduced here, scoped under .bjs-prose so nothing leaks to
      the chrome. Chart colours are copied verbatim from the legacy
      .decks-dealer rules to keep their instructional meaning
      (green = hit/split-yes, red = stand/no, blue = double,
      purple = split, orange = surrender).
   ============================================================ */

/* ---------- hero ---------- */
.bjs-hero .bjs-eyebrow {
  display: inline-block;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bji-blue-300);
  margin-bottom: var(--bji-space-2);
}
.bjs-hero h1 { margin-top: 0; }
.bjs-hero .av2-byline { margin-top: var(--bji-space-4); }

/* ---------- course table of contents ---------- */
.bjs-toc { margin: 0 0 var(--bji-space-6); }
.bjs-toc-box {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  box-shadow: var(--bji-shadow-sm);
  overflow: hidden;
}
.bjs-toc-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bji-space-3);
  padding: var(--bji-space-4) var(--bji-space-5);
  cursor: pointer;
  list-style: none;
  font-weight: var(--bji-weight-bold);
  color: var(--bji-navy-900);
}
.bjs-toc-summary::-webkit-details-marker { display: none; }
.bjs-toc-summary::after {
  content: "";
  width: 9px; height: 9px;
  margin-left: auto;
  border-right: 2px solid var(--bji-gray-500);
  border-bottom: 2px solid var(--bji-gray-500);
  transform: rotate(45deg);
  transition: transform var(--bji-duration) var(--bji-ease);
  flex: none;
  align-self: center;
}
.bjs-toc-box[open] .bjs-toc-summary::after { transform: rotate(-135deg); }
.bjs-toc-title { font-size: var(--bji-text-lg); }
.bjs-toc-count {
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bji-text-faint);
}
.bjs-toc-list {
  list-style: none;
  margin: 0;
  padding: var(--bji-space-2) var(--bji-space-3) var(--bji-space-4);
  border-top: 1px solid var(--bji-border);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px var(--bji-space-3);
}
.bjs-toc-list li { margin: 0; }
.bjs-toc-link {
  display: flex;
  align-items: center;
  gap: var(--bji-space-3);
  padding: var(--bji-space-2) var(--bji-space-2);
  border-radius: var(--bji-radius-sm);
  text-decoration: none;
  color: var(--bji-text);
  font-size: var(--bji-text-sm);
  line-height: var(--bji-leading-snug);
}
a.bjs-toc-link:hover { background: var(--bji-blue-050); color: var(--bji-link-hover); }
.bjs-toc-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: var(--bji-radius-pill);
  background: var(--bji-gray-100);
  color: var(--bji-text-muted);
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
  font-variant-numeric: tabular-nums;
}
.bjs-toc-num--label {
  width: auto;
  padding: 0 .5rem;
  border-radius: var(--bji-radius-pill);
  font-size: 0.62rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bjs-toc-list .is-intro .bjs-toc-num { background: var(--bji-blue-100); color: var(--bji-blue-700); }
.bjs-toc-list .is-resource .bjs-toc-num { background: var(--bji-amber-100); color: var(--bji-amber-700); }
.bjs-toc-list .is-current .bjs-toc-link {
  background: var(--bji-navy-900);
  color: #fff;
  font-weight: var(--bji-weight-semibold);
}
.bjs-toc-list .is-current .bjs-toc-num { background: var(--bji-blue-500); color: #fff; }
@media (max-width: 640px) {
  .bjs-toc-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- prev / next pager ---------- */
.bjs-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bji-space-4);
  margin: var(--bji-space-7) 0 0;
}
.bjs-pager-spacer { display: block; }
.bjs-pager-link {
  display: flex;
  flex-direction: column;
  gap: var(--bji-space-1);
  padding: var(--bji-space-4) var(--bji-space-5);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  background: var(--bji-surface);
  box-shadow: var(--bji-shadow-sm);
  text-decoration: none;
  transition: border-color var(--bji-duration) var(--bji-ease), box-shadow var(--bji-duration) var(--bji-ease), transform var(--bji-duration) var(--bji-ease);
}
a.bjs-pager-link:hover {
  border-color: var(--bji-blue-300);
  box-shadow: var(--bji-shadow-md);
  transform: translateY(-1px);
}
.bjs-pager-next { text-align: right; align-items: flex-end; }
.bjs-pager-dir {
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bji-text-faint);
}
.bjs-pager-name {
  font-size: var(--bji-text-base);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-navy-900);
  line-height: var(--bji-leading-snug);
}
@media (max-width: 560px) {
  .bjs-pager { grid-template-columns: minmax(0, 1fr); }
  .bjs-pager-spacer { display: none; }
  .bjs-pager-next { text-align: left; align-items: flex-start; }
}

/* ---------- comments spacing ---------- */
.bjs-comments { margin-top: var(--bji-section-gap); }

/* ============================================================
   .bjs-prose  -  support for legacy content classes
   ============================================================ */

/* intro lead paragraph (opens most lessons) with a v2 drop cap */
.bjs-prose .intro {
  font-size: var(--bji-text-lg);
  line-height: var(--bji-leading-snug);
  color: var(--bji-text);
}
.bjs-prose .intro:first-letter {
  float: left;
  font-size: 3.1em;
  line-height: .82;
  font-weight: var(--bji-weight-black);
  color: var(--bji-navy-900);
  margin: 0.05em 0.12em 0 0;
}

/* section-heading underline the author uses on some h2s */
.bjs-prose h2.under-line, .bjs-prose .under-line {
  padding-bottom: var(--bji-space-2);
  border-bottom: 2px solid var(--bji-border);
}

/* small meta lines (e.g. "by the GameMaster, reprinted with permission") */
.bjs-prose .entry-meta, .bjs-prose .byline {
  font-size: var(--bji-text-sm);
  color: var(--bji-text-muted);
}
.bjs-prose .text-right { text-align: right; }
.bjs-prose .text-center { text-align: center; }
.bjs-prose .center { display: block; margin-left: auto; margin-right: auto; }
.bjs-prose .p15 { padding: 15px; }
.bjs-prose .mB20 { margin-bottom: 20px; }
.bjs-prose .mB30 { margin-bottom: 30px; }
.bjs-prose .overflow-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* aliceblue "note" box -> v2 info callout */
.bjs-prose .bji-note {
  background: #eef6ff;
  border: 1px solid var(--bji-blue-100);
  border-left: 4px solid var(--bji-blue-500);
  border-radius: var(--bji-radius-sm);
  padding: var(--bji-space-3) var(--bji-space-4);
  margin: 0 0 var(--bji-space-4);
}
.bjs-prose .bji-note > :last-child { margin-bottom: 0; }

/* score readout used in a few lessons */
.bjs-prose span.points { font-size: 1.25rem; font-weight: var(--bji-weight-bold); padding: 0 .35rem; }

/* Embedded bootstrap buttons (the [recommended_casinos] affiliate widget in
   the money-management lessons prints .btn / .btn-wire / .btn-primary). The v2
   stack drops bootstrap, so give them a minimal v2 button look. A full v2
   treatment of that shared widget is a separate follow-up. */
.bjs-prose .btn {
  display: inline-block;
  padding: .45rem 1rem;
  border-radius: var(--bji-radius-pill);
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.bjs-prose .btn-wire { color: var(--bji-link); border-color: var(--bji-border-strong); background: var(--bji-surface); }
.bjs-prose a.btn-wire:hover { border-color: var(--bji-blue-400); color: var(--bji-link-hover); }
.bjs-prose .btn-primary { background: var(--bji-cta); color: #fff; }
.bjs-prose a.btn-primary:hover { background: var(--bji-cta-hover); color: #fff; }
.bjs-prose .mR10 { margin-right: 10px; }
.bjs-prose .mT5  { margin-top: 5px; }
.bjs-prose .online-casinos.recommendation { list-style: none; padding-left: 0; }

/* light panel behind the strategy charts */
.bjs-prose .gray-container {
  background: var(--bji-surface-sunken);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
}

/* ---- minimal bootstrap grid (only the columns the content uses) ----
   flexbox, no negative margins, so nested rows can never widen the page. */
.bjs-prose .row { display: flex; flex-wrap: wrap; }
.bjs-prose [class*="col-xs-"],
.bjs-prose [class*="col-sm-"] { box-sizing: border-box; padding-left: 8px; padding-right: 8px; }
.bjs-prose .col-xs-12 { width: 100%; }
.bjs-prose .col-xs-6  { width: 50%; }
.bjs-prose .col-xs-4  { width: 33.3333%; }
@media (min-width: 768px) {
  .bjs-prose .col-sm-10 { width: 83.3333%; }
  .bjs-prose .col-sm-6  { width: 50%; }
  .bjs-prose .col-sm-4  { width: 33.3333%; }
  .bjs-prose .col-sm-3  { width: 25%; }
}
/* the affiliate ranking widget marks its flex rows with .flex; keep the
   columns vertically centred so logo / offer / buttons line up */
.bjs-prose .flex { display: flex; }
.bjs-prose .row.flex, .bjs-prose .ad-row { align-items: center; }
.bjs-prose .col-center { margin-left: auto; margin-right: auto; }

/* Content tables that authors wrapped in a centred bootstrap column
   (.col-sm-4 / .col-sm-6 .col-center) were rendering at 33-50% of the reading
   column, i.e. far too narrow. Let those panels fill the content width. The
   strategy charts (.decks-dealer) are excluded and keep their own compact
   sizing below. Placed after the grid rules so these win. */
.bjs-prose .col-center:not(.decks-dealer) {
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  float: none;
  padding-left: 0;
  padding-right: 0;
}
.bjs-prose .decks-dealer {
  width: auto;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  float: none;
  padding-left: 0;
  padding-right: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--bji-space-5);
}

/* ---- basic strategy charts (.decks-dealer): reset the generic prose
   table treatment, then reapply the compact colour-coded chart look ---- */
.bjs-prose .decks-dealer table {
  display: table;
  width: 100%;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  border-collapse: collapse;
  border-spacing: 0;
  font: var(--bji-weight-semibold) 15px/1.25 var(--bji-font-sans);
  color: #000;
}
.bjs-prose .decks-dealer thead td,
.bjs-prose .decks-dealer tbody td {
  padding: 2px;
  text-align: center;
  vertical-align: middle;
  border: 0;
  color: #000;
  font-weight: var(--bji-weight-semibold);
}
.bjs-prose .decks-dealer tbody td:first-child { min-width: 0; color: #000; }
.bjs-prose .decks-dealer tbody tr + tr td { border-top: 0; }
/* the coloured cells (3 classes) already outrank the generic prose zebra
   (.av2-prose ... td, 2 classes); only the classless label cells need the
   even-row / hover stripe cleared so the chart reads uniformly. */
.bjs-prose .decks-dealer tbody tr:nth-child(even) td:not([class]),
.bjs-prose .decks-dealer tbody tr:hover td:not([class]) { background: transparent; }
/* instructional palette - verbatim from the legacy .decks-dealer rules */
.bjs-prose .decks-dealer td.white-bg  { background: #fff;    color: #000; }
.bjs-prose .decks-dealer td.green-bg  { background: #78cb76; color: #fff; }
.bjs-prose .decks-dealer td.blue-bg   { background: #5f97d8; color: #fff; }
.bjs-prose .decks-dealer td.red-bg    { background: #c94d3f; color: #fff; }
.bjs-prose .decks-dealer td.purple-bg { background: #8b59b2; color: #fff; }
.bjs-prose .decks-dealer td.orange-bg { background: #ffc04c; color: #fff; }

/* ---- chart legend (.table-keys-info) - reproduced from the legacy rules ---- */
.bjs-prose .table-keys-info { width: 100%; color: #000; display: inline-block; text-align: left; }
.bjs-prose .table-keys-info > .title { width: 17%; float: left; color: #000; font-weight: var(--bji-weight-semibold); }
.bjs-prose .table-keys-info .keys-names { float: left; width: 83%; }
.bjs-prose .table-keys-info .keys-names .title {
  color: #fff; width: 30px; float: left; font-weight: var(--bji-weight-semibold);
  padding: 2px; text-align: center; border-radius: 3px;
}
.bjs-prose .table-keys-info .keys-names .name {
  color: #000; font-weight: var(--bji-weight-medium); text-align: left;
  padding-left: 37px; padding-top: 4px; font-size: 12px;
}
.bjs-prose .table-keys-info .keys-names .hit .title,
.bjs-prose .table-keys-info .keys-names .yes .title { background: #78cb76; }
.bjs-prose .table-keys-info .keys-names .stand .title,
.bjs-prose .table-keys-info .keys-names .no .title { background: #c94d3f; }
.bjs-prose .table-keys-info .keys-names .split .title { background: #8b59b2; }
.bjs-prose .table-keys-info .keys-names .double .title { background: #5f97d8; }
.bjs-prose .table-keys-info .keys-names .surrender .title { background: #ffc04c; }