/* sprawozdanie.css - wspólny arkusz sprawozdania z konferencji (strona główna sprawozdania + artykuły).
   Część 1 to DOSŁOWNE fragmenty <style> z konferencja-ai-2026.html (pasek, przyciski, pasy sekcji,
   hero, liczby, stopka, pasy promocyjne) - przy zmianie wyglądu strony konferencji przenieś zmianę tutaj.
   Część 2 to elementy własne sprawozdania. */

    #topNav{ display:flex; flex-direction:column; }
    .nav-inner{max-width:var(--w-wide);margin:0 auto;padding:.75rem 1.5rem;display:flex;align-items:center;gap:1rem;width:100%;min-width:0;}

    /* Bez min-width:0 na desktopie => logo nigdy się nie skraca; skracanie włącza dopiero media query mobilna. */
    .brand{font-weight:800;font-size:var(--fs-xl);color:var(--dark);cursor:pointer;text-decoration:none;transition:color .2s ease; display: flex; align-items: center; gap: 0.5rem; white-space:nowrap;}
    .brand span{overflow:hidden;text-overflow:ellipsis;}
    @media (hover:hover){.brand:hover{color:var(--primary);}}
    @media (max-width: 480px){
      .brand{font-size:var(--fs-base);}
    }
    @media (max-width: 360px){
      .brand{font-size:var(--fs-sm);}
    }
    /* Rozmiary tekstu w logo skalowane responsywnie (zamiast inline font-size,
       którego media query „.brand” nie dosięgało - chroni przed przepełnieniem na ~360px) */
    .brand-name{font-size:var(--fs-base);}
    .brand-tag-pre{font-size:var(--fs-3xs); font-weight:400;}
    .brand-tag-ai{font-size:var(--fs-xs); font-weight:800; color:var(--ai-blue); letter-spacing:.04em;}
    @media (max-width: 400px){
      .brand-name{font-size:var(--fs-xs);}
      .brand-tag-pre{font-size:var(--fs-3xs);}
      .brand-tag-ai{font-size:var(--fs-2xs);}
    }
    @media (max-width: 360px){
      .brand-name{font-size:var(--fs-2xs);}
      .brand-tag-pre{font-size:var(--fs-3xs);}
      .brand-tag-ai{font-size:var(--fs-3xs);}
    }
    
    .nav-links{margin-left:auto;display:flex;flex-wrap:nowrap;gap:.35rem;align-items:center}
    /* :not(.btn) jest tu KONIECZNE. Bez tego selektor .nav-links a ma specyficznosc
       (0,1,1) i wygrywa z .btn { color:#fff } (0,1,0) ze styles.css - przycisk CTA
       w pasku dostawal ciemny tekst. Do tej pory ratowal to wylacznie !important
       w .btn--edu, wiec kazdy rozjazd HTML z arkuszem (np. zestarzaly cache CSS)
       dawal czarny napis na przycisku. Kolor przycisku ma pochodzic z przycisku. */
    .nav-links a:not(.btn){
      text-decoration:none;color:var(--dark);font-weight:700;font-size:var(--fs-xs);
      padding:.4rem .5rem;border-radius:var(--r-sm);white-space:nowrap;
      transition:color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
    }
    @media (hover:hover){.nav-links a:not(.btn):hover{color:var(--primary); background:rgba(29,78,216,0.05);}}
    .nav-links a.is-active, .nav-links a[aria-current="page"]{color:var(--primary); background:rgba(29,78,216,0.08);}

    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
      padding:.875rem 1.75rem;border-radius:var(--r-pill);border:0;cursor:pointer;
      font-weight:700; font-size: var(--fs-md); background:var(--primary);color:#ffffff;
      box-shadow:var(--shadow-cta);
      transition:color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1), transform .3s cubic-bezier(0.4, 0, 0.2, 1), opacity .3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration:none;
    }
    @media (hover:hover){.btn:hover{transform:translateY(-2px);background:var(--primary-dark);box-shadow:var(--shadow-cta-hover) !important;}}
    .btn:active{transform:translateY(0);}

    
    /* Wyróżniony przycisk Rejestracja - mocny czerwony akcent (bez nieustannego pulsowania) */
    .btn--register{
      background:var(--accent) !important;
      color:#ffffff !important;
      font-weight:800 !important;
      letter-spacing:0.3px;
      box-shadow:0 6px 14px -6px rgba(220,38,38,0.28), 0 0 0 1px rgba(255,255,255,0.15) inset !important;
      transform:translateZ(0);
    }
    @media (hover:hover){.btn--register:hover{
      background:var(--accent-ink) !important;
      box-shadow:0 8px 18px -8px rgba(220,38,38,0.3), 0 0 0 1px rgba(255,255,255,0.2) inset !important;
      transform:translateY(-2px);
    }}

    /* Przycisk Szkolenie - jasny outline w kolorze indygo */
    .btn--soft{
      background:#ffffff !important;
      color:var(--primary) !important;
      border:2px solid var(--primary) !important;
      box-shadow:0 4px 6px -1px rgba(29,78,216,0.1) !important;
    }
    @media (hover:hover){.btn--soft:hover{
      background:rgba(29,78,216,0.06) !important;
      color:var(--primary-dark) !important;
      border-color:var(--primary-dark) !important;
      box-shadow:0 10px 15px -3px rgba(29,78,216,0.2) !important;
    }}

    /* Przycisk sukcesu - zielony, spójny z ikoną potwierdzenia w modalu */
    .btn--success{
      background:var(--success) !important;
      color:#ffffff !important;
      box-shadow:0 10px 15px -3px rgba(4,120,87,0.3) !important;
    }
    @media (hover:hover){.btn--success:hover{
      background:var(--success-dark) !important;
      box-shadow:0 20px 25px -5px rgba(4,120,87,0.4) !important;
    }}

    .nav-links .btn{padding:.5rem .85rem; font-size: var(--fs-xs); white-space:nowrap;}

    /* Hamburger jako 3 belki SVG-owe z animacją w "X" (spójne z podstroną CFP) */
    .hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:3px;background:none;border:0;padding:.5rem;cursor:pointer;min-width:44px;min-height:44px;border-radius:var(--r-sm);-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
    .hamburger span{width:22px;height:2px;background:var(--dark);border-radius:1px;transition:transform .2s ease, opacity .2s ease;}
    .hamburger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
    .hamburger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px);}
    @media (hover:hover){.hamburger:hover{background:rgba(29,78,216,0.06);}}
    @media (prefers-reduced-motion: reduce){ .hamburger span{transition:none;} }

    /* Kontener CTA w pasku poniżej progu nav: skrót do szkolenia AI-First (od 08.10.2026
       jedyny - przycisk zapisu na nagrania usunięty). To kontener ma margin-left:auto,
       nie przycisk, więc wyrównanie paska nie zależy od liczby przycisków. */
    .nav-cta-pair{display:none;}
    .nav-cta-training{padding:.5rem .95rem;font-size:var(--fs-xs);}

    /* Menu mobilne: pełny drawer z blokadą przewijania tła (wcześniej rozwijana
       warstwa, spod której wystawało hero i jego CTA). */
    .mobile-menu{display:none;flex-direction:column;background:#fff;padding:1rem;border-top:1px solid var(--border);position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;z-index:1000;}
    body.menu-open{overflow:hidden;}
    .mobile-menu a{padding:.85rem .25rem;font-weight:700;color:var(--dark);text-decoration:none;border-bottom:1px solid #f1f5f9;min-height:44px;display:flex;align-items:center;}
    /* Dwa CTA rejestracji w menu mobilnym renderowane jako pełnowymiarowe przyciski
       (wyższa specyficzność niż „.mobile-menu a”, żeby nadpisać obramowanie/wyrównanie). */
    .mobile-menu .btn{justify-content:center;border-bottom:0;width:100%;margin:.4rem 0;min-height:48px;}
    .mobile-menu .btn:first-of-type{margin-top:.75rem;}

    /* Próg podniesiony do 1400px: 8 linków (z „Hub wiedzy”) + DWA szerokie CTA
       (konferencja + szkolenie) nie mieszczą się w jednym pasku niżej. Logo skraca się
       (ellipsis), CTA i hamburger stałe. Pełne menu pokazujemy dopiero na szerokich ekranach. */
    @media (max-width: 1399.98px){
      .nav-links{display:none}
      .hamburger{display:flex; flex:none;}
      .nav-cta-pair{display:flex; align-items:center; gap:.5rem; margin-left:auto; flex:none;}
      .brand{flex:1 1 auto; min-width:0;}
      .brand-lines{min-width:0;}
      .nav-inner{gap:.6rem;}
      .mobile-menu:not([hidden]){display:flex;}
    }
    /* Cała etykieta jest JEDNYM elementem flex (.nav-cta-training__label), więc „Poznaj szkolenie”
       i „AI-First” dzieli zwykła spacja, a nie gap:.5rem z .btn (ten rozsuwałby je jak dwa osobne
       elementy). Na wąskich ekranach chowamy początek etykiety i zostaje samo „AI-First”;
       przycisk zostaje widoczny do najmniejszych szerokości - w pasku jest miejsce, bo
       w logo pokazujemy sam sygnet. */
    @media (max-width: 700px){
      .nav-cta-training__lead{display:none;}
    }
    @media (max-width: 400px){
      .nav-cta-training{padding:.45rem .8rem;}
    }
    @media (max-width: 400px){
      .nav-inner{padding-left:1rem; padding-right:1rem;}
    }

    .scroll-progress{position:fixed;top:0;left:0;height:3px;background:var(--primary);width:0;z-index:1200}


    /* ============================================================
       UKŁAD STRONY (przebudowa 15.10.2026, wzór: liderzy.it/konferencja)
       Sekcje to pełnoszerokie pasy w trzech tonach (biały / jasny / granat),
       nagłówki wyrównane do lewej, układy dwukolumnowe, włosowe linie zamiast
       kart z cieniem. Bez pastylek, kafli z ikonami, poświat i pionowych szyn.
       Kolory i treść bez zmian - zmienia się wyłącznie rozkład elementów.
       ============================================================ */
    :root{
      --on-dark: rgba(255,255,255,.74);
      --on-dark-hair: rgba(255,255,255,.14);
    }
    /* styles.css ustawia html,body{overflow-x:hidden} - body staje się wtedy kontenerem przewijania
       i position:sticky (nagłówki bloków programu, tytuł FAQ, zdjęcie organizatorów) nie działa.
       clip przycina tak samo, ale bez tworzenia kontenera przewijania (ten sam zabieg co na stronie nagrań). */
    html, body{overflow-x:clip;}
    section{scroll-margin-top:calc(var(--nav-h) + 20px); padding:var(--sec-standard) 0;}
    .sec--white{background:#ffffff;}
    .sec--light{background:var(--bg-light);}
    .sec--dark{background:var(--dark); color:#ffffff;}
    /* #liczby to dalszy ciąg #kontekst (ten sam pas) - bez górnego odstępu. */
    .sec--flush{padding-top:0;}
    .container{max-width:var(--w-wide); margin:0 auto; padding:0 1.5rem;}
    @media (max-width: 399.98px){ .container{padding:0 1rem;} }

    .section-title{
      font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:700;
      font-size:var(--fs-h2); line-height:1.1; letter-spacing:-.03em;
      color:var(--dark); margin:0 0 1.5rem; text-align:left; text-wrap:balance;
    }
    .section-title--sm{font-size:clamp(1.5rem, 2.4vw, 2rem); margin-bottom:2rem;}
    .sec--dark .section-title{color:#ffffff;}
    .sec-lead{font-size:var(--fs-lg); line-height:1.7; color:#334155; margin:0 0 1.25rem; max-width:62ch;}
    .sec-lead:last-child{margin-bottom:0;}
    .sec-lead strong{color:var(--dark);}
    .sec--dark .sec-lead{color:var(--on-dark);}
    .sec--dark .sec-lead strong{color:#ffffff;}

    .split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem, 5vw, 5rem); align-items:center;}
    .split--top{align-items:start;}
    @media (max-width: 899.98px){ .split{grid-template-columns:minmax(0,1fr);} }

    .photo{margin:0;}
    .photo img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-lg); background:#e2e8f0;}
    .photo figcaption{margin-top:.75rem; font-size:var(--fs-sm); line-height:1.5; color:var(--light);}
    @media (orientation: landscape) and (max-height: 500px){ .photo img{aspect-ratio:auto; height:calc(100vh - var(--nav-h) - 3rem); height:calc(100svh - var(--nav-h) - 3rem); object-position:50% 20%;} }
    .sec--dark .photo figcaption{color:rgba(255,255,255,.58);}

    /* ---------- HERO: zdjęcie sali + karta z faktami ---------- */
    .hero{
      position:relative; isolation:isolate; overflow:hidden; background:var(--dark); color:#ffffff;
      padding:calc(var(--nav-h) + clamp(3rem, 7vw, 5.5rem)) 0 clamp(3.5rem, 7vw, 5.5rem);
    }
    .hero__img, .hero__img img{position:absolute; inset:0; width:100%; height:100%;}
    .hero__img{z-index:-2;}
    .hero__img img{object-fit:cover; object-position:50% 14%;}
    /* Telefon: kadr portretowy (konf-sala-pion-*). Desktop: zdjęcie od górnej krawędzi - głowa prelegenta
       chowa się wtedy w całości za kartą z faktami, zamiast z niej wystawać. */
    @media (max-width: 599.98px){ .hero__img img{object-position:50% 45%;} }
    @media (min-width: 1024px){ .hero__img img{object-position:50% 0%;} }
    .hero::after{
      content:""; position:absolute; inset:0; z-index:-1;
      background:linear-gradient(90deg, rgba(11,17,32,.95) 0%, rgba(11,17,32,.86) 46%, rgba(11,17,32,.6) 100%);
    }
    /* Poniżej 1024 px tekst i karta zajmują całą szerokość: przyciemnienie od góry do dołu, a u dołu
       pełny granat (zamiast jaskrawego pasa ekranu laptopa pod kartą). Między 600 a 1023 px prawa
       strona zostaje jaśniejsza - tam obok tekstu stoi prelegent. */
    @media (max-width: 599.98px){
      .hero::after{background:linear-gradient(180deg, rgba(11,17,32,.72) 0%, rgba(11,17,32,.82) 45%, rgba(11,17,32,.94) 80%, #0b1120 100%);}
    }
    @media (min-width: 600px) and (max-width: 1023.98px){
      .hero::after{background:linear-gradient(180deg, rgba(11,17,32,0) 55%, rgba(11,17,32,.92) 88%, #0b1120 100%), linear-gradient(90deg, rgba(11,17,32,.95) 0%, rgba(11,17,32,.86) 46%, rgba(11,17,32,.6) 100%);}
      /* A3: karta nie rozciąga się na całą szerokość i nie zasłania prelegenta. */
      .hero-card{max-width:30rem;}
    }
    .hero__in{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2rem, 5vw, 4.5rem); align-items:center;}
    @media (max-width: 1023.98px){ .hero__in{grid-template-columns:minmax(0,1fr);} }
    .hero h1{
      font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:700; letter-spacing:-.04em;
      font-size:var(--fs-display); line-height:1.04; margin:0 0 1.5rem; color:#ffffff;
      text-align:left; overflow-wrap:break-word;
    }
    .hero h1 .accent-amp{color:#f04747; font-style:normal;}
    .hero h1 .accent-ai{color:var(--ai-blue);}
    .hero h1 .hero-title__connector{font-weight:400; letter-spacing:-.01em;}
    .hero-title__edition{
      display:flex; align-items:center; gap:.85rem;
      font-size:clamp(.8rem, .2em, 1rem); font-weight:500; letter-spacing:.22em; text-transform:uppercase;
      color:rgba(255,255,255,.88); margin-bottom:1.25rem;
    }
    .hero-title__edition::before{content:""; width:28px; height:2px; background:var(--accent); flex:none;}
    .hero-subtitle{font-size:var(--fs-lead); line-height:1.65; color:rgba(255,255,255,.86); margin:0; max-width:58ch; text-align:left; overflow-wrap:break-word;}
    .hero-subtitle strong{color:#ffffff;}

    .hero-card{
      background:rgba(11,17,32,.74); border:1px solid var(--on-dark-hair); border-radius:var(--r-lg);
      padding:clamp(1.5rem, 3vw, 2.25rem);
      -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    }
    .hero-card__date{
      font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:700; color:#ffffff;
      font-size:clamp(1.6rem, 2.6vw, 2.1rem); line-height:1.1; letter-spacing:-.03em; margin:0 0 1.1rem;
    }
    .hero-card__meta{list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:.65rem;}
    .hero-card__meta li{display:flex; align-items:center; gap:.7rem; color:rgba(255,255,255,.9); font-weight:500; font-size:var(--fs-md); line-height:1.4;}
    .hero-card__meta svg{width:18px; height:18px; flex:none; color:var(--ai-blue);}
    .hero-card__btn{width:100%; background:#ffffff; color:var(--dark); box-shadow:none;}
    /* Dłuższa etykieta (16.10.2026) - na telefonie łamie się na dwie linie zamiast wychodzić poza przycisk. */
    .hero-card__btn{white-space:normal; text-align:center; line-height:1.35; text-wrap:balance;}
    /* Drugi, cichszy odnośnik pod przyciskiem (16.10.2026: przycisk prowadzi do sprawozdania). */
    .hero-card__link{display:flex; justify-content:center; align-items:center; min-height:44px; margin-top:.5rem; color:#ffffff; font-weight:700; font-size:var(--fs-sm); text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:4px;}
    @media (hover:hover){ .hero-card__link:hover{text-decoration-color:#ffffff;} }
    @media (hover:hover){ .hero-card__btn:hover{background:#e2e8f0; color:var(--dark);} }

    /* ---------- KONFERENCJA W LICZBACH: pasek liczb ---------- */
    .kpi-grid{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:2.25rem 2rem;}
    @media (max-width: 1139.98px){ .kpi-grid{grid-template-columns:repeat(3, minmax(0,1fr));} }
    @media (max-width: 639.98px){ .kpi-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.75rem 1.25rem;} .kpi:last-child:nth-child(odd){grid-column:1 / -1;} }
    .kpi{padding-top:1.25rem; border-top:2px solid var(--dark); text-align:left;}
    .kpi__num{
      display:block; font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:700;
      font-size:var(--fs-stat); line-height:1; letter-spacing:-.04em;
      color:var(--dark); font-variant-numeric:tabular-nums;
    }
    .kpi__label{margin-top:.8rem; color:var(--dark); font-weight:700; font-size:var(--fs-base); line-height:1.35;}
    .kpi__sub{margin-top:.2rem; color:var(--light); font-weight:500; font-size:var(--fs-sm); line-height:1.45;}

    /* ---------- STOPKA (granat) ----------
       Marka w stopce pozostaje ukryta (styles.css: div.brand) - decyzja celowa. */
    .footer-accent{display:none;}
    footer{background:var(--dark); color:#ffffff; border-top:0; text-align:left; padding:3.5rem 0 2.5rem; position:relative; z-index:1;}
    footer .container{display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem;}
    /* Ujemny margines = wcięcie linków (padding .5rem) - tekst równa się z krawędzią kontenera. */
    .footer-links{display:flex; flex-wrap:wrap; justify-content:flex-start; gap:.25rem .5rem; margin:0 0 0 -.5rem; max-width:none;}
    .footer-links a, .footer-links button{
      color:rgba(255,255,255,.84); text-decoration:none; font-weight:700; font-size:var(--fs-sm);
      display:inline-flex; align-items:center; min-height:44px; padding:.35rem .5rem; border-radius:var(--r-sm);
      background:none; border:0; cursor:pointer; font-family:inherit;
    }
    @media (hover:hover){ .footer-links a:hover, .footer-links button:hover{color:#ffffff; text-decoration:underline; text-underline-offset:3px;} }
    .footer-copy{grid-column:1 / -1; margin:0; padding-top:1.5rem; border-top:1px solid var(--on-dark-hair); color:rgba(255,255,255,.6); font-size:var(--fs-sm);}

    /* ---------- PASY PROMOCYJNE (16.10.2026) ----------
       Zamiast pływających kart .training-banner (zostają w styles.css dla innych stron) - pełnoszerokie
       pasy jak sekcje: treść na osi kontenera, siatka 5fr/7fr, nadtytuł z kreską jak w hero,
       szczegóły i przycisk pod włosową linią (wzorzec cytatu z hero Poza Horyzont).
       Bez kafla z ikoną, gradientu i cienia. Cały pas to jeden link, „przycisk” to span. */
    .promo{display:block; position:relative; isolation:isolate; overflow:hidden; text-decoration:none; color:var(--dark); transition:background-color .25s ease;}
    .promo__in{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:1.75rem clamp(2rem, 5vw, 5rem); align-items:end;}
    .promo__eyebrow{display:flex; align-items:center; gap:.85rem; margin-bottom:1rem; font-size:var(--fs-xs); font-weight:500; letter-spacing:.22em; text-transform:uppercase;}
    .promo__eyebrow::before{content:""; width:28px; height:2px; flex:none;}
    .promo__title{display:block; font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:700; font-size:clamp(1.6rem, 1.1rem + 1.5vw, 2.25rem); line-height:1.1; letter-spacing:-.03em; text-wrap:balance;}
    .promo__side{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:1.25rem 2.5rem; padding-top:1.25rem; border-top:1px solid;}
    .promo__facts{display:flex; flex-wrap:wrap; gap:.75rem 2.5rem;}
    .promo__fact{display:flex; flex-direction:column; gap:.15rem; font-size:var(--fs-sm); color:var(--light);}
    .promo__fact strong{font-size:var(--fs-lg); font-weight:700; color:var(--dark);}
    .promo__lead{flex:1 1 18rem; max-width:34rem; font-size:var(--fs-lg); line-height:1.6;}
    .promo__cta{display:inline-flex; align-items:center; gap:.5rem; flex:none; min-height:48px; padding:.8rem 1.6rem; border-radius:var(--r-pill); font-weight:700; font-size:var(--fs-md); transition:background-color .2s ease;}
    .promo__cta svg{flex:none; transition:transform .2s ease;}
    @media (hover:hover){ .promo:hover .promo__cta svg{transform:translateX(4px);} }
    .promo:focus-visible{outline:3px solid var(--focus-ring); outline-offset:-6px; box-shadow:none;}
    @media (max-width: 899.98px){ .promo__in{grid-template-columns:minmax(0,1fr);} }
    /* K3: na telefonie jeden pas szkolenia (środkowy) - dolny ukryty. Górny (pod hero) usunięty 16.10.2026. */
    @media (max-width: 639.98px){ .promo--mobile-hide{display:none;} }

    /* Szkolenie: jasny teal - sygnatura szkolenia (--edu*), ale bez ciemnej bryły między jasnymi sekcjami.
       Kontrasty na #eef9f6: --edu-ink 5,1:1, --light 6,1:1, biały na --edu-dark 5,5:1. */
    .promo--edu{background:#eef9f6; border-block:1px solid rgba(13,148,136,.18); padding:clamp(2.25rem, 4.5vw, 3.25rem) 0;}
    @media (hover:hover){ .promo--edu:hover{background:#e5f6f1;} }
    .promo--edu .promo__eyebrow{color:#334155;}
    .promo--edu .promo__eyebrow::before{background:var(--edu);}
    .promo--edu .promo__accent{color:var(--edu-ink);}
    .promo--edu .promo__side{border-top-color:rgba(13,148,136,.3);}
    .promo--edu .promo__cta{background:var(--edu-dark); color:#ffffff;}
    @media (hover:hover){ .promo--edu:hover .promo__cta{background:var(--edu-darker);} }

    /* Poza Horyzont: to samo zdjęcie i ten sam tytuł co hero strony docelowej (czerwony akcent #f04747).
       Linia horyzontu leży przy dolnej krawędzi, pod tekstem - stąd większy dolny odstęp. */
    .promo--ph{background:var(--dark); color:#ffffff; padding:clamp(3rem, 6vw, 4.5rem) 0 clamp(5rem, 10vw, 7.5rem);}
    .promo__bg, .promo__bg img{position:absolute; inset:0; width:100%; height:100%;}
    .promo__bg{z-index:-2;}
    .promo__bg img{object-fit:cover; object-position:50% 100%; transition:transform .6s cubic-bezier(.2,.65,.2,1);}
    .promo--ph::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(11,17,32,.82) 0%, rgba(11,17,32,.62) 50%, rgba(11,17,32,.45) 100%);}
    @media (hover:hover) and (prefers-reduced-motion: no-preference){ .promo--ph:hover .promo__bg img{transform:scale(1.03);} }
    .promo--ph .promo__eyebrow{color:rgba(255,255,255,.88);}
    .promo--ph .promo__eyebrow::before{background:#f04747;}
    .promo--ph .promo__accent{color:#f04747;}
    .promo--ph .promo__side{border-top-color:rgba(147,197,253,.4);}
    .promo--ph .promo__lead{color:rgba(255,255,255,.88);}
    .promo--ph .promo__cta{background:#ffffff; color:var(--dark);}
    @media (hover:hover){ .promo--ph:hover .promo__cta{background:#e2e8f0;} }
    .promo--ph:focus-visible{outline-color:#ffffff;}
    @media (max-width: 899.98px){
      .promo--ph::after{background:linear-gradient(180deg, rgba(11,17,32,.82) 0%, rgba(11,17,32,.72) 60%, rgba(11,17,32,.64) 82%, rgba(11,17,32,.2) 100%);}
    }

    /* Telefon: krótsze pasy sekcji. */
    @media (max-width: 639.98px){
      section{padding-top:var(--sec-compact); padding-bottom:var(--sec-compact);}
      .sec--flush{padding-top:0;}
      .hero{padding-bottom:3rem;}
    }

/* ============================================================
   SPRAWOZDANIE Z KONFERENCJI - elementy własne (16.10.2026)
   Ten sam język co strona konferencji: pasy sekcji, włosowe linie,
   Space Grotesk w nagłówkach, granat/biel/jasne tło, akcent czerwony
   w nadtytułach i niebieski w linkach. Bez kart z cieniem i ikon.
   ============================================================ */
.nobr{white-space:nowrap;}
.hero-card__count{margin:0 0 1.5rem; padding-top:1.25rem; border-top:1px solid var(--on-dark-hair); color:#ffffff; font-weight:700; font-size:var(--fs-base); line-height:1.45;}
.hero-card__count span{display:block; margin-top:.25rem; color:rgba(255,255,255,.7); font-weight:500; font-size:var(--fs-sm);}

/* Nagłówek serii: tytuł z lewej, licznik i LinkedIn z prawej */
.series-head{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:1.5rem clamp(2rem, 5vw, 5rem); align-items:end; margin-bottom:clamp(2rem, 4vw, 3rem);}
@media (max-width: 899.98px){ .series-head{grid-template-columns:minmax(0,1fr);} }
.series-meter{padding-top:1.25rem; border-top:2px solid var(--dark);}
.series-meter__num{display:block; font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:700; font-size:var(--fs-stat); line-height:1; letter-spacing:-.04em; color:var(--dark); font-variant-numeric:tabular-nums;}
.series-meter__label{display:block; margin-top:.6rem; color:var(--light); font-size:var(--fs-sm); font-weight:500;}
.series-meter__unused{display:inline-flex; align-items:center; gap:.45rem; min-height:44px; margin-top:.35rem; color:var(--primary); font-weight:700; font-size:var(--fs-sm); text-decoration:none;}
@media (hover:hover){ .series-meter a:hover{text-decoration:underline; text-underline-offset:3px;} }

/* Odcinek serii: media z lewej, treść z prawej, włosowe linie między odcinkami */
.eps{list-style:none; margin:0; padding:0; border-top:2px solid var(--dark);}
.ep{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:1.5rem clamp(2rem, 4.5vw, 4rem); padding:clamp(2rem, 4vw, 3rem) 0; border-bottom:1px solid var(--border); scroll-margin-top:calc(var(--nav-h) + 20px);}
@media (max-width: 899.98px){ .ep{grid-template-columns:minmax(0,1fr);} }
.ep__media{margin:0; align-self:start;}
.ep__media video, .ep__media img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r-lg); background:#0b1120;}
.ep__media a{display:block; border-radius:var(--r-lg);}
.ep__media figcaption{margin-top:.65rem; font-size:var(--fs-sm); color:var(--light);}
.ep__no{display:block; margin:0 0 .6rem; font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink);}
.ep__title{margin:0 0 .6rem; font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-size:clamp(1.35rem, 1.1rem + 1vw, 1.85rem); font-weight:700; line-height:1.2; letter-spacing:-.025em; color:var(--dark); text-wrap:balance;}
.ep__title a{color:inherit; text-decoration:none;}
@media (hover:hover){ .ep__title a:hover{color:var(--primary);} }
.ep__who{margin:0 0 .3rem; color:var(--dark); font-weight:700; font-size:var(--fs-md);}
.ep__who span{color:var(--light); font-weight:400;}
.ep__talk{margin:0 0 1.15rem; color:var(--light); font-size:var(--fs-sm); line-height:1.5;}
.ep__quote{margin:0 0 1.15rem; padding-left:1rem; border-left:3px solid var(--accent); font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:500; font-size:var(--fs-lg); line-height:1.45; color:var(--dark);}
.ep__lead{margin:0 0 .85rem; color:#334155; font-size:var(--fs-base); line-height:1.7;}
.ep__list{list-style:none; margin:0 0 1.35rem; padding:0;}
.ep__list li{position:relative; padding-left:1.15rem; margin:.35rem 0; color:#334155; font-size:var(--fs-base); line-height:1.6;}
.ep__list li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; background:var(--primary);}
.ep__actions{display:flex; flex-wrap:wrap; gap:.75rem;}
.ep__actions .btn{padding:.75rem 1.4rem;}


/* Pas granatowy: nagrania w szkoleniu */
.cta-dark{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:1.5rem clamp(2rem, 5vw, 5rem); align-items:end;}
@media (max-width: 899.98px){ .cta-dark{grid-template-columns:minmax(0,1fr);} }
.cta-dark .section-title{margin-bottom:1rem;}
.cta-dark__side{padding-top:1.25rem; border-top:2px solid var(--edu-light);}
.cta-dark__side p{margin:0 0 1.25rem; color:var(--on-dark); font-size:var(--fs-md); line-height:1.6;}
.cta-dark__side p strong{color:#ffffff;}
.btn--edu-solid{background:var(--edu-dark) !important; color:#ffffff !important; box-shadow:none !important;}
@media (hover:hover){ .btn--edu-solid:hover{background:var(--edu-darker) !important;} }
.btn--light{background:#ffffff !important; color:var(--dark) !important; box-shadow:none !important;}
@media (hover:hover){ .btn--light:hover{background:#e2e8f0 !important;} }

/* Pasek sprawozdania: tylko powrót na konferencję + szkolenie, widoczne na każdej szerokości. */
.nav-report{margin-left:auto; display:flex; align-items:center; gap:.5rem; flex:none;}
.nav-report__back{display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:.4rem .6rem; border-radius:var(--r-sm); color:var(--dark); font-weight:700; font-size:var(--fs-xs); text-decoration:none; white-space:nowrap;}
@media (hover:hover){ .nav-report__back:hover{color:var(--primary); background:rgba(29,78,216,0.05);} }
.nav-report__back svg{flex:none;}
@media (max-width: 1399.98px){ .nav--report .brand{flex:0 1 auto;} }
@media (max-width: 420px){ .nav-report__back{padding:.4rem .35rem;} .nav-report{gap:.25rem;} }
.nav-cta-short, .nav-report__short{display:none;}
@media (max-width: 700px){ .nav-cta-short{display:inline;} }
@media (max-width: 420px){ .nav-report__full{display:none;} .nav-report__short{display:inline;} }

/* Link do szkolenia w zdaniu o bonusie (karta hero na granacie i opis serii na jasnym tle). */
.bonus-link{color:var(--primary); font-weight:700; text-underline-offset:3px;}
.hero-card .bonus-link{color:#ffffff;}
@media (hover:hover){ .hero-card .bonus-link:hover{color:var(--edu-light);} }

/* Bez pasa promocyjnego granatowy pas nagrań styka się ze stopką - zielona linia (kolor szkolenia) rozdziela je (17.10.2026). */
footer{padding-top:0;}
footer > .container::before{content:""; display:block; height:2px; margin-bottom:2rem; background:var(--edu-light);}

/* ---------- PODSTRONA ARTYKUŁU ---------- */
.hero--article{padding-bottom:clamp(3rem, 6vw, 4.5rem);}
.hero--article .hero__img img{object-position:50% 40%;}
.hero--article::after{background:linear-gradient(90deg, rgba(11,17,32,.95) 0%, rgba(11,17,32,.88) 55%, rgba(11,17,32,.72) 100%);}
.a-crumb{display:flex; flex-wrap:wrap; gap:.35rem .6rem; margin:0 0 1.75rem; font-size:var(--fs-sm); color:rgba(255,255,255,.66);}
.a-crumb a{color:rgba(255,255,255,.88); text-decoration:none; font-weight:500;}
@media (hover:hover){ .a-crumb a:hover{color:#ffffff; text-decoration:underline; text-underline-offset:3px;} }
.a-crumb [aria-hidden]{color:rgba(255,255,255,.4);}
.hero--article h1{font-size:clamp(2rem, 1.3rem + 2.8vw, 3.4rem); line-height:1.08; max-width:22ch; margin-bottom:1.25rem;}
.a-who{margin:0; font-size:var(--fs-lg); color:#ffffff; font-weight:700;}
.a-who span{color:rgba(255,255,255,.72); font-weight:400;}
.a-talk{margin:.6rem 0 0; max-width:62ch; color:rgba(255,255,255,.7); font-size:var(--fs-md); line-height:1.55;}

.a-media{max-width:960px; margin:0 auto;}
.a-media video, .a-media img{display:block; width:100%; height:auto; border-radius:var(--r-lg); background:#0b1120;}
.a-media figcaption{margin-top:.75rem; font-size:var(--fs-sm); color:var(--light);}
.a-body{padding-top:clamp(2.5rem, 5vw, 3.5rem);}

.prose{max-width:70ch; margin:0 auto;}
.prose > p{margin:0 0 1.15rem; color:#334155; font-size:var(--fs-lg); line-height:1.78;}
.prose > p strong{color:var(--dark);}
.prose > h2{margin:2.5rem 0 1rem; font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-size:clamp(1.4rem, 1.15rem + 1vw, 1.85rem); font-weight:700; line-height:1.25; letter-spacing:-.025em; color:var(--dark); text-wrap:balance;}
.prose > blockquote{margin:2rem 0; padding:.25rem 0 .25rem 1.25rem; border-left:3px solid var(--accent); font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:500; font-size:clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height:1.45; color:var(--dark);}
.prose a{color:var(--primary); font-weight:700;}
.prose > ul, .prose > ol{margin:0 0 1.35rem; padding:0;}
.prose > ul{list-style:none;}
.prose > ul > li{position:relative; padding-left:1.25rem; margin:.45rem 0; color:#334155; font-size:var(--fs-lg); line-height:1.7;}
.prose > ul > li::before{content:""; position:absolute; left:0; top:.68em; width:7px; height:7px; background:var(--primary);}
.prose > ol{padding-left:1.6rem;}
.prose > ol > li{margin:.45rem 0; padding-left:.25rem; color:#334155; font-size:var(--fs-lg); line-height:1.7;}
.prose > ol > li::marker{color:var(--accent-ink); font-weight:700;}
.prose li strong, .prose em{color:var(--dark);}
@media (max-width: 559.98px){ .prose > ul > li, .prose > ol > li{font-size:var(--fs-base);} }
@media (max-width: 559.98px){ .prose > p{font-size:var(--fs-base);} }

/* Końcówka artykułu: prelegenci + informacja o serii. Linki tekstowe przez :not(.btn) - inaczej
   kolor linku (0,1,1) przebija biały napis przycisku .btn (0,1,0) i przycisk wygląda na pusty. */
.a-end{max-width:70ch; margin:3.5rem auto 0;}
.a-end__k{margin:0 0 1.1rem; font-family:inherit; font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink);}
.a-speakers{padding:1.5rem 0 0; border-top:2px solid var(--dark);}
.a-spk-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:1.5rem 2rem;}
.a-spk{display:grid; grid-template-columns:72px minmax(0,1fr); gap:1rem; align-items:start;}
.a-spk img{display:block; width:72px; height:72px; border-radius:var(--r-md); object-fit:cover; background:#e2e8f0;}
.a-spk--top img{object-position:center 18%;}
.a-spk__name{margin:0 0 .2rem; font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-size:var(--fs-lg); font-weight:700; line-height:1.25; color:var(--dark);}
.a-spk__role{margin:0; color:var(--light); font-size:var(--fs-sm); line-height:1.45;}
.a-spk__org{margin:.2rem 0 0; color:var(--dark); font-weight:700; font-size:var(--fs-sm); line-height:1.4;}
.a-spk__li{display:inline-flex; align-items:center; gap:.4rem; min-height:44px; color:var(--primary); font-weight:700; font-size:var(--fs-sm); text-decoration:none;}
@media (hover:hover){ .a-spk__li:hover{text-decoration:underline; text-underline-offset:3px;} }
.a-about{margin-top:2.5rem; padding:clamp(1.5rem, 3vw, 2.25rem); background:var(--bg-light); border-radius:var(--r-lg);}
.a-about p{margin:0 0 .9rem; color:#334155; font-size:var(--fs-md); line-height:1.65;}
.a-about a:not(.btn){color:var(--primary); font-weight:700;}
.a-about .ep__actions{margin:1.4rem 0 1.5rem;}
.a-about__rec{padding-top:1.25rem; border-top:1px solid var(--border);}
.a-about p.a-about__org{margin:0; color:var(--light); font-size:var(--fs-sm);}
.a-about p.a-end__k{margin-bottom:1rem; color:var(--accent-ink); font-size:var(--fs-xs); line-height:1.4;}

.a-nav{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 2rem; max-width:var(--w-wide); margin:0 auto; border-top:1px solid var(--border);}
@media (max-width: 639.98px){ .a-nav{grid-template-columns:minmax(0,1fr);} }
.a-nav a{display:block; padding:1.5rem 0; text-decoration:none; border-bottom:1px solid var(--border);}
.a-nav a.nx{text-align:right; grid-column:2;}
@media (max-width: 639.98px){ .a-nav a.nx{text-align:left; grid-column:1;} }
.a-nav small{display:block; margin-bottom:.35rem; font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink);}
.a-nav strong{display:block; font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-size:var(--fs-lg); line-height:1.35; color:var(--dark);}
@media (hover:hover){ .a-nav a:hover strong{color:var(--primary);} }