/* ==========================================
   WAT ICT DAYS - Indico Custom Theme (clean)
   - banner w centrum na grafitowej belce (950px)
   - tlo strony biale z przejsciem w grafit u gory
   - menu po prawej, "szklista" karta jak banner
   - karty w tresci jak menu
   ========================================== */

:root{
  --brand1: #1a64a0;
  --brand2: #0f4c80;

  --graph1: #1f232a;
  --graph2: #2d333d;

  --pageBg1: #ffffff;
  --pageBg2: #f4f7fd;
  --pageBg3: #eef3fb;

  --text: #1e2b3a;
  --muted: #24425a;

  --border: rgba(15,40,61,0.12);
  --borderSoft: rgba(15,40,61,0.08);

  --cardTop: rgba(255,255,255,0.86);
  --cardBot: rgba(255,255,255,0.66);

  --radius: 14px;
  --shadow: 0 14px 28px rgba(0,0,0,0.22);
  --shadowSoft: 0 12px 26px rgba(0,0,0,0.12);
}

/* ===== tlo strony: biale + grafit u gory ===== */
.conf{
  width: 100%;
  border: none;
  margin: auto;
  background:
    radial-gradient(1100px 350px at 50% 0%,
      rgba(27,31,38,0.42), transparent 65%),
    radial-gradient(900px 380px at 75% 2%,
      rgba(26,100,160,0.16), transparent 60%),
    linear-gradient(180deg,
      var(--pageBg1) 0%,
      var(--pageBg2) 45%,
      var(--pageBg3) 100%);
}

/* ==========================================
   HEADER: belka grafitowa tylko pod bannerem
   ========================================== */

/* full-width box bez tla (tlo jest na .confTitle) */
.confTitleBox{
  color: #fff;
  min-height: 0;
  padding: 14px 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* belka ograniczona do 950px (szerokosc jak banner) */
.confTitle{
  position: relative;
  width: 950px;
  margin: 0 auto;

  padding: 10px 12px;                 /* "cieńsza" belka */
  border-top: 2px solid rgba(0,0,0,0.55);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--graph1), var(--graph2));
  box-shadow: var(--shadow);
}

/* logo box (jeśli używane) */
.confLogoBox{
  float: left;
  padding-right: 10px;
}

/* banner jako karta */
.confLogoBannerBox{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}

/* obrazek bannera */
.confLogoBannerBox img{
  width: 100%;
  height: auto;
  display: block;
  filter: contrast(1.03) saturate(1.03);
}

/* overlay bannera: czytelny, ale nie przesadzony */
.confLogoBannerBox::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.32),
    rgba(0,0,0,0.08) 55%,
    rgba(0,0,0,0.18)
  );
  pointer-events: none;
}

/* usuń "duplikat" tekstu tytułu, ale zostaw obrazek */
.conference-title-link{
  display: block;
  padding: 0;
  margin: 0;
  line-height: 0;
  font-size: 0;
  color: transparent;
  text-decoration: none;
}
.conference-title-link img{
  display: block;
}

/* dolna belka headera */
.confSubTitleBox{
  background: linear-gradient(180deg, #ffffff, #f2f7ff);
  border-top: 1px solid rgba(15,40,61,0.10);
  border-bottom: 1px solid rgba(15,40,61,0.10);
  padding: 0.55rem 0;
}

.confSubTitleContent{
  width: 950px;
  margin: 0 auto;
  font-size: 11pt;
  color: var(--muted);
}
.confSubTitleContent a{
  font-size: 11pt;
  color: var(--brand2);
  text-decoration: none;
}
.confSubTitleContent a:hover{
  text-decoration: underline;
}
.datePlace{
  font-size: 12pt;
  font-weight: 600;
}

/* ==========================================
   MAIN LAYOUT
   ========================================== */
#confSectionsBox{
  width: 950px;
  margin: 0 auto;
  margin-top: 26px;
}
#confSectionsBox::after{
  content: "";
  display: block;
  clear: both;
}

