/* ── Sporty Walki: Karuzela walk ── v2 ── */



/* ---------- Zmienne ---------- */

.swf-fights-carousel {

  --fc-primary:    #03674B;

  --fc-primary-dk: #024a36;

  --fc-card-bg:    #0e2e22;

  --fc-card-top:   #0b2319;

  --fc-text:       #ffffff;

  --fc-text-muted: rgba(255,255,255,.55);

  --fc-border:     rgba(255,255,255,.1);

  --fc-odds-bg:    rgba(255,255,255,.12);

  --fc-odds-fg:    #ffffff;

  --fc-typuj-bg:   #f5c518;

  --fc-typuj-fg:   #0e0e0e;

  --fc-radius:     14px;

  --fc-gap:        14px;

}



/* ---------- Sekcja ---------- */

.swf-fights-carousel {

  max-width: 1060px;

  margin: 0 auto 2.5rem;

}



/* ---------- Nagłówek ---------- */

.swf-fights-carousel__header {

  display: flex;

  align-items: center;

  margin-bottom: 1rem;

  gap: .75rem;

}



.swf-fights-carousel__title {

  margin: 0;

  font-size: 1.5rem;

  font-weight: 700;

  color: var(--fc-primary-dk);

  text-transform: uppercase;

  letter-spacing: .04em;

}



/* ---------- Przyciski nav ---------- */

.swf-fights-carousel__nav {

  display: flex;

  gap: .4rem;

  margin-left: auto;

}



.swf-fc-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  border-radius: 10px;

  border: 1.5px solid #c8dfd5;

  background: #fff;

  color: var(--fc-primary);

  cursor: pointer;

  transition: background .15s, border-color .15s, transform .15s;

  flex-shrink: 0;

}



.swf-fc-btn:hover {

  background: #e8f5ef;

  border-color: var(--fc-primary);

  transform: scale(1.07);

}



/* ---------- Viewport + Track ---------- */

.swf-fights-carousel__viewport {

  overflow: hidden;

}



.swf-fights-carousel__track {

  display: flex;

  gap: var(--fc-gap);

  overflow-x: auto;

  scroll-behavior: smooth;

  scrollbar-width: none;

  -ms-overflow-style: none;

  padding-bottom: 4px;

    scroll-snap-type: x mandatory;

}



.swf-fights-carousel__track::-webkit-scrollbar {

  display: none;

}



/* ---------- Karta walki ---------- */

.swf-fight-card {

  flex: 0 0 calc((100% - 3 * var(--fc-gap)) / 4);

  min-width: 210px;

  max-width: 320px;

  display: flex;

  flex-direction: column;

  border-radius: var(--fc-radius);

  overflow: hidden;

  background: var(--fc-card-bg);

  box-shadow: 0 8px 30px rgba(0,0,0,.35);

    scroll-snap-align: start;

}



/* ---------- Meta (gala + data) ---------- */

.swf-fight-card__meta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: .4rem;

  padding: .55rem .85rem;

  background: var(--fc-card-top);

  border-bottom: 1px solid var(--fc-border);

}



.swf-fight-card__gala {

  font-size: .7rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .06em;

  color: #6ee7b7;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 55%;

}



.swf-fight-card__date {

  font-size: .68rem;

  color: var(--fc-text-muted);

  white-space: nowrap;

}



/* ---------- Matchup ---------- */

.swf-fight-card__matchup {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: .5rem;

  padding: 1rem .85rem .75rem;

  flex: 1;

}



/* --- Zawodnik --- */

.swf-fight-card__fighter {

  display: flex;

  flex-direction: column;

  align-items: center;

  flex: 1;

  min-width: 0;

}



.swf-fight-card__avatar-wrap {

  width: 72px;

  height: 72px;

  border-radius: 50%;

  overflow: hidden;

  border: 2.5px solid rgba(255,255,255,.2);

  flex-shrink: 0;

  background: #1a4535;

  margin-bottom: .45rem;

}



.swf-fight-card__avatar {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  filter: grayscale(15%);

}



.swf-fight-card__name {

  font-size: .72rem;

  font-weight: 600;

  color: var(--fc-text);

  text-align: center;

  line-height: 1.2;

  word-break: break-word;

  min-height: 2.6rem;

  margin-bottom: .3rem;

}



.swf-fight-card__odds {

  font-size: .78rem;

  font-weight: 700;

  background: rgba(245, 197, 24, .18);

  border: 1px solid rgba(245, 197, 24, .4);

  color: #fcd34d;

  border-radius: 6px;

  padding: .15rem .45rem;

  letter-spacing: .02em;

  min-height: 1.5rem;

  display: flex;

  align-items: center;

}



.swf-fight-card__odds:empty {

  visibility: hidden;

}



/* --- VS --- */

.swf-fight-card__vs {

  font-size: .95rem;

  font-weight: 900;

  color: rgba(255,255,255,.35);

  letter-spacing: .08em;

  flex-shrink: 0;

  align-self: auto;

  margin-top: 1.6rem; /* wyśrodkowanie z avatar 72px: (72px - ok.22px) / 2 */

}



/* ---------- Footer ---------- */

.swf-fight-card__footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: .5rem;

  padding: .6rem .85rem;

  border-top: 1px solid var(--fc-border);

  background: var(--fc-card-top);

}



.swf-fight-card__extra {

  font-size: .67rem;

  color: var(--fc-text-muted);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 55%;

}



.swf-fight-card__typuj {

  margin-left: auto;

  background: var(--fc-typuj-bg);

  color: var(--fc-typuj-fg);

  border: none;

  border-radius: 8px;

  padding: .4rem .95rem;

  font-size: .78rem;

  font-weight: 700;

  cursor: pointer;

  letter-spacing: .04em;

  text-transform: uppercase;

  transition: opacity .15s, transform .15s;

  white-space: nowrap;

}



