/**
 * country-legal.css: page sheet for the country LEGAL EXPLAINER
 * (page-country-legal.php, currently /in/).
 *
 * The page runs on the ARTICLE SHELL and reuses shipped components wholesale:
 * the av2- shell (article.css), the usst-law / usst-status / usst-penalty law
 * panel (us-state.css) and cv2-faq (v2-components.css). This sheet only adds
 * the few things those do not cover: the current-status strip, the single stat
 * anchor, the responsible-gambling block and the protective-reading list. All
 * tokens, no new colours.
 */

/* Current legal status: the one fact, first and unmissable. A stronger take on
   the shared amber .bnk-trap / .usst-penalty callout, since it leads the page. */
.cleg-status {
  border: 1px solid var(--bji-amber-500);
  border-left: 5px solid var(--bji-amber-500);
  background: var(--bji-amber-100);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-4) var(--bji-space-5);
  margin-bottom: var(--bji-space-5);
}
.cleg-status p {
  margin: 0;
  font-size: var(--bji-text-base);
  font-weight: var(--bji-weight-medium);
  color: var(--bji-text);
}
.cleg-status a { color: var(--bji-amber-700); text-decoration: underline; }
.cleg-status a:hover { color: var(--bji-link-hover); }

/* Intro lede: one size up from body prose, muted, sets the frame. */
.cleg-lede {
  font-size: var(--bji-text-lg);
  color: var(--bji-text-muted);
  line-height: 1.6;
}
.cleg-prose .cleg-lede a { color: var(--bji-link); }

/* The one verified, player-facing number (the 30% winnings tax): a quiet
   horizontal stat anchor, not a tile grid (this page has no data-tile row). */
.cleg-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--bji-space-2) var(--bji-space-4);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  background: var(--bji-surface-sunken);
  padding: var(--bji-space-4) var(--bji-space-5);
  margin: var(--bji-space-5) 0;
}
.cleg-stat .num {
  grid-row: 1 / span 2;
  font-size: var(--bji-text-3xl);
  font-weight: var(--bji-weight-black);
  line-height: 1;
  color: var(--bji-text);
}
.cleg-stat .what { font-size: var(--bji-text-base); color: var(--bji-text); align-self: end; }
.cleg-stat .src { font-size: var(--bji-text-xs); color: var(--bji-text-muted); }
.cleg-stat .src a { color: var(--bji-gray-600); text-decoration: underline; }
.cleg-stat .src a:hover { color: var(--bji-link); }

/* Responsible gambling: a subtle bordered panel, not the wide hub's two-column
   och-rg card (which lives in a sheet this page does not load). */
.cleg-rg {
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  background: var(--bji-surface-sunken);
  padding: var(--bji-space-5) var(--bji-space-6);
  margin: var(--bji-space-6) 0;
}
.cleg-rg h2 { margin-top: 0; }
.cleg-rg h3 { font-size: var(--bji-text-lg); margin: var(--bji-space-4) 0 var(--bji-space-2); }
.cleg-rg ul { margin: 0 0 var(--bji-space-3); padding-left: 1.2rem; }
.cleg-rg li { margin: var(--bji-space-2) 0; }
.cleg-rg-extra { color: var(--bji-text-muted); font-size: var(--bji-text-sm); }

/* Protective reading: our own harm-reduction / recourse pages. Card list, no
   affiliate links, no casino CTAs. */
.cleg-reading {
  list-style: none;
  margin: var(--bji-space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--bji-space-3);
}
.cleg-reading li { margin: 0; }
.cleg-reading a {
  display: block;
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  background: var(--bji-surface);
  padding: var(--bji-space-4) var(--bji-space-5);
  text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.cleg-reading a:hover { border-color: var(--bji-border-strong); box-shadow: var(--bji-shadow-sm); }
.cleg-reading .t { display: block; font-weight: var(--bji-weight-semibold); color: var(--bji-text); }
.cleg-reading .s { display: block; margin-top: var(--bji-space-1); font-size: var(--bji-text-sm); color: var(--bji-text-muted); }

@media (min-width: 640px) {
  .cleg-reading { grid-template-columns: repeat(3, 1fr); }
}

/* The shipped .usst-law table crams three columns into the article width. The
   explainer's law notes run longer than a US state's brief cells, so on a phone
   the facts column would squeeze to an unreadable sliver (the label and status
   columns are white-space:nowrap). Stack each row into a small card instead:
   label, then status, then the facts full width. Scoped under .cleg-main and
   shipped only in this page's sheet, so the US state and hub law tables are
   untouched. */
@media (max-width: 640px) {
  .cleg-main .usst-law { overflow-x: visible; }
  .cleg-main .usst-law table,
  .cleg-main .usst-law tbody,
  .cleg-main .usst-law tr,
  .cleg-main .usst-law td { display: block; width: auto; }
  .cleg-main .usst-law thead { display: none; }
  .cleg-main .usst-law tr { padding: var(--bji-space-3) var(--bji-space-4); border-top: 1px solid var(--bji-gray-100); }
  .cleg-main .usst-law tr:first-child { border-top: 0; }
  .cleg-main .usst-law td { border-top: 0; padding: 0; }
  .cleg-main .usst-law td:first-child { white-space: normal; font-size: var(--bji-text-lg); margin-bottom: var(--bji-space-1); }
  .cleg-main .usst-law td:nth-child(2) { margin-bottom: var(--bji-space-2); }
  .cleg-main .usst-law td.note { font-size: var(--bji-text-sm); }
}