/*! boks24.pl – statyczny CSS (zastępuje Tailwind CDN) */

*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid}
html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif}
body{margin:0}
h1,h2,h3{font-size:inherit;font-weight:inherit;margin:0}
p{margin:0}
a{color:inherit;text-decoration:inherit}
button{font-family:inherit;font-size:100%;cursor:pointer;background:transparent;border:0;padding:0}
img,svg{display:block;vertical-align:middle}
table{border-collapse:collapse}
input,textarea,select{font-family:inherit;font-size:100%;padding:0;margin:0}

/* Layout */
.container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
@media(min-width:640px){.container{max-width:640px}}
@media(min-width:768px){.container{max-width:768px}}
@media(min-width:1024px){.container{max-width:1024px}}
@media(min-width:1280px){.container{max-width:1280px}}
.mx-auto{margin-left:auto;margin-right:auto}
.ml-4{margin-left:1rem}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-auto{margin-top:auto}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}
.my-1{margin-top:.25rem;margin-bottom:.25rem}
.my-2{margin-top:.5rem;margin-bottom:.5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.pb-4{padding-bottom:1rem}
.pl-4{padding-left:1rem}
.pr-4{padding-right:1rem}
.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}
.p-2{padding:.5rem}.p-3{padding:.75rem}.p-5{padding:1.25rem}
.p-6{padding:1.5rem}.p-8{padding:2rem}

/* Flex */
.flex{display:flex}.inline-flex{display:inline-flex}
.flex-col{flex-direction:column}.flex-1{flex:1 1 0%}
.items-center{align-items:center}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}

/* Grid */
.grid{display:grid}
.grid-cols-\[80px_1fr\]{grid-template-columns:80px 1fr}
@media(min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:h-\[600px\]{height:600px}
  .md\:table-cell{display:table-cell}
  .md\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .md\:text-5xl{font-size:3rem;line-height:1}
  .md\:text-8xl{font-size:6rem;line-height:1}
  .md\:text-xl{font-size:1.25rem;line-height:1.75rem}
}

/* Display */
.block{display:block}.inline-block{display:inline-block}
.hidden{display:none}
.table-cell{display:table-cell}

/* Responsive – lg breakpoint (1024px) */
@media(min-width:1024px){
  .lg\:block{display:block !important}
  .lg\:hidden{display:none !important}
  .lg\:table-cell{display:table-cell !important}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:text-6xl{font-size:3.75rem;line-height:1}
}

/* Position */
.relative{position:relative}.absolute{position:absolute}
.sticky{position:sticky}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-0{top:0}.top-full{top:100%}
.left-0{left:0}
.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}

/* Sizing */
.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-full{width:100%}
.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}
.h-48{height:12rem}.h-full{height:100%}
.h-\[500px\]{height:500px}
.min-h-screen{min-height:100vh}
.min-w-\[180px\]{min-width:180px}.min-w-\[200px\]{min-width:200px}
.max-w-md{max-width:28rem}
.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}

/* Typography */
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-6xl{font-size:3.75rem;line-height:1}
.font-medium{font-weight:500}.font-bold{font-weight:700}
.italic{font-style:italic}
.uppercase{text-transform:uppercase}
.tracking-wide{letter-spacing:.025em}
.leading-none{line-height:1}.leading-tight{line-height:1.25}
.leading-relaxed{line-height:1.625}
.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}

