/*
 * TRM Operator Cards — .aoc-op-card (self-contained, all custom classes).
 * One base structure; styles are composable modifier classes (aoc-op-card--<style>),
 * accent follows market (regulated=green / offshore=blue), stars always gold.
 * Ships fleet-wide; override the --op-* tokens in a child theme to reskin.
 */
/* Operator Cards grid (the trm-aoc/operator-cards container block). Fixed column
   counts that step down by device: chosen N on desktop → 2 on tablet → 1 on
   mobile. minmax(0,1fr) lets tracks shrink so they never overflow their container;
   each card's own container queries then handle its inner layout. */
.aoc-op-cards{ --aoc-cols:4; --aoc-gap:22px;
  display:grid; gap:var(--aoc-gap); margin:0 0 32px;
  /* 200px track floor (not 0): the cards are container-type:inline-size and so
     contribute 0 intrinsic width, which would let a flex ancestor collapse the
     grid to nothing (e.g. inside GenerateBlocks flex containers in the editor).
     A definite min gives the grid real min-content so it never collapses; 1fr
     still distributes evenly, and the media queries below cap the column count. */
  grid-template-columns: repeat(var(--aoc-cols), minmax(200px, 1fr)); }
.aoc-op-cards--cols-2{ --aoc-cols:2; }
.aoc-op-cards--cols-3{ --aoc-cols:3; }
.aoc-op-cards--cols-4{ --aoc-cols:4; }
/* Grid children must fill their track. On the front end the direct child IS the
   card, so this is a no-op there. In the block EDITOR, Gutenberg inserts a
   .block-editor-block-list__block wrapper between the grid and the card; that
   wrapper would otherwise shrink-wrap to the container-type card's ~0 min-content
   (cards render 2px wide / blank). Forcing 100% makes the wrapper fill the track. */
.aoc-op-cards > *:not(.aoc-op-card-defs){ width:100%; min-width:0; }
/* Tablet: 3- and 4-column grids drop to 2 (2-column grids stay 2). */
@media (max-width:1024px){
  .aoc-op-cards--cols-3, .aoc-op-cards--cols-4{ --aoc-cols:2; } }
/* Mobile: every grid goes full width (1 column). */
@media (max-width:600px){
  .aoc-op-cards--cols-2, .aoc-op-cards--cols-3, .aoc-op-cards--cols-4{ --aoc-cols:1; } }
.aoc-op-card-defs{ position:absolute; width:0; height:0; overflow:hidden; }

.aoc-op-card{ --op-accent:#16a34a; --op-accentD:#0c7a37; --op-accentB:#22c55e;
  --op-tint:rgba(22,163,74,.08); --op-edge:rgba(22,163,74,.28);
  /* Market/eyebrow color — drives the Regulated/Offshore pill ONLY, and is fixed
     by market (never changed by an accent) so the eyebrow stays consistent. */
  --op-market:#16a34a; --op-market-tint:rgba(22,163,74,.08); --op-market-edge:rgba(22,163,74,.28);
  --op-line:#e7ebf0; --op-ink:#0f172a; --op-muted:#64748b;
  position:relative;
  container-type:inline-size;   /* card is its own query container → responsive to ITS width, not the viewport */
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--op-line);
  border-radius:5px; overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 22px 44px -24px rgba(15,23,42,.4); }
.aoc-op-card *, .aoc-op-card *::before, .aoc-op-card *::after{ box-sizing:border-box; }
/* Offshore market: blue eyebrow (fixed) + blue as the DEFAULT accent (used until
   the author picks an explicit accent). Regulated stays green from the base rule. */
