/* === category-bar.css (desktop) ===
   - P3 (flyout) auto-dopasowanie do treści (width:auto) + twardy MAX = 92vw/1040px
   - P2/P3 bez wewnętrznych scrolli
   - delikatny lifting wizualny (kontrast, separatory, mikro-animacje)
   - zero ciężkich efektów; brak zewn. assetów
*/

:root{
  --header-h: 64px;
  --catbar-h: 48px;

  --ink:#0b1320;
  --ink-sub:#2b3647;
  --bg:#fff;
  --surface:#f6f8fb;
  --surface-2:#eef2f7;
  --accent:#0960ff;
  --accent-2:#274df5;

  --hit-min: 44px;
  --trans-fast: 160ms cubic-bezier(.2,.8,.2,1);
  --trans-dd:   220ms cubic-bezier(.2,.8,.2,1);
  --active-bar: 3px;

  --z-header: 5000;
  --z-search: 5002;
  --z-dd:     4000;
  --z-fly:    4010;
  --z-catbar: 1200;

  --dd-gap: 16px;
  --dd-col-min: 200px;
  --fly-gap: 14px;

  /* flyout kolumny sterowane z JS */
  --fly-cols: 1;

  /* subtelne separatory (nie obrazki) */
  --sep: rgba(15,23,42,.06);
}

/* Header / Search priorytet */
.site-header{ position: relative; z-index: var(--z-header); }
.site-header .search-form{ position:relative; z-index: calc(var(--z-search) - 1); }
.site-header .search-form .tuto-search-suggest{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index: var(--z-search);
}

/* Pasek (P1) */
.tuto-catbar-wrap{
  position: sticky; top: var(--header-h); z-index: var(--z-catbar);
  background: var(--bg);
  border-bottom: 1px solid var(--sep);
  transition: box-shadow var(--trans-fast), background-color var(--trans-fast), backdrop-filter var(--trans-fast);
}
.tuto-catbar-wrap.is-scrolled{
  box-shadow: 0 6px 16px rgba(15,23,42,.08);
  background: color-mix(in oklab, var(--bg) 85%, white);
  backdrop-filter: saturate(1.05) blur(6px);
}
.tuto-catbar__inner{ height: var(--catbar-h); display:grid; align-items:center; }
.tuto-catbar__viewport{ position: relative; height: var(--catbar-h); }
.tuto-catbar{ height: var(--catbar-h); display:grid; align-items:center; }
.tuto-catbar__track{
  position: relative; left: 50%; transform: translateX(-50%);
  display: inline-flex; width: max-content; gap: 14px;
  padding: 0; margin: 0; list-style: none; align-items: center;
}
.tuto-catbar__item{ flex: 0 0 auto; }

.tuto-catbar__btn, .tuto-catbar__link{
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: calc(var(--catbar-h) - 10px); min-height: var(--hit-min);
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, #fff, #fbfdff);
  color: var(--ink);
  text-decoration: none; cursor: pointer;
  font: inherit; font-weight: 700; letter-spacing: .2px;
  box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(2,6,23,.04);
  transition: transform var(--trans-fast), box-shadow var(--trans-fast), background var(--trans-fast);
}
.tuto-catbar__btn:hover, .tuto-catbar__link:hover{
  transform: translateY(-1px);
  box-shadow: 0 1px 0 #fff inset, 0 6px 14px rgba(9,96,255,.12);
  background: linear-gradient(180deg, #fff, #f1f6ff);
}
.tuto-catbar__btn::after{
  content:""; inline-size:8px; block-size:8px;
  border-right:1.75px solid currentColor; border-bottom:1.75px solid currentColor;
  transform: rotate(45deg); margin-inline-start:6px; transition: transform var(--trans-fast); opacity:.9;
}
.tuto-catbar__btn[aria-expanded="true"]::after{ transform: rotate(-135deg); }
.tuto-catbar__btn:focus-visible, .tuto-catbar__link:focus-visible{ outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 40%, transparent); }

/* Dropdown (P2) – portal lub dock; BEZ wewnętrznych scrolli */
.tuto-catbar__dropdown[hidden]{ display:none !important; }
.tuto-catbar__dropdown{
  background: var(--bg);
  border: 1px solid var(--sep);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(2,6,23,.10), 0 2px 6px rgba(2,6,23,.04), inset 0 1px 0 #fff;
  padding: 12px;
  box-sizing: border-box;
}
.tuto-catbar__dropdown.is-portal{
  position: fixed !important; left:-99999px; top:-99999px;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--trans-dd), transform var(--trans-dd);
  z-index: var(--z-dd);
  width: auto; max-width: calc(100vw - 24px); /* szerokość wg treści z bezpiecznym limitem */
}
.tuto-catbar__dropdown.is-portal::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.tuto-catbar__dropdown.is-portal.is-open{ opacity: 1; transform: translateY(0); }

.tuto-catbar__dropdown--docked{
  position: static !important; width:100% !important; max-width:none !important;
  border-radius: 0 0 14px 14px; margin-top: 8px;
}

/* Kolumny P2: min 200px, max = treść; nic nie „wyjeżdża” */
.tuto-catbar__dropdown-inner{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--dd-col-min), max-content);
  column-gap: var(--dd-gap);
  row-gap: 10px;
}

