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

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000}
body{font-family:'Poppins', Arial, sans-serif;color:#fff}

/* wymuszenie Poppins w sekcji */
.bw-hero-section, .bw-hero-section *{font-family:'Poppins', Arial, sans-serif}

/* sr-only */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* sekcja + kontener */
.bw-hero-section{position:relative;overflow:hidden;padding:60px 16px 80px;background:#000;min-height: auto;}
.bw-hero-container{max-width:1200px;margin:0 auto;text-align:center;position:relative}

/* ORNAMENT JAKO TŁO (powiązany z krawędzią contentu) */
.bw-hero-container::after{
  content:"";
  position:absolute;
  /* stały odstęp od PRAWEJ krawędzi contentu */
  right:0px;             /* reguluj odstęp tutaj */
  top:15%;
  transform:translateY(-50%);
  width:204px;
  height:204px;
  background-image:url('https://5968576.fs1.hubspotusercontent-na1.net/hubfs/5968576/ornament-b-w-1-hero.png');
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.95;
  pointer-events:none;
  user-select:none;
  /* z-index poniżej treści, ale nad tłem sekcji */
  z-index:0;
}
/* upewniamy się, że treść ma wyższy stacking niż ornament */
.bw-hero-header, .bw-hero-main{position:relative; z-index:1}

/* Header */
.bw-logo{width:215px;height:auto;display:block;margin:0 auto 16px}
.bw-kicker{font-size:20px;font-weight:400;line-height:32px;margin:0 0 10px;opacity:.9}

/* SVG tytułu */
.bw-heading-graphic{max-width:740px;margin:0 auto 28px; padding: 25px 0;}
.bw-heading-graphic svg{display:block;width:100%;height:auto}



/* Daty */
.bw-dates{display:inline-flex;align-items:center;gap:12px;margin:18px 0 12px}
.bw-date-label{font-size:24px;font-weight:400;line-height:29px;text-transform:uppercase}
.bw-date-value{font-size:24px;font-weight:700;line-height:29px}
.bw-dot {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:25px;
}
.bw-dot svg {
  display:block;
  width:100%;
  height:auto;
}

/* CTA */
.bw-cta-wrap{margin-top:18px}
/* BW CTA – ultra-specyficzność + !important (działa dla <button> i ewentualnego <a>) */
.bw-hero-section .bw-hero-container .bw-cta,
.bw-hero-section .bw-hero-container .bw-cta:hover,
.bw-hero-section .bw-hero-container .bw-cta:focus,
.bw-hero-section .bw-hero-container .bw-cta:active,
.bw-hero-section .bw-hero-container .bw-cta:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  background: #FF1047 !important;
  background-image: none !important;
  color: #fff !important;

  font-family: 'Poppins', Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 29px !important;

  padding: 10px 40px !important;
  border-radius: 80px !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.25) !important;
  text-decoration: none !important;
  text-shadow: none !important;

  cursor: pointer !important;
  opacity: 1 !important;

  transition: none !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.bw-hero-section .bw-hero-container .bw-cta .bw-cta-emoji {
  font-size: 20px !important;
  line-height: 1 !important;
}
.bw-cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
.bw-cta-emoji{font-size:20px}

/* bardzo szerokie ekrany — nie trzeba nic kombinować, bo ornament trzyma się kontenera */

/* Tablet + mobile */
@media (max-width:992px){
  .bw-kicker{font-size:16px;line-height:22px}
  .bw-heading-graphic{max-width:520px;margin-bottom:24px}
  .bw-time-box{width:92px;height:92px}
  .bw-time-value{font-size:40px;line-height:36px}
  .bw-sep{font-size:24px;line-height:29px}
  .bw-date-label,.bw-date-value{font-size:20px;line-height:24px}
  /* chowamy ornament */
  .bw-hero-container::after{display:none}
}

/* Mobile */
@media (max-width:576px){
  .bw-heading-graphic{max-width:360px;margin-bottom:20px}
  .bw-time-group{gap:8px}
  .bw-time-box{width:78px;height:78px}
  .bw-time-value{font-size:30px;line-height:36px}
  .bw-time-label{font-size:12px;line-height:17px}
  .bw-cta{width:100%;justify-content:center}
}

/* ===== FLOAT: płynne góra–dół dla ornamentu ===== */
:root{
  /* łatwe strojenie ruchu */
  --bw-float-distance: 18px;     /* amplituda */
  --bw-float-duration: 4.8s;     /* czas pełnego cyklu */
  --bw-float-ease: ease-in-out;  /* krzywa */
}

/* animacja tylko na większych ekranach (ornament i tak znika ≤992px) */
@media (min-width: 993px){
  .bw-hero-container::after{
    animation: bw-float var(--bw-float-duration) var(--bw-float-ease) infinite;
    will-change: transform;
  }
}

/* poszanowanie prefers-reduced-motion — wyłącza animację */
@media (prefers-reduced-motion: reduce){
  .bw-hero-container::after{ animation: none !important; }
}

/* kluczowe klatki – zachowujemy bazowe translateY(-50%) i dokładamy ruch */
@keyframes bw-float{
  0%   { transform: translateY(-50%) translateY( 0); }
  50%  { transform: translateY(-50%) translateY(calc(var(--bw-float-distance) * -1)); }
  100% { transform: translateY(-50%) translateY( 0); }
}
/* === Shaderowe tło === */
.bw-hero-bg {
  position: absolute;
  inset: 0;               /* top:0; right:0; bottom:0; left:0 */
  z-index: 0;
  pointer-events: none;   /* nie blokuje kliknięć */
}
.bw-hero-bg canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.bw-hero-container,
.bw-hero-header,
.bw-hero-main {
  position: relative;
  z-index: 2;             /* treść nad tłem */
}

/* (opcjonalnie) wyłącz tło na tablet/mobil */
@media (max-width: 992px){

}

  .bw-hero-overlay{
  position:absolute; inset:0;
  z-index:0;              /* na animacji */
  pointer-events:none;
  background-image:url('https://5968576.fs1.hubspotusercontent-na1.net/hubfs/5968576/siatka1920.png'); /* PODMIEŃ URL */
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;  /* albo: contain; zależnie od grafiki */
  opacity:1;              /* jeśli chcesz przygasić: np. .85 */
}


.bw-hero-overlay{
  position:absolute; inset:0;
  z-index:1; pointer-events:none;
  background-image:url('https://5968576.fs1.hubspotusercontent-na1.net/hubfs/5968576/siatka1920.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  opacity:1;
}


@media (max-width: 992px){
  .bw-hero-overlay{
    background-image:url('https://5968576.fs1.hubspotusercontent-na1.net/hubfs/5968576/siatka-mobile-copy-2.jpg'); /* ← NOWY PLIK */
    background-position:center top;
    background-size:cover;
    background-size:100% auto;
  }
}
*, *::before, *::after { box-sizing: border-box; }

/* Sekcja playera (max 1200, centrowanie, padding boczny) */
.bw-talks {
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 0 16px;
  font-family: 'Poppins', Arial, sans-serif;
  margin-top: 25px !important;
}

/* Nawigacja zakładek */
.bw-talks-nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 16px;
  margin-bottom: 60px !important;
  margin-top: 32px !important;
}

/* Tab = S.TEXT REGULAR/BOLD wg siatki typografii */
.bw-talks-tab {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 5px;

  /* S.TEXT REGULAR (desktop ≥992px): 18/29 */
  font-size: 18px;
  font-weight: 400;
  line-height: 29px;

  transition: border-color .2s ease, background-color .2s ease;
}
.bw-talks-tab:hover,
.bw-talks-tab:focus {
  border-color: rgba(255,255,255,0.5);
  outline: none;
}
.bw-talks-tab.is-active {
  background: #FF1047;
  border-color: #FF1047;
  color: #fff;
  font-weight: 700; /* S.TEXT BOLD gdy aktywny */
}

/* Player – responsywna ramka 16:9 */
.bw-talks-player { width: 100%; }
.bw-iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.bw-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* ──────────────── BW TALKS – HARD RESET BUTTONS ──────────────── */
.bw-talks .bw-talks-tab,
.bw-talks .bw-talks-tab:hover,
.bw-talks .bw-talks-tab:focus,
.bw-talks .bw-talks-tab:active,
.bw-talks .bw-talks-tab:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  background: transparent !important;
  background-image: none !important;
  color: #fff !important;

  font-family: 'Poppins', Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 29px !important;
  text-transform: none !important;
  letter-spacing: normal !important;

  padding: 10px 28px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-shadow: none !important;

  cursor: pointer !important;
  opacity: 1 !important;

  transition: none !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  z-index:

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Hover/focus/active – efekt subtelny */
.bw-talks .bw-talks-tab:hover,
.bw-talks .bw-talks-tab:focus {
  border-color: rgba(255,255,255,0.5) !important;
}

/* Aktywny tab (jak .bw-cta) */
.bw-talks .bw-talks-tab.is-active,
.bw-talks .bw-talks-tab.is-active:hover,
.bw-talks .bw-talks-tab.is-active:focus {
  background: #FF1047 !important;
  border-color: #FF1047 !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Responsywność */
@media (max-width: 992px) {
  .bw-talks .bw-talks-tab,
.bw-talks .bw-talks-tab:hover,
.bw-talks .bw-talks-tab:focus,
.bw-talks .bw-talks-tab:active,
.bw-talks .bw-talks-tab:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  background: transparent !important;
  background-image: none !important;
  color: #fff !important;

  font-family: 'Poppins', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 25px !important;
  text-transform: none !important;
  letter-spacing: normal !important;

  padding: 10px 28px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-shadow: none !important;

  cursor: pointer !important;
  opacity: 1 !important;

  transition: none !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Hover/focus/active – efekt subtelny */
.bw-talks .bw-talks-tab:hover,
.bw-talks .bw-talks-tab:focus {
  border-color: rgba(255,255,255,0.5) !important;
}

/* Aktywny tab (jak .bw-cta) */
.bw-talks .bw-talks-tab.is-active,
.bw-talks .bw-talks-tab.is-active:hover,
.bw-talks .bw-talks-tab.is-active:focus {
  background: #FF1047 !important;
  border-color: #FF1047 !important;
  color: #fff !important;
  font-weight: 700 !important;
}
@media (max-width: 576px) {
  .bw-talks .bw-talks-tab {
    font-size: 14px !important;
    line-height: 20px !important;
    padding: 8px 16px !important;
  }
}


/* ─────────────────────────────────────────────
   Breakpoint: tablet + mobile (≤992px)
   ───────────────────────────────────────────── */
@media (max-width: 992px) {
  /* R.TEXT regular (16/22) dla tabów na mniejszych */
  .bw-talks .bw-talks-tab,
.bw-talks .bw-talks-tab:hover,
.bw-talks .bw-talks-tab:focus,
.bw-talks .bw-talks-tab:active,
.bw-talks .bw-talks-tab:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  background: transparent !important;
  background-image: none !important;
  color: #fff !important;

  font-family: 'Poppins', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  text-transform: none !important;
  letter-spacing: normal !important;

  padding: 10px 28px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-shadow: none !important;

  cursor: pointer !important;
  opacity: 1 !important;

  transition: none !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Hover/focus/active – efekt subtelny */
.bw-talks .bw-talks-tab:hover,
.bw-talks .bw-talks-tab:focus {
  border-color: rgba(255,255,255,0.5) !important;
}

/* Aktywny tab (jak .bw-cta) */
.bw-talks .bw-talks-tab.is-active,
.bw-talks .bw-talks-tab.is-active:hover,
.bw-talks .bw-talks-tab.is-active:focus {
  background: #FF1047 !important;
  border-color: #FF1047 !important;
  color: #fff !important;
  font-weight: 700 !important;
}
}

/* ─────────────────────────────────────────────
   Breakpoint: mobile (≤576px)
   ───────────────────────────────────────────── */
@media (max-width: 576px) {
  /* S.TEXT regular (14/20) na najmniejszych */
  .bw-talks-tab {
    font-size: 14px;
    line-height: 20px;
    padding: 8px 12px;
  }
}
/* =================================================================== */
/* === BRAKUJĄCE STYLE DLA NAGŁÓWKA I OPISU SEKCJI PRELEKCJI === */
/* =================================================================== */

/* --- Desktop (style podstawowe > 992px) --- */
.bw-talks-test .bw-talks-header {
  max-width: 800px;
  margin: 0 auto 36px;
  text-align: center;
}

#bw-talks-title-test {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  color: #fff;
  margin: 0 0 12px;
}

.bw-talks-test .bw-talks-intro-test {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 32px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* --- Tablet (≤992px) --- */
@media (max-width: 992px) {
  .bw-talks-test .bw-talks-header {
    margin-bottom: 28px;
  }

  #bw-talks-title-test {
    font-size: 24px;
    line-height: 29px;
  }

  .bw-talks-test .bw-talks-intro-test {
    font-size: 16px;
    line-height: 22px;
  }
}

/* --- Mobile (≤576px) --- */
@media (max-width: 576px) {
  .bw-talks-test .bw-talks-header {
    margin-bottom: 24px;
    padding: 0 8px;
  }

  #bw-talks-title-test {
    font-size: 21px;
    line-height: 25px;
  }

  .bw-talks-test .bw-talks-intro-test {
    font-size: 14px;
    line-height: 20px;
  }
}