/**
 * Team index (/by-team/).
 *
 * Everything is scoped under #kz-teams-index: the source layout used generic
 * names (.wrap, .block, .empty, .card) that Flatsome also ships, so unscoped
 * rules would leak into the header, footer and product grids.
 *
 * Mirrors assets/racers-index.css — same tokens, same component shapes — so the
 * two roster pages read as one pair rather than two designs.
 */

#kz-teams-index {
  --tx-bg:#f4f5f7; --tx-surface:#fff; --tx-fg:#15181d; --tx-muted:#6a7280;
  --tx-border:#e6e8eb; --tx-accent:#C8102E; --tx-accent-ink:#9E0B22;
  --tx-dark:#0c0e13; --tx-dark-line:rgba(255,255,255,.09);
  --tx-r:12px; --tx-shadow:0 6px 24px rgba(15,24,40,.10);
  --tx-display:'Barlow Condensed','Archivo Narrow',system-ui,sans-serif;
  background:var(--tx-bg); color:var(--tx-fg);
}
#kz-teams-index *,#kz-teams-index *::before,#kz-teams-index *::after { box-sizing:border-box; }

/* Flatsome styles every <button> on the site: line-height 2.4em, a 14px right
   and bottom margin, and a min-height. Inherited here they made the pills 56px
   tall and pushed the A→Z rail onto a second row. */
#kz-teams-index button {
  margin:0; min-height:0; line-height:1; height:auto;
  text-transform:none; letter-spacing:normal; text-shadow:none; box-shadow:none;
}
#kz-teams-index a { text-decoration:none; color:inherit; }
#kz-teams-index h1,#kz-teams-index h2,#kz-teams-index h3,#kz-teams-index h4 { margin:0; }
#kz-teams-index .tx-wrap { max-width:1280px; margin:0 auto; padding:0 40px; }

#kz-teams-index .tx-eyebrow {
  font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#ff5a52; display:inline-flex; align-items:center; gap:10px;
}
#kz-teams-index .tx-eyebrow::before { content:""; width:24px; height:2px; background:var(--tx-accent); display:inline-block; }
#kz-teams-index .tx-eyebrow-light { color:var(--tx-accent-ink); }

#kz-teams-index .tx-block { padding:56px 0; }
#kz-teams-index .tx-block-tight { padding-top:0; }

/* ---------- hero ---------- */
#kz-teams-index .tx-hero {
  position:relative; background:var(--tx-dark); color:#fff;
  overflow:hidden; padding:64px 0 60px; text-align:center;
}
#kz-teams-index .tx-hero::before {
  content:""; position:absolute; top:-45%; left:50%; transform:translateX(-50%);
  width:70%; height:190%; background:radial-gradient(circle,rgba(225,6,0,.32),rgba(225,6,0,0) 62%);
  pointer-events:none;
}
#kz-teams-index .tx-hero::after {
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 2px,transparent 2px 26px);
  pointer-events:none;
}
#kz-teams-index .tx-hero .tx-wrap { position:relative; z-index:2; }
#kz-teams-index .tx-hero h1 {
  font-family:var(--tx-display); text-transform:uppercase; font-weight:900;
  line-height:.94; letter-spacing:-.02em; font-size:clamp(42px,7vw,84px);
  margin:18px 0 0; color:#fff;
}
#kz-teams-index .tx-hero h1 em { font-style:normal; color:var(--tx-accent); }
#kz-teams-index .tx-lead {
  color:#aab3c0; font-size:16.5px; line-height:1.65; max-width:58ch; margin:18px auto 0;
}
#kz-teams-index .tx-figs { display:flex; justify-content:center; margin-top:32px; flex-wrap:wrap; }
#kz-teams-index .tx-fig { padding:0 26px; border-right:1px solid var(--tx-dark-line); text-align:center; }
#kz-teams-index .tx-fig:last-child { border-right:0; }
#kz-teams-index .tx-fig b {
  display:block; font-family:var(--tx-display); font-weight:800; font-size:34px;
  line-height:1; color:#fff; font-variant-numeric:tabular-nums;
}
#kz-teams-index .tx-fig span {
  display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#7a8494; margin-top:7px; font-weight:600;
}

