/* casino-games.css — [casino_games] section. Tokens only, mobile-first.
 * Figma: Desktop 12870:28249 (>=1280), Tablet 12872:14609 (768-1279), Mobile 12872:26563 (<768).
 * Type note: Figma type styles are fixed-size; every font token in this project is
 *   responsive (only --font-size-p4-caption is fixed), so a fixed 16px style has no exact
 *   token. Each label maps to the semantic token whose scale lands on the Figma value at
 *   the breakpoint the style was authored for, and steps per the project scale elsewhere:
 *     card name  → --font-size-h5  (exact at mobile 20/26 and desktop 24/33; tablet 22 vs 24)
 *     short-tile card name (mobile cards 3-5) → --font-size-h6 (16px exact; LH 23 vs 24)
 *     list name  → --font-size-h7  (exact at desktop 16; 13/14 at mobile/tablet vs Figma 16)
 *     CTA label  → --font-size-button (exact at desktop 16/20)
 *   Documented inline where it applies.
 */

/* ---------- Section shell ---------- */
.cg-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3); /* Figma mobile: 12px between mosaic block and rail */
}

/* ---------- Mosaic (featured cards) ---------- */
.cg-mosaic {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* keep each card's aspect-ratio height (no cross-stretch) */
  gap: var(--spacing-3); /* Figma mobile: 12px */
}
.cg-card {
  position: relative;
  display: block;
  flex: 0 0 100%; /* mobile default: full-width */
  border: var(--border-width-thin) solid var(--color-primary); /* Figma: 1px #299CD8 */
  border-radius: var(--radius-xl); /* 12px */
  overflow: hidden;
  background: var(--color-base-dark); /* scrim base: image sits at 60% over #1E2126 */
  text-decoration: none;
}
.cg-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
img.cg-card__img { opacity: 0.6; } /* Figma: image opacity 60% over the dark card for legibility */
.cg-card__img--placeholder { background: var(--gradient-deep); }
/* Figma: card > Frame (px-6/py-6) > Frame (row, items-center, justify-between).
   In flow rather than absolutely positioned so the arrow centres against the name's
   line box exactly as Figma's auto-layout row does. */
.cg-card__head {
  position: relative; /* stack above the .cg-card__img scrim */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Figma: no gap — space-between separates name and arrow */
  padding: var(--spacing-6); /* Figma px-6/py-6: 24px */
}
.cg-card__name {
  min-width: 0; /* Figma's sample name is nowrap; real names wrap instead of pushing the arrow out */
  margin: 0;
  color: var(--color-base-ghost-white);
  font-family: var(--font-family-header);
  /* Figma card name: mobile cards 1-2 = H6 (20/26); tablet+desktop = H5 (24/33).
     --font-size-h5 (20/22/24) matches mobile & desktop exactly; tablet resolves to 22
     (Figma 24, -2px responsive step). */
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  font-weight: var(--font-weight-semibold);
}
.cg-card__arrow {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}
/* Mobile per-card aspect ratios (Figma mobile node) */
.cg-card--1 { aspect-ratio: 420 / 180; }
.cg-card--2 { aspect-ratio: 420 / 150; }
/* :where() keeps the :last-child test out of the specificity sum, so both card-3
   variants stay at .cg-card--3's own weight and the tablet/desktop blocks below
   (plain .cg-card--3 rules) still win. Without it the mobile 2-up geometry leaked
   into every breakpoint. */
.cg-card--3:where(:not(:last-child)),
.cg-card--4 {
  flex: 0 0 calc(50% - (var(--spacing-3) / 2)); /* mobile 2-up row, 12px gutter */
  aspect-ratio: 205 / 110;
}
/* Fewer-than-featured: with exactly 3 featured cards, card 3 has no card-4
   partner for the 2-up row. Go full-width instead of a stranded half-width
   tile with dead space beside it (tablet/desktop already put card 3 on its
   own full-width row regardless of siblings; only mobile pairs it). */
.cg-card--3:where(:last-child) { flex: 0 0 100%; aspect-ratio: 420 / 110; }
.cg-card--5 { aspect-ratio: 420 / 110; }

/* Mobile short tiles (cards 3-5): Figma steps these down to py-5 and the H7 name.
   :where() keeps these at .cg-card__head's own specificity so the tablet block below
   (a plain .cg-card descendant selector) resets them without repeating the variants. */
:where(.cg-card--3, .cg-card--4, .cg-card--5) .cg-card__head {
  padding-block: var(--spacing-5); /* Figma py-5: 20px (px-6 stays 24px) */
}
:where(.cg-card--3, .cg-card--4, .cg-card--5) .cg-card__name {
  /* Figma: H7 (16/24). --font-size-h6 is 16px at mobile — exact; LH 23 (-1px). */
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
}
/* The 2-up pair top-aligns its row (Figma: items-start, gap-2, name flex-1 and wrapping);
   the full-width short tiles keep the centred space-between row. */
:where(.cg-card--3:not(:last-child), .cg-card--4) .cg-card__head {
  align-items: flex-start;
  gap: var(--spacing-2); /* Figma: 8px */
}
:where(.cg-card--3:not(:last-child), .cg-card--4) .cg-card__name {
  flex: 1 1 auto; /* Figma: name flex-1, arrow shrink-0 */
}

/* ---------- Rail (list + CTA) ---------- */
.cg-rail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8); /* Figma: 32px between list and CTA (all breakpoints) */
  min-width: 0; /* let the fixed flex-basis (tablet 312 / desktop 325) win over content min-content */
}