/* Colors */
.bg-black{background-color:#000}
.bg-gray-900{background-color:#111827}
.bg-red-600{background-color:#dc2626}
.bg-red-600\/5{background-color:rgb(220 38 38/.05)}
.bg-red-600\/10{background-color:rgb(220 38 38/.1)}
.bg-gray-800{background-color:#1f2937}
.bg-gray-950{background-color:#030712}
.text-white{color:#fff}
.text-gray-300{color:#d1d5db}
.text-gray-400{color:#9ca3af}
.text-gray-500{color:#6b7280}
.text-red-500{color:#ef4444}
.text-red-600{color:#dc2626}
.text-green-500{color:#22c55e}
.text-2xl{font-size:1.5rem;line-height:2rem}

/* Gradient */
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}
.from-black{--tw-gradient-from:#000;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgb(0 0 0/0))}
.via-black\/80{--tw-gradient-stops:var(--tw-gradient-from),rgb(0 0 0/.8),var(--tw-gradient-to,rgb(0 0 0/0))}
.to-transparent{--tw-gradient-to:transparent}

/* Border */
.border{border-width:1px}.border-b{border-bottom-width:1px}
.border-t{border-top-width:1px}.border-r{border-right-width:1px}
.border-red-900\/20{border-color:rgb(127 29 29/.2)}
.border-red-900\/30{border-color:rgb(127 29 29/.3)}
.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}
.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}

/* Shadow */
.shadow-xl{box-shadow:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1)}

/* Object */
.object-cover{object-fit:cover}

/* Spacing lists */
.space-y-1>*+*{margin-top:.25rem}
.space-y-2>*+*{margin-top:.5rem}
.space-y-4>*+*{margin-top:1rem}
.space-y-6>*+*{margin-top:1.5rem}
.space-y-8>*+*{margin-top:2rem}
.space-y-10>*+*{margin-top:2.5rem}

/* Transitions */
.transition{transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform;transition-duration:150ms}
.transition-colors{transition-property:color,background-color,border-color;transition-duration:150ms}
.transition-all{transition-property:all;transition-duration:150ms}

/* Opacity/Visibility */
.opacity-0{opacity:0}
.invisible{visibility:hidden}

/* Hover */
.hover\:bg-gray-700:hover{background-color:#374151}
.hover\:bg-gray-950:hover{background-color:#030712}
.hover\:bg-red-600:hover{background-color:#dc2626}
.hover\:bg-red-600\/5:hover{background-color:rgb(220 38 38/.05)}
.hover\:bg-red-600\/10:hover{background-color:rgb(220 38 38/.1)}
.hover\:bg-red-700:hover{background-color:#b91c1c}
.hover\:border-red-600:hover{border-color:#dc2626}
.hover\:border-red-600\/50:hover{border-color:rgb(220 38 38/.5)}
.hover\:text-red-500:hover{color:#ef4444}
.hover\:text-red-600:hover{color:#dc2626}

/* Group hover */
.group:hover .group-hover\:opacity-100{opacity:1}
.group:hover .group-hover\:visible{visibility:visible}
.group:hover .group-hover\:text-red-600{color:#dc2626}

/* Prose boks (custom) */
.prose-boks p{margin-bottom:1rem;color:#9ca3af;line-height:1.75}
.prose-boks h2{font-size:1.5rem;font-weight:700;color:#fff;margin:1.5rem 0 .75rem}
.prose-boks h3{font-size:1.25rem;font-weight:700;color:#fff;margin:1.25rem 0 .5rem}
.prose-boks ul,.prose-boks ol{padding-left:1.5rem;color:#9ca3af;margin-bottom:1rem}
.prose-boks li{margin-bottom:.25rem}
.prose-boks a{color:#dc2626}
.prose-boks img{border-radius:.5rem;max-width:100%;margin:1rem 0}
.prose-boks blockquote{border-left:3px solid #dc2626;padding-left:1rem;color:#6b7280;font-style:italic}
.prose-boks strong{color:#fff;font-weight:700}

/* Table */
table{width:100%;border-collapse:collapse}

/* ============================================================
   ANIMACJE – boks24.pl
   Wszystko oparte na CSS transitions + IntersectionObserver
   Szanuje prefers-reduced-motion
   ============================================================ */

/* ── SCROLL REVEAL ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Opóźnienia dla grid-ów (dzieci .reveal-group) */
.reveal-group .reveal:nth-child(1){transition-delay:.05s}
.reveal-group .reveal:nth-child(2){transition-delay:.13s}
.reveal-group .reveal:nth-child(3){transition-delay:.21s}
.reveal-group .reveal:nth-child(4){transition-delay:.29s}
.reveal-group .reveal:nth-child(5){transition-delay:.37s}
.reveal-group .reveal:nth-child(6){transition-delay:.45s}

/* Wariant — slide z lewej (dla nagłówków sekcji) */
.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Bez animacji jeśli użytkownik preferuje */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── HERO SEKCJA ────────────────────────────────────────────── */
.hero-img {
  transition: transform 8s ease-out;
  will-change: transform;
}
/* Paralax — JS nadpisuje transform przy scroll */
.hero-parallax { transform-origin: center center; }

/* Badge BREAKING NEWS */
.badge-breaking {
  display: inline-block;
  background: #dc2626;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 1rem;
  position: relative;
  animation: pulse-badge 2.4s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); }
  50%      { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}
@media (prefers-reduced-motion: reduce) {
  .badge-breaking { animation: none; }
}

/* Hero — tekst wjeżdża przy ładowaniu */
.hero-content {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-enter .7s .15s ease forwards;
}
@keyframes hero-enter {
  to { opacity:1; transform:translateY(0); }
}

/* ── KARTY ARTYKUŁÓW ────────────────────────────────────────── */
.card-article {
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
  will-change: transform;
}
.card-article:hover {
  transform: translateY(-5px);
  border-color: rgba(220,38,38,.55) !important;
  box-shadow: 0 12px 32px rgba(220,38,38,.12), 0 4px 12px rgba(0,0,0,.4);
}
.card-article img {
  transition: transform .4s ease;
}
.card-article:hover img {
  transform: scale(1.04);
}
/* Overflow hidden żeby obraz nie wystawał */
.card-article .card-img-wrap {
  overflow: hidden;
}

/* ── KARTY ZAWODNIKÓW ────────────────────────────────────────── */
.card-boxer {
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
  will-change: transform;
}
.card-boxer:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(220,38,38,.6) !important;
  box-shadow: 0 16px 40px rgba(220,38,38,.15), 0 4px 16px rgba(0,0,0,.5);
}
.card-boxer img {
  transition: transform .45s ease;
}
.card-boxer:hover img {
  transform: scale(1.06);
}

/* ── LICZNIKI STATYSTYK (profil zawodnika) ───────────────────── */
.stat-count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: color .3s;
}

/* ── SEKCJE – delikatna linia animowana ──────────────────────── */
.section-heading-line {
  display: inline-block;
  position: relative;
}
.section-heading-line::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 3px;
  background: #dc2626;
  border-radius: 2px;
  transition: width .6s .2s ease;
}
.is-visible .section-heading-line::after,
.section-heading-line.is-visible::after {
  width: 100%;
}

/* ── TABELA RANKINGOWA – row highlight ──────────────────────── */
.rank-row {
  transition: background .18s ease;
}
.rank-row:hover {
  background: rgba(220,38,38,.07) !important;
}

/* ── NAWIGACJA – active indicator ───────────────────────────── */
/* Reset list styles w nawigacji */
header nav ul, header nav li { list-style: none; padding: 0; margin: 0; }

header nav a {
  position: relative;
}
header nav > ul > li > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: #dc2626;
  transform: scaleX(0);
  transition: transform .2s ease;
  border-radius: 1px;
}
header nav > ul > li > a:hover::after {
  transform: scaleX(1);
}

/* ── NADCHODZĄCE WALKI – countdown shimmer ───────────────────── */
.fight-card {
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}
.fight-card:hover {
  transform: translateY(-4px);
  border-color: rgba(220,38,38,.5) !important;
  box-shadow: 0 10px 28px rgba(220,38,38,.1), 0 3px 10px rgba(0,0,0,.35);
}

/* ── BUTTON / LINK HOVER PULSE ───────────────────────────────── */
.btn-pulse {
  position: relative;
  overflow: hidden;
}
.btn-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.15);
  transform: translateX(-100%);
  transition: transform .3s ease;
}
.btn-pulse:hover::after {
  transform: translateX(0);
}