/* =====================================================================
   NEW ROMA BOXING TEAM – nowe tło hero + formularz
   ===================================================================== */

:root{
  --nr-ink:#0c0c0e;      /* kolor tła strony */
  --nr-red:#c8001a;
}

/* ---------------------------------------------------------------
   1. TŁO HERO
   --------------------------------------------------------------- */
.hero{ position:relative; overflow:hidden; isolation:isolate; background:var(--nr-ink); }

/* wrapper z maską: dolna krawędź zdjęcia rozpuszcza się w tle strony,
   a maska jest na elemencie, który się NIE animuje, więc fade stoi w miejscu */
.hero-media{
  position:absolute; inset:0; z-index:-3;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 78%,rgba(0,0,0,.55) 90%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 78%,rgba(0,0,0,.55) 90%,transparent 100%);
}
.hero-bg{
  position:absolute; inset:0;
  background:var(--nr-ink) url('img/hero-1920.webp') 32% 45% / cover no-repeat;
  transform-origin:30% 65%;
  animation:nr-kb 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes nr-kb{ from{ transform:scale(1); } to{ transform:scale(1.15); } }

/* cień pod tekstem: ciemniej po lewej (nagłówek, rękawice), jaśniej po prawej (za formularzem),
   plus ściemnienie pod nagłówkiem menu */
.hero-shade{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(12,12,14,.85) 0, rgba(12,12,14,0) 16%),
    linear-gradient(90deg, rgba(12,12,14,.80) 0%, rgba(12,12,14,.62) 40%, rgba(12,12,14,.30) 66%, rgba(12,12,14,.50) 100%),
    radial-gradient(55% 45% at 22% 80%, rgba(200,0,26,.10), transparent 70%);
}

/* czytelność tekstu na linach i rękawicach */
.hero h1, .hero p.hero-lead{ text-shadow:0 2px 16px rgba(0,0,0,.75); }
.hero .pill, .hero .hero-pills > *{
  background:rgba(12,12,14,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

@media (max-width:700px){
  .hero-media{
    height: 875px !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 70%, rgba(0,0,0,.45) 88%, transparent 100%) !important;
            mask-image: linear-gradient(to bottom, #000 0, #000 70%, rgba(0,0,0,.45) 88%, transparent 100%) !important;
  }
  .hero-bg{
    background-image: url('img/hero-900.webp') !important;
    background-position: calc(50% + 12px) top !important;
    background-size: cover !important;
    animation: none !important;
  }
  .hero-shade{
    height: 875px !important;
    background:
      linear-gradient(to bottom, rgba(12,12,14,.92) 0%, rgba(12,12,14,.88) 35%, rgba(12,12,14,.72) 65%, var(--nr-ink, #0c0c0e) 100%) !important;
  }
}
@media (prefers-reduced-motion:reduce){ .hero-bg{ animation:none !important; } }

/* ---------------------------------------------------------------
   2. FORMULARZ: przezroczyste "szkło" zamiast pełnego prostokąta
   --------------------------------------------------------------- */
.hero-form{
  background:rgba(18,12,12,.60) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
          backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(200,0,26,.38) !important;
  border-radius:8px !important;
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03) !important;
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hero-form{ background:rgba(18,12,12,.92) !important; }
}
@media (max-width:700px){ .hero-form{ background:rgba(18,12,12,.80) !important; } }

.hero-form{ color-scheme:dark; }
.hero-form input,
.hero-form select,
.hero-form textarea{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#f3eeee !important; border-radius:4px;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.hero-form input::placeholder,
.hero-form textarea::placeholder{ color:rgba(255,255,255,.52) !important; }
.hero-form input:focus,
.hero-form select:focus,
.hero-form textarea:focus{
  outline:none; background:rgba(255,255,255,.09) !important;
  border-color:var(--nr-red) !important; box-shadow:0 0 0 3px rgba(200,0,26,.28) !important;
}
.hero-form .btn-submit{ min-height:52px; letter-spacing:.08em; }
.hero-form .btn-submit[disabled]{ opacity:.65; cursor:progress; }

/* ---------------------------------------------------------------
   3. POTWIERDZENIE "AVE!" (pokazuje je newroma-form-ave.js)
   --------------------------------------------------------------- */
.nr-ave{
  text-align:center; padding:32px 24px;
  border:1px solid rgba(176,141,87,.55); border-radius:8px;
  background:rgba(12,12,14,.88);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 20px 50px rgba(0,0,0,.6), 0 0 30px rgba(200,0,26,.15);
}
.nr-ave[hidden]{ display:none; }
.nr-ave h3{
  margin:0 0 12px; font-family:var(--nr-display,'Cinzel',serif);
  font-size:1.75rem; letter-spacing:.06em; color:#fff; font-weight:700;
}
.nr-ave h3 span{ color:var(--nr-red); }
.nr-ave p{ margin:0 0 20px; line-height:1.6; font-size:0.95rem; opacity:.92; color:#d1d5db; }
.nr-ave .nr-ave-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.nr-ave .nr-ave-actions a{
  display:inline-flex; align-items:center; min-height:46px; padding:0 20px;
  border-radius:6px; font-weight:700; font-size:0.9rem; text-decoration:none; color:#fff;
  background:#1c1c20; border:1px solid #3a3a40; transition:all .2s;
}
.nr-ave .nr-ave-actions a:hover{ background:#2a2a30; transform:scale(1.02); }
.nr-ave .nr-ave-actions a.wa{ background:#1fa855; border-color:#1fa855; }
.nr-ave .nr-ave-actions a.wa:hover{ background:#1b944b; }
.nr-ave.is-error h3{ font-size:1.3rem; }