/* ---------- filter bar ---------- */
#kz-teams-index .tx-fbar {
  background:rgba(244,245,247,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--tx-border);
}
#kz-teams-index .tx-fbar-row { display:flex; align-items:center; gap:16px; padding:16px 0; flex-wrap:wrap; }
#kz-teams-index .tx-pills { display:flex; gap:8px; flex-wrap:wrap; }
#kz-teams-index .tx-pill {
  font-family:var(--tx-display); text-transform:uppercase; letter-spacing:.04em;
  font-weight:600; font-size:14px; padding:9px 16px; border-radius:999px;
  border:1px solid var(--tx-border); background:var(--tx-surface); color:var(--tx-muted);
  transition:.15s; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
}
#kz-teams-index .tx-pill:hover { border-color:#c9ccd1; color:var(--tx-fg); }
#kz-teams-index .tx-pill.is-active { background:var(--tx-dark); border-color:var(--tx-dark); color:#fff; }
#kz-teams-index .tx-pill i {
  font-style:normal; font-size:12px; font-variant-numeric:tabular-nums;
  color:var(--tx-muted); background:var(--tx-bg); border-radius:999px; padding:1px 7px; font-weight:700;
}
#kz-teams-index .tx-pill.is-active i { background:rgba(255,255,255,.14); color:#fff; }

#kz-teams-index .tx-search {
  margin-left:auto; display:flex; align-items:center; gap:8px;
  background:var(--tx-surface); border:1px solid var(--tx-border);
  border-radius:999px; height:44px; padding:0 8px 0 16px; min-width:270px;
}
#kz-teams-index .tx-search input {
  flex:1; border:0; outline:0; background:none; font-size:14.5px;
  color:var(--tx-fg); font-family:inherit; box-shadow:none; margin:0; height:auto; padding:0;
}
#kz-teams-index .tx-search input::placeholder { color:var(--tx-muted); }
#kz-teams-index .tx-search svg { color:var(--tx-muted); flex-shrink:0; }
#kz-teams-index .tx-clr {
  width:28px; height:28px; border-radius:999px; display:none; place-items:center;
  color:var(--tx-muted); cursor:pointer;
}
#kz-teams-index .tx-clr:hover { background:var(--tx-bg); color:var(--tx-fg); }
#kz-teams-index .tx-search.has-val .tx-clr { display:grid; }

/* ---------- A→Z rail ---------- */
#kz-teams-index .tx-rail { display:flex; gap:5px; flex-wrap:wrap; padding-bottom:16px; }
#kz-teams-index .tx-az {
  width:34px; height:34px; border-radius:8px; font-family:var(--tx-display);
  font-weight:700; font-size:15px; color:var(--tx-fg); background:var(--tx-surface);
  border:1px solid var(--tx-border); display:grid; place-items:center;
  transition:.15s; cursor:pointer; padding:0;
}
#kz-teams-index .tx-az.is-all { width:auto; padding:0 12px; }
#kz-teams-index .tx-az:hover:not(:disabled) { border-color:var(--tx-dark); color:var(--tx-fg); }
#kz-teams-index .tx-az.is-active { background:var(--tx-accent); border-color:var(--tx-accent); color:#fff; }
#kz-teams-index .tx-az:disabled { color:#c3c7cd; background:transparent; border-color:transparent; cursor:default; }

/* ---------- section head ---------- */
#kz-teams-index .tx-sec-head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px;
}
#kz-teams-index .tx-sec-head h2 {
  font-family:var(--tx-display); text-transform:uppercase; font-weight:800;
  font-size:clamp(26px,3.4vw,38px); line-height:1.02; margin-top:10px;
}
#kz-teams-index .tx-hint { font-size:13px; color:var(--tx-muted); }

