/* ============================================================
   FIGHT CLUB TLV — DESIGN SYSTEM COMPONENTS
   ------------------------------------------------------------
   Extracted verbatim from the bound design system bundle
   (FightClubTLVDesignSystem_7a4d94): Badge, Button, Card, Input,
   ProgramCard, SectionHeader, StatBlock.
   Do not restyle these — they are the shared component layer.
   ============================================================ */

/* ---------------- Badge ---------------- */
.fcBadge{
  display:inline-flex; align-items:center; gap:.45em; font-family:var(--font-mono);
  font-weight:500; font-size:11px; letter-spacing:.08em; line-height:1;
  padding:5px 10px; border-radius:var(--r-xs); border:1px solid transparent; white-space:nowrap;
}
.fcBadge--solid{ background:var(--accent); color:var(--white); }
.fcBadge--outline{ background:transparent; color:var(--text-secondary); border-color:var(--border-strong); }
.fcBadge--ghost{ background:var(--white-06); color:var(--text-secondary); }
.fcBadge--open{ background:var(--green-tint); color:var(--green-500); }
.fcBadge--filling{ background:var(--amber-tint); color:var(--amber-500); }
.fcBadge--full{ background:var(--red-tint); color:var(--red-300); }
.fcBadge__dot{ width:7px; height:7px; border-radius:var(--r-pill); background:currentColor; }

/* ---------------- Button ---------------- */
.fcBtn{
  --_bg: var(--accent); --_fg: var(--text-on-accent); --_bd: transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-sans); font-weight:700; line-height:1; white-space:nowrap;
  border:var(--bw-thick) solid var(--_bd); background:var(--_bg); color:var(--_fg);
  border-radius:var(--r-sm); cursor:pointer; text-decoration:none;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.fcBtn--md{ height:48px; padding:0 24px; font-size:15px; }
.fcBtn--sm{ height:38px; padding:0 16px; font-size:13.5px; }
.fcBtn--lg{ height:58px; padding:0 36px; font-size:17px; letter-spacing:.01em; }
.fcBtn--block{ width:100%; }

.fcBtn--primary{ --_bg:var(--accent); --_fg:var(--text-on-accent); }
.fcBtn--primary:hover{ --_bg:var(--accent-hover); box-shadow:var(--glow-red-md); }
.fcBtn--primary:active{ --_bg:var(--accent-press); transform:scale(.97); box-shadow:none; }

.fcBtn--secondary{ --_bg:transparent; --_fg:var(--text-primary); --_bd:var(--border-strong); }
.fcBtn--secondary:hover{ --_bd:var(--accent); --_fg:var(--white); background:var(--white-04); }
.fcBtn--secondary:active{ transform:scale(.97); }

.fcBtn--ghost{ --_bg:transparent; --_fg:var(--text-secondary); --_bd:transparent; }
.fcBtn--ghost:hover{ --_fg:var(--white); background:var(--white-06); }
.fcBtn--ghost:active{ transform:scale(.97); }

.fcBtn:focus-visible{ outline:none; box-shadow:var(--glow-focus); }
.fcBtn:disabled, .fcBtn[aria-disabled="true"]{ opacity:.4; pointer-events:none; box-shadow:none; transform:none; }
.fcBtn svg{ width:1.15em; height:1.15em; }

/* ---------------- Card ---------------- */
.fcCard{
  position:relative; background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); box-shadow:var(--shadow-md); overflow:hidden;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.fcCard--pad{ padding:24px; }
