/* ============================================================
   KRÓLUSEK VIDEO & TEAM POSTER — FNiR v6
   1) Crazy Carts video (atrakcje.html)
   2) Karta Króluska w zespol.html — wideo turnaround dopasowane do
      proporcji innych kart zespołu (aspect-ratio: 4/5)
   3) Banner "Poznaj cały team" wyśrodkowany (zespol.html)
   ============================================================ */

/* ===== 1. CRAZY CART VIDEO (atrakcje.html) ===== */
.detail-visual video.crazycart-video {
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  border-radius: 24px;
  display: block;
  background: transparent;
  box-shadow:
    0 0 40px rgba(196, 122, 58, 0.18),
    0 16px 50px rgba(0, 0, 0, 0.18);
}

@media (max-width: 768px) {
  .detail-visual video.crazycart-video {
    max-height: 420px;
    border-radius: 18px;
  }
}

/* ===== 2. KARTA KRÓLUSKA Z VIDEO (zespol.html) =====
   .member-card .visual ma aspect-ratio:4/5; img dostaje
   width/height:100% + object-fit:cover.
   Te same reguły dla <video>, żeby karta nie zmieniała rozmiaru. */
.member-card .visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== 3. TEAM POSTER (zespol.html) =====
   JS opakowuje img w .character-wrap (display:block) — rozciągał się
   na 100% kontenera, więc pomarańczowy glow wypełniał wolne miejsce.
   Fix: wrap dostaje konkretny max-width + margin:auto żeby wycentrować.
   Używam !important bo character-animations.css ma kilka reguł
   dla różnych kontekstów wrappa (.zespol-hero, .page-hero, itd.). */
.team-poster-center .character-wrap {
  display: block !important;
  width: auto !important;
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative;
}

.team-poster-center .character-wrap > .character-img {
  width: 100% !important;
  max-width: 520px !important;
  height: auto !important;
  display: block;
}

/* Lekko większy glow niż na głównej (na życzenie) */
.team-poster-center .character-wrap::before {
  inset: -10px;
  border-radius: 20px;
  filter: blur(14px);
  opacity: 0.55;
}

.team-poster-center .character-wrap:hover::before {
  opacity: 0.9;
}

@media (max-width: 768px) {
  .team-poster-center .character-wrap::before {
    inset: -6px;
    filter: blur(10px);
  }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .detail-visual video.crazycart-video {
    box-shadow: none;
  }
}