/* Poker Revamp '26 page styles, one block per section in render order.
 * Never loaded alongside the legacy /less/poker/ stylesheets, which set global html/body rules. */

@import "./tokens.css";

/* _LayoutHome puts .bg-gray-01 on <body>; this file only loads on the new poker page. The shared
   header and footer inherit the font, so they match the homepage and the main verticals. */
body,
body.bg-gray-01 {
  background: var(--color-background-1);
  font-family: var(--font-body);
}

.poker-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--poker-section-gap);
  padding-bottom: var(--poker-page-pad-bottom);
  background: var(--color-background-1);
  color: var(--color-foreground-low);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  /* Decorative chips run off the screen edge, as in Figma. */
  overflow-x: clip;
}

/* Figma's chips bob between two variants (Smart Animate, ease-in-out, back and forth); each chip
   sets its own distance and duration. `translate` composes with the chips' rotate transforms. */
@keyframes poker-chip-float {
  to {
    translate: 0 var(--poker-chip-float);
  }
}

/* Below 992px the site header is fixed (53px, 40px at 575px and below). */
@media (max-width: 991px) {
  .poker-v2 {
    padding-top: calc(53px + 16px);
  }
}

@media (max-width: 575px) {
  .poker-v2 {
    padding-top: calc(40px + 10px);
  }
}

/* The hero is still a card below 1280px, so it needs room under the in-flow header. */
@media (min-width: 992px) and (max-width: 1279px) {
  .poker-v2 {
    padding-top: var(--poker-gutter);
  }
}

.poker-v2 > * {
  width: 100%;
  max-width: calc(var(--poker-maxw) + 2 * var(--poker-gutter));
  margin-inline: auto;
  padding-inline: var(--poker-gutter);
}

.poker-v2 img {
  max-width: 100%;
  height: auto;
}

.poker-v2 a:not([class]) {
  color: var(--color-link);
}

/* The site's global styles colour headings dark. */
.poker-v2 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  color: var(--color-foreground-high);
}

.poker-v2 th {
  color: var(--color-foreground-high);
}

/* ---- shared section heading ---------------------------------------------------------------- */
.poker-cards__title,
.poker-discover__title,
.poker-promos__title,
.poker-faq__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-foreground-high);
}

.poker-cards__subtitle,
.poker-discover__subtitle,
.poker-promos__subtitle {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-foreground-low);
}

.poker-cards__list,
.poker-discover__list,
.poker-promos__list,
.poker-faq__accordion,
.poker-block__accordion {
  margin-top: var(--poker-head-gap);
}

@media (min-width: 768px) {
  .poker-cards__title,
  .poker-discover__title,
  .poker-promos__title,
  .poker-faq__title {
    font-size: var(--text-2xl);
  }

  .poker-cards__subtitle,
  .poker-discover__subtitle,
  .poker-promos__subtitle {
    font-size: var(--text-base);
  }
}

/* ---- cards_carousel: More Ways to Win ---------------------------------------------------- */
.poker-cards__list,
.poker-discover__list,
.poker-promos__list {
  list-style: none;
  margin-bottom: 0;
  padding: 0;
}

/* AC5 asks for this row to actually SCROLL with carousel.js, not merely to carry its
   attributes. carousel.js drives whatever overflows — it reads scrollWidth > clientWidth and
   shows the nav — so the track has to be a horizontal flex scroller or there is nothing for
   it to move. Mirrors the homepage's track contract (css/home/app.css). */
.poker-cards__list {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.poker-cards__item {
  scroll-snap-align: start;
}

/* Nav visibility mirrors the homepage's contract exactly (css/home/app.css): arrows are
   dropped on mobile — the card peek is what signals scrollability — and appear from 768px,
   but only when carousel.js has decided the track overflows and cleared [hidden].
   Without this the unstyled buttons showed on a phone, which the design explicitly does not
   want. Scoped to .poker-v2 so it cannot reach another page's carousel. */
.poker-v2 .carousel__nav,
.poker-v2 .carousel__nav[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .poker-v2 .carousel__nav:not([hidden]) {
    display: flex;
    gap: 2px;
  }
}

/* ---- conversion_cta: closing banner ------------------------------------------------------ */
/* The closing banner's image is desktop-only: Figma shows none on mobile and the payload
   ships no mobile crop. Marked in the markup, hidden here, so the partial stays styling-free. */
@media (max-width: 575px) {
  .poker-closing__media[data-desktop-only="true"] {
    display: none;
  }
}