/* ==========================================================================
   Kilnwork — shared components
   Every class here is global and reusable. Section-specific styling belongs
   in assets/css/sections/*.css scoped under that section's root class.
   ========================================================================== */

/* ---- Button -------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-ring: transparent;
  --btn-shadow: none;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.6875rem var(--space-5);      /* 11 / 20 → 44px tall */
  border-radius: var(--radius-pill);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: inset 0 0 0 1px var(--btn-ring), var(--btn-shadow);
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  line-height: 1.25;
  letter-spacing: var(--tracking-snug);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-2) var(--ease-standard),
    color var(--dur-2) var(--ease-standard),
    box-shadow var(--dur-3) var(--ease-out-quart),
    translate var(--dur-3) var(--ease-out-quart);
}

.btn:hover  { translate: 0 -2px; }
.btn:active { translate: 0 0; transition-duration: var(--dur-1); }

.btn:disabled,
.btn[aria-disabled="true"] {
  translate: none;
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: inset 0 0 0 1px var(--btn-ring);
}

.btn--primary {
  --btn-bg: var(--brand);
  --btn-fg: var(--ink-on-brand);
  --btn-shadow: var(--shadow-sm);
}
.btn--primary:hover  { --btn-bg: var(--brand-hover); --btn-shadow: var(--shadow-lift); }
.btn--primary:active { --btn-shadow: var(--shadow-xs); }

.btn--secondary {
  --btn-fg: var(--ink);
  --btn-ring: var(--border-strong);
}
.btn--secondary:hover {
  --btn-ring: var(--ink);
  --btn-bg: color-mix(in oklab, var(--ink) 5%, transparent);
  --btn-shadow: var(--shadow-sm);
}
.btn--secondary:active { --btn-bg: color-mix(in oklab, var(--ink) 9%, transparent); }

.btn--ghost {
  --btn-fg: var(--ink-muted);
  padding-inline: var(--space-3);
}
.btn--ghost:hover {
  --btn-fg: var(--ink);
  --btn-bg: color-mix(in oklab, var(--ink) 6%, transparent);
}
.btn--ghost:active { --btn-bg: color-mix(in oklab, var(--ink) 10%, transparent); }

.btn--accent {
  --btn-bg: var(--accent);
  --btn-fg: var(--ink-on-accent);
  --btn-shadow: var(--shadow-sm);
}
.btn--accent:hover  { --btn-bg: var(--accent-hover); --btn-shadow: var(--shadow-lift); }

.btn--lg {
  padding: var(--space-4) var(--space-7);
  font-size: var(--step-1);
}

.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--step--1);
}

.btn--block { width: 100%; }

/* Icon-only: pass an accessible name with aria-label. */
.btn--icon {
  padding: 0;
  width: 2.75rem;
  aspect-ratio: 1;
}

.btn > svg { width: 1.15em; height: 1.15em; flex: none; }

/* ---- Pill ---------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background-color: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xs);
  color: var(--ink-muted);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  line-height: 1.2;
  text-decoration: none;
}

.pill > svg { width: 1em; height: 1em; flex: none; }

.pill--brand {
  background-color: var(--brand-tint);
  color: var(--brand-deep);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 22%, transparent);
}

.pill--accent {
  background-color: var(--accent-tint);
  color: var(--accent-hover);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent);
}

.pill--ghost {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

a.pill,
button.pill {
  cursor: pointer;
  transition: box-shadow var(--dur-2) var(--ease-standard),
              color var(--dur-2) var(--ease-standard),
              translate var(--dur-3) var(--ease-out-quart);
}
a.pill:hover,
button.pill:hover {
  color: var(--ink);
  translate: 0 -1px;
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-sm);
}
a.pill:active,
button.pill:active { translate: 0 0; }

/* ---- Eyebrow ------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--highlight);
  font-size: var(--step--2);
  font-weight: var(--weight-semi);
  line-height: 1.2;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  flex: none;
  border-radius: var(--radius-pill);
  background-color: currentColor;
}

.eyebrow--center { justify-content: center; }
.eyebrow--bare::before { display: none; }

/* ---- Card ---------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--card-pad, var(--space-7));
  border-radius: var(--radius-lg);
  background-color: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
  transition: box-shadow var(--dur-3) var(--ease-out-quart),
              translate var(--dur-3) var(--ease-out-quart);
}

.card > * { max-width: none; }

.card__title {
  font-size: var(--step-3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.card__body {
  color: var(--ink-muted);
  font-size: var(--step-0);
  line-height: var(--leading-body);
}

.card__media {
  border-radius: var(--radius-md);
  overflow: clip;
  background-color: var(--surface-sunken);
}

.card--sunken {
  background-color: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--border);
}

.card--flat { box-shadow: inset 0 0 0 1px var(--border); }

.card--glass {
  background-color: color-mix(in oklab, var(--surface-raised) 65%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-md);
}

.card--tight { --card-pad: var(--space-5); }
.card--roomy { --card-pad: var(--space-9); }

/* Only interactive cards move. */
.card--link { cursor: pointer; text-decoration: none; }
.card--link:hover {
  translate: 0 -3px;
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-lift);
}
.card--link:active { translate: 0 -1px; }