/* ---------- trending tiles (livery gradient + abbreviation) ---------- */
#kz-teams-index .tx-tgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
#kz-teams-index .tx-tcard {
  position:relative; display:block; color:#fff; border:1px solid var(--tx-dark-line);
  border-radius:14px; padding:20px; overflow:hidden; transition:.2s; min-height:172px;
  background:var(--tx-dark);
}
#kz-teams-index .tx-tcard::before {
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 24px);
  pointer-events:none;
}
#kz-teams-index .tx-tcard:hover {
  transform:translateY(-4px); box-shadow:0 14px 34px rgba(12,14,19,.30);
  border-color:rgba(255,255,255,.34);
}
#kz-teams-index .tx-tghost {
  position:absolute; right:10px; bottom:-14px; z-index:0; font-family:var(--tx-display);
  font-style:italic; font-weight:900; font-size:86px; line-height:.8;
  color:rgba(255,255,255,.20); letter-spacing:-.05em; pointer-events:none;
}
#kz-teams-index .tx-trank {
  position:relative; z-index:2; display:inline-block; font-family:var(--tx-display);
  font-weight:900; font-size:13px; line-height:1; color:#fff; background:rgba(6,8,11,.42);
  border:1px solid rgba(255,255,255,.24); border-radius:7px; padding:5px 9px; letter-spacing:.02em;
}
#kz-teams-index .tx-tbody { position:relative; z-index:2; margin-top:18px; }
#kz-teams-index .tx-tseries {
  font-family:var(--tx-display); text-transform:uppercase; font-weight:700;
  font-size:11px; letter-spacing:.16em; color:rgba(255,255,255,.72);
}
#kz-teams-index .tx-tname {
  font-family:var(--tx-display); text-transform:uppercase; font-weight:800;
  font-size:25px; line-height:1.02; color:#fff; margin-top:6px; text-wrap:balance;
}
#kz-teams-index .tx-tstat { font-size:12.5px; color:rgba(255,255,255,.85); margin-top:8px; line-height:1.4; }

/* ---------- meta row ---------- */
#kz-teams-index .tx-meta {
  font-size:13px; color:var(--tx-muted); padding-bottom:18px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
#kz-teams-index .tx-meta b {
  color:var(--tx-fg); font-family:var(--tx-display); font-size:16px; font-variant-numeric:tabular-nums;
}
#kz-teams-index .tx-reset {
  font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--tx-accent-ink); display:none; align-items:center; gap:5px; cursor:pointer;
}
#kz-teams-index .tx-reset.is-on { display:inline-flex; }
#kz-teams-index .tx-reset:hover { text-decoration:underline; }

/* ---------- team grid ---------- */
#kz-teams-index .tx-group { margin-bottom:38px; }
#kz-teams-index .tx-group:last-child { margin-bottom:0; }
#kz-teams-index .tx-group.is-hidden { display:none; }
#kz-teams-index .tx-letter {
  font-family:var(--tx-display); font-weight:800; font-size:20px; text-transform:uppercase;
  color:var(--tx-fg); display:flex; align-items:center; gap:12px; margin-bottom:16px;
}
#kz-teams-index .tx-letter::after { content:""; flex:1; height:1px; background:var(--tx-border); }
#kz-teams-index .tx-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

#kz-teams-index .tx-card {
  position:relative; background:var(--tx-surface); border:1px solid var(--tx-border);
  border-radius:var(--tx-r); overflow:hidden; display:flex; flex-direction:column;
  transition:.2s; min-height:172px;
}
#kz-teams-index .tx-card.is-hidden { display:none; }
/* Livery bar sits flat by default and lights up on hover — the only colour per
   card. The team's own tile gradient is reused so the rule matches its landing
   page; cards without one fall back to the house accent. */
