/* ============================================================================
   index.css — STYLE SPECYFICZNE DLA STRONY GŁÓWNEJ (index.html)
   ----------------------------------------------------------------------------
   Zawiera tylko to, co UNIKALNE dla strony głównej: górny pasek (topbar),
   hero, pasek klientów, sekcje (kategorie, kursy, in-company, „dlaczego my",
   opinie, newsletter) oraz mobilną szybką nawigację.

   Nagłówek/navbar i stopka są WSPÓLNE i mieszkają w chrome.css. Tutaj zostają
   jedynie NADPISANIA tych elementów specyficzne dla strony głównej
   (sekcje oznaczone „Nadpisania … dla STRONY GŁÓWNEJ"). Kaskada działa, bo
   index.css jest linkowany PO chrome.css.
   ============================================================================ */

/* ---------- placeholdery obrazków ---------- */
/* Bazowy .ph (.ph::after) jest w chrome.css — tutaj tylko ciemny wariant. */
.ph-dark {
  background: repeating-linear-gradient(135deg, #0a2647 0 11px, #0c2c54 11px 22px);
}
.ph-dark::after { color:#6f93c2; }

/* ===== Utility top bar ===== */
.topbar { background: var(--ink); color: #cdd7e5; font-size: 13.5px; }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; height:42px; }
.topbar a { display:inline-flex; align-items:center; gap:7px; }
.topbar a:hover { color:#fff; }
.topbar .tb-right { display:flex; align-items:center; gap:22px; }
.topbar .tb-left { display:flex; align-items:center; gap:22px; }
.topbar .sep { color:#3a4d66; }
@media(max-width:760px){ .topbar .tb-left{ display:none; } }

/* ===== Nadpisania NAGŁÓWKA dla STRONY GŁÓWNEJ =====
   Bazowy navbar (.hdr, .nav, .hdr-account, .hdr-menu, .hm-*) jest w chrome.css.
   Strona główna różni się tylko kilkoma detalami:
     • wyszukiwarka nieco wyższa i z większą czcionką w polu,
     • menu (.nav) dosunięte do prawej — logo z lewej, nav + akcje z prawej,
     • menu znika już od 980px (na podstronach dopiero od 760px). */
.hdr-search { height:35px; padding:0 12px; }
.hdr-search input { font-size:14.5px; }
.nav { margin-left:auto; flex:none; }
@media(max-width:980px){
  .hdr-search{ flex:1; width:auto; min-width:0; }
  .hdr-cta{ margin-left:auto; flex:1; justify-content:flex-end; }
  .nav { display:none; }
}
.cats-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.cats-search { width:280px; }
@media(max-width:520px){ .cats-search{ width:100%; } }
@media(max-width:980px){ .nav { display:none; } }

/* ===== mobilna szybka nawigacja + ukrycie polecanych na mobile ===== */
.m-quicknav { display:none; }
.news-section-m { display:none; }
@media(max-width:980px){
  .featured-courses { display:none; }
  .m-quicknav { display:block; }
  .m-quicknav .mqn-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .m-quicknav a { display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:var(--r-lg); background:var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); color:var(--ink); font-family:var(--font-display); font-weight:600; font-size:15px; text-decoration:none; }
  .m-quicknav a:active { background:#fff; }
  .m-quicknav a svg { flex:none; color:var(--blue); }
  /* mniejsze odstępy między sekcjami: aktualności → szkolenia zamknięte → newsletter → przyciski */
  .closed-section-m { padding-top:24px !important; padding-bottom:20px !important; }
  .news-section-m { display:block; padding-top:8px !important; padding-bottom:8px !important; }
  .nl-section-m { padding-top:8px !important; padding-bottom:8px !important; }
  .m-quicknav.section--tight { padding-top:12px !important; padding-bottom:20px !important; }
}

/* logo lockup */
.logo { display:flex; align-items:center; gap:11px; flex:none; }
.logo .word { font-family: var(--font-display); font-weight:800; font-size:23px; letter-spacing:-.02em; color: var(--blue); line-height:1; }
.logo .word small { display:block; font-size:9.5px; font-weight:600; letter-spacing:.34em; color: var(--muted); text-transform:uppercase; margin-top:3px; }

/* ===== Hero ===== */
.hero { position: relative; overflow:hidden; background:
   radial-gradient(1100px 520px at 88% -10%, var(--blue-tint) 0%, transparent 60%),
   linear-gradient(180deg,#fff 0%, var(--bg-soft) 100%); }
.hero .wrap { display:grid; grid-template-columns: 1fr; gap: 56px; align-items:center; padding: 64px 28px 72px; }
.hero-copy { max-width: 820px; }
.hero h1 { font-size: clamp(40px, 5vw, 62px); font-weight:800; }
.hero h1 .hl { color: var(--blue); position:relative; white-space:nowrap; }
.hero h1 .hl::after { content:""; position:absolute; left:0; right:-2px; bottom:6px; height:14px; background: var(--yellow); opacity:.55; z-index:-1; border-radius:3px; }
.hero p.lead { margin-top: 22px; font-size:1.2rem; }
.hero-actions { display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero-stats { display:flex; gap:38px; margin-top:46px; }
.hero-stats .n { font-family:var(--font-display); font-weight:800; font-size:32px; color:var(--ink); letter-spacing:-.02em; }
.hero-stats .n b { color: var(--blue); }
.hero-stats .l { font-size:13.5px; color:var(--muted); margin-top:2px; }
@media(max-width:980px){ .hero .wrap{ grid-template-columns:1fr; gap:40px; } }

/* search bar */
.searchbar { margin-top:34px; background:#fff; border-radius: var(--r-lg); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); padding:10px 10px 10px 18px; display:flex; align-items:center; gap:10px; }
.searchbar .si { flex:1; display:flex; align-items:center; gap:11px; color:var(--muted); }
.searchbar input { border:0; background:none; outline:none; font-family:var(--font-body); font-size:15.5px; width:100%; color:var(--ink); }
.searchbar .vline { width:1px; height:26px; background:var(--line); }
@media(max-width:520px){ .searchbar{ flex-direction:column; align-items:stretch; padding:14px; } .searchbar .vline{ display:none; } }

/* hero visual */
.hero-visual { position:relative; }
.hero-img { aspect-ratio: 4/4.4; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.hero-badge { position:absolute; left:-26px; bottom:48px; background:#fff; border-radius: var(--r); box-shadow: var(--shadow-lg); padding:16px 18px; display:flex; gap:13px; align-items:center; max-width: 280px; }
.hero-badge .ic { width:46px; height:46px; border-radius:12px; background: var(--lime-soft); display:flex; align-items:center; justify-content:center; flex:none; }
.hero-badge .t { font-family:var(--font-display); font-weight:700; font-size:14.5px; line-height:1.25; }
.hero-badge .s { font-size:12.5px; color:var(--muted); }
.hero-float { position:absolute; right:-18px; top:34px; background: var(--blue); color:#fff; border-radius: var(--r); box-shadow: var(--shadow-lg); padding:14px 18px; display:flex; gap:10px; align-items:center; }
.hero-float .big { font-family:var(--font-display); font-weight:800; font-size:24px; }
@media(max-width:520px){ .hero-badge{ left:0; } .hero-float{ right:0; } }

/* ===== client strip ===== */
.clients { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; }
.clients .wrap { display:flex; align-items:center; gap:38px; padding:26px 28px; flex-wrap:wrap; }
.clients .lbl { font-size:13px; color:var(--muted); font-weight:600; letter-spacing:.04em; }
.clients .row { display:flex; gap:42px; flex-wrap:wrap; align-items:center; opacity:.6; }
.clients .cl { font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink-2); letter-spacing:-.01em; }

/* ===== section heads ===== */
.shead { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:42px; }
.shead h2 { font-size: clamp(28px,3.4vw,40px); margin-top:14px; }
.shead p { color:var(--ink-2); max-width:48ch; margin:10px 0 0; }
@media(max-width:760px){ .shead{ flex-direction:column; align-items:flex-start; gap:14px; } }

/* ===== categories ===== */
.cats { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.cat {
  position:relative; padding:24px 22px 22px; border-radius: var(--r-lg);
  background:#fff; box-shadow: inset 0 0 0 1px var(--line); overflow:hidden;
  transition: transform .2s, box-shadow .25s; cursor:pointer;
}
.cat:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px transparent, var(--shadow); }
.cat .ci { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.cat h3 { font-size:18px; }
.cat .cn { font-size:13px; color:var(--muted); margin-top:5px; }
.cat .arr { position:absolute; right:20px; top:24px; color:var(--line); transition:.2s; }
.cat:hover .arr { color:var(--blue); transform: translateX(3px); }
.cat .edge { position:absolute; left:0; top:0; bottom:0; width:4px; }
@media(max-width:980px){ .cats{ grid-template-columns: repeat(2,1fr);} }
@media(max-width:520px){
  .cats{ grid-template-columns: 1fr; gap:10px; }
  .cat{ display:flex; align-items:center; gap:14px; padding:14px 16px; text-align:left; }
  .cat .ci{ margin-bottom:0; width:40px; height:40px; flex:none; order:1; }
  .cat h3{ order:2; }
  .cat .cn{ display:none; }
  .cat .arr{ position:static; margin-left:auto; order:3; }
}

/* ===== course cards ===== */
.carousel-nav { display:flex; gap:10px; }
.cbtn { width:44px; height:44px; border-radius:50%; background:#fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); color:var(--blue); display:flex; align-items:center; justify-content:center; transition: all .16s; }
.cbtn:hover { background:var(--blue); color:#fff; box-shadow: var(--shadow); }
.cbtn:disabled { opacity:.35; cursor:default; background:#fff; color:var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.courses-track { display:grid; grid-auto-flow:column; grid-auto-columns: calc((100% - 60px)/4); gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scroll-behavior:smooth; cursor:grab; }
.courses-track.dragging { cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; }
.courses-track > .course { scroll-snap-align:start; }
@media(max-width:980px){ .courses-track{ grid-auto-columns: calc((100% - 20px)/2);} }
@media(max-width:680px){ .courses-track{ grid-auto-columns: 78%;} }
.course { display:flex; flex-direction:column; overflow:hidden; }
.course .body { padding:18px 18px 18px; display:flex; flex-direction:column; flex:1; gap:0; }
.course .crow { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.course .cbadges { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.course .badge { font-size:10px; padding:4px 8px; }
.course .ccat { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--ink-2); white-space:nowrap; }
.course h3 { font-size:16px; margin-top:12px; line-height:1.25; }
.course .meta { display:flex; flex-direction:column; gap:6px; margin-top:12px; color:var(--muted); font-size:12.5px; }
.course .meta span { display:inline-flex; align-items:center; gap:7px; }
.course .foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:16px; gap:10px; }
.course .price .pv { font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--ink); white-space:nowrap; }
.course .price .pv small { font-size:11px; color:var(--muted); font-weight:600; }
.course:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px transparent, var(--shadow-lg); }


/* ===== in-company band ===== */
.incompany { position:relative; overflow:hidden; background: linear-gradient(135deg, var(--blue-900), var(--blue) 130%); color:#fff; }
.incompany .wrap { position:relative; z-index:2; display:grid; grid-template-columns: 1.05fr .95fr; gap:54px; align-items:center; padding: 88px 28px; }
.incompany h2 { color:#fff; font-size:clamp(30px,3.6vw,44px); }
.incompany p { color:#c8d8ee; margin-top:18px; font-size:1.12rem; max-width:50ch; }
.ic-list { list-style:none; padding:0; margin:26px 0 32px; display:grid; gap:14px; }
.ic-list li { display:flex; gap:12px; align-items:flex-start; color:#e4eefb; font-size:15.5px; }
.ic-list .tick { width:24px; height:24px; border-radius:50%; background: rgba(255,196,35,.18); color: var(--yellow); display:flex; align-items:center; justify-content:center; flex:none; margin-top:1px; }
.ic-card { background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); padding:30px; backdrop-filter: blur(4px); }
.ic-card h3 { color:#fff; font-size:20px; }
.ic-stat { display:flex; gap:30px; margin-top:24px; }
.ic-stat .n { font-family:var(--font-display); font-weight:800; font-size:34px; color: var(--yellow); }
.ic-stat .l { font-size:13px; color:#bcd0ea; margin-top:2px; }
@media(max-width:980px){ .incompany .wrap{ grid-template-columns:1fr; gap:38px; } }

/* ===== why / numbers ===== */
.why { display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.why .item { padding:30px 26px; border-radius: var(--r-lg); background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.why .item .wi { width:48px; height:48px; border-radius:13px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-sm); margin-bottom:18px; }
.why .item h3 { font-size:18px; }
.why .item p { color:var(--ink-2); font-size:14.5px; margin-top:8px; }
@media(max-width:980px){ .why{ grid-template-columns: repeat(2,1fr);} }
@media(max-width:520px){ .why{ grid-template-columns: 1fr;} }

/* ===== testimonial ===== */
.testi { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.tcard { padding:30px 28px; border-radius: var(--r-lg); background:#fff; box-shadow: inset 0 0 0 1px var(--line); }
.tcard .quote { font-size:16.5px; color:var(--ink); line-height:1.5; }
.tcard .stars { color: var(--yellow); letter-spacing:2px; font-size:15px; margin-bottom:16px; }
.tcard .who { display:flex; align-items:center; gap:12px; margin-top:22px; }
.tcard .av { width:42px; height:42px; border-radius:50%; background: var(--blue-tint); color:var(--blue-700); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; }
.tcard .who .nm { font-family:var(--font-display); font-weight:700; font-size:14.5px; }
.tcard .who .rl { font-size:12.5px; color:var(--muted); }
@media(max-width:880px){ .testi{ grid-template-columns: 1fr; } }

/* ===== closed / in-company band ===== */
.closed-band { position:relative; overflow:hidden; background: linear-gradient(135deg, var(--blue-900), var(--blue) 140%); color:#fff; border-radius: var(--r-lg); padding: 38px 40px; display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap; }
.closed-copy { position:relative; z-index:2; max-width:62%; min-width:280px; }
.closed-copy h2 { color:#fff; font-size:clamp(22px,2.4vw,30px); margin-top:12px; }
.closed-copy p { color:#c8d8ee; margin-top:12px; font-size:1.02rem; max-width:54ch; }
.closed-cta { position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.closed-link { color:#cfe0f3; font-family:var(--font-display); font-weight:600; font-size:14px; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:2px; }
.closed-link:hover { color:#fff; border-color:#fff; }
@media(max-width:680px){ .closed-band{ padding:30px 26px; } .closed-copy{ max-width:none; } }

/* ===== closed trainings strip ===== */
.closed-strip { display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding:22px 28px; border-radius:var(--r-lg); background:var(--blue-tint); box-shadow: inset 0 0 0 1px var(--line); }
.closed-strip-copy p { color:var(--ink-2); font-size:14.5px; margin-top:4px; }
.closed-strip .btn { width:17rem; max-width:100%; }
@media(max-width:560px){ .closed-strip{ padding:20px; } .closed-strip .btn{ width:100%; } }

/* ===== newsletter / cta ===== */
.nl-strip { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:22px 28px; border-radius:var(--r-lg); background:var(--blue-tint); box-shadow: inset 0 0 0 1px var(--line); }
.nl-head p { color:var(--ink-2); font-size:14.5px; margin-top:4px; }
.nl-form { display:flex; gap:10px; align-items:center; }
.nl-form { display:flex; gap:10px; align-items:stretch; }
.nl-input { width:240px; background:#fff; }
.nl-form .btn { flex:none; }
@media(max-width:560px){ .nl-strip{ padding:20px; } .nl-form{ width:100%; } .nl-input{ flex:1; width:auto; min-width:0; height:42px; } .nl-form .btn{ height:42px; padding-left:16px; padding-right:16px; } }
/* Stan po zapisie (double opt-in): "sprawdz skrzynke" zamiast pola e-mail */
.nl-sent { display:flex; align-items:flex-start; gap:12px; max-width:520px; }
.nl-sent svg { flex:none; width:24px; height:24px; color:#16a34a; margin-top:2px; }
.nl-sent-txt strong { display:block; color:var(--ink); font-size:15.5px; margin-bottom:3px; }
.nl-sent-txt span { color:var(--ink-2); font-size:14px; line-height:1.55; }
@media(max-width:560px){ .nl-sent{ width:100%; } }

/* ===== Nadpisania STOPKI dla STRONY GŁÓWNEJ =====
   Bazowa stopka jest w chrome.css. Strona główna NIE ma pływającego przycisku
   „zapisz się", więc nie rezerwujemy dolnego miejsca (mniejszy dolny padding),
   dolny pasek jest bliżej kolumn, a logo w stopce jest tekstowe (białe). */
.ftr .botbar { margin-top:14px; padding-top:20px; }
.ftr .logo .word { color:#fff; }
.ftr .logo .word small { color:#7e9cc0; }
@media(max-width:920px){ .ftr{ padding:36px 0 30px; } }
@media(max-width:520px){ .ftr{ padding:22px 0 30px; } }

/* ===== Pasek podglądu (override) =====
   Bazowy .previewbar + animacja są w chrome.css; tu tylko odstęp liter. */
.previewbar { letter-spacing:.01em; }