/* WDS live content — styles for elements that the database adds to pages.
   Uses the site's own palette and type (see css/style.css). */

/* "View Fight Card" on the Home page's white Upcoming card */
.wds-card-link {
  display: inline-block;
  margin-top: 34px;
  padding: 14px 40px;
  background: var(--red, #d7272a);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: background .25s ease;
}
.wds-card-link:hover { background: var(--red-dark, #a8181b); color: #fff; }

a.eu-cta:hover { background: var(--red, #d7272a); color: #fff; }

/* Event page: fight card */
.wds-card-list {
  display: grid;
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}
.wds-bout {
  background: #0b0b0b;
  border: 1px solid #1c1c1c;
  padding: 22px 26px 24px;
  transition: border-color .25s ease;
}
.wds-bout:hover { border-color: #2c2c2c; }
.wds-bout.is-live { border-color: var(--red, #d7272a); }
.wds-bout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.wds-bout-state {
  color: #9d9d9d;
  font-family: 'Teko', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
}
.wds-bout.is-live .wds-bout-state,
.wds-bout.is-final .wds-bout-state { color: var(--red, #d7272a); }
.wds-bout-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}
.wds-corner { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wds-red { text-align: right; align-items: flex-end; }
.wds-corner-label {
  color: #6f6f6f;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.wds-blue .wds-corner-label { color: #5b8def; }
.wds-red .wds-corner-label { color: var(--red, #d7272a); }
.wds-name {
  color: #fff;
  font-family: 'Teko', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .5px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.wds-nick { color: #9d9d9d; font-size: .85rem; }
.wds-corner.is-loser .wds-name { color: #7a7a7a; }
.wds-vs {
  color: #4a4a4a;
  font-family: 'Teko', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 1px;
}
.wds-result {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid #1c1c1c;
  color: #fff;
  font-family: 'Teko', sans-serif;
  font-size: 1.35rem;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.wds-result span { color: #9d9d9d; }
.wds-empty {
  color: #bdbdbd;
  text-align: center;
  font-size: 1rem;
}

@media (max-width: 600px) {
  .wds-bout { padding: 18px 16px 20px; }
  .wds-bout-head { flex-direction: column; align-items: flex-start; }
  .wds-bout-body { grid-template-columns: 1fr; gap: 10px; }
  .wds-red { text-align: left; align-items: flex-start; }
  .wds-vs { font-size: 1.1rem; }
}

/* Events page upcoming bands: values read in capitals, as on the published page */
.eu-live .eu-value { text-transform: uppercase; }

/* Event page: how each fighter's fight ended and the ranking points it gave */
.wds-points {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 10px;
  color: #9d9d9d;
  font-size: .82rem;
  line-height: 1.35;
}
.wds-points-how {
  color: #fff;
  font-family: 'Teko', sans-serif;
  font-size: 1.15rem;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.wds-corner.is-loser .wds-points-how { color: #bdbdbd; }
.wds-points strong { color: #fff; font-weight: 700; }
.wds-points em { font-style: normal; }
.wds-points em.is-up { color: #34d399; }
.wds-points em.is-down { color: #ff6b6b; }

/* Events page: "Show More" under the Past Events grid */
.ev-card.wds-hidden { display: none; }
.wds-more { display: flex; justify-content: center; margin-top: clamp(28px, 3.5vw, 44px); }
.wds-more-btn {
  min-width: 240px;
  padding: 18px 34px 15px;
  background: #121212;
  border: 1px solid #2c2c2c;
  color: #fff;
  font-family: 'Teko', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.wds-more-btn:hover, .wds-more-btn:focus-visible { background: var(--red, #d7272a); border-color: var(--red, #d7272a); outline: none; }

/* "Coming Soon" badge — takes the place of "View Fight Card" on upcoming
   events. Same shape and type as the button it replaces, but not clickable. */
.wds-ue-link.is-soon,
.wds-card-link.is-soon,
.eu-cta.is-soon { cursor: default; pointer-events: none; }
.wds-ue-link.is-soon:hover,
.wds-card-link.is-soon:hover { background: #e0181d; color: #fff; }
.eu-cta.is-soon:hover { background: #fff; color: #c00101; }

/* Events page: separator between upcoming event bands. A white seam the same
   width as the diagonal gap between the blue and red panels, with an angled
   red bar in the middle to match the slanted panel edges. */
.eu-live + .eu-live {
  --eu-sep: clamp(18px, 2vw, 28px);
  border-top: var(--eu-sep) solid #fff;
  position: relative;
  overflow: visible;
}
.eu-live + .eu-live::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: calc(var(--eu-sep) / -2 - 3px);
  left: 66.5%; /* centre of the red panel */
  width: clamp(90px, 10vw, 150px);
  height: 6px;
  background: #e0181d;
  transform: translateX(-50%) skewX(-30deg);
}
@media (max-width: 900px) {
  .eu-live + .eu-live::before { left: 50%; }
}

/* Fight Night 19 page: fight card not announced yet */
.fn19-soon { text-align: center; padding: clamp(40px, 6vw, 80px) 20px; }
.fn19-soon .eu-cta { background: #e0181d; color: #fff; cursor: default; }
.fn19-soon p { margin: 22px auto 0; max-width: 520px; color: inherit; opacity: .8; }