#kz-teams-index .tx-card::after {
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--tx-livery,var(--tx-accent)); opacity:.32; transition:opacity .18s;
}
#kz-teams-index .tx-card:hover { transform:translateY(-4px); box-shadow:var(--tx-shadow); border-color:transparent; }
#kz-teams-index .tx-card:hover::after { opacity:1; }

#kz-teams-index .tx-cbody { padding:17px; display:flex; flex-direction:column; gap:6px; flex:1; }
#kz-teams-index .tx-cbadge {
  font-family:var(--tx-display); text-transform:uppercase; font-weight:700;
  letter-spacing:.16em; font-size:11px; color:var(--tx-muted);
  display:flex; align-items:center; gap:9px;
}
#kz-teams-index .tx-cbadge::after { content:""; flex:1; height:1px; background:var(--tx-border); }
#kz-teams-index .tx-cname {
  font-family:var(--tx-display); text-transform:uppercase; font-weight:800;
  font-size:23px; line-height:1.04; margin-top:4px; text-wrap:balance;
}
#kz-teams-index .tx-cmeta { font-size:12.5px; color:var(--tx-muted); }
#kz-teams-index .tx-cstat {
  font-family:var(--tx-display); text-transform:uppercase; font-weight:700;
  font-size:13px; letter-spacing:.03em; color:var(--tx-fg);
  display:flex; align-items:flex-start; gap:7px; margin-top:2px;
}
#kz-teams-index .tx-cstat::before {
  content:""; width:8px; height:8px; background:var(--tx-accent); border-radius:2px;
  transform:rotate(45deg); flex-shrink:0; margin-top:4px;
}
#kz-teams-index .tx-cgo {
  margin-top:auto; padding-top:9px; font-size:12px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--tx-muted);
  display:inline-flex; align-items:center; gap:5px; transition:.15s;
}
#kz-teams-index .tx-card:hover .tx-cgo { color:var(--tx-fg); gap:9px; }

/* ---------- empty state ---------- */
#kz-teams-index .tx-empty {
  display:none; text-align:center; padding:56px 20px;
  border:1px dashed var(--tx-border); border-radius:var(--tx-r); background:var(--tx-surface);
}
#kz-teams-index .tx-empty.is-on { display:block; }
#kz-teams-index .tx-empty h3 {
  font-family:var(--tx-display); text-transform:uppercase; font-weight:800; font-size:24px; margin-bottom:8px;
}
#kz-teams-index .tx-empty p { color:var(--tx-muted); font-size:14.5px; max-width:46ch; margin:0 auto 20px; }
#kz-teams-index .tx-btn {
  height:50px; padding:0 26px; border-radius:999px; font-weight:600; font-size:15px;
  display:inline-flex; align-items:center; gap:9px; transition:.18s;
  background:var(--tx-dark); color:#fff; cursor:pointer;
}
#kz-teams-index .tx-btn:hover { background:#1d222b; color:#fff; }

/* ---------- request band ---------- */
#kz-teams-index .tx-req {
  background:var(--tx-dark); color:#fff; border-radius:18px; padding:44px;
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1.3fr .7fr; gap:32px; align-items:center;
}
#kz-teams-index .tx-req::before {
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 2px,transparent 2px 26px);
}
#kz-teams-index .tx-req::after {
  content:""; position:absolute; top:-60%; right:-14%; width:70%; height:220%;
  background:radial-gradient(ellipse at 46% 48%,rgba(190,10,10,.30) 0%,rgba(160,12,12,.15) 30%,rgba(120,12,12,.05) 55%,transparent 78%);
}
#kz-teams-index .tx-req-copy,
#kz-teams-index .tx-req-form { position:relative; z-index:2; }
#kz-teams-index .tx-req-copy h3 {
  font-family:var(--tx-display); text-transform:uppercase; font-weight:900;
  font-size:clamp(26px,3.6vw,40px); line-height:1.02; margin:14px 0 12px; color:#fff;
}
#kz-teams-index .tx-req-copy p { color:#aab3c0; line-height:1.6; max-width:50ch; }

