/* ===========================================================================
   Power BI NextGen — infoShare Academy
   Style globalne. Tokeny, motyw light/dark, animacje i media queries
   przeniesione 1:1 z prototypu Claude Design (Power BI NextGen.dc.html).
   Reguły :hover / :focus odtwarzają atrybuty style-hover / style-focus
   z prototypu (w prototypie obsługiwał je runtime support.js).
   =========================================================================== */

:root{
  --bg:#FBFAF8; --bg-elev:#FFFFFF; --surface:#F4F2EE; --surface-2:#EEEBE4;
  --text:#16120F; --text-soft:#5B554E; --text-faint:#8A8379;
  --border:#E6E1D8; --border-strong:#D6D0C5;
  --accent:#F20B32; --accent-ink:#FFFFFF; --accent-soft:#FFE6EB;
  --code-bg:#14110F; --code-surface:#1E1A17; --code-text:#EDE9E2; --code-border:#2E2924;
  --code-green:#5FD08A; --code-pink:#FF6E8A; --code-blue:#6FA8FF; --code-amber:#F2C879;
  --shadow:0 1px 2px rgba(20,17,15,.04),0 12px 40px -12px rgba(20,17,15,.12);
}
html[data-theme="dark"]{
  --bg:#0C0B0E; --bg-elev:#151318; --surface:#17151B; --surface-2:#1F1C24;
  --text:#F6F3EF; --text-soft:#ABA59C; --text-faint:#736D66;
  --border:#272430; --border-strong:#332F3C;
  --accent:#CB092A; --accent-ink:#FFFFFF; --accent-soft:#2A1117;
  --code-bg:#08070A; --code-surface:#121016; --code-text:#E7E3DC; --code-border:#231F2B;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 50px -16px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6;transition:background .35s ease,color .35s ease;}
::selection{background:var(--accent);color:#fff}
a{color:inherit}
details > summary{list-style:none;cursor:pointer}
details > summary::-webkit-details-marker{display:none}
details[open] .chev{transform:rotate(45deg)}
details[open] .acc-card{border-color:var(--accent)}
html[data-theme="dark"] .icon-sun{display:none!important}
html:not([data-theme="dark"]) .icon-moon{display:none!important}
html[data-theme="dark"] .logo-on-light{display:none!important}
html:not([data-theme="dark"]) .logo-on-dark{display:none!important}
html[data-font="poppins"] *{font-family:'Poppins',sans-serif!important}
.nav-link{transition:color .2s}
.nav-burger{display:none}

/* ===========================================================================
   NAVBAR SERWISU (górny pasek) — przebudowa 2026-07-31, uwaga właściciela nr 4.
   Landing miał własny, inny navbar; teraz górny pasek odwzorowuje nawigację
   z src/components/layout/Header.astro (wysokość 60px, segmentowany przełącznik
   B2C/B2B, pastylkowe CTA, szkło + linia dolna), tylko na tokenach landingu
   (--bg/--text/--border/--accent) — dzięki temu nie ma konfliktu dwóch systemów
   zmiennych i pasek chodzi razem z motywem strony.
   =========================================================================== */
.isa-nav{
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border);
}
.isa-nav-inner{
  display:flex;align-items:center;gap:20px;height:60px;
  max-width:1280px;margin:0 auto;padding:0 24px;
}
.isa-nav-fill{flex:1 1 auto;min-width:0}
.isa-logo{display:flex;align-items:center;flex:none;text-decoration:none}
.isa-logo img{height:26px;width:auto;display:block}

/* Segmentowany przełącznik oferty (odpowiednik .seg z global.css) */
.isa-seg{
  display:inline-flex;flex:none;padding:4px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);
}
.isa-seg a{
  padding:8px 16px;border:1px solid transparent;border-radius:999px;
  font-size:13px;font-weight:500;color:var(--text-soft);white-space:nowrap;
  text-decoration:none;transition:color .2s,background .2s;
}
.isa-seg a:hover{color:var(--text)}
.isa-seg a.is-active{
  color:var(--text);font-weight:600;background:var(--bg);border-color:var(--border-strong);
  box-shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
}
.seg-narrow{display:none}