/* ---------- List ---------- */
.cg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3); /* Figma mobile: 12px between rows */
}
.cg-list__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3); /* Figma mobile/tablet: 12px thumb->name */
  padding: var(--spacing-4) var(--spacing-5); /* Figma mobile: 16px / 20px */
  border: var(--border-width-thin) solid var(--color-glow); /* Figma: 1px #246988 */
  border-radius: var(--radius-xl); /* 12px */
  /* Figma: linear-gradient(180deg, #194B66, #062E44). --gradient-deep uses the same two
     colors at 90deg (token sweeps horizontal vs Figma vertical) — colors exact, direction approx. */
  background: var(--gradient-deep);
  text-decoration: none;
}
.cg-list__thumb {
  flex: 0 0 45px; /* Figma mobile thumb 45px (geometry) */
  width: 45px;
  height: 45px;
  border-radius: var(--radius-lg); /* 8px */
  overflow: hidden;
  background: var(--color-deep-dark);
}
.cg-list__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-list__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-base-ghost-white);
  font-family: var(--font-family-header);
  /* Figma list name = H7 style (semibold, fixed 16px / LH 24). --font-size-h7 (13/14/16)
     matches at desktop; tablet 14 / mobile 13 are the project's responsive steps.
     Row height is thumb-driven, so the LH difference (token 17/19/20 vs Figma 24) is not visible. */
  font-size: var(--font-size-h7);
  line-height: var(--line-height-h7);
  font-weight: var(--font-weight-semibold);
}
.cg-list__chevron { flex: 0 0 auto; width: 20px; height: 20px; }

/* ---------- CTA (Figma: BUT-003 | Secondary Buttons instance) ---------- */
.cg-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2); /* Figma: 8px */
  min-height: 82px; /* Figma: fixed 82px button height at all three breakpoints */
  /* Figma py-5: 20px. Its px-25 (100px) is auto-layout slack, not a visual constraint —
     the label is centred and overflows that padding at the 325/312/420 rail widths, so a
     symmetric 20px renders identically without clipping on narrow phones. */
  padding: var(--spacing-5);
  border-radius: var(--radius-xl); /* 12px */
  overflow: hidden; /* Figma: overflow-clip */
  /* Figma: 90deg #FCC114 -> #DAA11A. --gradient-accent-gold carries the gold stops
     (its start #FEC111 is a hair off #FCC114) but is 180deg. */
  background: var(--gradient-accent-gold);
  color: var(--color-base-dark); /* Figma: #1E2126 */
  font-family: var(--font-family-header);
  /* Figma: Button style, fixed 16/20. --font-size-button (12/14/16) is exact at desktop
     and steps down per the project scale at tablet/mobile. */
  font-size: var(--font-size-button);
  line-height: var(--line-height-button);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  text-transform: uppercase;
}
.cg-cta__icon { flex: 0 0 auto; width: 22px; height: 21px; } /* Figma icon frame: 22 x 21 */

/* ---------- Tablet (768-1279): 2-column, single-stack mosaic ---------- */
@media (min-width: 768px) {
  .cg-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-7); /* Figma: 28px between mosaic and rail */
  }
  .cg-mosaic {
    flex: 1 1 0;
    min-width: 0;
    gap: var(--spacing-5); /* Figma tablet: 20px */
  }
  .cg-rail { flex: 0 0 312px; } /* Figma tablet rail width */

  /* Mosaic collapses to a single full-width column */
  .cg-card,
  .cg-card--3,
  .cg-card--4 { flex: 0 0 100%; }
  .cg-card--1 { aspect-ratio: 360 / 258; }
  .cg-card--2 { aspect-ratio: 360 / 192; }
  .cg-card--3 { aspect-ratio: 361 / 160; }
  .cg-card--4 { aspect-ratio: 361 / 160; }
  .cg-card--5 { aspect-ratio: 360 / 160; } /* extends the mock's pattern (no 5th tablet node) */

  /* From tablet up every card uses the full card head again (Figma: px-6/py-6 + H5 name) */
  .cg-card .cg-card__head {
    align-items: center;
    gap: 0;
    padding-block: var(--spacing-6);
  }
  .cg-card .cg-card__name {
    flex: 0 1 auto;
    font-size: var(--font-size-h5);
    line-height: var(--line-height-h5);
  }

  .cg-list { gap: var(--spacing-5); } /* 20px */
  .cg-list__item { padding: var(--spacing-6) var(--spacing-5); } /* Figma tablet: 24px / 20px */
  .cg-list__thumb { flex-basis: 55px; width: 55px; height: 55px; }
}

/* ---------- Desktop (>=1280): fixed 5-card mosaic ---------- */
@media (min-width: 1280px) {
  .cg-rail { flex: 0 0 325px; } /* Figma desktop rail width */

  /* Widths derived so calc(P% - gap/2) == Figma px at the 667px mosaic; aspects from node 12870:28249 */
  .cg-card--1 { flex: 0 0 calc(44.68% - (var(--spacing-5) / 2)); aspect-ratio: 288 / 211; }
  .cg-card--2 { flex: 0 0 calc(55.32% - (var(--spacing-5) / 2)); aspect-ratio: 359 / 211; }
  .cg-card--3 { flex: 0 0 100%;                                   aspect-ratio: 667 / 228; }
  .cg-card--4 { flex: 0 0 calc(59.07% - (var(--spacing-5) / 2)); aspect-ratio: 384 / 185; }
  .cg-card--5 { flex: 0 0 calc(40.93% - (var(--spacing-5) / 2)); aspect-ratio: 263 / 185; }

  .cg-list__item {
    gap: var(--spacing-5); /* Figma desktop: 20px thumb->name */
    padding: var(--spacing-4) var(--spacing-5); /* Figma desktop: 16px / 20px */
  }
  .cg-list__thumb { flex-basis: 62px; width: 62px; height: 62px; }
}