.swf-fight-card__typuj:hover {

  opacity: .88;

  transform: scale(1.04);

}



.swf-fight-card__typuj:disabled {

  opacity: .35;

  cursor: not-allowed;

  pointer-events: none;

}



/* ---------- Responsive ---------- */

@media (max-width: 1024px) {

  .swf-fight-card {

    flex-basis: calc((100% - 2 * var(--fc-gap)) / 3);

  }

}



@media (max-width: 700px) {

  .swf-fight-card {

    flex-basis: calc((100% - var(--fc-gap)) / 2);

  }

}



@media (max-width: 480px) {

  .swf-fights-carousel__title {

    font-size: 1.1rem;

  }

  .swf-fight-card {

    flex-basis: 80vw;

    min-width: 200px;

  }

  .swf-fight-card__avatar-wrap {

    width: 60px;

    height: 60px;

  }

    .swf-fights-carousel {

      padding-inline: .75rem;

    max-width: none;

    }

}



:root {

  --swf-primary: #03674B;

  --swf-primary-dark: #024a36;

  --swf-bg: #f2f7f5;

  --swf-surface: #ffffff;

  --swf-surface-soft: #e8f5ef;

  --swf-text: #11243a;

  --swf-border: #c8dfd5;

  --swf-shadow: 0 18px 40px rgba(3, 103, 75, 0.12);

}



.swf-upcoming-galas {

  margin-bottom: 2rem;

}



.swf-upcoming-galas__header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 1rem;

  gap: 1rem;

}



.swf-upcoming-galas__header h2 {

  margin: 0;

  font-size: 1.75rem;

  color: var(--swf-primary-dark);

}



.swf-upcoming-galas__nav {

  display: flex;

  gap: 0.5rem;

}



.swf-carousel {

  position: relative;

  overflow: hidden;

}



.swf-carousel__track {

  display: flex;

  gap: 1rem;

  overflow-x: auto;

  scroll-behavior: smooth;

  scrollbar-width: none;

  -ms-overflow-style: none;

  padding-bottom: 0.5rem;

}



.swf-carousel__track::-webkit-scrollbar {

  display: none;

}



.swf-carousel-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  border: 1.5px solid var(--swf-border);

  border-radius: 10px;

  background: var(--swf-surface);

  color: var(--swf-primary);

  cursor: pointer;

  transition: all 0.2s;

  flex-shrink: 0;

}



.swf-carousel-btn:hover {

  border-color: var(--swf-primary);

  background: var(--swf-surface-soft);

  transform: scale(1.05);

}



.swf-gala-card {

  flex: 0 0 calc((100% - 4rem) / 5);

  min-width: 250px;

  background: var(--swf-surface);

  border: 1px solid var(--swf-border);

  border-radius: 16px;

  padding: 1rem;

  display: flex;

  flex-direction: column;

  transition: transform 0.2s, box-shadow 0.2s;

}



.swf-gala-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--swf-shadow);

}



.swf-gala-card__header {

  margin-bottom: 1rem;

  padding-bottom: 0.75rem;

  border-bottom: 1px solid var(--swf-border);

}



.swf-gala-card__league {

  font-size: 0.75rem;

  font-weight: 700;

  color: var(--swf-primary);

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.swf-gala-card__datetime {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  font-size: 0.875rem;

  color: var(--swf-text);

  margin-top: 0.25rem;

  font-weight: 600;

}



.swf-gala-card__fights {

  flex: 1;

  margin-bottom: 1rem;

}



.swf-gala-card__fight {

  margin-bottom: 0.75rem;

}



.swf-gala-card__fight:last-child {

  margin-bottom: 0;

}



.swf-fight-teams {

  display: flex;

  gap: 0.5rem;

  align-items: center;

}



.swf-fight-team {

  flex: 1;

  text-align: center;

  padding: 0.5rem;

  border-radius: 8px;

  background: var(--swf-surface-soft);

  font-size: 0.8125rem;

}



.swf-fighter-avatar {

  width: 48px;

  height: 48px;

  border-radius: 8px;

  object-fit: cover;

  margin: 0 auto 0.5rem;

  border: 1px solid var(--swf-border);

}



.swf-fight-team__name {

  font-weight: 600;

  color: var(--swf-primary-dark);

  line-height: 1.2;

  word-break: break-word;

}



.swf-odds {

  font-weight: 700;

  color: #fbbf24;

  margin-top: 0.25rem;

}



.swf-gala-card__btn {

  width: 100%;

  padding: 0.75rem;

  background: #fbbf24;

  color: #1f2937;

  border: none;

  border-radius: 10px;

  font-weight: 700;

  font-size: 0.875rem;

  cursor: pointer;

  transition: all 0.2s;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.swf-gala-card__btn:hover {

  background: #f59e0b;

  transform: scale(1.02);

}



.swf-gala-card__btn:active {

  transform: scale(0.98);

}



/* ── Responsive ── */

@media (max-width: 900px) {

  .swf-gala-card {

    flex: 0 0 calc((100% - 2.5rem) / 3);

    min-width: 200px;

  }



  .swf-upcoming-galas__header h2 {

    font-size: 1.5rem;

  }

}



@media (max-width: 600px) {

  .swf-gala-card {

    flex: 0 0 calc((100% - 1rem) / 2);

    min-width: 160px;

    padding: 0.75rem;

  }



  .swf-fighter-avatar {

    width: 40px;

    height: 40px;

  }



  .swf-upcoming-galas__header {

    flex-wrap: wrap;

  }



  .swf-upcoming-galas__header h2 {

    font-size: 1.25rem;

    flex: 1;

  }

}