/* menu po prawej (pewniak pod Twoj DOM) */
#confSectionsBox > .conf_leftMenu{
  float: right !important;
  width: 220px;
  position: sticky;
  top: 18px;
}

/* tresc z miejscem na menu */
#confSectionsBox > .confBodyBox{
  margin-left: 0 !important;
  margin-right: 250px !important;
}

/* ==========================================
   KARTY: menu + content + support = jak banner
   ========================================== */
#outer,
.confBodyBox,
.support_box{
  background: linear-gradient(180deg, var(--cardTop), var(--cardBot));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadowSoft);
  backdrop-filter: blur(6px);
}

/* content wewnatrz */
.confBodyBox{
  padding: 18px;
}

/* ==========================================
   MENU (wyglad "wypelniony")
   ========================================== */
#outer{
  overflow: hidden;
}

/* linki menu */
#outer li a{
  display: block;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10.5pt;
  color: var(--text);
  padding: 9px 12px;
  border-bottom: 1px solid var(--borderSoft);
  transition: background 160ms ease, color 160ms ease;
}
#outer li a:hover{
  background: rgba(15,76,128,0.10);
  color: var(--brand2);
}

/* selected item */
.menuConfTitle.selected > a,
.menuConfMiddleCell.selected > a{
  color: #fff !important;
  background: linear-gradient(135deg, var(--graph1), var(--graph2)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

/* submenu - bez obrazkowych bulletow, spójnie */
li ul.inner li a{
  padding: 7px 12px 7px 30px;
  background: transparent;
  position: relative;
}
li ul.inner li a::before{
  content: "•";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(26,100,160,0.9);
}

/* support box header */
.support_box > h3{
  margin: 0;
  padding: 10px 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--graph1), var(--graph2));
}

/* ==========================================
   AGENDA TABLE: czytelnie, bez "puchniecia"
   ========================================== */
.confBodyBox table{
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

.confBodyBox table td,
.confBodyBox table th{
  font-size: 13px !important;
  line-height: 1.25 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(15,40,61,0.08);
}

.confBodyBox table th{
  background: linear-gradient(180deg, rgba(26,100,160,0.10), rgba(255,255,255,0.50));
  font-weight: 700;
}

.confBodyBox table td[colspan]{
  background: rgba(26,100,160,0.06);
  font-weight: 700;
}

.confBodyBox table td strong,
.confBodyBox table td em{
  font-size: inherit !important;
}

/* kolumny: godzina + prowadzacy */
.confBodyBox table td:first-child,
.confBodyBox table th:first-child{
  width: 120px !important;
  white-space: nowrap;
  font-weight: 700;
  color: #234173;
}

.confBodyBox table td:last-child,
.confBodyBox table th:last-child{
  width: 250px !important;
}

/* ==========================================
   MENU: poprawne podświetlanie wszystkich pozycji
   ========================================== */

/* upewnij się, że linki w menu zajmują całą szerokość */
#outer li > a,
#outer li > span > a,
#outer li.menuConfTitle > a,
#outer li.menuConfTitle > span > a,
#outer li.menuConfMiddleCell > a,
#outer li.menuConfMiddleCell > span > a,
#outer li ul.inner li > a,
#outer li ul.inner li > span > a{
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 9px 12px !important;
  color: #1e2b3a !important;
  border-radius: 10px;
}

/* hover dla wszystkich pozycji */
#outer li:hover > a,
#outer li:hover > span > a{
  background: rgba(15,76,128,0.10) !important;
  color: #0f4c80 !important;
}

