/* PowerUp Casino — site.css
   Additional CSS on top of design-system/styles.css + brand.css + app-shell.css.
   Scope: Button/CTA component (no .btn class ships in the design-system tokens —
   the reference is a React component), SEO section, compliance footer,
   media-frame placeholder label, and the ≤1023px mobile-scroll override. */

/* ---------------------------------------------------------------------
   1. CTA button ("Button" component from the reference, reproduced in CSS)
   --------------------------------------------------------------------- */
.ck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--btn-h);
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font: 700 14.5px var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), background var(--dur);
}
.ck-btn:hover { transform: translateY(-1px); }
.ck-btn .lucide { flex-shrink: 0; }

.ck-btn--primary {
  background: var(--grad-accent);
  color: var(--accent-ink);
  box-shadow: var(--glow-cta);
}
.ck-btn--primary:hover { box-shadow: var(--glow-cta-hover); }

.ck-btn--secondary {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text-1);
}
.ck-btn--secondary:hover { background: var(--surface-3); }

.ck-btn--sm { height: var(--btn-h-sm); padding: 0 var(--sp-4); font-size: 13.5px; }
.ck-btn--lg { height: var(--btn-h-lg); padding: 0 var(--sp-6); font-size: 16px; }
.ck-btn--block { width: 100%; }

/* ---------------------------------------------------------------------
   2. SEO section — readable long-form text on the dark app-shell theme
   --------------------------------------------------------------------- */
.ck-seo {
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.ck-seo h2 {
  font: 800 var(--fs-h3) var(--font-display);
  color: var(--text-1);
  margin-bottom: var(--sp-4);
}
.ck-seo p {
  max-width: 72ch;
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.ck-seo p + p { margin-top: var(--sp-4); }

/* ---------------------------------------------------------------------
   3. Compliance footer
   --------------------------------------------------------------------- */
.ck-footer {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.ck-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-6);
}
.ck-footer-col h3 {
  font: 700 13px var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-3);
  margin-bottom: var(--sp-3);
}
.ck-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.ck-footer-col a {
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.ck-footer-col a:hover { color: var(--text-1); }

.ck-footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.ck-footer-legal,
.ck-footer-disclosure,
.ck-footer-copy {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: var(--lh-snug);
  max-width: 80ch;
}
.ck-footer-legal a { color: var(--text-2); }
.ck-footer-legal a:hover { color: var(--text-1); }

/* ---------------------------------------------------------------------
   3b. Desktop scroll-chain fix (flexbox min-height:auto bug)
   .ck-main is a CSS Grid item (from .ck-app) containing a flex column
   (.ck-main-scroll flex:1; overflow-y:auto). Flex items default to
   min-height:auto, so once .ck-main-scroll's content (hero+grid+SEO+
   footer) is taller than the viewport, .ck-main grows to fit that content
   instead of capping at 100vh — and since .ck-app has overflow:hidden,
   every pixel beyond the first viewport height is silently clipped and
   NOT reachable by scrolling. Measured: .ck-main stretched to 2645px in
   a 900px viewport, cutting off the SEO section and footer entirely.
   Fix (min-height:0 on the flex chain) is CSS-only and does not touch
   app-shell.css — it only makes the overflow:auto that app-shell.css
   already declares actually take effect. Scoped to ≥1024px; the
   ≤1023px block below already switches to normal document flow.
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .ck-main, .ck-main-scroll { min-height: 0; }
}

/* ---------------------------------------------------------------------
   4. Mobile scroll fix (≤1023px)
   The app-shell locks html/body/.ck-app/.ck-main at 100vh + overflow:hidden
   for the 3-column desktop layout. Below 1023px the grid collapses to a
   single column (app-shell.css), so the page must scroll normally instead
   of being clipped to the viewport height.
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
  html, body, .ck-app, .ck-main { height: auto; overflow: visible; }
  .ck-main-scroll { overflow: visible; }
}

/* ---------------------------------------------------------------------
   5. Small-mobile topbar overflow fix (≤480px)
   .ck-pill-vip is already hidden at ≤767px by app-shell.css, but the
   remaining .ck-pill-dep + balance/deposit cluster is still wider than
   narrow phones (measured: 463px content in a 375px viewport), pushing
   the whole page into horizontal scroll. Deposit Bonus / VIP Club are
   not unique content lost — both are still reachable via the bonus rail
   and the nav-rail secondary links — so hiding the topbar promo pill on
   very small screens removes the overflow without duplicating markup.
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
  .ck-promo-pills { display: none; }
}

/* ---------------------------------------------------------------------
   6. Hero mobile fix (≤600px)
   The media frame is locked to aspect-ratio:16/9 inline in index.html;
   at narrow widths that yields ~190-210px height, not enough room for
   eyebrow + title + sub + CTA inside .ck-hero-overlay (absolute, centered)
   — the button gets clipped by the frame's rounded bottom edge. Frame has
   no in-flow content (children are all position:absolute), so dropping
   the aspect-ratio and setting a min-height sizes the box directly to
   that value with no extra flow content to fight. !important is required
   to beat the inline style attribute (index.html is out of scope here;
   overriding via class from site.css is the only lever available).
   .ck-hero-arrows also moves from bottom-right to top-right so it never
   overlaps the CTA/last line of .ck-hero-sub, which now sits lower in a
   taller frame. Desktop (>600px) keeps the original 16:9 + bottom arrows.
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
  .ck-hero-frame {
    aspect-ratio: auto !important;
    min-height: 360px;
  }
  .ck-hero-arrows {
    top: var(--sp-4);
    right: var(--sp-4);
    bottom: auto;
  }
}

/* ---------------------------------------------------------------------
   7. Long-form article (home-article-de.html) — dark-theme prose
   .ck-article is a flex child of the .ck-main-scroll column (app-shell.css);
   min-width:0 stops a wide table from pushing the flex item past the
   viewport at narrow widths even though each table has its own scroll
   wrapper (see .tbl-wrap below).
   --------------------------------------------------------------------- */
.ck-article {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.ck-article section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.ck-article h2 {
  font: 800 var(--fs-h3) var(--font-display);
  color: var(--text-1);
}
.ck-article h3 {
  font: 700 var(--fs-h4) var(--font-display);
  color: var(--text-1);
  margin-top: var(--sp-2);
}
.ck-article p {
  max-width: 72ch;
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.ck-article ul {
  max-width: 72ch;
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  padding-left: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.ck-article a { color: var(--accent-2); }
.ck-article a:hover { color: var(--text-1); }

/* tables: single markup, horizontal-scroll wrapper on narrow screens —
   no card-duplication needed (each row stays short: 2-4 cells). */
.ck-article .tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.ck-article table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.ck-article th,
.ck-article td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  color: var(--text-2);
}
.ck-article th {
  color: var(--text-1);
  font: 700 var(--fs-xs) var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  background: var(--surface-2);
  white-space: nowrap;
}
.ck-article tbody tr:hover { background: var(--surface-2); }

/* FAQ (dl/dt/dd) */
.ck-article dl {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: 72ch;
}
.ck-article dt {
  font: 700 var(--fs-lg) var(--font-display);
  color: var(--text-1);
}
.ck-article dd {
  margin: var(--sp-2) 0 0;
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ---------------------------------------------------------------------
   8. Featured cards + daily-reward card as full cloak links (item 3/4
   of the integration brief) — reset anchor defaults these components
   pick up now that .ck-feat-card is an <a> and .ck-reward is a
   click-through div, without touching app-shell.css.
   --------------------------------------------------------------------- */
a.ck-feat-card { color: inherit; text-decoration: none; }
.ck-reward { cursor: pointer; }