/* Tło, krój, rozmiar bazowy i `overflow-x` ustawia gbt-design.css.
     Tutaj zostaje wyłącznie to, czego tamten arkusz nie zna. */
  body { position: relative; }


  /* Skeleton loading (feature #10) */
  .sk-wrap { display: grid; gap: 14px; }
  .sk-card {
    height: 92px; border-radius: 0; border: 1px solid var(--obrys);
    background: linear-gradient(100deg, var(--tlo-karta) 30%, var(--obrys-slaby) 50%, var(--tlo-karta) 70%);
    background-size: 200% 100%; animation: sk-shimmer 1.3s ease-in-out infinite;
  }
  @keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce) {
    .sk-card { animation: none; }
    /* szanuj preferencję redukcji ruchu — wyłącz transform/animacje na hover
       (karty, przyciski) i inne mikrointerakcje (audyt UX #9) */
    *, *::before, *::after {
      animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important; scroll-behavior: auto !important;
    }
    .ecard:hover { transform: none; }
  }

  /* Empty state (feature #10) */
  .empty-state { text-align: center; padding: 48px 20px; color: var(--tekst-sredni); }
  .empty-state svg { width: 44px; height: 44px; color: var(--tekst-slabszy); margin-bottom: 12px; }
  .empty-state h3 { font-size: 16px; color: var(--tekst); margin-bottom: 6px; }
  .empty-state p { font-size: 13.5px; color: var(--tekst-slabszy); margin-bottom: 14px; }
  .empty-state button {
    padding: 9px 18px; border: 1px solid var(--obrys); border-radius: 0; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600; color: var(--tekst); background: var(--tlo-karta);
  }
  .empty-state button:hover { border-color: var(--akcja); color: var(--akcja-ciemniej); }

  /* ── Modal subskrypcji ── */
  .sub-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
  .sub-modal[hidden] { display: none; }
  .sub-backdrop { position: absolute; inset: 0; background: rgba(11,31,42,0.45); backdrop-filter: blur(2px); }
  .sub-dialog {
    position: relative; z-index: 1; width: min(440px, calc(100vw - 32px));
    background: var(--tlo-karta); border-radius: 0; padding: 26px 26px 22px;
    box-shadow: 0 30px 80px -20px rgba(11,31,42,0.4);
  }
  .sub-close {
    position: absolute; top: 14px; right: 16px; border: 0; background: none;
    font-size: 26px; line-height: 1; color: var(--tekst-slabszy); cursor: pointer; padding: 2px 6px;
  }
  .sub-close:hover { color: var(--tekst); }
  .sub-dialog h2 { font-size: var(--f-h3); font-weight: 800; line-height: 1.15;
    letter-spacing: -0.02em; color: var(--tekst); }
  .sub-lead { margin-top: 6px; font-size: 13.5px; color: var(--tekst-sredni); line-height: 1.5; }
  .sub-options { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
  .sub-opt {
    display: flex; align-items: center; gap: 13px; padding: 11px 13px;
    border: 1px solid var(--obrys); border-radius: 0; text-decoration: none; cursor: pointer;
    transition: border-color .15s, background .15s;
  }
  .sub-opt:hover { border-color: rgba(194,74,42,0.4); background: rgba(194,74,42,0.03); }
  .sub-ic {
    flex-shrink: 0; height: 34px; width: 34px; border-radius: 0;
    display: grid; place-items: center; font-weight: 800; font-size: 16px; color: #fff;
  }
  .sub-ic-google { background: #1a73e8; }
  .sub-ic-outlook { background: #0a67c1; }
  .sub-ic-apple { background: #111; position: relative; }
  .sub-ic-apple::before {
    content: ""; height: 16px; width: 16px; background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .sub-ic-file { background: var(--akcja); }
  .sub-txt { display: flex; flex-direction: column; gap: 2px; }
  .sub-txt b { font-size: 14px; font-weight: 700; color: var(--tekst); }
  .sub-txt span { font-size: 12px; color: var(--tekst-slabszy); }
  .sub-filter-note { margin: -6px 0 14px; font-size: 12.5px; color: var(--akcja-ciemniej); font-weight: 600; }
  .sub-raw { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--obrys); }
  .sub-raw label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tekst-slabszy); }
  .sub-raw-row { display: flex; gap: 8px; margin-top: 7px; }
  .sub-raw-row input {
    flex: 1; min-width: 0; padding: 8px 11px; border: 1px solid var(--obrys);
    border-radius: 0; font-size: 12.5px; color: var(--tekst-sredni); background: var(--tlo);
  }
  .sub-raw-row button {
    flex-shrink: 0; padding: 8px 15px; border: 0; border-radius: 0; cursor: pointer;
    font-size: 13px; font-weight: 700; color: #fff; background: var(--akcja); font-family: inherit;
  }
  .sub-raw-row button:hover { background: var(--akcja-ciemniej); }

  /* Przełącznik widoków (feature #3) */
  .toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--content-gap); }
  /* Pierwszy blok treści po toolbarze ma zerowy górny margines — stały odstęp daje toolbar.
     Dzięki temu każdy widok (Lista/Miejsca/Kalendarz/Dla Ciebie) oddycha identycznie. */
  #listing > :first-child { margin-top: 0; }
  .toolbar #count { margin: 0; }
  .view-switch { display: inline-flex; background: var(--tlo-karta); border: 1px solid var(--obrys); border-radius: 0; padding: 3px; }
  .view-switch button {
    padding: 6px 15px; border: 0; border-radius: 0; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 600; color: var(--tekst-sredni); background: transparent;
  }
  .view-switch button.on { background: var(--deep-baltic); color: #fff; }

  /* Widok kalendarza — siatka miesiąca */
  .cal-month { margin-bottom: 28px; }
  .cal-month h3 { font-size: var(--f-h3-s); font-weight: 800; line-height: 1.1;
    letter-spacing: -0.02em; color: var(--tekst); margin: 0 0 var(--sp-4); text-transform: capitalize; }
  /* minmax(0,1fr) — bez tego długie tytuły rozpychają kolumny i siatka się rozjeżdża */
  .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .cal-dow { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--tekst-slabszy); text-align: center; padding: 4px 0; }
  /* Wzorzec: min-height 88px — 78 px ścinało trzecie wydarzenie w dniu. */
  .cal-cell { min-height: 88px; min-width: 0; overflow: hidden; border: 1px solid var(--obrys); border-radius: 0; padding: 5px; background: var(--tlo-karta); }
  .cal-cell.empty { background: transparent; border: 0; }
  .cal-cell.today { border-color: var(--akcja); box-shadow: 0 0 0 1px var(--akcja); }
  .cal-daynum { font-size: 11px; font-weight: 700; color: var(--tekst-slabszy); }
  .cal-ev {
    display: block; margin-top: 3px; padding: 2px 5px; border-radius: 0; font-size: 11px;
    background: var(--tlo); color: var(--tekst); text-decoration: none; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis;
  }
  .cal-ev.gbt { background: var(--deep-baltic); color: #fff; }
  .cal-ev:hover { background: var(--akcja); color: #fff; }
  .cal-more { font-size: 10px; color: var(--tekst-slabszy); margin-top: 2px; }
  /* Pasek wydarzenia wielodniowego: leży NA komórkach dnia, rozciągnięty przez
     grid-column span (wzorzec MUI X Scheduler). Segment przecięty granicą
     tygodnia ma bok PROSTY — to komunikuje, że wydarzenie trwa dalej. */
  .cal-bar { position: relative; z-index: 1; margin-left: 1px; margin-right: 1px;
    align-self: start; pointer-events: auto;
    /* --rzad ustawia JS (numer rzędu w komórce); resztę liczy arkusz, więc
       @media może zmienić wymiary bez walki z inline.
       Wysokość paska jest JAWNA, a odstęp rzędów z niej WYLICZONY: dopóki
       wysokość wynikała z font-size i paddingu, stała odstępu była zgadywana —
       16 px przy pasku 22 px dawało nachodzenie o 6 px (pomiar w przeglądarce
       przy 1400 px, 27.08.2026). */
    --wys-paska: 18px; --wys-wpisu: calc(var(--wys-paska) + 2px); --gora-komorki: 18px;
    height: var(--wys-paska); line-height: calc(var(--wys-paska) - 4px);
    box-sizing: border-box;
    margin-top: calc(var(--gora-komorki) + var(--rzad, 0) * var(--wys-wpisu)); }
  .cal-bar:not(.bar-start) { border-top-left-radius: 0; border-bottom-left-radius: 0;
    padding-left: 3px; }
  .cal-bar:not(.bar-end) { border-top-right-radius: 0; border-bottom-right-radius: 0;
    padding-right: 3px; }
  /* Ciągłość wizualna: brzeg segmentu bez krawędzi wydarzenia dostaje strzałkę. */
  .cal-bar:not(.bar-start)::before { content: "‹"; opacity: .65; margin-right: 2px; }
  .cal-bar:not(.bar-end)::after { content: "›"; opacity: .65; margin-left: 2px; }

  /* Widok miejsc — grupy po venue */
  /* Wzorzec (4 - Miejsca): repeat(auto-fill, minmax(300px, 1fr)), gap 14px. */
  /* Nagłówek ekranu — wzorzec ma go nad każdą siatką („Miejsca i organizatorzy",
     „Polecane i wspierane przez GBT"). Produkcja wchodziła prosto w karty. */
  .screen-head { padding-bottom: 8px; }
  .screen-head h1 { margin: 0 0 8px; font-size: 26px; font-weight: 800;
    letter-spacing: -0.02em; color: var(--tekst); }
  .screen-head p { margin: 0 0 28px; font-size: 15px; color: var(--tekst-sredni); max-width: 64ch; }
  .places { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
  .place-card { background: var(--tlo-karta); border: 1px solid var(--obrys); border-radius: 0; padding: 16px; }
  .place-card h3 { margin: 0 0 4px; font-size: var(--f-card); font-weight: 700; color: var(--tekst); }
  /* nazwa miejsca jako link do strony podmiotu /org/{slug} — sygnalizuj klikalność */
  /* Nazwa miejsca jest PRZYCISKIEM filtrującym, ale ma wyglądać jak nagłówek
     karty — dlatego zeruje własny wygląd formanta i dziedziczy krój po h3.
     Zastąpiło `.place-org-link`, który prowadził na stronę organizatora
     (miejsce ≠ podmiot, zgłoszenie 27.08.2026). */
  .place-card h3 .place-filter {
    display: inline; padding: 0; border: 0; background: none;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
  }
  .place-card h3 .place-filter:hover { color: var(--akcja-ciemniej); text-decoration: underline; }
  .place-card h3 .place-filter:focus-visible { outline: 2px solid var(--akcja); outline-offset: 2px; }
  .place-card .pc-city { font-size: 12px; color: var(--tekst-slabszy); }
  .place-card .pc-count { display: inline-block; margin: 8px 0; font-size: 12px; font-weight: 700; color: var(--akcja-ciemniej); }
  .place-card ul { list-style: none; margin: 0; padding: 0; }
  .place-card li { padding: 7px 0; border-top: 1px solid var(--obrys); }
  .place-card li a { color: var(--tekst); text-decoration: none; font-size: 13px; }
  .place-card li a:hover { color: var(--akcja-ciemniej); }
  .place-card li .pc-when { font-size: 11px; color: var(--tekst-slabszy); }

  /* Digest e-mail (feature #6) */
  .sub-email { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--obrys); }
  .sub-email h3 { margin: 0 0 4px; font-size: 15px; color: var(--tekst); }
  .sub-email-lead { margin: 0 0 12px; font-size: 12.5px; color: var(--tekst-sredni); line-height: 1.5; }
  #digest-form { display: flex; flex-direction: column; gap: 10px; }
  #digest-email {
    padding: 9px 12px; border: 1px solid var(--obrys); border-radius: 0;
    font-size: 13.5px; color: var(--tekst); background: var(--tlo); font-family: inherit;
  }
  .digest-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .digest-tag {
    padding: 4px 11px; border: 1px solid var(--obrys); border-radius: 0; cursor: pointer;
    font-size: 12px; color: var(--tekst-sredni); background: var(--tlo-karta); user-select: none;
  }
  .digest-tag.on { background: var(--akcja); border-color: var(--akcja); color: #fff; font-weight: 600; }
  #digest-submit {
    padding: 10px 16px; border: 0; border-radius: 0; cursor: pointer; font-family: inherit;
    font-size: 13.5px; font-weight: 700; color: #fff; background: var(--deep-baltic);
  }
  #digest-submit:hover { background: #08131f; }
  #digest-submit:disabled { opacity: .6; cursor: default; }
  .digest-msg { margin: 4px 0 0; font-size: 12.5px; }
  .digest-msg.ok { color: #0f7a3d; }
  .digest-msg.err { color: #b83410; }

  /* Formularz „Dodaj wydarzenie" (publiczne zgłaszanie → moderacja GBT) */
  .submit-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
  .submit-form label {
    display: flex; flex-direction: column; gap: 5px;
    font-size: 12.5px; font-weight: 600; color: var(--tekst-sredni);
  }
  /* nazwa pola + gwiazdka wymagania w JEDNEJ linii (bez sf-lbl goły „*" był
     osobnym flex-itemem labela → wisiał w nowej linii; feedback Darka 2026-07-11) */
  .submit-form .sf-lbl { display: inline-flex; align-items: baseline; gap: 3px; }
  .submit-form .req { color: var(--akcja); font-weight: 700; }
  .submit-form input, .submit-form textarea {
    width: 100%;  /* input domyślnie nie wypełnia labela — bez tego pola węższe niż dialog */
    padding: 9px 12px; border: 1px solid var(--obrys); border-radius: 0;
    font-size: 13.5px; font-weight: 400; color: var(--tekst); background: var(--tlo);
    font-family: inherit;
  }
  .submit-form input:focus, .submit-form textarea:focus {
    outline: none; border-color: var(--akcja);
  }
  .submit-form textarea { resize: vertical; min-height: 60px; }
  .submit-form .sf-row { display: flex; gap: 12px; }
  /* min-width:0 — bez tego inputy w flexie nie kurczą się i „Miejsce" wystaje
     poza dialog (feedback Darka 2026-07-04) */
  .submit-form .sf-row label { flex: 1; min-width: 0; }
  #sf-submit {
    padding: 10px 16px; border: 0; border-radius: 0; cursor: pointer; font-family: inherit;
    font-size: 13.5px; font-weight: 700; color: #fff; background: var(--akcja);
  }
  #sf-submit:hover { background: var(--akcja-ciemniej); }
  #sf-submit:disabled { opacity: .6; cursor: default; }

  /*
   * Osadzenie wg szablonu „Kalendarz GBT" (Claude Design, 2026-08-25):
   * sidebar i kolumna treści stoją OBOK SIEBIE — `display:flex` z wyrównaniem
   * do góry. Kalendarz jest aplikacją z żywą nawigacją filtrów, więc szpalta
   * jest widoczna od razu, nie chowana za przyciskiem.
   */
  .shell { position: relative; z-index: 1; display: flex; align-items: flex-start; }

  /* Kolumna treści obok szpalty — cała reszta strony (pasek, pagehead, lista,
     integratorzy, stopka) mieści się w niej, jak w artboardzie. */
  /* `container-type: inline-size` daje jednostkę `cqw` = szerokość kolumny;
     sekcje pełnej szerokości (`.partners`) liczą się od niej, nie od okna.
     `overflow-x: clip` ucina zaokrąglenia `cqw` (mierzone: 11 px nadmiaru przy
     1024 px), nie tworząc kontekstu przewijania — `sticky` działa dalej. */
  .kolumna { flex: 1; min-width: 0; display: flex; flex-direction: column;
    container-type: inline-size; overflow-x: clip; }

  /* Pasek zostaje na wierzchu przy przewijaniu listy (artboard: sticky, z-index 30). */
  .kolumna > .gbt-header { position: sticky; top: 0; z-index: 30; }

  /* Przełącznik języka PL/EN. Wygląd w KLASIE, nie inline: klasa `gbt-lang` jest
     zarazem uchwytem dla handlera (`querySelectorAll(".gbt-lang .lang-btn")`),
     a inline `display`/`flex` blokowałyby reguły @media na wąskim ekranie. */
  .gbt-lang { display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; flex: 0 0 auto; }

  /* ── Sidebar = stała szpalta nawigacji filtrów (artboard) ── */
  :root { --sidebar-szer: clamp(268px, 21vw, 336px); }

  /*
   * Szpalta lepka na pełną wysokość okna, własny scroll. Poniżej 900 px
   * zamienia się w szufladę (reguły w bloku @media) — artboard jest desktopowy.
   */
  aside.sidebar {
    position: sticky; top: 0; z-index: 20;
    width: var(--sidebar-szer); flex: 0 0 var(--sidebar-szer);
    height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 22px;
    padding: 26px 22px 26px;
    border-right: 1px solid var(--obrys);
    background: var(--tlo-karta);
  }
  /* Logo na pełną szerokość kolumny kategorii */
  .sidebar .brand {
    display: block; text-decoration: none;
    padding: 6px 8px 20px; margin-bottom: 4px;
    border-bottom: 1px solid rgba(11,31,42,0.08);
  }
  .sidebar .brand .logo { width: 100%; height: auto; display: block; }
  .sidebar .brand .logo path { fill: #070707; }
  .sidebar .brand .b2 {
    display: block; margin-top: 8px; font-size: 10px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--tekst-slabszy); text-align: center;
  }
  .sidebar .sec-title { padding-left: 10px; margin-bottom: 8px; font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-slabszy); }

  /*
   * Marka + nawigacja ekosystemu w szufladzie — wzór z szablonu "Kalendarz GBT"
   * (Claude Design). Kalendarz jest częścią serwisu, więc szuflada otwiera się
   * znakiem GBT i prowadzi z powrotem na gdanskbaytech.pl.
   */
  .sidebar-brand {
    display: block; text-decoration: none; color: var(--tekst);
    padding: 4px 6px 18px; border-bottom: 1px solid rgba(11,31,42,0.08);
  }
  .sidebar-brand svg { width: 100%; height: auto; display: block; }
  .sidebar-brand svg path { fill: currentColor; }
  .sidebar-brand__sub {
    display: block; margin-top: 10px; font-size: 10px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--tekst-slabszy); text-align: center;
  }
  .sidebar-www { display: flex; flex-direction: column; }
  .sidebar-www a {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 10px; border-left: 3px solid transparent;
    font-size: 13px; font-weight: 500; color: var(--tekst-sredni); text-decoration: none;
  }
  .sidebar-www a:hover { background: rgba(11,31,42,0.03); color: var(--akcja-ciemniej); }
  .sidebar-www a span:last-child { font-size: 11px; color: var(--dane); }
  .sidebar-filters-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding-left: 10px; border-top: 1px solid var(--obrys); padding-top: 20px;
  }
  .sidebar-filters-head .sec-title { padding-left: 0; margin-bottom: 0; }
  .sidebar-reset {
    background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--akcja-ciemniej);
  }
  .sidebar-reset:hover { color: var(--akcja); text-decoration: underline; }
  /* Kafel One Stop Shop domyka szufladę — ta sama rola co na stronach WWW. */
  .sidebar-oss {
    margin-top: auto; display: flex; flex-direction: column; gap: 10px;
    background: var(--poboczne); border: 1px solid var(--poboczne-obrys); padding: 16px;
  }
  /* Na błękitnym tle kafla rdza podstawowa daje 3,94:1 — poniżej progu 4,5:1.
     Wariant ciemniejszy trzyma 5,24:1 przy tym samym rozpoznaniu koloru. */
  .sidebar-oss .gbt-eyebrow { color: var(--akcja-ciemniej); }
  .sidebar-oss p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--tekst-sredni); }
  .sidebar-oss a { font-size: 12.5px; font-weight: 700; color: var(--akcja-ciemniej); text-decoration: none; }
  .sidebar-oss a:hover { text-decoration: underline; }
  .sidebar-filter {
    display: flex; align-items: center; gap: 9px;
    width: 100%; padding: 7px 10px; margin-bottom: 2px;
    border: none; border-left: 3px solid transparent; border-radius: 0;
    background: transparent; cursor: pointer; text-align: left;
    font-family: inherit; font-size: 13px; font-weight: 500; color: var(--tekst-sredni);
  }
  .sidebar-filter:hover { background: rgba(11,31,42,0.03); }
  .sidebar-filter.active { border-left-color: var(--akcja);
    background: rgba(194,74,42,0.07); font-weight: 600; color: var(--akcja-ciemniej); }
  .sidebar-filter .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-filter .cnt { font-size: 11px; font-weight: 600; color: var(--tekst-slabszy);
    background: rgba(11,31,42,0.05); border-radius: 0; padding: 1px 8px; flex-shrink: 0; }
  .sidebar-filter.active .cnt { background: rgba(194,74,42,0.14); color: var(--akcja-ciemniej); }
  /* Kropka: szara dla nieaktywnych, rdzawa dla aktywnej pozycji (wzór z podstron). */
  .sidebar-filter .dot { height: 7px; width: 7px; border-radius: 999px; flex-shrink: 0;
    background: var(--obrys); }
  .sidebar-filter.active .dot { background: var(--akcja); }
  /* Nagłówek grupy filtrów wewnątrz szpalty. */
  .sidebar .sec-title { padding-left: 10px; margin: 0 0 8px; font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-slabszy); }
  .sidebar #nav-range, .sidebar #nav-levels, .sidebar #nav-categories,
  .sidebar #nav-cities, .sidebar #nav-tags { margin-bottom: 16px; }

  /* ── Main ── */
  /* Kolumna treści 1:1 z `.gbp-inner` podstrony wzorcowej. */
  main {
    min-width: 0; display: flex; flex-direction: column;
    width: min(1120px, calc(100% - 64px));
    margin-inline: auto;
    padding: var(--sp-40) 0 var(--sp-50);
  }
  /* Sekcja domykająca styka się ze stopką (artboard) — dolny odstęp `main`
     zostawiał między nimi jasny pas na szerokość kolumny. */
  main:has(> .partners:last-child) { padding-bottom: 0; }
  h1.page-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--sp-2); }
  p.page-lead { color: var(--tekst-sredni); max-width: 64ch; margin-bottom: var(--content-gap); }

  /* ── Pasek wyszukiwania + szybkie filtry (Faza 1) ── */
  .searchbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
  .search-input { position: relative; flex: 1 1 320px; display: flex; align-items: center; }
  .search-input > svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--tekst-slabszy); pointer-events: none; }
  /* Wzorzec (1 - Lista): padding 11px 38px — symetrycznie. Lewe 42 px
     przesuwało tekst względem ikony lupy inaczej niż w projekcie. */
  .search-input input { width: 100%; padding: 11px 38px; border-radius: 0;
    border: 1px solid var(--obrys); background: var(--tlo-karta); color: var(--tekst);
    font-family: inherit; font-size: 15px; line-height: 17px;
  }
  .search-input input::placeholder { color: var(--tekst-slabszy); }
  .search-input input:focus { outline: none; border-color: var(--akcja); }
  .search-input input[type="search"]::-webkit-search-cancel-button { display: none; }
  #search-clear { position: absolute; right: 10px; width: 24px; height: 24px; border: 0;
    border-radius: 50%; background: var(--obrys); color: var(--tekst-sredni); cursor: pointer;
    font-size: 16px; line-height: 1; display: grid; place-items: center; }
  #search-clear:hover { background: var(--akcja); color: #fff; }
  .chip-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px;
    border-radius: 0; border: 1px solid var(--obrys); background: var(--tlo-karta);
    color: var(--tekst-sredni); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .chip-toggle svg { width: 15px; height: 15px; }
  .chip-toggle:hover { border-color: var(--tekst-slabszy); }
  .chip-toggle[aria-pressed="true"] { background: var(--akcja); border-color: var(--akcja); color: #fff; }

  /* badge „NOWE" (Faza 3) — wydarzenie dodane od ostatniej wizyty */
  .enew { display: inline-block; align-self: flex-start; margin-bottom: 4px; padding: 2px 9px;
    border-radius: 0; background: var(--dane); color: var(--dane-ciemniej);
    font-size: 10px; font-weight: 900; letter-spacing: .08em; }

  /* akcje na karcie listy (Faza 2): zapisz (serce) + do kalendarza */
  .ecard-actions { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
  .ecard-act { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border-radius: 0; border: 1px solid var(--obrys); background: var(--tlo-karta);
    color: var(--tekst-sredni); font-size: 13px; font-weight: 600; line-height: 15px;
    cursor: pointer; text-decoration: none; font-family: inherit; }
  /* Wzorzec: style="width:15px; height:15px; flex:0 0 15px" — bez `flex` ikona
     kurczyła się przy dłuższym podpisie i przycisk miał inną wysokość niż
     sąsiedni „Kalendarz". */
  .ecard-act svg { width: 15px; height: 15px; flex: 0 0 15px; }
  .ecard-act:hover { border-color: var(--tekst-slabszy); color: var(--tekst); }
  .ecard-heart.on { color: var(--akcja); border-color: var(--akcja); }
  .ecard-heart.on:hover { color: var(--akcja-ciemniej); }
  /* licznik na zakładce „Zapisane" */
  .saved-count { display: inline-flex; align-items: center; justify-content: center; min-width: 17px;
    height: 17px; padding: 0 4px; margin-left: 5px; border-radius: 999px; background: var(--akcja);
    color: #fff; font-size: 11px; font-weight: 800; }
  /* nagłówek widoku „Moje zapisane" */
  .saved-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    flex-wrap: wrap; margin-bottom: var(--sp-4); }
  .saved-head__title { font-size: 17px; font-weight: 800; color: var(--tekst); }
  .saved-export { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 0;
    background: var(--akcja); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
  .saved-export svg { width: 16px; height: 16px; }
  .saved-export:hover { background: var(--akcja-ciemniej); }

  .active-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  /* pasek aktywnych filtrów pojawia się tylko gdy są filtry — nie rezerwuj miejsca gdy pusty */
  .active-filter-bar:not(:empty) { margin-bottom: var(--content-gap); }
  .active-filter-bar .clear {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 0; cursor: pointer;
    border: 1px solid var(--akcja); background: rgba(194,74,42,0.08); color: var(--akcja-ciemniej);
    font-family: inherit; font-size: 12px; font-weight: 600; }
  .active-filter-bar .clear:hover { background: rgba(194,74,42,0.14); }
  /* Wzorzec: licznik listy ma 13.5px, nie 13px. */
  #count { color: var(--tekst-slabszy); font-size: 13.5px; margin-bottom: 20px; }

  /* ── Sekcja miesiąca ── */
  /* Rytm miesięcy (plan oprawy, poz. 7): nagłówek przykleja się przy
     przewijaniu, żeby przy 86 kartach zawsze było wiadomo, który to miesiąc.
     Tło własne — pod spodem przesuwają się karty. */
  .month-head { display: flex; align-items: baseline; gap: var(--sp-3);
    margin: var(--odstep-domkniecie) 0 var(--sp-4);
    position: sticky; top: 0; z-index: 5;
    padding: 15px 0 8px; background: var(--tlo);
    border-bottom: 1px solid var(--obrys); }
  .month-head:first-child { margin-top: 0; }
  /*
   * Pasek 3 px nad nagłówkiem miesiąca (artboard): rdza → stal, ten sam
   * gradient co w szablonie. Oddziela grupy mocniej niż sama linia.
   */
  .month-head::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--rust-red), var(--rust-deep) 34%, var(--steel-blue));
  }
  /* Stopień z artboardu — miesiąc jest kotwicą listy, stąd skala plakatowa. */
  .month-head .m { font-size: clamp(31px, 4vw, 46px); font-weight: 800; line-height: 1.1;
    letter-spacing: -0.02em; text-transform: capitalize; color: var(--tekst); }
  .month-head .rule { flex: 1; height: 1px; background: var(--obrys); }
  .month-head .n { font-size: 12px; color: var(--tekst-slabszy); }

  /* ── Sekcja „Polecane przez GBT" (pasek nad listą) ── */
  /* Ramka sekcji wg artboardu (linia 243): błękitne tło Fresh Air 2 + obrys,
     równy padding 18 px, odstęp 26 px do listy miesiąca. Sekcja jest WYDZIELONA
     z listy — „Polecane GBT" czyta się jako osobny blok, nie jak trzy karty listy.
     Błękit, NIE rdza: rdza jest zarezerwowana dla akcji. */
  .featured-strip {
    margin-bottom: 26px; padding: 18px; border-radius: 0;
    background: var(--poboczne); border: 1px solid var(--poboczne-obrys);
  }
  .featured-strip__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
  .featured-strip__star { display: flex; flex: 0 0 14px; width: 14px; height: 14px; color: var(--akcja); }
  .featured-strip__star svg { width: 14px; height: 14px; }
  .featured-strip__title { font-size: 12px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--tekst-sredni); }
  .featured-strip__more { margin-left: auto; border: none; background: none; cursor: pointer;
    font-size: 12px; font-weight: 700; color: var(--akcja-ciemniej); padding: 3px 7px; border-radius: 0; }
  .featured-strip__more:hover { background: rgba(194,74,42,0.10); }

  /* Wiersz sekcji „Polecane GBT" wg artboardu (linie 251–261): KOMPAKTOWY, nie
     pełna karta listy. Kolumna dnia 46 px, tytuł w jednej linii z ellipsis,
     meta pod spodem, „Szczegóły ↗" po prawej. Wcześniej stały tu pełne karty
     (feedback 2026-07-05) — artboard z 25.08.2026 jest nowszy i to on rozstrzyga. */
  .featured-rail { display: flex; flex-direction: column; gap: 10px; }
  .frow {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    background: var(--tlo-karta); border: 1px solid var(--poboczne-obrys);
    padding: 12px 14px; border-radius: 0; cursor: pointer;
    font-family: inherit; color: inherit;
    /* Wiersz jest ODNOŚNIKIEM (środkowy przycisk, „otwórz w nowej karcie"), ale ma
       wyglądać jak kafel z artboardu — bez podkreślenia całej treści, które
       nakłada globalny styl `a`. Sygnałem najechania jest ramka w rdzy. */
    text-decoration: none;
    transition: border-color .16s ease;
  }
  .frow:hover, .frow:focus-visible { text-decoration: none; }
  .frow * { text-decoration: none; }
  .frow:hover, .frow:focus-visible { border-color: var(--akcja); }
  .frow__date { display: flex; flex-direction: column; align-items: center;
    flex: 0 0 46px; line-height: 1.1; }
  .frow__day { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; color: var(--tekst); }
  .frow__mon { font-size: 11px; font-weight: 600; color: var(--tekst-slabszy); }
  .frow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .frow__title { font-size: 15px; font-weight: 700; color: var(--tekst);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .frow__meta { font-size: 12.5px; color: var(--tekst-slabszy);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .frow__cta { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--akcja-ciemniej); }

  /* zakładka „★ Polecane GBT" — akcent gwiazdki gdy nieaktywna */
  .view-switch button[data-view="featured"] { color: var(--akcja-ciemniej); }
  .view-switch button[data-view="featured"].on { color: #fff; }

  /* hero zakładki featured (pełny widok) */
  .featured-hero { margin-bottom: 20px; }
  .featured-hero__title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--tekst); }
  .featured-hero__sub { margin-top: 6px; font-size: 14px; color: var(--tekst-sredni); max-width: 60ch; }

  /* ── Karta wydarzenia ── */
  .cards { display: flex; flex-direction: column; gap: 12px; }
  .ecard {
    /* Siatka asymetryczna (kanon §5): kolumna daty stała, treść bierze resztę.
       Flex z `gap` dawał ten sam efekt tylko przy równych treściach — przy
       długim tytule kolumna daty zaczynała się kurczyć. */
    /* Flex z zawijaniem (podstrony „Kalendarz GBT") — kolumna daty ma własną
       szerokość clamp(), a treść bierze resztę. Grid ze stałymi 104 px łamał
       „26 sierpnia" na dwie linie. */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 22px;
    background: var(--tlo-karta); border: 1px solid var(--obrys);
    /* Lewy pasek 3 px niesie kolor KATEGORII — kolor ustawia JS
       (kolorKategorii w eventcard.js), grubość musi stać tutaj, inaczej
       pasek zostaje przy 1 px ramki i sygnał kategorii ginie. */
    border-left-width: 3px;
    /* PŁASKA w spoczynku — cień pojawia się dopiero przy najechaniu. */
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  .ecard:hover, .ecard:focus-within {
    border-color: var(--akcja);
    box-shadow: var(--cien-hover);
  }

  /* Wyróżnienie poziomów oznaczeń GBT — gruba ramka w kolorze poziomu (feedback
     Darka 2026-07-04). Poziom 1 „listed" bez ramki. Kolejność mocy: recommended
     (pomarańcz) → supported (głęboki pomarańcz) → organised (navy). */
  /* Uwaga grupy pkt 13: znak jakości GBT ma DOMINOWAĆ wizualnie nad „za N dni".
     Grubsza ramka + akcent po lewej + delikatne tło. Kolory wg Darka:
     recommended = beżowy, supported = czerwony (mocniejszy). */
  /* Wyróżnienie GBT wg podstron: ramka 1 px w kolorze poziomu + delikatny
     gradient od lewej. Lewy pasek 3 px niesie kolor KATEGORII (klasa .ecard),
     więc tutaj nie dublujemy go grubszą ramką. */
  /* Gradient i ramka poziomu stoją NIŻEJ, za drugą definicją `.ecard` (blok
     „Karta wydarzenia = .gbt-event z motywu") — ta ustawia `background` i skrót
     `border`, więc przy tej samej specyficzności kasowała stąd oba. */
  .ecard--recommended, .ecard--supported {
    position: relative;
  }

  /* Notka „dlaczego GBT poleca" (endorsement_note) — cytat od GBT na karcie wyróżnionego */
  .egbt-note { display: flex; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 0;
    background: rgba(194,74,42,0.06); border-left: 3px solid var(--akcja);
    font-size: 13px; line-height: 1.5; color: var(--tekst); }
  .egbt-note .egbt-note-mark { flex-shrink: 0; font-weight: 800; color: var(--akcja-ciemniej); }
  .egbt-note .egbt-note-by { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700;
    color: var(--tekst-slabszy); text-transform: none; letter-spacing: 0; }

  /* Badge daty — duży, czytelny, kluczowy: odliczanie + dzień tyg. + numer + miesiąc + godzina */
  /* Kolumna daty wg podstron „Kalendarz GBT": szeroka na tyle, by „26 sierpnia"
     zmieściło się w JEDNEJ linii, wyrównana do lewej, oddzielona kreską (nie ramką). */
  .date-badge {
    flex: 0 1 clamp(146px, 19%, 218px); min-width: 146px;
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 2px clamp(14px, 2vw, 28px) 6px 0; border-radius: 0; text-align: left; line-height: 1;
    background: transparent; border: 0; border-right: 1px solid var(--obrys); overflow: visible;
  }
  /* odliczanie — najmocniejszy sygnał, pasek na górze */
  .date-badge .badge-when {
    margin: 0 0 12px; padding: 0;
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--tekst-slabszy); background: transparent;
  }
  .date-badge.soon .badge-when { color: var(--akcja); }
  /* Dzień tygodnia wg artboardu: 15px/600 — czytelny obok liczby dnia. */
  .date-badge .dow { font-size: 15px; font-weight: 600; color: var(--tekst-slabszy); }
  /* „25 sierpnia" w jednej linii — numer plakatowy, miesiąc obok (podstrony GBT). */
  .date-badge .day { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    margin: 0 0 8px -2px; font-size: clamp(42px, 3.6vw, 52px); font-weight: 800;
    line-height: 1.02; letter-spacing: -0.045em; color: var(--tekst); }
  .date-badge.soon .day { color: var(--akcja); }
  .date-badge .mon { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--tekst-sredni); }
  /* Rząd akcji karty: [Rejestracja] [Zapisz] [Kalendarz] — jeden pasek pod chipami. */
  .ecard .ecard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
  /* `line-height: normal` — jak we wzorcu. Odziedziczone 20 px z arkusza
     globalnego robiło z tego przycisku 34 px, gdy sąsiednie miały 31 px. */
  /* Wzorzec: treść KAŻDEGO przycisku rzędu akcji ma 15 px wysokości — w „Zapisz"
     i „Kalendarz" wyznacza ją ikona 15 px, w przycisku wiodącym sam tekst.
     Stąd wszystkie trzy renderują się na 29 px mimo różnych paddingów.
     Bez tego tekst 12,5 px dawał 14 px i przycisk wychodził o 1 px niższy. */
  .ecard .ereg { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
    background: var(--akcja-ciemniej); color: #fff; font-size: 12.5px; font-weight: 600;
    line-height: 15px; text-decoration: none;
    /* Relikt po układzie, w którym rejestracja stała OSOBNO nad chipami: ogólna
       reguła `.ereg` dodaje margin-top 11px. W rzędzie akcji spychał on ten
       przycisk 5,5 px niżej niż „Zapisz"/„Kalendarz" i rozpychał rząd do 40 px. */
    margin-top: 0; }
  .ecard .ereg:hover { background: var(--akcja); }
  .ecard .ereg svg { width: 14px; height: 14px; }
  /* Wzorzec: ramka w kolorze rdzy, BEZ wypełnienia. Blade tło robiło z godziny
     różowy prostokąt konkurujący z numerem dnia. */
  .date-badge .time {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
    padding: 6px 11px; border: 1px solid var(--akcja); white-space: nowrap; line-height: 1.2;
    font-size: 15px; font-weight: 700; color: var(--akcja-ciemniej);
    background: transparent; border-radius: 0; }
  .date-badge .time svg { height: 13px; width: 13px; }
  .date-badge .time.allday { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
  /* wariant „wkrótce" (≤7 dni) — SUBTELNY akcent, NIE dominuje nad znakiem jakości GBT
     (uwaga grupy pkt 13). Zostaje tylko obwódka + mocniejszy pasek odliczania; tło badge
     bez zmian, żeby wyróżnienie endorsement było najsilniejszym sygnałem na karcie. */

  .ebody { flex: 1 1 360px; min-width: 0; }
  /* Tytuł karty wg artboardu: stopień plakatowy, nie tekstowy — to on prowadzi
     wzrok po liście, a nie kolumna daty. */
  .ebody .etitle { font-size: clamp(19px, 1.5vw, 23px); font-weight: 800; letter-spacing: -0.03em;
    line-height: 1.18; color: var(--tekst); text-decoration: none; }
  .ebody .etitle:hover { color: var(--akcja-ciemniej); }
  .emeta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: var(--f-drobny); color: var(--tekst-sredni); }
  .emeta .place { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
  .emeta .place:hover { color: var(--akcja-ciemniej); }
  .emeta .place svg { height: 13px; width: 13px; color: var(--tekst-slabszy); flex-shrink: 0; }
  .emeta .source { display: inline-flex; align-items: center; gap: 5px; color: var(--tekst-slabszy); }
  .emeta .source svg { height: 13px; width: 13px; flex-shrink: 0; }
  /* źródło jako link na profil organizatora (backlog poz.1) */
  a.source-link { text-decoration: none; transition: color .12s; }
  a.source-link:hover { color: var(--akcja-ciemniej); text-decoration: underline; }
  .eteaser { margin-top: 9px; font-size: var(--f-drobny); color: var(--tekst-sredni); line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
  .ereg { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px;
    padding: 7px 14px; border-radius: 0; font-size: 13px; font-weight: 700; text-decoration: none;
    color: var(--akcja-ciemniej); background: rgba(194,74,42,0.10); }
  .ereg:hover { background: rgba(194,74,42,0.18); }
  .ereg svg { height: 14px; width: 14px; flex-shrink: 0; }
  /* Badge poziomu relacji GBT (System oznaczeń) — SAM TEKST „... by GBT", bez logo
     (feedback Darka 2026-07-05). Blokowy pod tytułem, nie nachodzi. Tło wg poziomu. */
  .gbt-badge { display: flex; width: fit-content; max-width: 100%; align-items: center;
    margin-top: 9px; padding: 5px 12px; border-radius: 0; font-size: 11.5px;
    font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; border: 1.5px solid; }
  /* Wzorzec: badge ma 30 px wysokosci (padding 5+5, tresc 18,4 px = lh 1.6
     przy 11,5 px). `line-height: 1.1` scinalo go do 25 px. */
  .gbt-badge-label { line-height: 18.4px; }
  /* badge WYPEŁNIONY kolorem poziomu — spójnie z panelem admina /ocenianie
     (recommended=orange, supported=orange-deep, organised=navy). */
  .gbt-badge.recommended { color: #fff; border-color: var(--akcja);
    background: var(--akcja); }
  .gbt-badge.supported { color: #fff; border-color: var(--akcja-ciemniej);
    background: var(--akcja-ciemniej); }
  .gbt-badge.organised { color: #fff; border-color: var(--deep-baltic);
    background: var(--deep-baltic); }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .chip { white-space: nowrap; border-radius: 0; padding: 4px 12px; font-size: var(--f-s); font-weight: 600; text-decoration: none; }
  .chip.cat { background: rgba(194,74,42,0.10); color: #8f2809; }
  .chip.tag { background: rgba(58,111,143,0.24); color: var(--dane-ciemniej); cursor: pointer; }
  .chip.tag:hover { background: rgba(58,111,143,0.40); }
  .chip.tag.on { background: var(--dane-ciemniej); color: #fff; }
  /* badge cykliczności (uwaga grupy pkt 8) — wyróżnia serie od jednorazowych */
  .chip.recurring { background: rgba(58,111,143,0.18); color: var(--deep-baltic); border: 1px solid var(--dane); }
  .clear.clear-all { background: rgba(11,31,42,0.06); color: var(--tekst-sredni); }

  .empty { padding: 60px 22px; text-align: center; color: var(--tekst-slabszy);
    background: var(--tlo-karta); border: 1px solid var(--obrys); border-radius: 0; }

  /* Wygląd tej sekcji ustala warstwa zgodności na końcu pliku (pas na granacie
     z kaflami). Tutaj zostaje tylko rytm — odstępami skali UKŁADU. */
  .partners .links { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; }
  footer.foot { margin-top: 24px; color: var(--tekst-slabszy); font-size: 12px; }

  /* Przycisk „Filtry" — jedyne wejście do szuflady, więc widoczny ZAWSZE. */
  .filters-toggle {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    padding: 12px 18px; border: 1px solid var(--obrys); background: var(--tlo-karta);
    color: var(--tekst); font-family: inherit; font-size: 14px; font-weight: 700;
    cursor: pointer; margin-bottom: var(--sp-4);
    transition: border-color .18s ease, color .18s ease;
  }
  .filters-toggle:hover { border-color: var(--akcja); color: var(--akcja); }
  .filters-toggle svg { width: 16px; height: 16px; }
  .filters-toggle .ft-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--akcja); color: #fff; font-size: 11px; font-weight: 800;
  }
  /* Na desktopie szpalta stoi na widoku — przycisk i tło szuflady są zbędne. */
  .filters-toggle { display: none; }
  .drawer-backdrop { display: none; }

  @media (max-width: 900px) {
    /*
     * Poniżej 900 px szpalta wraca do roli szuflady: artboard jest desktopowy,
     * a stała kolumna 268 px zjadłaby połowę ekranu telefonu.
     */
    .shell { display: block; }
    .kolumna { display: block; }
    .filters-toggle { display: inline-flex; }
    aside.sidebar {
      position: fixed; top: 0; left: 0; bottom: 0; z-index: 210;
      width: min(88vw, 340px); flex: none; height: auto;
      padding: 24px 18px 26px;
      box-shadow: 2px 0 24px rgba(11,31,42,.18);
      transform: translateX(-100%);
      transition: transform .25s ease-out;
    }
    body.drawer-open aside.sidebar { transform: translateX(0); }
    body.drawer-open .drawer-backdrop {
      display: block; position: fixed; inset: 0; z-index: 200;
      background: rgba(11,31,42,.45);
    }

    main { width: calc(100% - 40px); padding: var(--sp-30) 0 var(--sp-40); }
    /* Na telefonie kolumna daty siada NAD treścią (pełna szerokość, kreska
       pod spodem zamiast po prawej) — 146 px obok opisu zjadałoby pół ekranu. */
    .ecard { gap: 12px; padding: 14px; }
    .date-badge { flex: 1 1 100%; min-width: 0;
      flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
      padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--obrys); }
    .date-badge .badge-when { margin: 0; }
    .date-badge .day { margin: 0; font-size: 34px; }
    .date-badge .mon { font-size: 17px; }
    .date-badge .time { margin-top: 0; font-size: 13px; padding: 4px 9px; }

    /* Szuflada filtrów, jej tło i przycisk są regułami globalnymi — tutaj
       nie ma czego powtarzać. */

    /* Bug RWD (Darek 2026-07-05): przełącznik widoków (5 przycisków) i topbar
       wypychały stronę ~60px w bok na telefonie (overflow-x). view-switch =
       przewijalny poziomo, topbar zawija przyciski. */
    .view-switch {
      max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .view-switch::-webkit-scrollbar { display: none; }
    .view-switch button { white-space: nowrap; flex-shrink: 0; }
    /* Pasek na telefonie (feedback Darka 2026-07-05): logo + ikony w JEDNYM rzędzie.
       Długi podtytuł wypychał wcześniej przyciski na trzy linie. Pasek ma 76 px
       na desktopie, tutaj oddycha paddingiem i skraca logo. */
    .gbt-header__bar { flex-wrap: nowrap; padding: 10px 14px; min-height: 0; gap: 8px; }
    .gbt-logo svg { height: 24px; }
    .gbt-header__title { display: none; }   /* tę samą treść niesie H1 w pasie tytułowym */
    /* Przyciski schodzą do samych ikon: tekst gaśnie `font-size: 0`, svg zostaje. */
    .gbt-btn { font-size: 0; padding: 9px; gap: 0; }
    .gbt-btn svg { height: 16px; width: 16px; }
  }

  /* Kalendarz na wąskim telefonie (audyt UX #8): siatka 7-kol na ~360px dawała
     komórki ~44px z tytułami uciętymi do 1-2 znaków (nieczytelne). Poniżej 560px
     wydarzenia stają się kolorowymi PASKAMI bez tekstu (kolor = poziom GBT), a dzień
     pokazuje ich liczbę — czytelny sygnał „coś się dzieje", szczegóły po tapnięciu.
     Tekst tytułu zostaje dla czytników ekranu (nie usuwamy, tylko wizualnie chowamy). */
  @media (max-width: 560px) {
    .cal-grid { gap: 3px; }
    .cal-cell { min-height: 52px; padding: 4px 3px; }
    .cal-daynum { font-size: 12px; }
    .cal-ev {
      margin-top: 2px; height: 5px; padding: 0; border-radius: 0;
      overflow: hidden; text-indent: -9999px;   /* chowa tytuł wizualnie, zostaje dla AT */
      background: var(--dane);
    }
    .cal-ev.gbt { background: var(--akcja); }
    /* Pasek na telefonie: 5 px wysokości + 2 px odstępu (jak .cal-ev wyżej).
       `margin-top` MUSI być powtórzony w tym bloku: `.cal-ev` wyżej w tym samym
       @media ma tę samą specyficzność i jako PÓŹNIEJSZA reguła nadpisywała
       wyliczenie z bloku bazowego — trzy paski nachodziły na siebie (pomiar
       w przeglądarce przy 390 px, 27.08.2026). */
    .cal-bar { --wys-paska: 5px; --gora-komorki: 20px;
      margin-top: calc(var(--gora-komorki) + var(--rzad, 0) * var(--wys-wpisu)); }
    .cal-more { font-size: 10px; margin-top: 3px; color: var(--akcja-ciemniej); font-weight: 700; }
    .cal-dow { font-size: 10px; padding: 2px 0; }
    /* Artboard jest desktopowy (1440 px). Na 390 px 18 px paddingu sekcji + 14 px
       wiersza zjadałoby 16 % szerokości, a „Szczegóły ↗" ściskałoby tytuł do kilku
       znaków — CTA znika (cały wiersz i tak jest klikalny), padding maleje. */
    .featured-strip { padding: 14px 10px; }
    .frow { gap: 10px; padding: 10px 11px; }
    .frow__cta { display: none; }
  }

  /* ── Profil organizatora (T7: przywrócone z organizer.html sprzed T5, kolory na var()) ── */
  .ev-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: .9rem; color: var(--tekst-sredni); text-decoration: none; }
  .ev-back:hover { color: var(--akcja-ciemniej); }
  .ev-back svg { width: 16px; height: 16px; }

  /* Redesign hero: gradientowy panel spójny z brandingiem landingu (mesh w tle) */
  .org-hero { position: relative; display: flex; flex-direction: column; gap: 20px;
    margin-bottom: 28px; padding: 26px 26px 22px; border-radius: 0;
    border: 1px solid var(--obrys);
    background:
      radial-gradient(120% 140% at 8% 0%, rgba(58,111,143,0.20) 0%, transparent 46%),
      radial-gradient(120% 160% at 100% 10%, rgba(194,74,42,0.12) 0%, transparent 50%),
      var(--tlo-karta);
    box-shadow: 0 12px 34px -22px rgba(11,31,42,0.5);
    overflow: hidden; }
  .org-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
  .org-head { display: flex; flex-direction: column; gap: 8px; min-width: 200px; }
  /* Nazwa organizatora to nagłówek EKRANU — stopień ustala `.org-hero h1`
     (26px/800/-0.02em), jak na pozostałych ekranach. */
  .org-logo { width: 96px; height: 96px; border-radius: 0; object-fit: cover; border: 2px solid var(--obrys); background: var(--tlo); flex-shrink: 0; box-shadow: 0 8px 22px -14px rgba(11,31,42,0.6); }
  .org-logo-placeholder { width: 96px; height: 96px; border-radius: 0; background: linear-gradient(135deg, var(--deep-baltic), var(--dane-ciemniej)); color: #fff; display: grid; place-items: center; font-size: 40px; font-weight: 800; flex-shrink: 0; box-shadow: 0 8px 22px -14px rgba(11,31,42,0.6); }
  .org-hero h1 { font-size: 26px; font-weight: 800; color: var(--tekst); margin: 0; line-height: 1.13; letter-spacing: -0.02em; }
  .org-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

  /* Rząd statystyk profilu */
  .org-stats { display: flex; gap: 12px; flex-wrap: wrap; }
  .org-stat { flex: 1 1 96px; min-width: 96px; display: flex; flex-direction: column; gap: 2px;
    padding: 12px 16px; border-radius: 0; background: var(--tlo-karta);
    border: 1px solid var(--obrys); }
  .org-stat-num { font-size: 22px; font-weight: 800; color: var(--tekst); line-height: 1.1; letter-spacing: -.01em; }
  .org-stat-lbl { font-size: 12px; font-weight: 600; color: var(--tekst-slabszy); text-transform: uppercase; letter-spacing: .4px; }

  .org-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px 4px 10px; border-radius: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; line-height: 1; }
  .org-badge svg { width: 13px; height: 13px; flex-shrink: 0; }
  /* Kolory taksonomii typu organizatora — celowo hardkodowane (jak kategorie), nie zmienne motywu */
  .org-badge-startup { background: #d1fae5; color: #065f46; }
  .org-badge-university { background: #dbeafe; color: #1e40af; }
  .org-badge-fund { background: #ede9fe; color: #5b21b6; }
  .org-badge-company { background: #ccfbf1; color: #115e59; }
  .org-badge-institution { background: #fef3c7; color: #92400e; }
  .org-badge-municipal { background: #e0e7ff; color: #3730a3; }
  .org-badge-community { background: #fce7f3; color: #9d174d; }
  .org-badge-other { background: #f1f5f9; color: #475569; }
  /* Dark-mode: pastelowe tła #badge tracą kontrast na ciemnym surface — przyciemniamy tło, rozjaśniamy tekst */
  /* .org-link ma color:var(--deep-baltic) (ciemny) — w dark byłby niewidoczny na ciemnym tle */

  .org-city { color: var(--tekst-slabszy); font-size: 13px; font-weight: 500; }
  .org-links { display: flex; flex-wrap: wrap; gap: 8px; }
  .org-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 0; border: 1px solid var(--obrys); font-size: 13px; font-weight: 600; color: var(--deep-baltic); text-decoration: none; transition: all .15s; }
  .org-link:hover { background: var(--deep-baltic); color: #fff; border-color: var(--deep-baltic); }
  .org-link svg { width: 15px; height: 15px; }
  .org-link-social { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: 0; border: 1px solid var(--obrys); font-size: 12px; color: var(--tekst-sredni); text-decoration: none; text-transform: capitalize; transition: all .15s; }
  .org-link-social:hover { background: var(--akcja); color: #fff; border-color: var(--akcja); }

  .org-desc { padding: 20px 22px; background: var(--tlo-karta); border: 1px solid var(--obrys); border-radius: 0; font-size: 15px; color: var(--tekst-sredni); line-height: 1.7; margin-bottom: 24px; }

  .org-section-title { font-size: 20px; font-weight: 800; color: var(--tekst); margin-bottom: 16px; letter-spacing: -.01em; }
  .org-section-title .count { font-weight: 400; font-size: 15px; color: var(--tekst-slabszy); margin-left: 6px; }

  .org-past summary { font-size: 14px; font-weight: 600; color: var(--tekst-sredni); cursor: pointer; padding: 4px 0; margin-bottom: 12px; }

  /* ═══════════════════════════════════════════════════════════════════════
   *  Zgodność z designem witryny
   * ═══════════════════════════════════════════════════════════════════════
   *
   * Komponenty kalendarza (karta wydarzenia, filtry, siatka miesiąca) nie mają
   * odpowiednika na stronie głównej — powstały tutaj. Ta sekcja sprowadza je
   * do JĘZYKA tamtego designu: ostre krawędzie, ramka Sand Line, rdza przy
   * najechaniu, cień wyłącznie w tym stanie.
   *
   * Reguły stoją na końcu pliku celowo — mają wygrać z wcześniejszymi
   * deklaracjami tych samych właściwości bez podnoszenia specyficzności.
   */

  /* ── Krawędzie ──
   * W tym systemie nie ma zaokrągleń. Wyjątkiem są elementy z natury okrągłe
   * (kropka stanu, awatar), które trzymają własne `border-radius: 50%`. */
  .ecard, .place-card, .empty, .cal-cell, .cal-ev, .chip, .chip-toggle,
  .view-switch, .view-switch button, .sidebar-filter, .search-input input,
  .search-input button, .sub-dialog, .sub-opt, .sub-ic, .saved-export,
  .filters-toggle, .ft-count, .date-badge, .date-badge .time, .ereg,
  .gbt-badge, .org-hero, .org-logo, .org-logo-placeholder, .org-stat,
  .org-badge, .org-link, .org-link-social, .org-desc, .egbt-note,
  .submit-form input, .submit-form textarea, .submit-form button,
  .sub-raw-row input, .sub-raw-row button, .digest-tag, .sk-card,
  .empty-state button, .clear, .featured-hero {
    border-radius: 0;
  }

  /* ── Karta wydarzenia = `.gbt-event` z motywu ──
   * Biała powierzchnia, ramka Sand Line, w spoczynku PŁASKA. Przy najechaniu
   * ramka przechodzi w rdzę i dochodzi cień — jedyny moment, gdy karta się
   * unosi. Bez przesunięcia w pionie: motyw go nie stosuje. */
  .ecard {
    background: var(--tlo-karta);
    /* Skrót `border:` resetuje lewą krawędź do 1 px i kasuje pasek kategorii
       ustawiony wyżej — grubość musi wrócić PO skrócie. */
    border: 1px solid var(--obrys);
    border-left-width: 3px;
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }

  .ecard:hover, .ecard:focus-within {
    border-color: var(--akcja);
    box-shadow: var(--cien-hover);
    transform: none;
  }

  /* ── Wyróżnienie GBT: ramka poziomu + gradient (artboard, `decorate()` linia 849) ──
   * MUSI stać za blokiem `.ecard` wyżej: tamten ustawia `background` i skrót
   * `border`, więc przy tej samej specyficzności kasował gradient i beżową ramkę
   * (zmierzone 27.08.2026: `backgroundImage: none` mimo obecnej klasy na 3 kartach).
   * Wartości alfa SĄ Z ARTBOARDU — nie podnosić „dla wyrazistości".
   * Kolejność względem `:hover` jest zamierzona: najechanie ma dawać rdzę,
   * dlatego stan najechania powtarzamy tu jeszcze raz, PO regułach poziomu. */
  .ecard--recommended {
    border-color: #C9A87C;
    background: linear-gradient(90deg, rgba(201,168,124,0.12), var(--tlo-karta) 30%);
  }
  .ecard--supported {
    border-color: var(--akcja-ciemniej);
    background: linear-gradient(90deg, rgba(194,74,42,0.09), var(--tlo-karta) 30%);
  }
  .ecard--recommended:hover, .ecard--recommended:focus-within,
  .ecard--supported:hover, .ecard--supported:focus-within {
    border-color: var(--akcja);
  }

  /* Tytuł ma kolor TEKSTU, nie odnośnika — jak `.gbt-event .wp-block-post-title a`. */
  /* Stopień i trekking tytułu ustala reguła wyżej (wzorzec: clamp(19px,1.5vw,23px),
     letter-spacing -0.03em). Tutaj zostaje wyłącznie KOLOR — nadpisanie stopnia
     zbijało tytuł do 17 px i odbierało mu rolę prowadzącą na liście. */
  .ebody .etitle {
    color: var(--tekst);
  }

  .ebody .etitle:hover {
    color: var(--akcja);
    text-decoration: underline;
  }

  /* Kolumna daty jest definiowana JEDEN raz, wyżej — wg podstron
     „Kalendarz GBT" (bez tła, bez ramki, kreska po prawej). */


  /* ── Znaczniki i pigułki ──
   * Chip z OBRYSEM zamiast wypełnionego bloku — wzór `.gbt-badge` z motywu.
   * Wypełnienie zostaje wyłącznie znakowi jakości GBT, który ma być
   * najsilniejszym sygnałem na karcie. */
  .chip {
    padding: 4px 12px;
    /* 14 px — stopień elementu sterującego z kanonu (`.gbp-btn`).
       12,5 px robiło z chipów drobny druk. */
    font-size: var(--f-s);
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--obrys);
    color: var(--tekst-sredni);
  }

  /* Kolor chipa kategorii ustawia JS (KOLORY_KATEGORII w eventcard.js) — Meetup
     jest stalowy, Warsztaty rdzawe. Rdza na sztywno malowała wszystkie na jeden
     kolor i kasowała ten sygnał. Zostaje tylko brak wypełnienia. */
  .chip.cat {
    background: transparent;
  }

  .chip.tag {
    border-color: var(--poboczne-obrys);
    color: var(--dane-ciemniej);
    background: var(--poboczne);
  }

  .chip.tag:hover { border-color: var(--dane); background: var(--fresh-air); }
  .chip.tag.on { background: var(--dane-ciemniej); border-color: var(--dane-ciemniej); color: #fff; }
  .chip.recurring { border-color: var(--dane); color: var(--dane-ciemniej); background: transparent; }

  /* Znak jakości GBT — jedyny komponent, któremu zostaje pełne wypełnienie. */
  .gbt-badge {
    letter-spacing: 1px;
    font-weight: 700;
    border-width: 1px;
  }

  .gbt-badge.recommended { border-color: var(--akcja); background: var(--akcja); }
  .gbt-badge.supported { border-color: var(--akcja-ciemniej); background: var(--akcja-ciemniej); }
  .gbt-badge.organised { border-color: var(--deep-baltic); background: var(--deep-baltic); }

  /* Przycisk rejestracji — wzór `.gbt-btn`: wypełnienie Rust Deep (5,3:1
     dla bieli), rdza jako stan najechania. */
  .ereg {
    background: var(--akcja-ciemniej);
    color: #fff;
    font-weight: 600;
    font-size: var(--f-xs);
  }

  .ereg:hover { background: var(--akcja); color: #fff; }

  /* Nota o relacji z GBT — wzór `.gbt-nota`: tło Fresh Air 2, krecha ze stali. */
  .egbt-note {
    background: var(--poboczne);
    border-left: 3px solid var(--dane);
    color: var(--tekst-sredni);
  }

  /* ── Filtry w pasku bocznym ──
   * Nadtytuł sekcji wersalikiem, jak `.gbt-eyebrow` na stronie głównej. */
  .sec-title {
    font-size: var(--f-eyebrow);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--akcja);
  }

  .sidebar-eyebrow { margin-bottom: 4px; }

  /* Stan wybrany = lewa krecha w rdzy, nie wypełnione tło. */
  .sidebar-filter {
    border-left: 3px solid transparent;
    transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease; line-height: 15px;
  }

  .sidebar-filter:hover { background: var(--tlo-2); }

  .sidebar-filter.on {
    border-left-color: var(--akcja);
    color: var(--akcja-ciemniej);
    font-weight: 600;
  }

  /* ── Pola formularzy i wyszukiwarka ── */
  .search-input input,
  .submit-form input, .submit-form textarea, .sub-raw-row input {
    border: 1px solid var(--obrys);
    background: var(--tlo-karta);
    font-family: inherit;
  }

  .search-input input:focus-visible,
  .submit-form input:focus-visible, .submit-form textarea:focus-visible {
    outline: 2px solid var(--akcja);
    outline-offset: -2px;
  }

  /* ── Przełącznik widoków ──
   * Ostry segment; wybrany bierze granat, nie rdzę — rdza znaczy DZIAŁANIE,
   * a to jest stan nawigacji. */
  .view-switch {
    border: 1px solid var(--obrys);
    background: var(--tlo-karta);
    padding: 3px;
  }

  .view-switch button {
    font-size: 13px;
    font-weight: 600;
    padding: 6px 15px; line-height: 17px; display: inline-flex; align-items: center;
  }

  .view-switch button[aria-selected="true"],
  .view-switch button.on {
    background: var(--deep-baltic);
    color: #fff;
  }

  /* ── Przyciski przełączające (Bezpłatne, Wymaga rejestracji) ── */
  .chip-toggle {
    border: 1px solid var(--obrys);
    background: var(--tlo-karta);
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 14px; line-height: 15px;
  }

  .chip-toggle:hover { border-color: var(--akcja); color: var(--akcja); }

  .chip-toggle[aria-pressed="true"] {
    background: var(--akcja-ciemniej);
    border-color: var(--akcja-ciemniej);
    color: #fff;
  }

  /* ── Siatka miesiąca ── */
  .cal-cell {
    border: 1px solid var(--obrys);
    background: var(--tlo-karta);
  }

  .cal-month h3 {
    font-size: var(--f-l);
    font-weight: 700;
  }

  .cal-dow {
    font-size: var(--f-eyebrow);
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--tekst-slabszy);
  }

  .cal-ev {
    background: var(--poboczne);
    color: var(--dane-ciemniej);
    border-left: 2px solid var(--dane);
  }

  .cal-ev.gbt {
    background: transparent;
    border-left-color: var(--akcja);
    color: var(--akcja-ciemniej);
    font-weight: 600;
  }

  /* ── Karta miejsca i modale ── */
  .place-card, .sub-dialog, .empty, .sub-opt {
    background: var(--tlo-karta);
    border: 1px solid var(--obrys);
  }

  .sub-opt:hover { border-color: var(--akcja); }

  /* Nagłówek modala = nagłówek ekranu ze wzorca: 26px/800/-0.02em.
     var(--f-h34) dawało 32 px — o stopień więcej niż wszystkie ekrany. */
  .sub-dialog h2 { font-size: 26px; letter-spacing: -0.02em; }

  /* ── Sekcja integratorów ──
   * Pełnoszerokościowy pas na granacie z kaflami — wzór „Cztery wejścia".
   * Wychodzi poza kolumnę treści, bo sekcje witryny są pełnej szerokości. */
  /*
   * Sekcja stoi w kolumnie treści (`main`, 1000 px), a ma być pasem na PEŁNĄ
   * szerokość okna — jak sekcje strony głównej. Ujemne marginesy równe
   * paddingowi kolumny wyprowadzają ją poza jej krawędzie, a treść wewnątrz
   * wraca do kolumny 1240 px własnym `max-inline-size`.
   *
   * `100vw` uwzględniałoby pasek przewijania i dawałoby poziomy scroll, więc
   * szerokość liczy się z marginesów, nie z jednostki widoku.
   */
  .partners {
    /*
     * Artboard: sekcja domykająca rozciąga się na szerokość KOLUMNY TREŚCI —
     * po lewej stoi szpalta filtrów, więc pas nie sięga krawędzi okna.
     * Poprzednie `100vw` liczyło od okna i wystawało dokładnie o szerokość
     * szpalty, dając poziomy scroll na desktopie (zmierzone: 1591 vs 1440 px).
     * `main` ma szerokość min(1120px, 100% - 64px) i jest wyśrodkowany w
     * kolumnie — `50% - 50cqw` cofa pas do jej krawędzi.
     */
    margin: var(--odstep-domkniecie) calc(50% - 50cqw) 0;
    width: 100cqw;
    max-width: none;
    padding: var(--sp-50) clamp(20px, 5vw, 40px);
    border-top: 0;
    background: var(--deep-baltic);
    color: #fff;
  }

  .partners > * {
    width: min(1120px, calc(100% - 64px));
    margin-inline: auto;
  }

  /* Kafel jest odnośnikiem — kolor tekstu bierze z komponentu, nie z reguły
     odnośników sekcji ciemnej. */
  .partners .gbt-tile { color: #fff; text-decoration: none; }
  .partners .gbt-tile h3 { color: #fff; }

  /* Głowa sekcji: nagłówek i nota siedzą w osobnych kolumnach, więc żadne
     z nich nie potrzebuje własnego marginesu dolnego — odstęp do siatki
     kafli daje sama głowa. */
  .partners__glowa { margin-bottom: var(--odstep-ciag); }
  .partners__glowa h2 { margin-bottom: 0; }

  /* Nota na granacie: Fresh Air trzyma 11,59:1, rdza dałaby 3,7:1. */
  .partners__nota {
    font-size: var(--f-lead);
    line-height: 1.72;
    color: var(--fresh-air);
    margin: 0;
  }

  /* Wzorzec (pas domykajacy): 54px/700, line-height 1.04 = 56,16 px.
     Produkcja miala 800 i 1.08 (58,32 px). */
  .partners h2 {
    /* Stopień H2 z kanonu (§4). Nagłówek sekcji ma być wyraźnie niżej
       w hierarchii niż H1 pasa tytułowego, ale wyżej niż tytuł karty. */
    font-size: var(--f-h2);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-transform: none;
    color: #fff;
    max-inline-size: 20ch;
    margin: 14px 0 var(--odstep-ciag);
  }

  .partners .gbt-eyebrow { color: var(--fresh-air); }

  /* ── Pas tytułowy: liczby ──
   * Pokazują się dopiero, gdy dane dojdą — pusty pas z myślnikami wygląda
   * jak awaria, a nie jak ładowanie. */
  #pagehead-stats[hidden] { display: none; }

  /*
   * Wariant wąskiego ekranu dla pasa sekcji.
   *
   * Reguła musi stać PO bloku desktopowym: obie mają tę samą wagę, więc
   * o wyniku decyduje kolejność, nie obecność media query. Wcześniej ta
   * reguła stała wyżej w pliku i była nadpisywana — pas wychodził 266 px
   * poza lewą krawędź telefonu.
   *
   * Pasek boczny jest tu wysuwaną szufladą (poza układem), więc pas wychodzi
   * wyłącznie o padding kolumny: 22 px, bez szerokości sidebara.
   */
  @media (max-width: 900px) {
    .partners > * { width: calc(100% - 40px); }
  }