/* selected: łap różne możliwe klasy "selected" */
#outer li.selected > a,
#outer li.selected > span > a,
#outer li.menuConfSelected > a,
#outer li.menuConfSelected > span > a,
#outer li.menuConfTitle.selected > a,
#outer li.menuConfTitle.selected > span > a,
#outer li.menuConfMiddleCell.selected > a,
#outer li.menuConfMiddleCell.selected > span > a{
  color: #fff !important;
  background: linear-gradient(135deg, #1f232a, #2d333d) !important;
}

/* submenu: trochę mniejsze wcięcie i kropka */
#outer li ul.inner li > a,
#outer li ul.inner li > span > a{
  padding-left: 30px !important;
  position: relative;
}
#outer li ul.inner li > a::before,
#outer li ul.inner li > span > a::before{
  content: "•";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(26,100,160,0.9);
}

#outer li.selected > a,
#outer li.selected > span > a,
#outer li.menuConfSelected > a,
#outer li.menuConfSelected > span > a{
  position: relative;
}
#outer li.selected > a::after,
#outer li.selected > span > a::after,
#outer li.menuConfSelected > a::after,
#outer li.menuConfSelected > span > a::after{
  content:"";
  position:absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  background: rgba(255,255,255,0.75);
  border-radius: 4px;
}

/* ===== MENU: wymuszenie tła na całych wierszach (LI), nie na linkach ===== */

/* baza: wiersze menu jako "przyciski" */
#outer li{
  margin: 6px 8px !important;
  border-radius: 10px !important;
  background: transparent !important;
}

/* zwykły hover */
#outer li:hover{
  background: rgba(15,76,128,0.10) !important;
}

/* aktywny/selected (różne warianty klas) */
#outer li.selected,
#outer li.menuConfSelected,
#outer li.menuConfTitle.selected,
#outer li.menuConfMiddleCell.selected{
  background: linear-gradient(135deg, #1f232a, #2d333d) !important;
}

/* link w środku ma być "przezroczysty" żeby nie psuł tła LI */
#outer li a,
#outer li span,
#outer li span a{
  background: transparent !important;
  display: block !important;
  width: 100% !important;
  padding: 9px 12px !important;
  color: #1e2b3a !important;
  box-sizing: border-box !important;
}

/* kolor tekstu na aktywnym */
#outer li.selected a,
#outer li.menuConfSelected a,
#outer li.menuConfTitle.selected a,
#outer li.menuConfMiddleCell.selected a{
  color: #fff !important;
}

/* ===== TREŚĆ stron (edytowane HTML) jako "karty" ===== */

/* ogólna karta dla całej treści */
.confBodyBox .page-content,
.confBodyBox .conference-page-content,
.confBodyBox .content,
.confBodyBox .content-container,
.confBodyBox .i-box,
.confBodyBox .box{
  background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.66)) !important;
  border: 1px solid rgba(15,40,61,0.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.10) !important;
  padding: 16px 18px !important;
}

/* akapity w środku dla czytelności */
.confBodyBox .page-content p,
.confBodyBox .conference-page-content p,
.confBodyBox .content p{
  color: #1e2b3a;
  line-height: 1.55;
}

/* ==========================================
   CONTENT BOXES: wygląd jak banner (szkło + cień)
   ========================================== */

/* główna karta treści (nagłówek + zawartość) */
.confBodyBox .i-box,
.confBodyBox .box,
.confBodyBox .page-content,
.confBodyBox .conference-page-content,
.confBodyBox .content,
.confBodyBox .content-container,
.confBodyBox .ui.segment{
  background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.66)) !important;
  border: 1px solid rgba(15,40,61,0.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.10) !important;
  backdrop-filter: blur(6px);
}

/* tytuły sekcji w treści (np. "Fotorelacja") */
.confBodyBox h1,
.confBodyBox h2,
.confBodyBox .title,
.confBodyBox .i-box > .i-box-header{
  color: #1e2b3a !important;
}

/* marginesy/padding w środku boxów */
.confBodyBox .i-box,
.confBodyBox .box{
  padding: 14px 16px !important;
}