/* Linki do stron serwisu — tylko desktop (jak .nav-links @1024 w global.css) */
.isa-nav-links{display:none;align-items:center;gap:24px}
.isa-nav-links a{font-size:14px;color:var(--text-soft);white-space:nowrap;text-decoration:none;transition:color .2s}
.isa-nav-links a:hover{color:var(--text)}
@media (min-width:1024px){.isa-nav-links{display:flex}}

/* Przyciski ikonowe paska (motyw, hamburger) */
.isa-icon-btn{
  width:36px;height:36px;flex:none;border:0;background:transparent;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--text);cursor:pointer;
  transition:background .2s;
}
.isa-icon-btn:hover{background:var(--surface)}
/* Hamburger jest też .isa-icon-btn (display:inline-flex) — regułę ukrycia musimy powtórzyć
   z wyższą specyficznością, inaczej przycisk zostaje widoczny na desktopie obok pełnego menu. */
.isa-icon-btn.nav-burger{display:none}

/* CTA — jedyne w pasku. Czerwień AA-safe (#CB092A / hover #A8071F), tak jak .btn-red serwisu:
   --accent w motywie jasnym to #F20B32, który pod białym tekstem nie zdaje WCAG AA. */
.isa-cta{
  flex:none;display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;
  border-radius:999px;background:#CB092A;color:#fff;font-size:13px;font-weight:600;
  white-space:nowrap;text-decoration:none;transition:background .2s,transform .22s ease;
}
.isa-cta:hover{background:#A8071F;transform:translateY(-1px)}

/* Panel mobilny — spłaszczone menu serwisu (animacja max-height jak w prototypie). */
.nav-mobile-panel{
  display:none;
  overflow:hidden;
  background:var(--bg);
  border-top:1px solid transparent;
  max-height:0;
  transition:max-height .32s ease;
}
.nav-mobile-panel.open{
  max-height:800px;
  border-top-color:var(--border);
}
.nav-mobile-inner{display:flex;flex-direction:column;padding:4px 24px 20px}
.nav-mobile-inner a{
  padding:13px 0;font-size:16px;font-weight:600;color:var(--text-soft);
  text-decoration:none;border-bottom:1px solid var(--border);
}
.nav-mobile-inner a:last-child{border-bottom:0}

@media (max-width:1023px){
  .isa-icon-btn.nav-burger{display:inline-flex}
  .nav-mobile-panel{display:block!important}
}
/* Poniżej 640px CTA schodzi z paska (jak w serwisie) — jego rolę przejmuje zawsze widoczna
   pastylka „Cennik" w pasku sekcji. Świadomie NIE dublujemy CTA w panelu mobilnym. */
@media (max-width:639px){
  .isa-cta{display:none}
  .isa-nav-inner{gap:8px;padding:0 14px}
  .isa-seg a{padding:7px 11px}
}
/* Krótka etykieta segmentu („Dla Firm") aż do 719px: przy 640px — gdzie CTA już jest, a etykiety
   są jeszcze pełne — zapas w wierszu spadał do 13px (pomiar bez wczytanego Poppinsa, realne
   metryki fontu mogą być szersze). Skrócenie etykiety daje ~68px zapasu. */
@media (max-width:719px){
  .seg-wide{display:none}
  .seg-narrow{display:inline}
}
/* Telefony (<480px): logo + przełącznik oferty + motyw + hamburger NIE mieszczą się w wierszu —
   przy 320px pasek wychodził 8px poza ekran i ucinał hamburgera (pomiar 2026-07-31).
   Przełącznik oferty schodzi do panelu mobilnego (pierwsze dwie pozycje: „Dla Ciebie" /
   „Dla Twojej Firmy"). Przełącznik motywu ZOSTAJE w pasku — jest jedyny na stronie. */
@media (max-width:479px){
  .isa-seg{display:none}
  .isa-logo img{height:22px}
  .isa-nav-inner{gap:6px}
  .isa-icon-btn{width:34px;height:34px}
  .cf-turnstile{transform:scale(.9);transform-origin:top left}
}
/* Grupa „wybór oferty" na czele panelu mobilnego — zastępuje ukryty przełącznik segmentowy.
   Flex-kolumna, żeby linki w środku zachowywały się jak pozostałe pozycje menu (są zagnieżdżone,
   więc bez tego byłyby elementami liniowymi i padding/obwódka rozjechałyby się). */
.nav-mobile-oferta{
  display:flex;flex-direction:column;
  margin-bottom:6px;padding-bottom:10px;border-bottom:1px solid var(--border);
}
.nav-mobile-oferta a:last-child{border-bottom:0}
.nav-mobile-oferta-label{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-faint);padding:10px 0 2px;
}