/* Pozycje P2 */
.tuto-subcat{ list-style: none; margin: 0; padding: 0; }
.tuto-subcat__item{ position: relative; }
.tuto-subcat__item + .tuto-subcat__item{ margin-top: 6px; }

.tuto-subcat__btn, .tuto-subcat__link{
  position: relative;
  display: inline-flex; align-items: flex-start; gap: 10px;
  min-height: var(--hit-min);
  padding: 8px 12px; padding-left: calc(12px + var(--active-bar));
  border-radius: 10px; border: 1px solid transparent;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none; cursor: pointer;
  white-space: normal; /* pozwala zawijać; JS i tak dba o szerokość panelu */
  width: max-content; max-width: 42ch; /* ergonomiczny limit linii */
  line-height: 1.28; font-size: 14px; font-weight: 600;
  transition: background-color var(--trans-fast), box-shadow var(--trans-fast);
}
.tuto-subcat__btn::after, .tuto-subcat__link::after{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width: var(--active-bar);
  border-radius: 4px; background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity: 0; transition: opacity var(--trans-fast);
}
.tuto-subcat__btn:hover, .tuto-subcat__link:hover{ background: linear-gradient(180deg, rgba(9,96,255,.06), rgba(9,96,255,.04)); }
.tuto-subcat__btn:hover::after, .tuto-subcat__link:hover::after{ opacity: .7; }

.tuto-subcat__thumb{
  flex: 0 0 28px; inline-size: 28px; block-size: 28px;
  display: inline-grid; place-items: center;
  border-radius: 8px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.06);
}
.tuto-subcat__thumb .tuto-thumb{ inline-size:100%; block-size:100%; object-fit:cover; border-radius:8px; display:block; aspect-ratio:1/1; }

/* Flyout (P3) – auto-dopasowanie do treści (width:auto), limit 92vw / 1040px */
.tuto-flyout{
  position: absolute; top: 0; left: 100%; margin-left: 8px;
  background: var(--bg);
  border: 1px solid var(--sep); border-radius: 12px;
  box-shadow: 0 24px 48px rgba(2,6,23,.10), 0 2px 6px rgba(2,6,23,.04), inset 0 1px 0 #fff;
  padding: 12px; z-index: var(--z-fly);
  opacity: 0; transform: translateX(8px);
  transition: opacity var(--trans-dd), transform var(--trans-dd);
  box-sizing: border-box;

  width: auto; /* klucz: naturalna szerokość wg treści */
  max-width: min(92vw, 1040px); /* twardy limit, resztę domknie JS kolumnami */
}
.tuto-flyout[hidden]{ display:none !important; }
.tuto-flyout.is-open{ opacity: 1; transform: translateX(0); }

/* P3: kolumny sterowane zmienną --fly-cols, każda kolumna max-content */
.tuto-flyout__inner{
  display: grid;
  grid-template-columns: repeat(var(--fly-cols, 1), max-content);
  gap: var(--fly-gap);
}
.tuto-flyout__list{ list-style: none; margin: 0; padding: 0; }
.tuto-flyout__item + .tuto-flyout__item{ margin-top: 4px; }

.tuto-flyout__link{
  position: relative;
  display: inline-flex; align-items: flex-start; gap: 8px;
  padding: 6px 10px; padding-left: calc(10px + var(--active-bar));
  border-radius: 8px; text-decoration: none; color: var(--ink);
  white-space: nowrap; /* > dopasowujemy szerokość do 1 linii */
  line-height: 1.25; font-size: 14px; font-weight: 600;
  width: max-content; max-width: none; /* brak zawijania w P3 */
}
.tuto-flyout__link::after{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width: var(--active-bar);
  border-radius: 4px; background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity: 0; transition: opacity var(--trans-fast);
}
.tuto-flyout__link:hover{ background: rgba(9,96,255,.05); }
.tuto-flyout__link:hover::after{ opacity:.7; }
.tuto-flyout__thumb{
  flex: 0 0 22px; inline-size: 22px; block-size: 22px;
  display: inline-grid; place-items: center; border-radius: 6px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.06);
}

/* Subtelne separatory w P2/P3 (CSS only) */
.tuto-subcat__item:not(:last-child)::before{
  content:""; position:absolute; left:12px; right:12px; bottom:-3px; height:1px; background: var(--sep);
  opacity:.5;
}

/* RWD: desktop-only dla overlay/flyout */
@media (max-width:1024px){
  .tuto-catbar__dropdown, .tuto-flyout{ display:none !important; }
}

/* WCAG i motion */
@media (forced-colors: active){
  .tuto-catbar__btn, .tuto-catbar__link,
  .tuto-subcat__btn, .tuto-subcat__link,
  .tuto-flyout__link{
    border:1px solid CanvasText; background:Canvas; color:CanvasText;
  }
  .tuto-catbar__btn:focus-visible, .tuto-catbar__link:focus-visible,
  .tuto-subcat__btn:focus-visible, .tuto-subcat__link:focus-visible,
  .tuto-flyout__link:focus-visible{ outline:2px solid Highlight; box-shadow:none; }
}
@media (prefers-reduced-motion: reduce){
  .tuto-catbar__dropdown, .tuto-flyout,
  .tuto-catbar__btn, .tuto-catbar__link,
  .tuto-subcat__btn, .tuto-subcat__link, .tuto-flyout__link{ transition:none !important; }
}