/* =====================================================================
   NEW ROMA BOXING TEAM – paczka "Legion"
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap');

:root{
  --nr-red:#c8001a;          /* czerwień z logo / przycisków */
  --nr-red-soft:rgba(200,0,26,.14);
  --nr-iron:#17171a;         /* karty */
  --nr-line:#2a2a2e;
  --nr-bronze:#b08d57;       /* UŻYWAĆ BARDZO OSZCZĘDNIE: tylko ozdobniki */
  --nr-display:'Cinzel', Georgia, serif;
}

/* ---------------------------------------------------------------
   0. NAPRAWY BŁĘDÓW I UJEDNOLICENIE TŁA BEZ SZWÓW
   --------------------------------------------------------------- */

/* Jednolite, płynne tło dla całej strony bez przeskoków tonalnych */
html {
  background-color: #0c0c0e !important;
}
body {
  background-color: transparent !important;
  color: #fff;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1 !important;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
section,
.when-where,
section.border-t {
  background-color: transparent !important;
  background-image: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* 0.1 Karta mapy w "Kiedy i gdzie" */
.map-card{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px !important;
  padding: 20px 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.map-card .pin{
  position:static; flex:0 0 48px; width:48px; height:48px; margin:0;
  display:grid; place-items:center; border-radius:12px;
  background:var(--nr-red-soft); border:1px solid rgba(200,0,26,.4);
  font-size:1.4rem;
}
.map-card .text{ flex:1 1 auto; min-width:0; line-height:1.5; }
.map-card .text strong{ display:block; margin-bottom:2px; }
.map-card .btn{ position:static; flex:0 0 auto; width:auto; white-space:nowrap; }
@media (max-width:700px){
  .map-card{ flex-wrap:wrap; }
  .map-card .text{ flex:1 1 calc(100% - 64px); }
  .map-card .btn{ width:100% !important; justify-content:center !important; }
}

/* 0.2 Podpowiedzi mobilne nie mają sensu na desktopie */
@media (min-width:901px){
  .swipe-hint,
  .reviews-toggle{
    display:none !important;
  }
  .review-card-more{ display:flex !important; }
}

/* 0.3 Notka w cenniku: ten sam rozmiar co reszta */
.price-note, .price-card .note{ font-size:.85rem; line-height:1.5; opacity:.85; }

/* ---------------------------------------------------------------
   1. MOTYW LEGIONISTY – znak wodny z hełmem (bez napisów)
   --------------------------------------------------------------- */
.nr-watermark{ position:relative; isolation:isolate; overflow:hidden; }
/* Sekcja o trenerze: hełm z lewej strony, za zdjęciami, tekst po prawej ma 100% czyste tło */
.nr-watermark::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:2%; bottom:-6%;
  width:min(38vw,480px); aspect-ratio:1;
  background:url('./index_files/helmet.png') center/contain no-repeat;
  opacity:.06; filter:contrast(1.1);
}
/* Wersja dla końcowego CTA: hełm po lewej pod przyciskami, zdjęcia po prawej zostają czyste */
.nr-watermark--cta::before{
  left:2% !important; right:auto !important;
  bottom:-8% !important; top:auto !important;
  transform:none !important;
  width:min(34vw,440px) !important;
  opacity:.09 !important;
}
.nr-watermark--cta::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:0 !important; right:auto !important;
  bottom:0 !important; top:auto !important;
  transform:none !important;
  width:min(45vw,600px); aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(200,0,26,.15),transparent 70%);
}
@media (max-width:700px){
  .nr-watermark::before{ width:65vw; left:-12%; bottom:-4%; opacity:.05; }
  .nr-watermark--cta::before{ left:auto !important; right:-10% !important; bottom:-4% !important; width:70vw !important; opacity:.08 !important; }
  .nr-watermark--cta::after{ display:none; }
}

/* ---------------------------------------------------------------
   2. RZYMSKIE CYFRY W "JAK WYGLĄDA TWÓJ PIERWSZY TRENING"
   --------------------------------------------------------------- */
