/* ==========================================================================
   core/web-app/assets/sections.css — CSS biblioteki sekcji silnika (WAS-03)

   KONTRAKT (docs/sections-tokens.md = jedyne źródło nazw tokenów):
   - kolory / rozmiary pisma / odstępy / szerokości / kroje WYŁĄCZNIE przez
     var(--<token>, <fallback>) z rodziny --c-* / --fs-* / --space-* /
     --content-width / --narrow-width / --prose-width / --font-*;
   - zero hex poza fallbackiem wewnątrz var(...) (neutralne szarości) i komentarzami;
   - zero dekorów, logotypów, kolorów i nazw jakiejkolwiek marki — brand wnosi
     instancja przez tokeny + mostek (docs/sections-tokens.md §„Mostek instancji”);
   - ten plik NIE definiuje wartości tokenów (brak :root{...}) — fallback ≠ domyślna
     wartość marki.

   DROGA DO DOCROOTA: instancja linkuje ten plik jako /assets/engine/sections.css
   (symlink assets/engine → core/web-app/assets ze scaffoldu new-web-app.sh; deploy
   rsync -L). head.twig silnika emituje <link> TYLKO za SECTIONS_LIBRARY=true w .env.
   KASKADA: _tokens.css → mostek instancji → ten plik → assets/css/site.css instancji.

   STRUKTURA: BAZA (poniżej) + po jednym bloku per typ (dopisują WAS-05+; korzeń
   .section-<typ>, BEM .<skrót>__*, patrz templates/sections/README.md reguła 5).
   ========================================================================== */

/* === BAZA: .section, .section__inner, .section__head === */