/* ===========================================================================
   PASEK SEKCJI LANDINGA — odpowiednik .cd-secnav z kart kursów B2C:
   pastylki, linia separatora NAD i POD paskiem, szkło. Przyklejony razem
   z banerem i navbarem (wspólny kontener .isa-stack).
   Wiersz przewija się poziomo WEWNĄTRZ paska — strona nie dostaje poziomego scrolla.
   =========================================================================== */
.sec-nav{
  padding:12px 0;
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.sec-nav-row{
  display:flex;flex-wrap:nowrap;gap:8px;
  max-width:1280px;margin:0 auto;padding:5px 24px;  /* 5px oddechu: hover unosi pastylkę o 1px */
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.sec-nav-row::-webkit-scrollbar{display:none}
.sec-nav a{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:0 14px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg);color:var(--text-soft);
  font-size:13px;font-weight:500;text-decoration:none;
  transition:color .2s,border-color .2s,background .2s,transform .2s;
}
.sec-nav a:hover{border-color:var(--text);color:var(--text);transform:translateY(-1px)}
.sec-nav a.nav-active{background:var(--text);color:var(--bg);border-color:var(--text)}
@media (max-width:639px){
  .sec-nav{padding:9px 0}
  .sec-nav-row{padding-left:14px;padding-right:14px}
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(13px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes glowpulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.9;transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Offset pod przyklejonym paskiem (baner + navbar + pasek sekcji), żeby kotwice nie chowały
   się pod nagłówkiem. --isa-stack-h wylicza assets/main.js z realnej wysokości .isa-stack
   (na mobile baner łamie się na 2-3 wiersze, więc stała wartość nie wystarcza). */
#top,section[id]{scroll-margin-top:calc(var(--isa-stack-h,158px) + 12px)}

/* ---------------------------------------------------------------------------
   Hero ze zdjęciem trenera — zawsze ciemne, niezależnie od motywu strony.
   Nadpisujemy tokeny lokalnie, więc wszystkie inline-style wewnątrz
   (var(--bg), var(--text), var(--border)…) rozwijają się do palety ciemnej
   także w motywie jasnym.
   UWAGA (2026-07-31): navbar (.site-header) CELOWO wypadł z tej reguły. Miał być
   „taki jak w reszcie serwisu", a nawigacja serwisu chodzi z motywem strony —
   wymuszona ciemność robiła z paska osobny byt w trybie jasnym.
   --------------------------------------------------------------------------- */
.site-hero{
  --bg:#0C0B0E; --bg-elev:#151318; --surface:#17151B; --surface-2:#1F1C24;
  --text:#F6F3EF; --text-soft:#ABA59C; --text-faint:#736D66;
  --border:#272430; --border-strong:#332F3C;
  --accent:#CB092A; --accent-ink:#FFFFFF; --accent-soft:#2A1117;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 50px -16px rgba(0,0,0,.6);
  color:var(--text);
}
/* Hero nie ma własnego tła (dziedziczy je z kontenera strony) — ustawiamy je
   jawnie, żeby w motywie jasnym sekcja pozostała ciemna. */
.site-hero{background:var(--bg)}

/* ---------------------------------------------------------------------------
   HERO — nagłówek „Kurs Power BI NextGen", logotypy narzędzi i makieta raportu.
   Nazwa kursu jest w szablonie jednym CIĄGŁYM napisem (render-nextgen.mjs
   podmienia ją tekstowo z CMS), więc nie da się pokolorować jej części — akcent
   niesie słowo „Kurs" (osobny, mniejszy wiersz), a nazwa idzie w maksymalnym
   kontraście. Gradient na nazwie odrzucony: przy jednym wierszu (mobile)
   rozwarstwiał litery w pionie.
   --------------------------------------------------------------------------- */
.hero-title{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(38px,5.8vw,68px);line-height:1;letter-spacing:-.03em;
  margin:0 0 22px;color:var(--text);text-wrap:balance;
}
.hero-title-kurs{
  display:block;font-size:.4em;line-height:1.15;letter-spacing:-.005em;
  color:var(--accent);margin-bottom:.1em;
}
.hero-title-name{display:block;color:var(--text)}

/* Pasek logotypów: białe chipy, żeby znaki z ciemnym tekstem (Claude) i jasnym
   wypełnieniem (Power BI) czytały się na ciemnym hero. */
.hero-logos{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:0 0 34px;
}
.hero-logos-label{
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);
}
.logo-chip{
  display:inline-flex;align-items:center;gap:9px;
  background:#fff;border-radius:12px;padding:8px 14px;
  box-shadow:0 10px 26px -16px rgba(0,0,0,.85);
}
.logo-chip img{display:block;height:30px;width:auto}
.logo-chip img[src*="claude"]{height:22px}
.logo-chip span{
  font-size:14.5px;font-weight:700;line-height:1;color:#16120F;letter-spacing:-.01em;
}
/* Na wąskich ekranach etykieta bierze cały wiersz — inaczej chipy łamią się nierówno. */
@media (max-width:520px){
  .hero-logos{gap:10px}
  .hero-logos-label{flex:0 0 100%}
  .logo-chip{padding:7px 12px}
  .logo-chip img{height:26px}
  .logo-chip img[src*="claude"]{height:19px}
}

/* Makieta raportu BI — pływająca karta nad dolną (wygaszoną maską) częścią zdjęcia. */
.hero-chart{
  position:absolute;z-index:2;left:0;bottom:-2%;
  width:82%;max-width:352px;padding:14px 16px 10px;
  border-radius:16px;border:1px solid var(--border-strong);
  background:color-mix(in srgb,var(--bg-elev) 90%,transparent);
  box-shadow:0 28px 64px -28px rgba(0,0,0,.85);
  backdrop-filter:blur(10px);
}
.hero-chart svg{display:block;width:100%;height:auto}
/* Lekki zwis poza kolumnę tylko w układzie dwukolumnowym (od ~1000px). W układzie
   jednokolumnowym kolumna startuje przy krawędzi ekranu i zwis obcinałby kartę. */
@media (min-width:1000px){
  .hero-chart{left:-4%}
}
/* Na wąskich ekranach makieta byłaby nieczytelna — ukrywamy (CTA i tak jest wyżej). */
@media (max-width:620px){
  .hero-chart{display:none}
}

/* ---------------------------------------------------------------------------
   Stany :hover / :focus — odpowiedniki style-hover / style-focus z prototypu.
   Klasy dodane na elementach, które w prototypie miały te atrybuty.
   --------------------------------------------------------------------------- */
.hover-lift-1,.hover-lift-2,.hover-outline,.hover-card,.hover-bright,
.hover-bright-strong,.hover-accent-text,.hover-translate,.hover-white-bg,.hover-program{
  transition:filter .2s ease,transform .2s ease,color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.hover-lift-1:hover{filter:brightness(1.05);transform:translateY(-1px)}          /* nav „Zapisz się” */
.hover-lift-2:hover{filter:brightness(1.06);transform:translateY(-2px)}          /* CTA akcent (hero, cennik) */
.hover-outline:hover{border-color:var(--accent);color:var(--accent)}            /* przyciski obrysowane */
.hover-card:hover{border-color:var(--accent);transform:translateY(-3px)}        /* karty kompetencji CV */
.hover-bright:hover{filter:brightness(1.06)}                                     /* „Wyślij wiadomość” */
.hover-bright-strong:hover{filter:brightness(1.1)}                               /* link e-mail */
.hover-accent-text:hover{color:var(--accent)}                                    /* „Zapytaj o termin” */
.hover-translate:hover{transform:translateY(-2px)}                               /* CTA finalne — białe */
.hover-white-bg:hover{background:rgba(255,255,255,.24)}                          /* CTA finalne — ghost */
.hover-program:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--border));transform:translateY(-3px)}  /* karty tygodni programu */