/* Contact Form 7 ships its own spacing and Flatsome restyles every input; both
   are overridden here so the two fields match the dark band. */
#kz-teams-index .tx-req-form .wpcf7 { margin:0; }
#kz-teams-index .tx-req-form form { display:flex; flex-direction:column; gap:10px; }
#kz-teams-index .tx-req-form p { margin:0; }
#kz-teams-index .tx-req-field label {
  display:block; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#7a8494; margin-bottom:6px;
}
#kz-teams-index .tx-req-form input[type="text"],
#kz-teams-index .tx-req-form input[type="email"] {
  width:100%; height:50px; border-radius:999px; border:1px solid var(--tx-dark-line);
  background:rgba(255,255,255,.06); padding:0 20px; color:#fff; font-size:14.5px;
  outline:0; font-family:inherit; margin:0; box-shadow:none;
}
#kz-teams-index .tx-req-form input::placeholder { color:#6b7280; }
#kz-teams-index .tx-req-form input:focus { border-color:var(--tx-accent); background:rgba(255,255,255,.09); }
#kz-teams-index .tx-req-form input[type="submit"] {
  height:50px; padding:0 26px; border-radius:999px; border:0; width:100%;
  background:var(--tx-accent); color:#fff; font-weight:600; font-size:15px;
  font-family:inherit; cursor:pointer; transition:.18s;
  box-shadow:0 6px 18px rgba(200,16,46,.28); margin:0; text-transform:none; letter-spacing:normal;
}
#kz-teams-index .tx-req-form input[type="submit"]:hover {
  background:#e8142f; box-shadow:0 10px 30px rgba(200,16,46,.4);
}
#kz-teams-index .tx-req-form .wpcf7-spinner { margin:0 auto; }
/* CF7 response and validation text, which defaults to a bordered block. */
#kz-teams-index .tx-req-form .wpcf7-response-output {
  margin:4px 0 0; padding:0; border:0; font-size:12.5px; color:#7ee08a;
}
#kz-teams-index .tx-req-form .wpcf7-not-valid-tip { font-size:12px; color:#ff5a52; margin-top:5px; }
#kz-teams-index .tx-req-form form.invalid .wpcf7-response-output,
#kz-teams-index .tx-req-form form.failed .wpcf7-response-output { color:#ff5a52; }

/* ---------- responsive ---------- */
@media (max-width:1024px) {
  #kz-teams-index .tx-wrap { padding:0 24px; }
  #kz-teams-index .tx-tgrid { grid-template-columns:repeat(3,1fr); }
  #kz-teams-index .tx-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:960px) {
  #kz-teams-index .tx-req { grid-template-columns:1fr; padding:32px; }
}
@media (max-width:760px) {
  #kz-teams-index .tx-tgrid { grid-template-columns:repeat(2,1fr); }
  #kz-teams-index .tx-grid { grid-template-columns:repeat(2,1fr); }
  #kz-teams-index .tx-search { margin-left:0; width:100%; min-width:0; }
}
@media (max-width:640px) {
  #kz-teams-index .tx-block { padding:42px 0; }
  #kz-teams-index .tx-hero { padding:48px 0 44px; }
  #kz-teams-index .tx-fig { padding:0 16px; }
  #kz-teams-index .tx-fig b { font-size:26px; }
  #kz-teams-index .tx-sec-head { flex-direction:column; align-items:flex-start; gap:6px; }
  #kz-teams-index .tx-tname { font-size:21px; }
  #kz-teams-index .tx-tghost { font-size:70px; }
  #kz-teams-index .tx-cname { font-size:20px; }
}

/* Phone: soften the hero glow. See the note on the base rule above. */
@media (max-width:560px) {
  #kz-teams-index .tx-hero::before {
    top:-25%; width:200%; height:150%;
    background:radial-gradient(ellipse 50% 40% at 50% 45%,
      rgba(225,6,0,.26) 0%, rgba(225,6,0,.12) 45%, rgba(225,6,0,0) 75%);
  }
}