/* Stretch a link across the whole card without nesting interactive elements. */
.card__link-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* ---- Badge --------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.1875rem var(--space-2);
  border-radius: var(--radius-xs);
  background-color: color-mix(in oklab, var(--ink) 8%, transparent);
  color: var(--ink-muted);
  font-size: var(--step--2);
  font-weight: var(--weight-semi);
  line-height: 1.35;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.badge--brand   { background-color: var(--brand-tint);  color: var(--brand-deep); }
.badge--accent  { background-color: var(--accent-tint); color: var(--accent-hover); }
.badge--success { background-color: color-mix(in oklab, var(--success) 14%, transparent); color: var(--success); }
.badge--warning { background-color: color-mix(in oklab, var(--warning) 16%, transparent); color: var(--warning); }

/* ---- Stat ---------------------------------------------------------------- */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stat__value {
  display: flex;
  align-items: baseline;
  gap: 0.06em;
  font-size: var(--step-7);
  font-weight: var(--weight-medium);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-tighter);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.stat__label {
  max-width: 22ch;
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
}

.stat--sm .stat__value { font-size: var(--step-5); }
.stat--brand .stat__value { color: var(--brand); }

/* ---- Avatar -------------------------------------------------------------- */

.avatar {
  --avatar-size: 2.75rem;
  display: grid;
  place-items: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  flex: none;
  border-radius: var(--radius-pill);
  overflow: clip;
  background-image: linear-gradient(150deg,
    color-mix(in oklab, var(--brand) 38%, var(--surface-sunken)),
    color-mix(in oklab, var(--accent) 30%, var(--surface-sunken)));
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--ink);
  font-size: calc(var(--avatar-size) * 0.36);
  font-weight: var(--weight-semi);
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

.avatar > img,
.avatar > svg { width: 100%; height: 100%; object-fit: cover; }

.avatar--sm { --avatar-size: 2rem; }
.avatar--lg { --avatar-size: 4rem; }

.avatar-group { display: flex; }
.avatar-group > .avatar + .avatar { margin-inline-start: -0.6875rem; }
.avatar-group > .avatar { box-shadow: 0 0 0 2px var(--surface); }

/* ---- Divider ------------------------------------------------------------- */

.divider {
  border: 0;
  height: 1px;
  width: 100%;
  background-image: linear-gradient(
    to right,
    transparent,
    var(--border-strong) 12%,
    var(--border-strong) 88%,
    transparent
  );
}

.divider--flat { background-image: none; background-color: var(--border); }

.divider--vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
  background-image: linear-gradient(to bottom, transparent, var(--border-strong) 20%, var(--border-strong) 80%, transparent);
}

/* ---- Logo mark ----------------------------------------------------------- */
/* Markup: <a class="logo-mark"><svg class="logo-mark__glyph">…</svg>
             <span class="logo-mark__word">Kilnwork</span></a>
   The glyph SVG lives in DESIGN.md so every section uses the same one. */

.logo-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  text-decoration: none;
  transition: opacity var(--dur-2) var(--ease-standard);
}

.logo-mark:hover { opacity: 0.75; }

.logo-mark__glyph {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  color: var(--brand);
}

.logo-mark__word {
  font-size: var(--step-2);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

/* ---- Gradient orb -------------------------------------------------------- */
/* Decorative background light. Absolutely positioned by the parent; the
   parent needs position:relative and, usually, overflow:clip. */

.gradient-orb {
  position: absolute;
  z-index: var(--z-below);
  width: var(--orb-size, 32rem);
  aspect-ratio: var(--orb-ratio, 1);
  border-radius: var(--radius-pill);
  background-image: radial-gradient(
    closest-side,
    color-mix(in oklab, var(--orb-color, var(--brand)) 62%, transparent),
    color-mix(in oklab, var(--orb-color, var(--brand)) 18%, transparent) 55%,
    transparent 78%
  );
  filter: blur(var(--orb-blur, 56px));
  opacity: var(--orb-opacity, 0.55);
  pointer-events: none;
}

.gradient-orb--accent { --orb-color: var(--accent); }
.gradient-orb--alt    { --orb-color: var(--accent-alt); }

@media (prefers-reduced-motion: no-preference) {
  .gradient-orb--drift {
    animation: kw-orb-drift 24s var(--ease-standard) infinite alternate;
  }
}

@keyframes kw-orb-drift {
  from { translate: -3% -2%; scale: 1; }
  to   { translate: 3% 2%;   scale: 1.08; }
}