.section {
  padding-block: var(--space-xl, 4rem);
  background: var(--c-bg, #fff);
  color: var(--c-text, #1a1a1a);
  font-family: var(--font-body, inherit);
  font-size: var(--fs-body, 1rem);
}

/* Sekcja wyróżniona tłem (naprzemienne pasy) */
.section--surface {
  background: var(--c-surface, #f4f4f4);
}

/* Sekcja „odwrócona” — tło akcentu, tekst na akcencie (np. CTA) */
.section--accent {
  background: var(--c-accent, #333);
  color: var(--c-on-accent, #fff);
}

/* Kontener: szerokość układu = ISTNIEJĄCE tokeny silnika (bez nowych nazw) */
.section__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--content-width, 920px);
  margin-inline: auto;
  padding-inline: var(--space-gutter, 1.25rem);
}

.section__inner--narrow {
  max-width: var(--narrow-width, 560px);
}

.section__inner--prose {
  max-width: var(--prose-width, 760px);
}

/* Nagłówek sekcji: tytuł + lead */
.section__head {
  margin-block-end: var(--space-lg, 2rem);
}

.section__title {
  margin: 0 0 var(--space-sm, 0.5rem);
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h2, 1.75rem);
  line-height: 1.2;
}

.section--accent .section__title {
  color: inherit;
}

.section__lead {
  margin: 0;
  max-width: var(--prose-width, 760px);
  color: var(--c-text-muted, #666);
  font-size: var(--fs-lead, 1.25rem);
  line-height: 1.5;
}

.section--accent .section__lead {
  color: inherit;
}

/* Wspólne: linki i focus wewnątrz sekcji (dostępność, reguła 6 README).
   WAS-05: pismo linków = --c-link (fallback: kolor nagłówka), NIE --c-accent — akcent jest
   tłem/plamą, nie pismem (docs/sections-tokens.md §Rozstrzygnięcie --c-link). */
.section a {
  color: var(--c-link, var(--c-heading, #111));
}

.section--accent a {
  color: inherit;
}

.section :focus-visible {
  outline: 2px solid var(--c-focus, #555);
  outline-offset: 2px;
}

/* === TYPY: dopisują WAS-05 (hero, factbar, idea, value-cards, cta), WAS-06, WAS-07, WAS-13 === */

/* === WSPÓLNE: eyebrow, akcent nagłówka, przyciski (WAS-05; współdzielone przez typy) === */

/* Nadtytuł nad nagłówkiem (eyebrow / lab): drobny, kapitaliki, przyciszony */
.section__eyebrow {
  margin: 0 0 var(--space-sm, 0.5rem);
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Wyróżniona część nagłówka (title_accent / heading_accent): TYPOGRAFICZNIE (kursywa),
   color: inherit — nie kolorem akcentu (akcent = plama, docs/sections-tokens.md). */
.section__accent {
  color: inherit;
  font-style: italic;
}

/* Przyciski: .btn + modyfikator --primary | --secondary | --ghost (pole `style` w cta[]/buttons[]).
   Selektor `.section .btn` (0,2,0) celowo bije `.section a` (0,1,1) — kolor przycisku nie może
   wracać do koloru linku. Kolory wyłącznie --c-accent / --c-on-accent / --c-border. */
.section .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs, 0.25rem);
  padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
  border: 1px solid transparent;
  border-radius: 0.25rem;
  color: inherit;
  font-family: var(--font-body, inherit);
  font-size: var(--fs-body, 1rem);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
}

.section .btn--primary {
  background: var(--c-accent, #333);
  border-color: var(--c-accent, #333);
  color: var(--c-on-accent, #fff);
}

.section .btn--secondary {
  background: transparent;
  border-color: var(--c-border, #d9d9d9);
  color: inherit;
}

.section .btn--ghost {
  background: transparent;
  border-color: transparent;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.section .btn:hover,
.section .btn:focus-visible {
  filter: brightness(0.92);
}

/* Wspólne: lista bez markerów (stats, karty, linki) — reset, semantyka zostaje */
.section__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* === SEKCJA: hero (WAS-05) ===
   eyebrow · badge · h1 (+akcent) · lead · cta[] · stats[] · media (opc.).
   Grid 2 kolumny od 960 px (kopia | media), 1 kolumna poniżej. Wariant `tone: dark` =
   klasa `.section-hero--dark` BEZ reguły w tym pliku — tokeny wariantu podaje instancja
   (docs/sections-tokens.md §Warianty). */

.section-hero {
  padding-block: var(--space-2xl, 6rem);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg, 2rem);
  align-items: start;
}

@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

.hero__copy {
  max-width: var(--prose-width, 760px);
}

.hero__badge {
  display: inline-block;
  margin-block-end: var(--space-md, 1rem);
  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
  border: 1px solid var(--c-border, #d9d9d9);
  border-radius: 999px;
  color: var(--c-text, #1a1a1a);
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.3;
}

.hero__title {
  margin: 0;
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h1, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.hero__lead {
  margin-block-start: var(--space-md, 1rem);
  color: var(--c-text-muted, #666);
  font-size: var(--fs-lead, 1.25rem);
  line-height: 1.5;
}

.hero__lead > :first-child { margin-block-start: 0; }
.hero__lead > :last-child  { margin-block-end: 0; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 0.5rem) var(--space-md, 1rem);
  margin-block-start: var(--space-lg, 2rem);
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md, 1rem) var(--space-lg, 2rem);
  margin-block-start: var(--space-lg, 2rem);
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.25rem);
}

.hero__stat-value {
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h2, 1.75rem);
  font-weight: 700;
  line-height: 1;
  overflow-wrap: anywhere;
}

.hero__stat-label {
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero__media {
  margin: 0;
}

.hero__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* === SEKCJA: factbar (WAS-05) ===
   eyebrow · h2 (+akcent) · intro · stats[] — pasek liczb: flex wrap, komórki na --c-surface,
   siatka linii z --c-border (gap 1px na tle koloru linii). */

.factbar__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  border: 1px solid var(--c-border, #d9d9d9);
  background: var(--c-border, #d9d9d9);
}

.factbar__stat {
  flex: 1 1 10rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.5rem);
  min-width: 0;
  padding: var(--space-lg, 2rem) var(--space-md, 1rem);
  background: var(--c-surface, #f4f4f4);
}

.factbar__value {
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-display, 3rem);
  font-weight: 700;
  line-height: 1;
  overflow-wrap: anywhere;
}

/* fraza zamiast liczby (np. „poza metropoliami”): mniejszy stopień, łamanie po słowach */
.factbar__value--text {
  font-size: var(--fs-h2, 1.75rem);
  line-height: 1.15;
}

.factbar__label {
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.4;
}

/* === SEKCJA: idea (WAS-05) ===
   lab · h2 (+akcent) · quote (opc.) · copy[] · link (opc.) · foto (opc., <figure> z podpisem).
   2 kolumny od 768 px: bez foto = quote | copy; z foto (.section-idea--foto) = tekst | foto. */

.section-idea {
  border-block: 1px solid var(--c-border, #d9d9d9);
}

.idea__lab {
  border-left: 2px solid var(--c-accent, #333);
  padding-left: var(--space-sm, 0.5rem);
}

.idea__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg, 2rem);
  align-items: start;
}

@media (min-width: 768px) {
  .idea__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .section-idea--foto .idea__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .section-idea--foto .idea__foto {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
  .section-idea--foto .idea__quote,
  .section-idea--foto .idea__copy,
  .section-idea--foto .idea__link {
    grid-column: 1;
  }
}

.idea__quote {
  margin: 0;
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h2, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.idea__quote p { margin: 0; }

.idea__copy {
  max-width: var(--prose-width, 760px);
  line-height: 1.6;
}

.idea__copy > :first-child { margin-block-start: 0; }
.idea__copy > :last-child  { margin-block-end: 0; }
.idea__copy p + p { margin-block-start: var(--space-md, 1rem); }

.idea__link {
  margin: 0;
  font-weight: 600;
}

.idea__foto {
  margin: 0;
}

.idea__foto img {
  display: block;
  width: 100%;
  height: auto;
}

.idea__caption {
  margin-block-start: var(--space-sm, 0.5rem);
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.4;
}

/* === SEKCJA: value-cards (WAS-05) ===
   h2 (+akcent) · intro · cards[]{num, icon, title, body, links[]} — siatka auto-fit
   minmax(16rem, 1fr) (min(16rem,100%) chroni przed przepełnieniem poniżej 16rem + gutter). */

.vc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-md, 1rem);
}

.vc__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.5rem);
  min-width: 0;
  padding: var(--space-lg, 2rem);
  border: 1px solid var(--c-border, #d9d9d9);
  background: var(--c-surface, #f4f4f4);
}

.vc__icon {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
}

.vc__num {
  color: var(--c-text-muted, #666);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h3, 1.25rem);
  font-weight: 700;
  line-height: 1;
}

.vc__title {
  margin: 0;
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h3, 1.25rem);
  line-height: 1.25;
}

.vc__body {
  color: var(--c-text, #1a1a1a);
  line-height: 1.55;
}

.vc__body > :first-child { margin-block-start: 0; }
.vc__body > :last-child  { margin-block-end: 0; }

.vc__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs, 0.25rem) var(--space-md, 1rem);
  margin-block-start: auto;
  padding-block-start: var(--space-sm, 0.5rem);
  font-weight: 600;
}

/* === SEKCJA: cta (WAS-05) ===
   eyebrow · h2 (+akcent) · sub · buttons[] · note — centrowane, wąski kontener, panel z ramką. */

.section-cta {
  text-align: center;
}

.cta__inner {
  padding: var(--space-xl, 4rem) var(--space-lg, 2rem);
  border: 1px solid var(--c-border, #d9d9d9);
  background: var(--c-surface, #f4f4f4);
}

.cta__title {
  margin: 0;
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h1, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.cta__sub {
  max-width: var(--prose-width, 760px);
  margin: var(--space-md, 1rem) auto 0;
  color: var(--c-text-muted, #666);
  font-size: var(--fs-lead, 1.25rem);
  line-height: 1.5;
}

.cta__sub > :first-child { margin-block-start: 0; }
.cta__sub > :last-child  { margin-block-end: 0; }

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm, 0.5rem) var(--space-md, 1rem);
  margin-block-start: var(--space-lg, 2rem);
}

.cta__note {
  margin-block-start: var(--space-md, 1rem);
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.4;
}

.cta__note > :first-child { margin-block-start: 0; }
.cta__note > :last-child  { margin-block-end: 0; }

/* === WSPÓLNE: portret 4:5 (WAS-06; person-grid + speaker-grid, makro templates/sections/_portrait.twig) ===
   Kadr rezerwuje miejsce KONTENEREM (.portrait: aspect-ratio 4/5) — deklaracja na <img> z width/height 100%
   byłaby ignorowana (oba wymiary definite). Trzy gałęzie: photo (cover) → obraz zastępczy instancji
   (--fallback, contain: sygnet nie może być kadrowany) → inicjały. Kadrowanie źródłowe = core/image-lab. */

.portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-surface, #f4f4f4);
}

.portrait__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait__img--fallback {
  width: 50%;
  height: 50%;
  object-fit: contain;
}

.portrait__initials {
  color: var(--c-text-muted, #666);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-display, 3rem);
  font-weight: 700;
  line-height: 1;
}

/* === SEKCJA: location (WAS-06) ===
   h2 (+akcent) · intro · mapa (iframe z map_embed; opc.) · venue/date · pins[] · note · rows[] (kafle).
   Siatka mapa | info od 768 px (tylko z mapą: .section-location--map), 1 kolumna poniżej i bez mapy.
   Mapa = iframe bez JS; adres tekstowy ZAWSZE obok (alternatywa tekstowa). */

.loc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg, 2rem);
  align-items: start;
}

@media (min-width: 768px) {
  .section-location--map .loc__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.loc__map {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--c-border, #d9d9d9);
  background: var(--c-surface, #f4f4f4);
  overflow: hidden;
}

.loc__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* WAS-34: mapa OSM na klik (opt-in `map_click_to_load`). `.loc__map` zostaje `aspect-ratio`-owym pudełkiem
   (reguła wyżej) — placeholder wypełnia dokładnie tę samą przestrzeń co iframe, więc kliknięcie „Pokaż mapę”
   nie przesuwa układu strony (CLS 0). Przycisk reużywa `.btn--primary` (spójność z resztą sekcji). */
.loc__map--click {
  position: relative;
}

.loc__map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm, 0.75rem);
  padding: var(--space-md, 1rem);
  text-align: center;
}

/* `display: flex` wyżej ma tę samą specyficzność co domyślne `[hidden] { display: none }` przeglądarki —
   bez tej reguły JS-owe `placeholder.hidden = true` (map-click.js) NIE chowa placeholdera wizualnie mimo
   ustawionego atrybutu (złapane w trakcie realnym renderem Playwrightem, nie założeniem). */
.loc__map-placeholder[hidden] {
  display: none;
}

.loc__map-hint {
  max-width: 32ch;
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
}

.loc__map-link {
  color: inherit;
  text-decoration: underline;
}

.loc__venue {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.25rem);
  font-style: normal;
}

.loc__name {
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h3, 1.25rem);
  font-weight: 700;
  line-height: 1.2;
}

.loc__addr {
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.45;
}

/* WAS-18: `venue.address_href` → adres jako link; kolor = link sekcji (`.section a`), bez nowych kolorów —
   reguła tylko pilnuje zawijania długich adresów. Klasa istnieje wyłącznie przy ustawionym polu. */
.loc__addr-link {
  overflow-wrap: anywhere;
}

/* WAS-26: `venue.address_note` (mikrotekst PO adresie, poza `<a>`) i `venue.city_own_line` (`venue.city` w
   osobnym elemencie zamiast dopisku „ · city”). Domyślny wygląd = jak `.loc__addr` (mikrotekst muted); instancja
   nadpisuje kolor/rozmiar wg własnych stopni (np. FBiOL PW-181 podnosi oba do wielkości adresu na `#praktycznie`/
   `#miejsce`/`#adres`). Klasy istnieją wyłącznie przy ustawionym polu. */
.loc__addr-note {
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
}

.loc__city {
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
}

.loc__date {
  margin-block-start: var(--space-xs, 0.25rem);
  color: var(--c-text, #1a1a1a);
  font-size: var(--fs-sm, 0.875rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.loc__pins {
  margin-block-start: var(--space-md, 1rem);
  border-block-start: 1px solid var(--c-border, #d9d9d9);
}

.loc__pin {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.25rem);
  padding-block: var(--space-sm, 0.5rem);
  border-block-end: 1px solid var(--c-border, #d9d9d9);
}

.loc__pin-label {
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.loc__pin-name {
  color: var(--c-heading, #111);
  font-weight: 600;
  line-height: 1.3;
}

.loc__pin-addr,
.loc__pin-note {
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.45;
}

.loc__pin-nav {
  align-self: flex-start;
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 600;
}

.loc__note {
  margin-block-start: var(--space-md, 1rem);
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.5;
}

.loc__note > :first-child { margin-block-start: 0; }
.loc__note > :last-child  { margin-block-end: 0; }

/* kafle rows[] (dojazd / dostępność / identyfikator): auto-fit jak value-cards */
.loc__rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--space-md, 1rem);
  margin-block-start: var(--space-lg, 2rem);
}

.loc__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.5rem);
  min-width: 0;
  padding: var(--space-md, 1rem);
  border: 1px solid var(--c-border, #d9d9d9);
  background: var(--c-surface, #f4f4f4);
}

.loc__row-label {
  margin: 0;
  color: var(--c-text-muted, #666);
  font-family: var(--font-body, inherit);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.loc__row-text {
  line-height: 1.5;
}

.loc__row-text > :first-child { margin-block-start: 0; }
.loc__row-text > :last-child  { margin-block-end: 0; }

/* === SEKCJA: event-list (WAS-06) ===
   h2 (+akcent) · intro · events[]{date, edition, …, status, cta} · note.
   Wiersz: data | treść | status+cta (grid 3 kolumny od 768 px, stała kolumna daty 8rem = wyrównanie między
   wierszami; kolumna poniżej). Statusy = haki
   `.ev__status--open|closed|soon|past` (enum `status_style`): silnik różnicuje je TYLKO obrysem/pismem
   na tokenach; kolor stanu (np. zielony „otwarte”) = instancja w site.css. */

.ev__list {
  border-block-start: 1px solid var(--c-border, #d9d9d9);
}

.ev__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm, 0.5rem) var(--space-lg, 2rem);
  padding-block: var(--space-md, 1rem);
  border-block-end: 1px solid var(--c-border, #d9d9d9);
}

@media (min-width: 768px) {
  .ev__row {
    grid-template-columns: 8rem minmax(0, 1fr) auto;
    align-items: center;
  }
}

.ev__date {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.25rem);
}

.ev__day {
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h2, 1.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.ev__date-sub {
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ev__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.25rem);
  min-width: 0;
}

.ev__title {
  margin: 0;
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h3, 1.25rem);
  line-height: 1.2;
}

.ev__sep {
  color: var(--c-text-muted, #666);
  font-weight: 400;
}

.ev__topic {
  margin: 0;
  color: var(--c-text-muted, #666);
  line-height: 1.5;
}

.ev__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
}

.ev__tag {
  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
  border: 1px solid var(--c-border, #d9d9d9);
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.3;
}

.ev__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm, 0.5rem) var(--space-md, 1rem);
}

@media (min-width: 768px) {
  .ev__aside {
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }
}

.ev__status {
  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
  border: 1px solid var(--c-border, #d9d9d9);
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ev__status--open {
  border-color: var(--c-accent, #333);
  color: var(--c-text, #1a1a1a);
}

.ev__status--soon {
  border-style: dashed;
}

/* closed/past: przyciszenie OBRYSEM (kropkowany), nie pismem — `opacity` na --c-text-muted dawało 3,0:1
   (recenzja jakości WAS-06); pismo zostaje --c-text-muted = 5,74:1 na --c-bg (fallbacki #666/#fff). */
.ev__status--closed,
.ev__status--past {
  border-style: dotted;
}

.ev__cta {
  font-weight: 600;
  white-space: nowrap;
}

.ev__note {
  margin-block-start: var(--space-md, 1rem);
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.5;
}

.ev__note > :first-child { margin-block-start: 0; }
.ev__note > :last-child  { margin-block-end: 0; }

/* === SEKCJA: person-grid (WAS-06) ===
   h2 (+akcent) · intro · people[]{portret (makro .portrait), name, role, bio, cta, links[]} · cols.
   Siatka auto-fill minmax(13rem) (auto-fill: 1–2 osoby NIE rozciągają się na całą szerokość); `cols` (2–6) = stała liczba kolumn od 960 px (atrybut data-cols).
   Kafel z `href` = jeden <a class="pg__link"> (portret + tekst); links[] poza nim (bez zagnieżdżeń). */

.pg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
  gap: var(--space-md, 1rem);
}

@media (min-width: 960px) {
  .pg__grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg__grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg__grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg__grid[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pg__grid[data-cols="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.pg__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--c-border, #d9d9d9);
  background: var(--c-bg, #fff);
}

.pg__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-decoration: none;
}

/* (0,2,0) bije `.section a` (0,1,1): kafel-link (person/speaker/partner) dziedziczy kolor tekstu, nie linku */
.section .pg__link,
.section .sg__link,
.section .plg__mark {
  color: inherit;
}

.pg__card--link:hover,
.pg__card--link:focus-within {
  border-color: var(--c-accent, #333);
}

.pg__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--space-xs, 0.25rem);
  padding: var(--space-md, 1rem);
}

.pg__name {
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h3, 1.25rem);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.pg__role {
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pg__bio {
  margin-block-start: var(--space-xs, 0.25rem);
  color: var(--c-text, #1a1a1a);
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.5;
}

.pg__bio > :first-child { margin-block-start: 0; }
.pg__bio > :last-child  { margin-block-end: 0; }

.pg__cta {
  margin-block-start: auto;
  padding-block-start: var(--space-sm, 0.5rem);
  color: var(--c-link, var(--c-heading, #111));
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pg__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs, 0.25rem) var(--space-md, 1rem);
  padding: 0 var(--space-md, 1rem) var(--space-md, 1rem);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 600;
}

/* === SEKCJA: speaker-grid (WAS-06) ===
   h2 (+akcent) · intro · groups[]{label (h3), speakers[]} lub speakers[] · more{label, href}.
   Karta: portret (makro .portrait) · degree + name · role · affiliation · panel. Siatka auto-fill minmax(11rem). */

.sg__group + .sg__group {
  margin-block-start: var(--space-lg, 2rem);
}

.sg__group-label {
  margin: 0 0 var(--space-md, 1rem);
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h3, 1.25rem);
  line-height: 1.25;
}

.sg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-md, 1rem);
}

.sg__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--c-border, #d9d9d9);
  background: var(--c-bg, #fff);
}

.sg__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-decoration: none;
}

/* WAS-18: `card_label` — wezwanie na kafelku z href; `.sg__link` jest już flex-column, więc margin-block-start:auto
   dosuwa je do dołu kafla (wyrównanie w rzędzie). Klasa istnieje wyłącznie przy ustawionym polu. */
.sg__card-cta {
  margin-block-start: auto;
  padding: 0 var(--space-md, 1rem) var(--space-md, 1rem);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 600;
}

.sg__card--link:hover,
.sg__card--link:focus-within {
  border-color: var(--c-accent, #333);
}

.sg__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.25rem);
  padding: var(--space-md, 1rem);
}

.sg__name {
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-body, 1rem);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sg__degree {
  font-weight: 400;
}

.sg__role,
.sg__affiliation {
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.4;
}

.sg__panel {
  align-self: flex-start;
  margin-block-start: var(--space-xs, 0.25rem);
  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
  border: 1px solid var(--c-border, #d9d9d9);
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sg__more {
  margin: var(--space-lg, 2rem) 0 0;
  text-align: center;
}

/* === SEKCJA: partner-grid (WAS-06) ===
   h2 (+akcent) · intro · groups[]{label (h3), partners[]} lub partners[].
   Kafel = jasna płyta --c-surface z obrysem --c-border; logotyp object-fit: contain w stałym slocie 3rem wysokości
   (proporcje znaków różne per partner — bez aspect-ratio); brak logo = nazwa tekstem w tej samej płycie;
   `show_name` = nazwa POD znakiem; `caption` = osoba/funkcja pod nazwą. Siatka auto-fill minmax(10rem)
   (auto-fill: pojedynczy partner w grupie zostaje kaflem, nie płytą na całą szerokość). */

.plg__group + .plg__group {
  margin-block-start: var(--space-lg, 2rem);
}

.plg__group-label {
  margin: 0 0 var(--space-md, 1rem);
  color: var(--c-text-muted, #666);
  font-family: var(--font-body, inherit);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
  gap: var(--space-sm, 0.5rem);
}

.plg__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm, 0.5rem);
  min-width: 0;
  min-height: 6rem;
  padding: var(--space-md, 1rem);
  border: 1px solid var(--c-border, #d9d9d9);
  background: var(--c-surface, #f4f4f4);
  text-align: center;
}

.plg__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  text-decoration: none;
}

/* slot znaku = stałe 3rem wysokości na <img>; `.plg__mark` ma min-height (nie height), żeby długa nazwa
   w gałęzi tekstowej łamała się w dół zamiast przelewać na .plg__caption (recenzja jakości WAS-06) */
.plg__logo {
  display: block;
  max-width: 100%;
  max-height: 3rem;
  object-fit: contain;
}

.plg__name {
  color: var(--c-heading, #111);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.plg__label {
  color: var(--c-text, #1a1a1a);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 600;
  line-height: 1.3;
}

.plg__caption {
  max-width: 24ch;
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.35;
}

/* === SEKCJA: schedule (WAS-07) ===
   h2 (+akcent) · intro · heading_link · days[]{date, label, topic, anchor, slots[]} · disclaimer · aktualizacja.
   Oś dnia: wiersz = kolumna godzin (stała 7rem od 768 px = wyrównanie między wierszami) | treść; poniżej 768 px
   godzina nad treścią. Dzień = nagłówek h3 (data + dzień tygodnia + motyw) + lista wierszy z separatorami
   --c-border. Wiersz-separator `.sch__row--przerwa` = kursywa, przyciszony. `.section-schedule--compact`
   (pole `compact`) = ciaśniejsze wiersze; ukrycie `opis`/`prelegenci`/`moderacja`/`tags` robi MAKRO
   (_schedule-row.twig — nie renderuje), CSS tylko dosuwa. Numer panelu `.sch__num` = tekst wyróżniony
   (dekor numeru = instancja). Pasek dni `.sch__days` = linki kotwicowe (nawigacja, nie taby JS). */

.sch__head-link {
  margin: var(--space-sm, 0.5rem) 0 0;
}

/* WAS-18: `link_position: bottom` — ten sam przycisk co w nagłówku, pod ostatnim dniem (przed .sch__foot). */
.sch__foot-link {
  margin: var(--space-lg, 2rem) 0 0;
}

.sch__days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 0.5rem);
  margin-block-end: var(--space-lg, 2rem);
}

.section .sch__day-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs, 0.25rem);
  padding: var(--space-xs, 0.25rem) var(--space-md, 1rem);
  border: 1px solid var(--c-border, #d9d9d9);
  color: var(--c-text, #1a1a1a);
  font-size: var(--fs-sm, 0.875rem);
  text-decoration: none;
}

.section .sch__day-link:hover,
.section .sch__day-link:focus-visible {
  border-color: var(--c-accent, #333);
}

.sch__day-link-date {
  font-weight: 700;
}

.sch__day-link-label {
  color: var(--c-text-muted, #666);
}

.sch__day + .sch__day {
  margin-block-start: var(--space-xl, 4rem);
}

.sch__day-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs, 0.25rem) var(--space-md, 1rem);
  padding-block-end: var(--space-sm, 0.5rem);
  border-block-end: 2px solid var(--c-heading, #111);
}

.sch__day-title {
  margin: 0;
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h3, 1.25rem);
  line-height: 1.2;
}

.sch__date {
  font-size: var(--fs-h2, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sch__day-label {
  color: var(--c-text-muted, #666);
  font-weight: 400;
}

.sch__topic {
  margin: 0;
  color: var(--c-text-muted, #666);
}

.sch__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs, 0.25rem) var(--space-lg, 2rem);
  padding-block: var(--space-md, 1rem);
  border-block-end: 1px solid var(--c-border, #d9d9d9);
}

@media (min-width: 768px) {
  .sch__row {
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: start;
  }
}

.section-schedule--compact .sch__row {
  padding-block: var(--space-sm, 0.5rem);
}

.sch__time {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.sch__time-end {
  color: var(--c-text-muted, #666);
  font-weight: 400;
}

.sch__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.25rem);
  min-width: 0;
}

.sch__title {
  margin: 0;
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h3, 1.25rem);
  line-height: 1.25;
}

.sch__num {
  display: inline-block;
  min-width: 2ch;
  color: var(--c-text-muted, #666);
  font-variant-numeric: tabular-nums;
}

.sch__row--cancelled .sch__title-text {
  text-decoration: line-through;
  color: var(--c-text-muted, #666);
}

.sch__cancelled {
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted, #666);
}

.sch__row--przerwa {
  padding-block: var(--space-sm, 0.5rem);
}

.sch__row--przerwa .sch__time {
  color: var(--c-text-muted, #666);
  font-weight: 400;
}

.sch__break {
  margin: 0;
  color: var(--c-text-muted, #666);
  font-style: italic;
}

.sch__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
}

.sch__tag {
  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
  border: 1px solid var(--c-border, #d9d9d9);
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.3;
}

.sch__who,
.sch__mod,
.sch__lead,
.sch__desc,
.sch__about-label {
  margin: 0;
  line-height: 1.5;
}

.sch__who {
  font-weight: 600;
}

.sch__mod,
.sch__mod-role {
  color: var(--c-text-muted, #666);
}

.sch__mod-label {
  font-size: var(--fs-sm, 0.875rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sch__lead {
  color: var(--c-text-muted, #666);
}

.sch__about-label {
  margin-block-start: var(--space-sm, 0.5rem);
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sch__desc {
  max-width: var(--prose-width, 760px);
}

.sch__foot {
  margin-block-start: var(--space-lg, 2rem);
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.5;
}

.sch__disclaimer > :first-child { margin-block-start: 0; }
.sch__disclaimer > :last-child  { margin-block-end: 0; }

.sch__updated {
  margin: var(--space-xs, 0.25rem) 0 0;
}

/* === SEKCJA: faq (WAS-13) ===
   h2 (+akcent) · intro · items[]{q, a} jako <details name="faq-<uid>"> (grupa wyłączna bez JS) · open_first.
   Kolumna prozy (.section__inner--prose). Wiersz = <summary> z markerem +/− rysowanym pseudo-elementem na tokenach
   (domyślny trójkąt marker ukryty — list-style: none + ::-webkit-details-marker); odpowiedź = proza pod pytaniem.
   Bez animacji (silnik = minimum; instancja dobarwia w site.css). */

.fq__list {
  border-block-start: 1px solid var(--c-border, #d9d9d9);
}

.fq__item {
  border-block-end: 1px solid var(--c-border, #d9d9d9);
}

.fq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md, 1rem);
  padding-block: var(--space-md, 1rem);
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h3, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.fq__q::-webkit-details-marker {
  display: none;
}

/* marker +/− po prawej: „+” zamknięte, „−” otwarte (tekst, nie ikona — bez dekoru instancji) */
.fq__q::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--c-text-muted, #666);
  font-family: var(--font-body, inherit);
  font-weight: 400;
  line-height: 1;
}

.fq__item[open] > .fq__q::after {
  content: "\2212";
}

.fq__a {
  padding-block: 0 var(--space-md, 1rem);
  max-width: var(--prose-width, 760px);
  color: var(--c-text, #1a1a1a);
  line-height: 1.6;
}

.fq__a > :first-child { margin-block-start: 0; }
.fq__a > :last-child  { margin-block-end: 0; }

/* === SEKCJA: news (WAS-13) ===
   h2 (+akcent) · intro · lista wpisów z kolekcji (collection_index): <time> | tytuł-link (h3) | lead · empty_text · more.
   Wiersz = data nad tytułem (kolumna); od 768 px data w stałej kolumnie 8rem po lewej (wyrównanie między wierszami,
   jak event-list). Tytuł = link dziedziczący kolor nagłówka; podkreślenie na hover/focus. */

.nws__list {
  border-block-start: 1px solid var(--c-border, #d9d9d9);
}

.nws__item {
  border-block-end: 1px solid var(--c-border, #d9d9d9);
}

.nws__entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs, 0.25rem) var(--space-lg, 2rem);
  padding-block: var(--space-md, 1rem);
}

@media (min-width: 768px) {
  .nws__entry {
    grid-template-columns: 8rem minmax(0, 1fr);
  }
  .nws__date {
    grid-row: 1 / span 2;
  }
}

.nws__date {
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.nws__title {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h3, 1.25rem);
  line-height: 1.3;
}

.section .nws__link {
  color: var(--c-heading, #111);
  text-decoration: none;
}

.section .nws__link:hover,
.section .nws__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.nws__lead {
  margin: 0;
  max-width: var(--prose-width, 760px);
  color: var(--c-text, #1a1a1a);
  line-height: 1.5;
}

.nws__empty {
  margin: 0;
  color: var(--c-text-muted, #666);
  font-style: italic;
}

.nws__more {
  margin: var(--space-lg, 2rem) 0 0;
}

/* === SEKCJA: edition-switch (WAS-13) ===
   `mode: banner` — pasek w treści: płyta --c-surface z obrysem, tekst + przycisk do edycji bieżącej (flex wrap,
   przycisk po prawej od 768 px). `mode: tiles` — kafle edycji auto-fill minmax(10rem): rok duży, etykieta pod,
   kafel `--current` = obrys --c-accent + etykieta `label_current`; kafel bez href = statyczny (bez hover). */

.edsw__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md, 1rem);
  padding: var(--space-md, 1rem) var(--space-lg, 2rem);
  border: 1px solid var(--c-border, #d9d9d9);
  background: var(--c-surface, #f4f4f4);
}

.edsw__text {
  flex: 1 1 20rem;
  min-width: 0;
  color: var(--c-text, #1a1a1a);
  line-height: 1.5;
}

.edsw__text > :first-child { margin-block-start: 0; }
.edsw__text > :last-child  { margin-block-end: 0; }

.edsw__current {
  flex: 0 0 auto;
}

.edsw__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
  gap: var(--space-sm, 0.5rem);
}

.edsw__tile {
  min-width: 0;
}

.section .edsw__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.25rem);
  height: 100%;
  box-sizing: border-box;
  padding: var(--space-md, 1rem);
  border: 1px solid var(--c-border, #d9d9d9);
  background: var(--c-surface, #f4f4f4);
  color: inherit;
  text-decoration: none;
}

.section a.edsw__link:hover,
.section a.edsw__link:focus-visible {
  border-color: var(--c-accent, #333);
}

.edsw__tile--current .edsw__link {
  border-color: var(--c-accent, #333);
}

.edsw__link--static {
  opacity: 0.7;
}

.edsw__year {
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h2, 1.75rem);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.edsw__label {
  color: var(--c-text, #1a1a1a);
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.35;
}

.edsw__badge {
  margin-block-start: auto;
  padding-block-start: var(--space-xs, 0.25rem);
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* === PAGE: profil (WAS-08) ===
   Page-template templates/profil.twig (nie typ sekcji): portret 4:5 (makro .portrait) + podpis `photo_credit` ·
   h1 (degree + name) · role · affiliation · panel · bio (.prose) · cta (.btn) · links[] · udostępnij · prev/next.
   1 kolumna poniżej 768 px; od 768 px portret | treść (minmax(12rem, 20rem) | 1fr). Każdy element opcjonalny —
   brak pola = brak elementu (szablon), więc tu zero reguł „pustego stanu”. */

.profil {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg, 2rem);
  align-items: start;
}

@media (min-width: 768px) {
  .profil {
    grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr);
  }
}

.profil__media {
  max-width: 20rem;
  min-width: 0;
}

.profil__credit {
  margin: var(--space-xs, 0.25rem) 0 0;
  color: var(--c-text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.4;
}

.profil__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 1rem);
  min-width: 0;
}

.profil__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.25rem);
}

.profil__name {
  margin: 0;
  color: var(--c-heading, #111);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h1, 2.25rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.profil__degree {
  font-weight: 400;
}

.profil__role {
  margin: 0;
  color: var(--c-text, #1a1a1a);
  font-size: var(--fs-lead, 1.25rem);
  line-height: 1.4;
}

.profil__affiliation {
  margin: 0;
  color: var(--c-text-muted, #666);
  line-height: 1.4;
}

.profil__panel {
  margin: var(--space-xs, 0.25rem) 0 0;
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.profil__bio {
  color: var(--c-text, #1a1a1a);
  line-height: 1.6;
}

.profil__bio > :first-child { margin-block-start: 0; }
.profil__bio > :last-child  { margin-block-end: 0; }

.profil__cta {
  margin: 0;
}

.profil__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 0.5rem) var(--space-md, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.profil__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs, 0.25rem);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.profil__link-icon {
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
}

.profil__share {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs, 0.25rem) var(--space-md, 1rem);
  margin: 0;
  padding-block-start: var(--space-md, 1rem);
  border-top: 1px solid var(--c-border, #d9d9d9);
  font-size: var(--fs-sm, 0.875rem);
}

.profil__share-label {
  color: var(--c-text-muted, #666);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.profil__share-url {
  min-width: 0;
  overflow-wrap: anywhere;
}

.profil__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md, 1rem);
  margin-block-start: var(--space-xl, 4rem);
  padding-block-start: var(--space-md, 1rem);
  border-top: 1px solid var(--c-border, #d9d9d9);
}

.profil__nav-link {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Strzałki dekoracyjne: alt-tekst "" (składnia `content: … / ""`) — nazwa linku = sama etykieta.
   Pierwsza deklaracja = fallback dla przeglądarek bez alt-tekstu w `content` (odrzucą drugą). */
.profil__nav-link--prev::before { content: "\2190\00a0"; content: "\2190\00a0" / ""; }
.profil__nav-link--next { margin-inline-start: auto; }
.profil__nav-link--next::after  { content: "\00a0\2192"; content: "\00a0\2192" / ""; }

/* WAS-20: `nav_all` — link „wszystkie profile” MIĘDZY prev i next (kolejność DOM = wizualna). Modyfikator .profil__nav--all
   istnieje tylko przy polu; siatka 3 kolumn trzyma link w środku także bez prev albo next. Poniżej 768 px — jedna kolumna
   (prev do lewej · all na środku · next do prawej), bez zmiany kolejności. */
.profil__nav--all {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
}

.profil__nav--all .profil__nav-link--prev { justify-self: start; }
.profil__nav--all .profil__nav-link--all  { justify-self: center; text-align: center; }
.profil__nav--all .profil__nav-link--next { justify-self: end; text-align: end; margin-inline-start: 0; }

@media (min-width: 768px) {
  .profil__nav--all {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .profil__nav--all .profil__nav-link--prev { grid-column: 1; }
  .profil__nav--all .profil__nav-link--all  { grid-column: 2; }
  .profil__nav--all .profil__nav-link--next { grid-column: 3; }
}

/* WAS-20: udostępnianie jako ikony (opt-in `copy.profil_share_targets` / `copy.profil_share_copy_label`). Ikona = obraz
   instancji; nazwa dostępna = tekst .profil__share-name (ukryty wizualnie, czytany przez czytniki). Pole trafienia ≥ 44 px.
   Przycisk „Kopiuj link” startuje z `hidden` (bez JS niewidoczny — zostaje link .profil__share-page); `.section .btn`
   ustawia display, więc `hidden` trzeba wzmocnić selektorem o wyższej specyficzności. */
.profil__share--icons {
  align-items: center;
}

.profil__share-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs, 0.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.profil__share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
}

.profil__share-icon img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

.profil__share-name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.section .profil__share-copy[hidden],
.profil__share-page[hidden] {
  display: none;
}

/* === BAZA LAYOUTU: .skip-link (WAS-19, WCAG 2.4.1) ===
   Link „przejdź do treści” z templates/layout.twig — renderowany TYLKO gdy instancja poda
   `copy.a11y.skip_link`. Ukryty wizualnie (poza ekranem, NIE display:none — musi być osiągalny Tabem),
   widoczny przy fokusie. Instancja może dostylować w assets/css/site.css. Cel: <main id="main-content" tabindex="-1">. */
.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1000;
  padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
  background: var(--c-bg, #fff);
  color: var(--c-text, #1a1a1a);
  font-family: var(--font-body, inherit);
  transform: translateY(-120%);
}
.skip-link:focus {
  transform: none;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
main[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}

/* === BAZA LAYOUTU: .visually-hidden (WAS-21) ===
   JEDNA klasa silnika ukrywająca tekst wizualnie, ale zostawiająca go w drzewie dostępności (czytnik ekranu
   czyta, np. dopisek „— otwórz pełny rozmiar” w linku galerii z lightboxem). Wzorzec „clip”, NIE display:none
   ani visibility:hidden (te usuwają tekst także z nazwy dostępnej). Kolejne potrzeby (WAS-23) używają TEJ klasy. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* === BAZA LAYOUTU: strona 404 (WAS-22) ===
   templates/404.twig — dawne inline style kleova przeniesione 1:1 do klas (ten sam wygląd instancji bez nadpisań).
   `.not-found__links` = opcjonalna lista copy.not_found.links[] za przyciskiem (brak klucza = brak listy). */
.not-found__inner {
  max-width: var(--narrow-width, 560px);
  text-align: center;
}
.not-found__code {
  justify-content: center;
}
.not-found__title {
  font-size: var(--fs-h1, 2.25rem);
}
.not-found__body {
  margin: 18px 0 28px;
}
.not-found__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm, 0.5rem) var(--space-md, 1rem);
  margin: var(--space-md, 1rem) 0 0;
  padding: 0;
  list-style: none;
}