/* Pola formularza — odpowiednik style-focus="border-color:var(--accent)". */
.field{transition:border-color .2s ease}
.field:focus{border-color:var(--accent)}

/* Komunikat statusu formularza (sukces / błąd). */
.form-status{font-size:14px;font-weight:600;margin:4px 0 0;display:none}
.form-status.is-visible{display:block}
.form-status.is-ok{color:#1a8f57}
.form-status.is-err{color:var(--accent)}
html[data-theme="dark"] .form-status.is-ok{color:var(--code-green)}

/* Przycisk submit w trakcie wysyłki. */
button[disabled]{opacity:.6;cursor:progress}

/* ---------------------------------------------------------------------------
   Pobranie programu w PDF — stopka sekcji „Program" (uwaga właściciela nr 16).
   --------------------------------------------------------------------------- */
.program-pdf{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin-top:40px;padding-top:36px;border-top:1px solid var(--border);text-align:center;
}
.program-pdf-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 28px;border-radius:999px;border:1px solid var(--border-strong);
  background:var(--bg-elev);color:var(--text);font-size:16.5px;font-weight:700;
  text-decoration:none;transition:border-color .2s,color .2s,transform .2s;
}
.program-pdf-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.program-pdf-note{margin:0;font-size:14px;color:var(--text-faint);max-width:520px}

