/* =============================================================================
   Ela Tribe — what /tribe and its blog share (DES-413, DES-425).
   -----------------------------------------------------------------------------
   Linked from both pages (<svelte:head>), so the blog looks like part of
   the Tribe page, not a different site: the dark page, the gutters, the
   section heading and the green Join button. Everything is under .tribe,
   the wrapper both pages put around their content. The header itself is
   $lib/components/tribe/TribeBar.svelte, the footer TribeFooter.svelte.
   ============================================================================= */

/* The whole document is dark on these pages. /tribe sets the theme in
   onMount; the blog gets it from the server (pageMeta). */
html.is-tribe, html.is-tribe body { background: var(--bg-secondary); }
html.is-tribe { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html.is-tribe { scroll-behavior: auto; } }

.tribe {
  --tribe-gutter: clamp(20px, 5vw, 72px);
  position: relative; min-height: 100svh; overflow-x: clip;
  background: var(--bg-secondary); color: var(--text-primary); font-family: var(--ff-text);
}

.tribe-h2 {
  margin: 0; font-family: var(--ff-display); font-weight: var(--fw-bold);
  font-size: clamp(40px, 7vw, 88px); line-height: 0.95; letter-spacing: -0.03em;
}

/* The Join button: brand green, presses in. No glow or pulse: the design
   system has none. A <button> on /tribe, sometimes a link on the blog. */
.tribe .tribe-join {
  position: relative; appearance: none; border: 0; cursor: pointer; font: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-12);
  padding: var(--space-16) var(--space-28); border-radius: var(--br-full);
  font-size: var(--fz-m); font-weight: var(--fw-bold); color: var(--text-contrast); background: var(--fg-brand);
  transition: transform var(--dur-press) var(--ease-out);
}
.tribe .tribe-join:active { transform: scale(0.97); }
.tribe .tribe-join .icon { font-size: 14px; transition: transform var(--dur-base) var(--ease-out); }
.tribe .tribe-join:hover .icon { transform: translateX(4px); }
.tribe .tribe-join--s { padding: var(--space-12) var(--space-24); font-size: var(--fz-m); }

/* Small buttons get a 48px touch area on touch screens (the design stays
   the same size). */
.tribe .tribe-touch {
  position: absolute; top: 50%; left: 50%; width: max(100%, 48px); height: max(100%, 48px);
  translate: -50% -50%; pointer-events: auto;
}
@media (pointer: fine) { .tribe .tribe-touch { display: none; } }