.fcCard--flush{ padding:0; }
.fcCard--interactive{ cursor:pointer; }
.fcCard--interactive:hover{ border-color:var(--border-accent); transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.fcCard--accent::before{
  content:""; position:absolute; inset-inline-start:0; top:0; width:100%; height:var(--bw-accent);
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform var(--dur-base) var(--ease-out);
}
.fcCard--accent.fcCard--interactive:hover::before{ transform:scaleX(1); }

/* ---------------- Input / Field ---------------- */
.fcField{ display:flex; flex-direction:column; gap:7px; font-family:var(--font-sans); }
.fcField__label{ font-size:13px; font-weight:600; color:var(--text-secondary); }
.fcField__req{ color:var(--accent); margin-inline-start:3px; }
.fcField__control{
  width:100%; height:50px; padding:0 16px; font-family:inherit; font-size:15px;
  color:var(--text-primary); background:var(--bg-sunken);
  border:1px solid var(--border-default); border-radius:var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
textarea.fcField__control{ height:auto; min-height:120px; padding:14px 16px; line-height:1.55; resize:vertical; }
select.fcField__control{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2382828D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 14px center; padding-inline-start:40px;
}
.fcField__control::placeholder{ color:var(--text-disabled); }
.fcField__control:hover{ border-color:var(--border-strong); }
.fcField__control:focus{ outline:none; border-color:var(--accent); box-shadow:var(--glow-focus); background:var(--charcoal-850); }
.fcField--error .fcField__control{ border-color:var(--danger); }
.fcField__hint{ font-size:12px; color:var(--text-muted); }
.fcField--error .fcField__hint{ color:var(--red-300); }

/* ---------------- ProgramCard ---------------- */
.fcProg{
  position:relative; display:flex; flex-direction:column; text-align:start;
  background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--r-lg);
  overflow:hidden; cursor:pointer; text-decoration:none; color:inherit;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.fcProg:hover{ border-color:var(--border-accent); transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.fcProg__media{
  position:relative; aspect-ratio:4/3; background:var(--charcoal-700);
  background-size:cover; background-position:center;
}
.fcProg__media::after{ content:""; position:absolute; inset:0; background:var(--scrim-full); opacity:.85; }
.fcProg__ph{ position:absolute; inset:0; display:grid; place-items:center; color:var(--steel-400);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-align:center; padding:12px; }
.fcProg__lvl{ position:absolute; top:12px; inset-inline-start:12px; z-index:2; }
.fcProg__en{ position:absolute; bottom:12px; inset-inline-start:16px; z-index:2;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; color:var(--fog-100); text-transform:uppercase; }
.fcProg__body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; }
.fcProg__title{ font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:-.02em; line-height:1; color:var(--text-primary); margin:0;
  transition:color var(--dur-fast) var(--ease-out); }
.fcProg:hover .fcProg__title{ color:var(--accent-ink); }
.fcProg__desc{ font-family:var(--font-sans); font-size:14.5px; line-height:1.55; color:var(--text-muted); margin:0; }
.fcProg__foot{ margin-top:6px; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--accent-ink); }
.fcProg__arrow{ transition:transform var(--dur-base) var(--ease-out); }
.fcProg:hover .fcProg__arrow{ transform:translateX(-5px); }

/* ---------------- SectionHeader ---------------- */
.fcSH{ display:flex; flex-direction:column; gap:14px; }
.fcSH--center{ align-items:center; text-align:center; }
.fcSH__kick{
  font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.22em;
  color:var(--text-kicker); text-transform:uppercase; display:inline-flex; align-items:center; gap:10px;
}
.fcSH__kick::before{ content:""; width:22px; height:var(--bw-accent); background:var(--accent); flex:none; }
.fcSH--center .fcSH__kick::after{ content:""; width:22px; height:var(--bw-accent); background:var(--accent); flex:none; }
.fcSH__title{
  font-family:var(--font-sans); font-weight:900; line-height:1.05; letter-spacing:-.02em;
  color:var(--text-primary); font-size:clamp(1.75rem, 3.4vw, 2.75rem); text-wrap:balance; margin:0;
}
.fcSH__title em{ color:var(--accent); font-style:normal; }
.fcSH__lead{
  font-family:var(--font-sans); font-size:18px; line-height:1.6; color:var(--text-muted);
  max-width:58ch; margin:0;
}
.fcSH--center .fcSH__lead{ margin-inline:auto; }

/* ---------------- StatBlock ---------------- */
.fcStat{ display:flex; flex-direction:column; gap:6px; }
.fcStat--center{ align-items:center; text-align:center; }
.fcStat__n{
  font-family:var(--font-mono); font-weight:700; font-variant-numeric:tabular-nums;
  font-size:clamp(2.5rem, 5vw, 3.5rem); line-height:.95; letter-spacing:-.02em; color:var(--text-primary);
}
.fcStat__n em{ color:var(--accent); font-style:normal; }
.fcStat__label{ font-family:var(--font-sans); font-size:14px; color:var(--text-muted); line-height:1.4; }
.fcStat__rule{ width:32px; height:var(--bw-accent); background:var(--accent); margin-top:2px; }
.fcStat--center .fcStat__rule{ align-self:center; }