/* ---------------------------------------------------------------------------
   STOPKA OGÓLNA SERWISU (pod stopką landingu) — uwaga właściciela nr 15.
   Układ i treść wg src/components/layout/Footer.astro, tokeny landingu.
   Inne tło niż stopka landingu (--surface vs --bg-elev), żeby dwa pasy czytały się
   jako osobne bloki i wizualnie na siebie nie nachodziły.
   --------------------------------------------------------------------------- */
.isa-footer{background:var(--surface);border-top:1px solid var(--border)}
.isa-footer-inner{max-width:1200px;margin:0 auto;padding:56px 24px 40px}
.isa-footer-cols{display:grid;grid-template-columns:1fr;gap:40px}
@media (min-width:640px){.isa-footer-cols{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.isa-footer-cols{grid-template-columns:repeat(4,1fr)}}
.isa-footer-brand{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:var(--text)}
.isa-footer-desc{margin:10px 0 0;max-width:240px;font-size:14px;color:var(--text-faint)}
.isa-footer-social{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;font-size:14px;font-weight:600}
.isa-footer-social a{color:var(--text-soft);text-decoration:none;transition:color .2s}
.isa-footer-social a:hover{color:var(--text)}
.isa-footer-addr{margin-top:18px;font-style:normal;font-size:13px;line-height:1.75;color:var(--text-faint)}
.isa-footer-addr a{color:var(--text-soft);text-decoration:none}
.isa-footer-addr a:hover{color:var(--text)}
.isa-footer-head{
  margin-bottom:14px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);
}
.isa-footer-list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;font-size:14px}
.isa-footer-list a{color:var(--text-soft);text-decoration:none;transition:color .2s}
.isa-footer-list a:hover{color:var(--text)}
.isa-footer-hr{margin:32px 0;border:0;border-top:1px solid var(--border)}
.isa-footer-legal{
  display:flex;flex-direction:column;gap:14px;font-size:13px;color:var(--text-faint);
}
@media (min-width:640px){.isa-footer-legal{flex-direction:row;align-items:center;justify-content:space-between}}
.isa-footer-legal-links{display:flex;flex-wrap:wrap;gap:8px 24px}
.isa-footer-legal-links a{color:var(--text-faint);text-decoration:none;transition:color .2s}
.isa-footer-legal-links a:hover{color:var(--text)}