.aoc-op-card--offshore{ --op-accent:#2563eb; --op-accentD:#1d4ed8; --op-accentB:#3b82f6;
  --op-tint:rgba(37,99,235,.08); --op-edge:rgba(37,99,235,.28);
  --op-market:#2563eb; --op-market-tint:rgba(37,99,235,.08); --op-market-edge:rgba(37,99,235,.28); }

/* ACCENT palettes (accent-<slug>). Two classes deep, so they win over the
   single-class market default. Add a color = one block here + one line in
   TRM_AOC_Cards::accents(). `brand` is the default; green/blue/red are opt-in. */
/* Brand (default): inherit the site's action color straight from the THEME token
   --brand-cta_primary (the same theme var the tables alias to their CTA fill), with
   the fleet's red as the standalone fallback; derive the gradient/tint/edge from it. */
.aoc-op-card.accent-brand{ --op-accent:var(--brand-cta_primary, #e92020);
  --op-accentB:color-mix(in srgb, var(--op-accent) 82%, #fff);
  --op-accentD:color-mix(in srgb, var(--op-accent) 78%, #000);
  --op-tint:color-mix(in srgb, var(--op-accent) 8%, transparent);
  --op-edge:color-mix(in srgb, var(--op-accent) 28%, transparent); }
.aoc-op-card.accent-green{ --op-accent:#16a34a; --op-accentD:#0c7a37; --op-accentB:#22c55e;
  --op-tint:rgba(22,163,74,.08); --op-edge:rgba(22,163,74,.28); }
.aoc-op-card.accent-blue{ --op-accent:#2563eb; --op-accentD:#1d4ed8; --op-accentB:#3b82f6;
  --op-tint:rgba(37,99,235,.08); --op-edge:rgba(37,99,235,.28); }
.aoc-op-card.accent-red{ --op-accent:#dc2626; --op-accentD:#b91c1c; --op-accentB:#ef4444;
  --op-tint:rgba(220,38,38,.08); --op-edge:rgba(220,38,38,.28); }
.aoc-op-card.accent-navy{ --op-accent:#131f42;
  --op-accentB:color-mix(in srgb, var(--op-accent) 82%, #fff);
  --op-accentD:color-mix(in srgb, var(--op-accent) 78%, #000);
  --op-tint:color-mix(in srgb, var(--op-accent) 8%, transparent);
  --op-edge:color-mix(in srgb, var(--op-accent) 28%, transparent); }
/* Neutral BLACK palette for the Chip Banner design (also its default look). A
   light-silver accentB keeps the border / "BONUS" / CTA legible on the near-black
   card and matches the silver chip. */
.aoc-op-card.accent-black{ --op-accent:#171a20; --op-accentB:#6b7280; --op-accentD:#0b0d11;
  --op-tint:rgba(107,114,128,.09); --op-edge:rgba(107,114,128,.30); }

.aoc-op-card__main{ padding:22px; display:flex; align-items:center; gap:20px; }
.aoc-op-card__logo-col{ display:flex; flex-direction:column; align-items:center; gap:9px; flex:0 0 auto; }
.aoc-op-card__logo{ width:66px; height:66px; border-radius:50%; background:#fff; object-fit:cover;
  box-shadow:0 14px 28px -8px rgba(15,23,42,.5); }
figure.wp-block-image:has(> .aoc-op-card__logo){ margin:0; }
.aoc-op-card__logo--empty{ display:grid; place-items:center; font-weight:800; font-size:26px; color:var(--op-accent); }
/* Logo shape: round is the default (50%); the --logo-square modifier squares it with a 5px radius. */
.aoc-op-card--logo-square .aoc-op-card__logo{ border-radius:5px; }
.aoc-op-card__pill{ display:inline-flex; align-items:center; gap:6px; font-size:9.5px; letter-spacing:.09em;
  text-transform:uppercase; font-weight:800; color:var(--op-market); background:var(--op-market-tint);
  border:1px solid var(--op-market-edge); padding:4px 10px; border-radius:999px; }
.aoc-op-card__pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }

.aoc-op-card__content{ flex:1; min-width:0; border-left:1px solid var(--op-line); padding-left:20px; }
.aoc-op-card__name{ margin:0; padding:0; font-size:1rem; font-weight:800; letter-spacing:-.02em; line-height:1.2; color:var(--op-ink); }
.aoc-op-card__rating{ display:inline-flex; align-items:center; gap:9px; margin-top:8px; }
.aoc-op-card__stars{ position:relative; display:inline-block; height:18px; line-height:0; }
/* max-width:none defends the fill overlay against a theme's global
   `svg{max-width:100%}`, which would squish the gold stars out of alignment. */
.aoc-op-card__stars svg{ display:block; height:18px; width:auto; max-width:none; }
.aoc-op-card__stars-base{ fill:#c3ccdb; }
.aoc-op-card__stars-fill{ position:absolute; top:0; left:0; height:100%; overflow:hidden; }
.aoc-op-card__stars-fill svg{ fill:#f0b429; }
.aoc-op-card__score{ font-size:14px; font-weight:800; letter-spacing:-.01em; color:var(--op-ink); }
.aoc-op-card__score span{ font-weight:500; color:var(--op-muted); }
.aoc-op-card__bonus{ margin-top:16px; }
.aoc-op-card__bonus-label{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--op-muted); font-weight:800; margin-bottom:3px; }
.aoc-op-card__bonus-value{ font-size:.875rem; font-weight:800; letter-spacing:-.01em; color:var(--op-ink); line-height:1.35; }
.aoc-op-card__bonus-value b{ color:var(--op-accent); }

.aoc-op-card__offer{ display:flex; align-items:center; gap:12px; padding:14px 20px; margin-top:auto;
  background:var(--op-tint); border-top:1px solid var(--op-edge); }
/* Offer promo hidden (show_offer off): keep the CTA on the right at ~50% width
   (where it sat when the offer text was present) on wide/desktop cards. Narrow
   cards fall back to a full-width CTA in the responsive block below. */
.aoc-op-card__offer--bare{ justify-content:flex-end; }
.aoc-op-card__offer--bare .aoc-op-card__cta{ flex:0 0 50%; justify-content:center; }
/* With a Review button present, both buttons are auto-width (no 50% CTA)... */
.aoc-op-card__offer--has-review .aoc-op-card__cta{ flex:0 0 auto; }
/* ...and on the bare (offer-off) card the two buttons split the footer into equal
   halves — Review (left) + CTA (right), each filling its half with a centered label. */
.aoc-op-card__offer--bare.aoc-op-card__offer--has-review .aoc-op-card__review,
.aoc-op-card__offer--bare.aoc-op-card__offer--has-review .aoc-op-card__cta{ flex:1 1 0; justify-content:center; }
.aoc-op-card__offer-icon{ width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:5px;
  color:var(--op-accent); background:#fff; border:1px solid var(--op-edge); box-shadow:0 6px 14px -8px var(--op-accent); }
.aoc-op-card__offer-icon svg{ width:20px; height:20px; }
.aoc-op-card__offer-text{ flex:1; min-width:0; }
.aoc-op-card__offer-title{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--op-accentD); }
.aoc-op-card__offer-sub{ font-size:12px; color:var(--op-muted); font-weight:600; }
/* Shared button shape for the primary CTA and the secondary Review button. */
.aoc-op-card__cta, .aoc-op-card__review{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; text-decoration:none!important; font-weight:800;
  font-size:.92rem; letter-spacing:-.01em; color:#fff; padding:7px 18px; border-radius:5px; position:relative; overflow:hidden; }
.aoc-op-card__cta{ background:linear-gradient(160deg,var(--op-accentB),var(--op-accentD));
  box-shadow:0 10px 22px -8px var(--op-accentD), 0 1px 0 rgba(255,255,255,.3) inset; }
/* Secondary "Review" button — fixed maroon, sits to the left of the Play Now CTA. */
.aoc-op-card__review{ background:linear-gradient(160deg,#9e2b47,#6d1628);
  box-shadow:0 10px 22px -8px #6d1628, 0 1px 0 rgba(255,255,255,.28) inset; }
.aoc-op-card__cta::before, .aoc-op-card__review::before{ content:""; position:absolute; inset:0 0 auto 0; height:50%; background:linear-gradient(180deg,rgba(255,255,255,.22),transparent); }
.aoc-op-card__cta svg, .aoc-op-card__review svg{ width:16px; height:16px; position:relative; }
/* Hover: subtle brightness lift; force the label to stay white so a theme a:hover rule can't recolor it. */
.aoc-op-card__cta:hover,.aoc-op-card__cta:focus,
.aoc-op-card__review:hover,.aoc-op-card__review:focus{ filter:brightness(1.05); color:#fff!important; text-decoration:none!important; }

/* Featured ribbon — pure CSS; the modifier class alone renders it (accent-matched). */
.aoc-op-card--featured::after{
  content:"Featured"; position:absolute; top:14px; right:-34px; width:132px;
  transform:rotate(45deg); text-align:center;
  background:linear-gradient(160deg,var(--op-accentB),var(--op-accentD)); color:#fff;
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 0; box-shadow:0 6px 14px -6px rgba(15,23,42,.5); z-index:2; pointer-events:none; }

/* ── "Chip Banner" design — premium dark, gradient-filled promo card ──────────
   The whole card is a dark accent gradient with a lighter accent border; a
   glowing chip banner spans the top (one rendered image PER accent color, wired
   at the bottom of this block), the operator name overlays the banner's left,
   and the welcome-bonus + Play-now CTA sit on the gradient beneath. Light text
   on the dark fill. */
.aoc-op-card--chip-banner{
  --aoc-banner-h:28cqw; --aoc-banner-top:0px;   /* banner height tracks the card WIDTH (container units) so the chip is framed the same at any card size */
  --op-ink:#fff; --op-muted:#aeb8ca; --op-line:transparent;
  --aoc-art:url(../images/casino-cards-bg-black.webp);   /* default; accents swap this below */
  color:#fff;
  /* The chip ARTWORK fills the whole card so its own gradient/waves flow all the
     way to the bottom. A faint scrim over the lower half keeps content legible;
     the near-black color is just a fallback behind the image. */
  background:
    linear-gradient(180deg, transparent 42%, rgba(4,5,11,.30)),
    var(--aoc-art) top right / cover no-repeat,
    #05060c;
  border:1px solid color-mix(in srgb, var(--op-accentB) 58%, transparent);
  box-shadow:0 24px 46px -22px rgba(0,0,0,.72), 0 0 0 1px color-mix(in srgb, var(--op-accentB) 20%, transparent) inset; }
.aoc-op-card--chip-banner .aoc-op-card__main{
  position:relative; display:block; padding:8px 20px 14px; }
/* Drop the logo column + market pill; light-on-dark data stacked in a column. */
.aoc-op-card--chip-banner .aoc-op-card__logo-col{ display:none; }
.aoc-op-card--chip-banner .aoc-op-card__content{ border:0; padding:0; display:flex; flex-direction:column; }
/* IDENTITY BAND — logo beside a stacked (name / stars) group, the whole thing
   vertically centered within a band as TALL as the chip art so it lines up with
   the chip that sits on the right of the background image. Logo left, chip right. */
/* Cap the identity at ~58% so the name (and stars) stay clear of the chip, which
   sits on the RIGHT of the background art — the text never bleeds into it. */
.aoc-op-card--chip-banner .aoc-op-card__identity{
  order:0; display:flex; align-items:center; gap:12px;
  min-height:var(--aoc-banner-h); margin:-10px 0 0; max-width:75%; }
.aoc-op-card--chip-banner .aoc-op-card__idtext{
  display:flex; flex-direction:column; gap:5px; min-width:0; }
/* Logo. Shape (round / square) sets the corner; the "White logo background" toggle
   (--logo-bg) puts it on a white tile with a 2px ring — otherwise it's a bare crop. */
.aoc-op-card--chip-banner .aoc-op-card__id-logo{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  background:transparent; padding:0; overflow:hidden; }
.aoc-op-card--chip-banner .aoc-op-card__id-logo img{
  width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.aoc-op-card--chip-banner.aoc-op-card--logo-square .aoc-op-card__id-logo{ border-radius:6px; }
/* White-background variant: white tile, 2px ring (padding), soft shadow; the logo
   is contained so its own edges show against the white. */
.aoc-op-card--chip-banner.aoc-op-card--logo-bg .aoc-op-card__id-logo{
  background:#fff; padding:2px; box-shadow:0 4px 12px -4px rgba(0,0,0,.5); }
.aoc-op-card--chip-banner.aoc-op-card--logo-bg .aoc-op-card__id-logo img{ object-fit:contain; }
.aoc-op-card--chip-banner .aoc-op-card__name{
  position:static; display:block; height:auto; max-width:100%; margin:0; padding:0;
  font-size:clamp(.9rem, 3.7cqw, 1.12rem); font-weight:800; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.55); line-height:1.15;
  /* Keep the name on ONE line; if it can't fit the ~58% band it ellipsizes
     (never wraps to a second line, which looked awkward). */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Stars under the name, WITHOUT the numeric score — a touch smaller on this design. */
.aoc-op-card--chip-banner .aoc-op-card__rating{ margin:0; }
.aoc-op-card--chip-banner .aoc-op-card__score{ display:none; }
.aoc-op-card--chip-banner .aoc-op-card__stars,
.aoc-op-card--chip-banner .aoc-op-card__stars svg{ height:14px; }
.aoc-op-card--chip-banner .aoc-op-card__stars-base{ fill:rgba(255,255,255,.24); }
/* Welcome bonus pushed DOWN below the identity band ("under the waves"): a larger
   label line — white, with the variant descriptor ("Welcome"/"Crypto"/…) in the
   same gold as the stars — over the standout offer value. */
.aoc-op-card--chip-banner .aoc-op-card__bonus{ order:1; margin:40px 0 0; }
.aoc-op-card--chip-banner .aoc-op-card__bonus-label{
  display:block; text-transform:uppercase; letter-spacing:.05em; font-weight:800;
  font-size:clamp(.82rem, 3.3cqw, 1.02rem); color:#fff; margin:0 0 4px; }
/* A gold spark (matches the stars) leads the label — a small "pop". */
.aoc-op-card--chip-banner .aoc-op-card__bonus-label::before{
  content:"\2726"; color:#f0b429; margin-right:7px; text-shadow:0 0 10px rgba(240,180,41,.7); }
.aoc-op-card--chip-banner .aoc-op-card__bonus-descr{ color:#f0b429; }
.aoc-op-card--chip-banner .aoc-op-card__bonus-value{
  color:#fff; font-size:clamp(1.15rem, 6cqw, 1.75rem); font-weight:900; line-height:1.05; letter-spacing:-.02em; }
.aoc-op-card--chip-banner .aoc-op-card__bonus-value b{ color:var(--op-accentB); }
/* Offer bar sits on the gradient; Play now spans the full width. */
.aoc-op-card--chip-banner .aoc-op-card__offer{ background:transparent; border-top:0; padding:2px 20px 20px; }
.aoc-op-card--chip-banner .aoc-op-card__offer--bare .aoc-op-card__cta{ flex:1 1 100%; }
.aoc-op-card--chip-banner .aoc-op-card__cta{ padding:11px 18px; font-size:1rem; justify-content:center; }

/* Per-accent full-card artwork — one glowing render per color (black is the base
   default above; explicit black needs no override). Lightweight WebPs. */
.aoc-op-card--chip-banner.accent-blue  { --aoc-art:url(../images/casino-cards-bg-blue.webp); }
.aoc-op-card--chip-banner.accent-red   { --aoc-art:url(../images/casino-cards-bg-red.webp); }
.aoc-op-card--chip-banner.accent-green { --aoc-art:url(../images/casino-cards-bg-green.webp); }
/* Default card (no accent = "brand") uses the BLACK palette for this design, so a
   plain [aoc_card design="chip-banner"] is a coherent black card. */
.aoc-op-card--chip-banner.accent-brand{ --op-accent:#171a20; --op-accentB:#6b7280; --op-accentD:#0b0d11;
  --op-tint:rgba(107,114,128,.09); --op-edge:rgba(107,114,128,.30); }

/* Responsive hardening — CONTAINER-based, so the card adapts to its OWN width
   (2/3/4-up in a grid, a sidebar, or full-width), not the viewport width. Only
   engages when the card itself is narrow (≤380px, e.g. 4-up or mobile); at 3-up
   (~400px) the offer bar + CTA stay inline. */
@container (max-width:380px){
  .aoc-op-card__main{ padding:18px; gap:14px; flex-direction:column; align-items:flex-start; }
  .aoc-op-card__logo-col{ flex-direction:row; align-items:center; gap:12px; }
  .aoc-op-card__content{ border-left:0; padding-left:0; border-top:1px solid var(--op-line); padding-top:14px; width:100%; }
  .aoc-op-card__offer{ flex-wrap:wrap; }
  .aoc-op-card__cta{ width:100%; justify-content:center; }
  /* narrow card: the bare CTA fills the row; with a Review button the two stack
     full-width instead of the desktop equal-halves. */
  .aoc-op-card__offer--bare .aoc-op-card__cta{ flex:1 1 100%; }
  .aoc-op-card__offer--bare.aoc-op-card__offer--has-review .aoc-op-card__review,
  .aoc-op-card__offer--bare.aoc-op-card__offer--has-review .aoc-op-card__cta{ flex:1 1 100%; } }