/* obrazki w treści – spójne z bannerem */
.confBodyBox img{
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}

/* ===== nagłówek boxów treści w stylu bannera ===== */
.confBodyBox .i-box > .i-box-header,
.confBodyBox .box > .header,
.confBodyBox .boxheader,
.confBodyBox .ui.segment > .header{
  background: linear-gradient(135deg, #1f232a, #2d333d) !important;
  color: #fff !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

/* tytuł (tekst w headerze) */
.confBodyBox .i-box > .i-box-header *,
.confBodyBox .box > .header *{
  color: #fff !important;
}

/* ===== typografia treści ===== */
.confBodyBox{
  font-size: 14px;
  line-height: 1.55;
  color: #1e2b3a;
}

.confBodyBox a{
  color: #0f4c80;
  text-decoration: none;
  font-weight: 600;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.confBodyBox a:hover{
  text-decoration: underline;
}

#confSectionsBox{
  position: relative;
}

/* ==========================================
   GRAFITOWY PASEK POD TYTUŁEM (jak banner)
   łapie różne warianty Indico
   ========================================== */

.confBodyBox h1,
.confBodyBox h2,
.confBodyBox h3,
.confBodyBox .page-title,
.confBodyBox .pageTitle,
.confBodyBox .title,
.confBodyBox .box-title,
.confBodyBox .boxTitle,
.confBodyBox .boxheader,
.confBodyBox .header,
.confBodyBox .section-title,
.confBodyBox .sectionTitle{
  background: linear-gradient(135deg, #1f232a, #2d333d) !important;
  color: #fff !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  margin: 0 0 12px 0 !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.14) !important;
}

/* jeżeli tytuł ma wewnętrzny link/span */
.confBodyBox h1 *,
.confBodyBox h2 *,
.confBodyBox h3 *,
.confBodyBox .page-title *,
.confBodyBox .pageTitle *,
.confBodyBox .title *,
.confBodyBox .box-title *,
.confBodyBox .boxTitle *,
.confBodyBox .boxheader *,
.confBodyBox .header *{
  color: #fff !important;
}

.confBodyBox h1,
.confBodyBox h2,
.confBodyBox h3{
  border-bottom: none !important;
}

/* ===== FIX: usuń zagnieżdżone "ramka w ramce" w tytułach ===== */

/* jeśli w belce jest np. <h2> lub <span>, niech nie ma własnego tła */
.confBodyBox h1 h1,
.confBodyBox h1 h2,
.confBodyBox h1 h3,
.confBodyBox h2 h1,
.confBodyBox h2 h2,
.confBodyBox h2 h3,
.confBodyBox h3 h1,
.confBodyBox h3 h2,
.confBodyBox h3 h3,
.confBodyBox .title .title,
.confBodyBox .page-title .title,
.confBodyBox .title h1,
.confBodyBox .title h2,
.confBodyBox .title h3,
.confBodyBox .page-title h1,
.confBodyBox .page-title h2,
.confBodyBox .page-title h3{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.confBodyBox .title a,
.confBodyBox .page-title a,
.confBodyBox h1 a,
.confBodyBox h2 a,
.confBodyBox h3 a{
  background: transparent !important;
}

/* ===== TREŚĆ (body) w stylu bannera: jasnoszary -> biały ===== */
.confBodyBox .i-box-content,
.confBodyBox .box-content,
.confBodyBox .content,
.confBodyBox .body,
.confBodyBox .ui.segment .content,
.confBodyBox .page-content{
  background: linear-gradient(180deg, #f0f2f5, #ffffff 65%) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
}

/* jeśli content jest bezpośrednio w .i-box/.box, też nadaj tło */
.confBodyBox .i-box,
.confBodyBox .box{
  background: transparent !important; /* żeby nie było "gradient na gradiencie" */
}

/* ładne połączenie header -> body */
.confBodyBox .i-box,
.confBodyBox .box{
  overflow: hidden; /* żeby radius działał na całość */
  border-radius: 14px !important;
}

/* ===== mocniejszy gradient dla treści w boxach ===== */
.confBodyBox .i-box-content,
.confBodyBox .box-content,
.confBodyBox .content,
.confBodyBox .body,
.confBodyBox .ui.segment .content,
.confBodyBox .page-content{
  background: linear-gradient(180deg,
    #e6eaee 0%,
    #f4f6f8 35%,
    #ffffff 80%
  ) !important;
}
/* delikatny highlight przy górnej krawędzi treści */
.confBodyBox .i-box-content,
.confBodyBox .page-content{
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.confBodyBox .i-box-content,
.confBodyBox .page-content{
  background:
    radial-gradient(900px 200px at 50% 0%,
      rgba(255,255,255,0.85), transparent 60%),
    linear-gradient(180deg,
      #e6eaee 0%,
      #f4f6f8 35%,
      #ffffff 80%
    ) !important;
}

/* ===== CSS slider bez JS ===== */
.wat-slider{
  position: relative;
  margin-top: 16px;
  width: 100%;
  height: 340px;              /* dopasuj wysokość */
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(0,0,0,0.12);
  background: #fff;
}

.wat-slider img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* albo contain jeśli ma nie ucinać */
  opacity: 0;
  animation: watFade 39s infinite;
  animation-fill-mode: both;
}

/* opóźnienia: kolejne zdjęcia startują później */
.wat-slider img:nth-child(1){ animation-delay: 0s; }
.wat-slider img:nth-child(2){ animation-delay: 3s; }
.wat-slider img:nth-child(3){ animation-delay: 6s; }
.wat-slider img:nth-child(4){ animation-delay: 9s; }
.wat-slider img:nth-child(5){ animation-delay: 12s; }
.wat-slider img:nth-child(6){ animation-delay: 15s; }
.wat-slider img:nth-child(7){ animation-delay: 18s; }
.wat-slider img:nth-child(8){ animation-delay: 21s; }
.wat-slider img:nth-child(9){ animation-delay: 24s; }
.wat-slider img:nth-child(10){ animation-delay: 27s; }
.wat-slider img:nth-child(11){ animation-delay: 30s; }
.wat-slider img:nth-child(12){ animation-delay: 33s; }
.wat-slider img:nth-child(13){ animation-delay: 36s; }

@keyframes watFade{
  0%    { opacity: 0; }
  0.8%  { opacity: 1; }   /* ~0.31s fade-in */
  6.2%  { opacity: 1; }   /* ~2.42s widoczne */
  7.7%  { opacity: 0; }   /* ~3.0s fade-out */
  100%  { opacity: 0; }
}
/* ===== układ 2 kolumny: slider + tekst ===== */
.wat-split{
  display: flex;
  gap: 22px;
  align-items: stretch;
}

.wat-split-left{
  flex: 0 0 46%;
  min-width: 260px;
}

.wat-split-right{
  flex: 1 1 auto;
  min-width: 0;
}

/* ===== mini slider (2 zdjęcia) ===== */
.wat-mini-slider{
  position: relative;
  width: 100%;
  height: 280px;           /* zmień np. 240–360 */
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(0,0,0,0.12);
  background: #fff;
}

.wat-mini-slider img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* jeśli nie chcesz kadrowania: contain */
  opacity: 0;
  animation: watSwap2 8s infinite; /* czas cyklu */
}

/* opóźnienie dla drugiego zdjęcia */
.wat-mini-slider img:nth-child(1){ animation-delay: 0s; }
.wat-mini-slider img:nth-child(2){ animation-delay: 4s; }

@keyframes watSwap2{
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  50%  { opacity: 1; }
  58%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ===== responsywność (telefon) ===== */
@media (max-width: 760px){
  .wat-split{
    flex-direction: column;
  }
  .wat-mini-slider{
    height: 240px;
  }
}