/* Kingmaker Deutchland — article.css
   Additional CSS on top of design-system/main.css + palette.css + layout.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)
   --------------------------------------------------------------------- */
.th-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);
}
.th-btn:hover { transform: translateY(-1px); }
.th-btn .lucide { flex-shrink: 0; }

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

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

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

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

/* ---------------------------------------------------------------------
   3. Compliance footer
   --------------------------------------------------------------------- */
.th-footer {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.th-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-6);
}
.th-footer-col {
  min-width: 0;
}
.th-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);
}
.th-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.th-footer-col a {
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.th-footer-col a:hover { color: var(--text-1); }

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

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

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

/* ---------------------------------------------------------------------
   5. Small-mobile topbar overflow fix (≤480px)
   .th-pill-vip is already hidden at ≤767px by layout.css, but the
   remaining .th-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) {
  .th-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 .th-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 article.css is the only lever available).
   .th-hero-arrows also moves from bottom-right to top-right so it never
   overlaps the CTA/last line of .th-hero-sub, which now sits lower in a
   taller frame. Desktop (>600px) keeps the original 16:9 + bottom arrows.
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
  .th-hero-frame {
    aspect-ratio: auto !important;
    min-height: 360px;
  }
  .th-hero-arrows {
    top: var(--sp-4);
    right: var(--sp-4);
    bottom: auto;
  }
}

/* ---------------------------------------------------------------------
   7. Long-form article (the home article section) — dark-theme prose
   .th-article is a flex child of the .th-main-scroll column (layout.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 .tab-box below).
   --------------------------------------------------------------------- */
.th-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);
}
.th-article section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.th-article h2 {
  font: 800 var(--fs-h3) var(--font-display);
  color: var(--text-1);
}
.th-article h3 {
  font: 700 var(--fs-h4) var(--font-display);
  color: var(--text-1);
  margin-top: var(--sp-2);
}
.th-article p {
  max-width: 72ch;
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.th-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);
}
.th-article a { color: var(--accent-2); }
.th-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). */
.th-article .tab-box {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.th-article table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.th-article th,
.th-article td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  color: var(--text-2);
}
.th-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;
}
.th-article tbody tr:hover { background: var(--surface-2); }

/* FAQ (dl/dt/dd) */
.th-article dl {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: 72ch;
}
.th-article dt {
  font: 700 var(--fs-lg) var(--font-display);
  color: var(--text-1);
}
.th-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 as full cloak links (item 3/4 of the integration
   brief) — reset anchor defaults this component picks up now that
   .th-feat-card is an <a>, without touching layout.css.
   --------------------------------------------------------------------- */
a.th-feat-card { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------------
   9. Two-column shell variant (no right bonus rail) — /app/ and /login/
   layout.css defines .th-app as a 3-column grid (244px 1fr 340px) ONLY as
   its un-scoped base rule; its own @media (max-width:1279px) and
   (max-width:1023px) blocks already collapse that down for tablet/mobile.
   Pages without the third (.th-social) grid child only need an override
   at the width where layout.css's un-scoped 3-column rule is actually in
   effect (>=1280px) — otherwise the reserved 340px column shows as a dead
   gap on wide desktop. Scoping this to min-width:1280px (rather than an
   inline style on .th-app, which would beat layout.css's mobile media
   queries outright and break the burger-menu collapse) leaves the
   <=1279px responsive behavior entirely untouched. */
@media (min-width: 1280px) {
  .th-app--no-social { grid-template-columns: 244px minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   10. Extra-small topbar overflow fix (≤374px)
   Section 5 above already drops .th-promo-pills at ≤480px, which is
   enough to fit the topbar at 375px and up (measured: no page-level
   overflow at 375/768/1440). Below that, on 320px devices, the remaining
   .th-topbar-right cluster (balance pill + notification bell + avatar,
   ~282px) still doesn't fit next to the hamburger button, pushing
   document.documentElement.scrollWidth to ~345px against a 320px
   viewport (~25px page-level horizontal overflow, confirmed via
   scrollWidth/clientWidth comparison, not just visual inspection).
   The notification bell is not unique content (no unread-count logic
   ships in stage.js/client.js, it is a static placeholder icon), so
   hiding it on the narrowest phones removes the overflow without
   dropping any real functionality or duplicating markup. Scoped to
   <375px so 375px+ (already fitting) is untouched.
   --------------------------------------------------------------------- */
@media (max-width: 374px) {
  .th-icon-btn { display: none; }
  /* .th-sec-head (section title + prev/next/"view all" cluster, reused by
     every lobby row) is a no-wrap flex row in layout.css; at 320px its two
     halves (~105px title + ~190px actions + 12px gap = 307px) no longer
     fit the ~286px content width left after .th-main-scroll's 16px
     padding, and — because flex items don't wrap by default — the excess
     bubbles up through .th-main-scroll into a page-level scrollWidth
     overflow even though no element's own bounding box visually crosses
     the viewport edge. Allowing the row to wrap onto two lines below
     375px removes that overflow with a pure layout change (title above,
     prev/next/"view all" below) — no content dropped, no markup touched. */
  .th-sec-head { flex-wrap: wrap; row-gap: var(--sp-2); }
}

/* ---------------------------------------------------------------------
   11. Bonus-rail grid overflow fix (desktop, >=1280px — font-swap regression)
   .th-bgrid (layout.css) is `display:grid;grid-template-columns:1fr 1fr`
   inside .th-social, a 340px column with 14px side padding (312px content
   width). CSS Grid items default to `min-width:auto`, so a track never
   shrinks below its content's min-content size — the same gotcha already
   documented above for the flex chain (§3b), just the grid version of it.
   Manrope's uppercase/bold metrics (.th-bmini-fig span, e.g. "CASHBACK")
   run measurably wider than the donor kit's default typeface at the same
   font-size/tracking, so the two-column grid's natural content width
   (measured: 328px) now exceeds the 312px track — .th-social's
   `overflow:hidden` clips it silently with no visible scrollbar. Setting
   `minmax(0, 1fr)` lets each column shrink to the track width and wrap
   text instead of forcing the grid wider than its container; no markup
   change, no values from layout.css touched.

   That alone still leaves .th-bmini-fig (the `<b>25 %</b><span>Cashback</span>`
   figure row) 7-9px over its own now-narrower box: it is a `display:flex`
   row with no wrap, and the same wider Manrope label text no longer fits
   next to the number at this column width. Allowing it to wrap moves the
   label onto its own line under the figure — a one-line layout change,
   not a content change. */
@media (min-width: 1280px) {
  .th-bgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .th-bmini, .th-bwide { min-width: 0; }
  .th-bmini-fig { flex-wrap: wrap; }
}