/* ============================================================
   BUTTON
   Requires: tokens.css
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: var(--text-btn-size);
  font-weight: 600;
  line-height: var(--text-btn-lh);
  letter-spacing: var(--text-btn-ls);
  border-radius: var(--radius-lg);
  cursor: pointer;
  white-space: nowrap;
  /* geometry derived from the size knob — see --btn-h-* in tokens.css */
  --btn-h: var(--btn-h-s);
  min-height: var(--btn-h);
  padding-inline: calc(var(--btn-h) * 0.48);
  border: calc(var(--btn-h) * 0.05) solid transparent;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.btn:hover { opacity: 0.85; }

/* Size variants — set the height, everything else follows */
.btn-l  { --btn-h: var(--btn-h-l);  }
.btn-m  { --btn-h: var(--btn-h-m);  }
.btn-s  { --btn-h: var(--btn-h-s);  }
.btn-xs {
  --btn-h: var(--btn-h-xs);
  border-radius: var(--radius-md); /* controls 12, like chips (radii by role, 05.10.2026) */
  font-size: var(--text-btn-xs-size);
}

/* CTA size — the button of the Intro block on the live home page, Hub and Stage (Webflow class .cta).
   Decided 02.10.2026: a fixed height (--btn-h-cta) instead of top/bottom padding; the text is centred by flex.
   Side padding 4.375rem is the live button's, a component value. The extra 0.1875rem at the bottom keeps the
   live optical centring of TT Commons (its glyphs sit low in the em box; docs/layout-rules.md).
   The border is drawn inside the height, so a stroke button is exactly as tall as a filled one. */
.btn-cta {
  --btn-h: var(--btn-h-cta);
  --btn-border: var(--border-thick); /* 4px — smaller, denser dots than the live 5 (02.10.2026) */
  box-sizing: border-box;
  height: var(--btn-h);
  min-height: 0;
  padding: 0 calc(4.375rem - var(--btn-border)) 0.1875rem;
  border-width: var(--btn-border);
  border-radius: var(--radius-xl);
}
/* Phones: 80 high (--btn-h-cta, decided 02.10.2026), Birch/Mobile/Button 18, radius 12 (02.10.2026). */
@media (max-width: 767px) {
  .btn-cta { width: 100%; font-size: 1.125rem; border-radius: var(--radius-md); }
}

/* Button group (decided 05.10.2026): buttons side by side are all as wide as the widest one — an auto-sized
   grid with equal 1fr columns resolves every column to the widest label. Any CTA pair takes it with one class.
   Phones: one column, full width, 8 between the buttons. */
.btn-group {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--gap-main);
}
.btn-group > .btn { width: 100%; }
@media (max-width: 47.9375rem) {
  .btn-group { display: grid; grid-auto-flow: row; align-self: stretch; gap: var(--space-xs); }
}

/* Style variants */
.btn-default {
  background: var(--color-primary);
  color: var(--color-text-inverted);
}
.btn-default:hover {
  opacity: 1;
  background: var(--color-accent-indigo);
  color: var(--color-text);
}
/* Arrow (05.10.2026): «→» in its own span moves a little right on hover — of the button itself or of a card
   whose link the button belongs to (:hover on any link ancestor). */
.btn__arrow { display: inline-block; margin-left: 0.3em; transition: transform var(--duration-hover) var(--ease-hover); }
.btn:hover .btn__arrow, a:hover .btn .btn__arrow { transform: translateX(0.25em); }
@media (prefers-reduced-motion: reduce) { .btn__arrow { transition: none; } }

/* Dark — the case-card button from the live Hub page (05.10.2026): #141414 → Background/Black.
   Hover keeps the colour (Liliya, 05.10): the moving arrow is the hover signal. */
.btn-dark {
  background: var(--color-bg);
  color: var(--color-text);
}
.btn-dark:hover { opacity: 1; }
/* Stroke follows the theme's text colour (--ink from page.css): white on dark, black on light.
   Pages without page.css keep the original white. */
.btn-stroke {
  background: transparent;
  color: var(--ink, var(--color-text));
  border-style: dotted;
  border-color: currentColor;
}
.btn-stroke:hover {
  opacity: 1;
  background: var(--color-accent-purple);
  border-color: var(--color-accent-purple);
  color: var(--color-text);
}

/* ── Mobile ≤767px: btn-s shrinks to 60px tall, smaller radius + font ──
   Setting the height knob rather than min-height so padding and border
   shrink with it (28.8 / 3 instead of the desktop 48 / 5). */
@media (max-width: 767px) {
  .btn-s {
    --btn-h: 3.75rem;                /* 60px */
    border-radius: var(--radius-md); /* 12px */
    font-size: 1.125rem;             /* 18px */
  }
}