.steps{ counter-reset:nr-step; }
.steps .step-card{
  counter-increment:nr-step; position:relative; overflow:hidden;
  border-top:2px solid var(--nr-red);
  padding-bottom:70px !important;
}
.steps .step-card::after{
  content:counter(nr-step,upper-roman);
  position:absolute; right:18px; bottom:-6px !important; pointer-events:none;
  font-family:var(--nr-display); font-weight:700; font-size:72px !important; line-height:1;
  color:rgba(176,141,87,.18) !important;
  -webkit-text-stroke:0 !important;
}
.steps .step-card .step-emoji{ display:none; }

/* ---------------------------------------------------------------
   3. KAFELKI KARIERY JAKO "NAPIERŚNIK" / "TABLICA WYNIKÓW"
   --------------------------------------------------------------- */
.stat-tile{ position:relative; }
.stat-tile::before,.stat-tile::after{
  content:""; position:absolute; width:14px; height:14px;
  border:2px solid var(--nr-red); pointer-events:none;
}
.stat-tile::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.stat-tile::after { right:-1px; bottom:-1px; border-left:0; border-top:0; }
.stat-tile .stat-value{ position:relative; padding-bottom:10px; display:inline-block; }
.stat-tile .stat-value::after{
  content:""; position:absolute; left:50%; bottom:0; width:36px; height:2px;
  background:var(--nr-red); transform:translateX(-50%);
}
.stat-tile p.font-display {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem) !important;
}

/* ---------------------------------------------------------------
   4. SEPARATOR SEKCJI: linia z rombem - wyśrodkowana z oddechem
   --------------------------------------------------------------- */
.nr-divider{
  display:flex; align-items:center; justify-content:center; gap:16px;
  max-width:1112px; margin:0 auto; padding:28px 20px;
  position:relative; overflow:visible;
}
.nr-divider::before,.nr-divider::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12) 30%,rgba(255,255,255,0.12) 70%,transparent);
}
.nr-divider i{
  width:10px; height:10px; transform:rotate(45deg);
  border:1px solid var(--nr-bronze); background:var(--nr-red);
  box-shadow:0 0 8px rgba(200,0,26,0.45); flex:none;
}

/* ---------------------------------------------------------------
   5. JEDEN PULS: główny przycisk "Zapisz się" (menu + dolny pasek)
   --------------------------------------------------------------- */
.btn-pulse{ animation:nr-pulse 3s ease-in-out infinite; }
.btn-pulse:hover,.btn-pulse:focus-visible{ animation:none; }
@keyframes nr-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(200,0,26,.45); }
  50%    { box-shadow:0 0 0 12px rgba(200,0,26,0); }
}

/* ---------------------------------------------------------------
   6. UJEDNOLICENIE ZDJĘĆ
   --------------------------------------------------------------- */
.photo-grade{ position:relative; overflow:hidden; }
.photo-grade img{ filter:contrast(1.05) saturate(.92); display:block; }
.photo-grade::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(120,0,15,.28),transparent 45%);
}

/* ---------------------------------------------------------------
   7. TŁO HERO: powolny zoom
   --------------------------------------------------------------- */
.hero-bg{ animation:nr-kb 26s ease-in-out infinite alternate; will-change:transform; transform-origin:30% 50%; }
@keyframes nr-kb{ from{transform:scale(1)} to{transform:scale(1.15)} }

/* ---------------------------------------------------------------
   8. KARTY CENNIKA: hover
   --------------------------------------------------------------- */
.price-card{ transition:border-color .25s, box-shadow .25s, transform .25s; }
.price-card:hover{
  border-color:rgba(220,20,40,.6);
  box-shadow:0 0 0 1px rgba(220,20,40,.35),0 12px 30px rgba(200,0,26,.15);
  transform:translateY(-3px);
}

/* ---------------------------------------------------------------
   DOSTĘPNOŚĆ: wyłącz ruch dla osób, które o to proszą
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .btn-pulse,.hero-bg{ animation:none !important; }
  .price-card{ transition:none; }
}

/* =====================================================================
   NEW ROMA BOXING TEAM – paczka "Legion" cz. 2
   ===================================================================== */

/* 1. ŁUK RZYMSKI wokół zdjęcia Kuby (sekcja "Dlaczego Kuba") */
.trainer-photo{
  position:relative; overflow:hidden;
  border-radius:225px 225px 6px 6px;
  outline:1px solid rgba(176,141,87,.55);
  outline-offset:6px;
  margin:8px 6px 14px 6px;
}
.trainer-photo img{ display:block; width:100%; height:auto; }

/* naklejka z rzymskim rokiem na dole zdjęcia */
.trainer-photo::after{
  content:"OD MMXVIII";
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  padding:6px 14px; border-radius:2px;
  font-family:var(--nr-display); font-weight:700; font-size:.78rem; letter-spacing:.18em;
  color:var(--nr-bronze); background:rgba(13,10,10,.85);
  border:1px solid rgba(176,141,87,.5);
  box-shadow:0 4px 12px rgba(0,0,0,.6);
}
@media (max-width:700px){
  .trainer-photo{ border-radius:50vw 50vw 6px 6px; outline-offset:4px; margin:6px 4px 12px 4px; }
}

/* 2. WIENIEC LAUROWY NAD KAFELKIEM "ZŁOTO + PODIA" */
.nr-laurel{
  display:block; width:120px; height:auto; margin:0 auto 4px;
  color:var(--nr-bronze); opacity:.85;
}

/* 3. FRYZ Z "ZĘBÓW" (dentil) – rzymski detal architektoniczny */
.nr-dentil{ position:relative; }
.nr-dentil::before{
  content:""; position:absolute; left:0; right:0; top:0; height:5px; pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(176,141,87,.45) 0 6px, transparent 6px 12px);
  opacity:.7;
}
header.nr-dentil::before{ top:auto; bottom:0; }

/* 4. MOTTO W STOPCE */
.nr-motto{
  font-family:var(--nr-display); font-size:.8rem; letter-spacing:.22em;
  color:rgba(176,141,87,.85); text-transform:uppercase;
}
.nr-motto span{ margin:0 .6em; color:var(--nr-red); }
@media (max-width:767px){
  .nr-motto{ font-size:.72rem; letter-spacing:.14em; margin:10px 0; }
  .nr-motto span{ margin:0 .35em; }
}

/* 5. RZYMSKIE LATA W OSI CZASU KARIERY */
.nr-roman{
  margin-left:.55em; font-family:var(--nr-display); font-weight:700;
  font-size:11px !important; opacity:1 !important; color:#c9a86a !important; letter-spacing:.1em;
  display:inline-block; vertical-align:baseline;
}


/* ---------------------------------------------------------------
   CENNIK: GAP I WYRÓWNANIE WIERSZY
   --------------------------------------------------------------- */
#cennik .grid.lg\:grid-cols-3,
#cennik .grid {
  gap: 1.5rem !important;
}
.price-card {
  position: relative !important;
}
.price-card h3 {
  font-family: var(--nr-display) !important;
  font-variant: all-small-caps !important;
  letter-spacing: 0.05em !important;
  font-size: 1.25rem !important;
}
.price-card ul li {
  min-height: 44px !important;
  font-size: 13px !important;
}
.price-card .note,
.price-card p {
  font-size: 13px !important;
  line-height: 1.5 !important;
}


/* ---------------------------------------------------------------
   GLOBALNY RYTM, TYPOGRAFIA (MIN. 13PX) I PŁYNNOŚĆ
   --------------------------------------------------------------- */
/* Zwiększenie mikrotekstu do min. 13px */
.text-xs,
small,
.schedule small,
.stat-tile p.text-xs,
.price-card .note,
.price-card p {
  font-size: 13px !important;
}

/* Zwiększenie line-height dla długich nagłówków H2 Cinzel */
h2 {
  line-height: 1.28 !important;
  letter-spacing: 0.02em !important;
}

/* Naprzemienny, elegancki rytm sekcji */
#dla-kogo {
  background-color: #0c0c0e !important;
}
section:has(.steps) {
  background-color: #111115 !important;
}
#kuba {
  background-color: #0c0c0e !important;
}
#kariera {
  background-color: #101014 !important;
}
#filmy {
  background-color: #0c0c0e !important;
}
#opinie {
  background-color: #121013 !important;
}
#cennik {
  background-color: #0e0e11 !important;
}
#kiedy-i-gdzie {
  background-color: #111115 !important;
}
#faq {
  background-color: #0c0c0e !important;
}

/* Stopka: wyrazisty kontrast motta */
.nr-motto {
  color: #e3202f !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-shadow: 0 0 12px rgba(227,32,47,0.3) !important;
}