/**
 * Wizytówka (wpins/person-card) — editorial brutalism, dwie strefy.
 * GŁOWA (czarna, dark-scope): zdjęcie obok + rola + nazwisko + e-mail. Układ przez grid-areas:
 *   desktop = foto pełnej wysokości | (id u góry, mail na dole); mobile = foto+id w rzędzie, mail
 *   pełną szerokością pod spodem + mniejsze fonty. Zdjęcie skaluje się (clamp), nie stackujemy.
 * INFO (jasna, tokeny motywu): dyżury/konsultacje — czytelne, dowolnej długości. Radius 0.
 */

.wpins-person {
  margin: 0 0 1.25rem;
  border: 1px solid var(--color-wpins-border);
  overflow: hidden;
  /* Układ reaguje na szerokość KARTY, nie viewportu — karta działa też 2-up / w kolumnach. */
  container-type: inline-size;
}
/* Pełna karta: tło czarne + kolumna flex. Dyżury NIE są już przyklejane do dołu przez
   margin-top:auto — pchało to pasek dyżurów na spód z pustką w ŚRODKU karty („odklejony" bar
   nad treścią). Teraz dyżury siedzą tuż pod treścią; ewentualna nadwyżka wysokości (równanie
   kart JS) ląduje na dole karty — czerń na czerni, więc niewidoczna. */
.wpins-person:not(.wpins-person--compact) {
  background: #000;
  display: flex;
  flex-direction: column;
}
/* Pełne karty w siatce/kolumnach 2-up: NIE rozciągaj kontenera (otwarcie accordionu rośnie TYLKO
   swoją kartą, nie sprzęga sąsiada). Równą wysokość ZAMKNIĘTYCH kart robi JS (min-height liczony
   bez rozwiniętego panelu) — czysty CSS nie pogodzi „równe + niezależne".
   Filtr :not(--compact) → katalog (compact) zostaje stretch, jego nie dotyczy. */
.wp-block-columns:has(.wpins-person:not(.wpins-person--compact)) { align-items: flex-start; }
.wpins-person-grid__items:has(.wpins-person:not(.wpins-person--compact)) { align-items: start; }
.wpins-person-grid__items > .wpins-person:not(.wpins-person--compact) { height: auto; }
/* Głowa wypełnia wyrównaną (JS) wysokość karty → nadwyżka trafia W GŁOWĘ (wiersz 1fr z rolą/
   nazwiskiem: na desktopie rośnie zdjęcie, w 2-kol mobile treść się wyśrodkowuje), a pasek
   dyżurów siada na DOLE = paski „DYŻURY" na jednej linii między kartami. Bez tego nadwyżka
   lądowała pod dyżurami → bary rozjechane przy różnej długości etykiety. */
.wpins-person:not(.wpins-person--compact) > .wpins-person__header { flex: 1 1 auto; }

/* ── Głowa (czarna) ── */
.wpins-person__header {
  --color-wpins-text: var(--color-wpins-white, #fff);
  --color-wpins-heading: var(--color-wpins-white, #fff);
  --color-wpins-text-muted: var(--color-wpins-ink-30, #b3b3b3);
  --color-wpins-accent-text: var(--color-wpins-red-70, #ed6669);
  --color-wpins-border: #2a2a2a;

  display: grid;
  background: #000;
  color: #fff;
  /* Mobile-first: PORTRET NA GÓRZE (pełna szerokość), treść + meta pod spodem.
     Wiersz „id" = 1fr → przy równaniu 2-kol nadwyżka rośnie tu (rola/nazwisko wyśrodkowane),
     e-mail zostaje na dole → dyżury na równej linii. Zdjęcie/e-mail = auto (naturalne). */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "photo" "id" "email";
  grid-template-rows: auto 1fr auto;
}
.wpins-person--nophoto .wpins-person__header {
  grid-template-areas: "id" "email";
  grid-template-rows: 1fr auto;
}
/* Szeroka KARTA (≥520px, container query): foto pełnej wysokości obok treści. cqi = % szerokości
   karty (nie viewportu) → zdjęcie nie dławi tekstu, gdy karta jest wąska (2-up/kolumny). */
@container (min-width: 520px) {
  .wpins-person--left  .wpins-person__header { grid-template-columns: clamp(160px, 38cqi, 300px) minmax(0, 1fr); grid-template-areas: "photo id" "photo email"; grid-template-rows: 1fr auto; }
  .wpins-person--right .wpins-person__header { grid-template-columns: minmax(0, 1fr) clamp(160px, 38cqi, 300px); grid-template-areas: "id photo" "email photo"; grid-template-rows: 1fr auto; }
  .wpins-person--nophoto .wpins-person__header { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "email"; grid-template-rows: 1fr auto; }
}

.wpins-person__media {
  grid-area: photo;
  position: relative; /* dla nakładki duotone + fade w czerń */
  min-height: 220px; /* desktop: zdjęcie wypełnia wysokość głowy */
  overflow: hidden;
  background: var(--color-wpins-surface-dark, #1a1a1a);
}
/* Wąska KARTA (stacked, <520px): portret na górze — kadr 4:5, głowa cała (nie tnie góry). */
@container (max-width: 519.98px) {
  .wpins-person__header .wpins-person__media { min-height: 0; aspect-ratio: 4 / 5; }
}
.wpins-person__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.wpins-person:hover .wpins-person__img,
.wpins-person:focus-within .wpins-person__img { transform: scale(1.03); } /* portret lekko ożywa */

/* Płynne przejście fotografii w czerń (bez twardej krawędzi) — TYLKO tryb pełny
   (.wpins-person__header). Compact/katalog zostaje czysty, bez gradientu. */
.wpins-person__header .wpins-person__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 55%, #000);
}
@container (min-width: 520px) {
  .wpins-person--left  .wpins-person__header .wpins-person__media::before { background: linear-gradient(to right, transparent 62%, #000); }
  .wpins-person--right .wpins-person__header .wpins-person__media::before { background: linear-gradient(to left, transparent 62%, #000); }
}
/* Monogram (brak zdjęcia) — wypełnia slot zdjęcia inicjałami. */
.wpins-person__monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  font-family: var(--font-wpins-heading);
  font-weight: 800;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-wpins-accent-text, #ed6669);
  background: var(--color-wpins-surface-dark, #1a1a1a);
  user-select: none;
}
/* Tonacja zdjęcia (kolor na hover/focus). is-grayscale = szarość; is-duotone = + czerwony ton. */
.wpins-person.is-grayscale .wpins-person__img { filter: grayscale(1) contrast(1.05); transition: filter 0.4s ease; }
.wpins-person.is-grayscale:hover .wpins-person__img,
.wpins-person.is-grayscale:focus-within .wpins-person__img { filter: grayscale(0) contrast(1); }

.wpins-person.is-duotone .wpins-person__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--color-wpins-accent, #e52528);
  mix-blend-mode: color; /* nadaje czerwony TON zachowując luminancję (nie płaska czerwień) */
  opacity: 0.5;
  transition: opacity 0.4s ease;
}
.wpins-person.is-duotone:hover .wpins-person__media::after,
.wpins-person.is-duotone:focus-within .wpins-person__media::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .wpins-person.is-grayscale .wpins-person__img,
  .wpins-person.is-duotone .wpins-person__media::after { transition: none; }
}

.wpins-person__id {
  grid-area: id;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 1.5rem 1.75rem;
}
.wpins-person__role {
  font-family: var(--font-wpins-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-wpins-accent-text);
}
.wpins-person__name {
  margin: 0.4rem 0 0;
  font-family: var(--font-wpins-heading);
  font-weight: 800;
  font-size: var(--text-heading);
  line-height: 1.05;
  color: #fff;
  transition: transform 0.3s ease; /* drgnięcie na hover karty */
}
.wpins-person:hover .wpins-person__name,
.wpins-person:focus-within .wpins-person__name { transform: translateX(6px); }
.wpins-person__rule {
  display: block;
  width: 52px;
  height: 3px;
  margin: 1rem 0 0;
  background: var(--color-wpins-accent);
  transition: width 0.35s ease; /* wydłużenie na hover */
}
.wpins-person:hover .wpins-person__rule,
.wpins-person:focus-within .wpins-person__rule { width: 88px; }

/* ── Meta (grid-area email): CTA „Napisz wiadomość" + drobny kontakt ── */
.wpins-person__meta {
  grid-area: email;
  justify-self: stretch; /* NIE start — start = content-sized → rozszerza się do pełnego maila */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0 1.75rem 1.5rem;
}

/* „Napisz wiadomość" = e-mail widoczny (do zapamiętania) + ikona koperty; border 55% bieli,
   hover = białe tło / czarny tekst. NIE uppercase (adres czytelny), zawija się i nie wychodzi
   poza kartę przy małej szerokości. */
.wpins-person__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  min-width: 0; /* pozwól skurczyć się poniżej (niełamliwego) maila → mail dostaje „…" */
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-family: var(--font-wpins-ui);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wpins-person__cta:hover,
.wpins-person__cta:focus-visible {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.wpins-person__cta-ico { flex: 0 0 auto; }
/* e-mail w jednej linii; za długi → „…" (pełny adres w title + mailto), bez zawijania w bloku. */
.wpins-person__cta-mail { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) {
  .wpins-person__img,
  .wpins-person__name,
  .wpins-person__rule { transition: none; }
}

.wpins-person__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  font-family: var(--font-wpins-ui);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  color: var(--color-wpins-ink-30, #b3b3b3);
}
/* Adres pod CTA: drobny, stłumiony; strzałka schowana (CTA niesie akcję). */
.wpins-person__meta .wpins-person__c-line { min-height: 28px; color: var(--color-wpins-ink-30, #b3b3b3); }
.wpins-person__meta .wpins-person__c-arrow { display: none; }
.wpins-person__c-line {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 36px;
  color: #fff;
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.wpins-person__c-line { transition: color 0.2s ease; }
a.wpins-person__c-line:hover,
a.wpins-person__c-line:focus-visible { color: var(--color-wpins-accent-text); }
.wpins-person__c-icon { flex: 0 0 auto; color: var(--color-wpins-accent-text); }
.wpins-person__c-text { min-width: 0; }
/* Opcjonalna etykieta przy mailu/telefonie (np. „Sekretariat:") — wytłuszczona, ten sam kolor. */
.wpins-person__c-label { font-weight: 700; }
.wpins-person__c-arrow { flex: 0 0 auto; transition: transform 0.2s ease; }
a.wpins-person__c-line:hover .wpins-person__c-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .wpins-person__c-arrow { transition: none; } }

/* Wąska karta (stacked): mniejsze fonty (nazwisko się nie rwie) + meta pełną szerokością. */
@container (max-width: 519.98px) {
  .wpins-person__id { padding: 1.25rem 1.25rem 0.4rem; }
  .wpins-person__name { font-size: var(--text-subheading); }
  .wpins-person__meta { padding: 0.4rem 1.25rem 1.25rem; }
}

/* ── Dyżury (accordion na CZARNEJ karcie — jeden system dla wszystkich osób) ──
 * Toggle (Lato uppercase) + panel z animacją grid-rows 0fr→1fr. Dark-scope: treść
 * InnerBlocks (dyżury/konsultacje, tabela Tydzień A/B) czytelna na czerni. Radius 0. */
.wpins-person__duties {
  --color-wpins-text: var(--color-wpins-white, #fff);
  --color-wpins-heading: var(--color-wpins-white, #fff);
  --color-wpins-text-muted: var(--color-wpins-ink-30, #b3b3b3);
  --color-wpins-accent-text: var(--color-wpins-red-70, #ed6669);
  background: #000;
  border-top: 1px solid var(--color-wpins-border);
  color: #fff;
}
.wpins-person__duties-toggle,
.wpins-person__duties-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 1rem 1.75rem;
  background: none;
  border: 0;
  font-family: var(--font-wpins-ui);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.wpins-person__duties-toggle:hover,
.wpins-person__duties-toggle:focus-visible { background: rgba(255, 255, 255, 0.05); }
/* Statyczny nagłówek „zawsze otwarte" = nieklikalny (dziedziczy układ toggle, bez kursora/sygnału). */
.wpins-person__duties-head { cursor: default; }
.wpins-person__duties-icon { flex: 0 0 auto; color: var(--color-wpins-accent-text); }
.wpins-person__duties-label { flex: 1 1 auto; }
.wpins-person__duties-sign { flex: 0 0 auto; color: var(--color-wpins-accent-text); }
/* + → − : pionowa kreska znika przy otwarciu (transform-box: zakres elementu SVG). */
.wpins-person__duties-sign-v {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s ease;
}
.wpins-person__duties.is-open .wpins-person__duties-sign-v { transform: scaleY(0); }

/* Panel — animacja wysokości bez skoku layoutu (tylko transform-bezpieczny grid-rows). */
.wpins-person__duties-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}
.wpins-person__duties.is-open .wpins-person__duties-panel { grid-template-rows: 1fr; }
/* min-height:0 + ZERO paddingu na grid-itemie — inaczej padding (border-box) trzyma
   wysokość i przy 0fr wystaje pierwsza linia. Padding żyje na __duties-pad (klipowany). */
.wpins-person__duties-inner { overflow: hidden; min-height: 0; }
/* border-top = kreska pełnej szerokości (na krawędzi boxa), padding-top = oddech od toggle'a. */
.wpins-person__duties-pad { padding: 1.1rem 1.75rem 1.5rem; border-top: 1px solid var(--color-wpins-border); }
.wpins-person__duties-pad > :first-child { margin-top: 0; }

.wpins-person__duties-pad .wp-block-columns { gap: 1.75rem; margin: 0; }
.wpins-person__duties-pad .wp-block-column > :first-child { margin-top: 0; }
.wpins-person__duties-pad h4,
.wpins-person__duties-pad h5 {
  margin: 0 0 0.4rem;
  font-family: var(--font-wpins-ui);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-wpins-accent-text);
}
/* Tabela dyżurów (np. Tydzień A/B) czytelna na czerni. */
.wpins-person__duties-pad table { color: #fff; border-color: var(--color-wpins-border); }
.wpins-person__duties-pad td,
.wpins-person__duties-pad th { border-color: var(--color-wpins-border); }
@media (prefers-reduced-motion: reduce) {
  .wpins-person__duties-panel,
  .wpins-person__duties-sign-v,
  .wpins-person__duties-toggle { transition: none; }
}
@container (max-width: 519.98px) {
  .wpins-person__duties-toggle { padding: 1rem 1.25rem; }
  .wpins-person__duties-pad { padding: 1.1rem 1.25rem 1.25rem; }
}

/* ════════════════════════════════════════════════════════════════════
 * JASNA WERSJA pełnej karty (opcja `--light`). W LIGHT theme głowa jest jasna
 * (alt) zamiast czarnej. Scope `html:not([data-theme="dark"])` → w DARK theme te
 * reguły NIE obowiązują, karta spada do domyślnych (czarnych) → obie identyczne
 * w dark (zero duplikacji). Tylko tryb pełny (compact i tak jest jasny).
 * Tokeny z rampy ink (nie nadpisywane w głowie) → brak self-reference.
 * ════════════════════════════════════════════════════════════════════ */
html:not([data-theme="dark"]) .wpins-person--light:not(.wpins-person--compact) { background: var(--color-wpins-canvas, #fff); }
html:not([data-theme="dark"]) .wpins-person--light .wpins-person__header {
  --color-wpins-text: var(--color-wpins-ink-90, #1a1a1a);
  --color-wpins-heading: var(--color-wpins-ink-100, #000);
  --color-wpins-text-muted: var(--color-wpins-ink-70, #4d4d4d);
  --color-wpins-accent-text: var(--color-wpins-accent, #e52528);
  --color-wpins-border: var(--color-wpins-border, #e8e8e8);
  background: var(--color-wpins-canvas, #fff);
  color: var(--color-wpins-ink-100, #000);
}
html:not([data-theme="dark"]) .wpins-person--light .wpins-person__name { color: var(--color-wpins-ink-100, #000); }
html:not([data-theme="dark"]) .wpins-person--light .wpins-person__media,
html:not([data-theme="dark"]) .wpins-person--light .wpins-person__monogram { background: var(--color-wpins-canvas, #fff); }
/* Fade zdjęcia w JASNĄ głowę (nie w czerń). */
html:not([data-theme="dark"]) .wpins-person--light .wpins-person__header .wpins-person__media::before { background: linear-gradient(to bottom, transparent 55%, var(--color-wpins-canvas, #fff)); }
@container (min-width: 520px) {
  html:not([data-theme="dark"]) .wpins-person--light.wpins-person--left  .wpins-person__header .wpins-person__media::before { background: linear-gradient(to right, transparent 62%, var(--color-wpins-canvas, #fff)); }
  html:not([data-theme="dark"]) .wpins-person--light.wpins-person--right .wpins-person__header .wpins-person__media::before { background: linear-gradient(to left, transparent 62%, var(--color-wpins-canvas, #fff)); }
}
/* CTA na jasnej głowie: ghost ciemny → hover ciemne tło / jasny tekst (odwrotnie niż na czerni). */
html:not([data-theme="dark"]) .wpins-person--light .wpins-person__cta { color: var(--color-wpins-ink-90, #1a1a1a); border-color: rgba(0, 0, 0, 0.35); }
html:not([data-theme="dark"]) .wpins-person--light .wpins-person__cta:hover,
html:not([data-theme="dark"]) .wpins-person--light .wpins-person__cta:focus-visible { background: var(--color-wpins-ink-100, #000); color: var(--color-wpins-canvas, #fff); border-color: var(--color-wpins-ink-100, #000); }
/* Dyżury jasne (baza jest pod czerń). */
html:not([data-theme="dark"]) .wpins-person--light .wpins-person__duties {
  --color-wpins-text: var(--color-wpins-ink-90, #1a1a1a);
  --color-wpins-heading: var(--color-wpins-ink-100, #000);
  --color-wpins-text-muted: var(--color-wpins-ink-70, #4d4d4d);
  --color-wpins-accent-text: var(--color-wpins-accent, #e52528);
  background: var(--color-wpins-canvas, #fff);
  color: var(--color-wpins-ink-90, #1a1a1a);
}
html:not([data-theme="dark"]) .wpins-person--light .wpins-person__duties-toggle { color: var(--color-wpins-ink-100, #000); }
html:not([data-theme="dark"]) .wpins-person--light .wpins-person__duties-toggle:hover,
html:not([data-theme="dark"]) .wpins-person--light .wpins-person__duties-toggle:focus-visible { background: rgba(0, 0, 0, 0.04); }

/* ── Edytor (jasny — InnerBlocks edytujemy z kontrastem) ── */
.wpins-person-edit {
  display: grid;
  gap: 1rem 1.5rem;
  align-items: start;
  border: 1px solid var(--color-wpins-border, #e8e8e8);
  border-left: 3px solid var(--color-wpins-accent, #e52528);
  padding: 1rem;
}
@media (min-width: 640px) {
  .wpins-person-edit--left  { grid-template-columns: 160px minmax(0, 1fr); }
  .wpins-person-edit--right { grid-template-columns: minmax(0, 1fr) 160px; }
  .wpins-person-edit--right .wpins-person-edit__media { order: 2; }
}
.wpins-person-edit__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.wpins-person-edit__role { display: block; font-family: var(--font-wpins-ui, sans-serif); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-wpins-accent-text, #e52528); }
.wpins-person-edit__name { display: block; font-family: var(--font-wpins-heading, sans-serif); font-size: 1.4rem; margin: 0.2rem 0 0.6rem; }

/* ════════════════════════════════════════════════════════════════════
 * Wariant KOMPAKTOWY (katalog) — zdjęcie na górze + rola + nazwisko + kontakt.
 * Strefa info pominięta (render.php). Slot zdjęcia zostaje ciemny (spójny z pełną kartą),
 * treść na tokenach motywu (jasna karta na canvas, adaptuje dark).
 * ════════════════════════════════════════════════════════════════════ */
.wpins-person--compact { display: flex; flex-direction: column; }
/* Samodzielnie (bez siatki) karta nie może rozciągać slotu zdjęcia na całą szerokość treści
   (kwadrat = wysokość = szerokość → gigant). Limit = szerokość jednej karty katalogu.
   W siatce kolumna ustala szerokość → limit zdejmujemy niżej. */
.wpins-person--compact { max-width: 20rem; }
.wpins-person--compact .wpins-person__media {
  width: 100%;
  aspect-ratio: var(--pc-ratio, 3 / 4);
  min-height: 0;
}
.wpins-person--compact .wpins-person__monogram { font-size: clamp(2rem, 9vw, 3rem); min-height: 0; }
.wpins-person--compact .wpins-person__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0.85rem 1rem 1rem;
}
.wpins-person--compact .wpins-person__role {
  font-family: var(--font-wpins-ui);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-wpins-accent-text, #e52528);
}
/* Rola top-align z natury: jest pierwsza w korpusie, a zdjęcia mają równą wysokość (siatka
   stretch) → stanowiska startują równo od góry. Długie stanowisko spycha nazwisko niżej (OK);
   e-mail wyrównany przez margin-top:auto. Bez rezerwy — krótka rola nie osiada w dół. */
.wpins-person--compact .wpins-person__name {
  margin: 0.15rem 0 0.55rem;
  font-family: var(--font-wpins-heading);
  font-weight: 800;
  font-size: var(--text-subheading);
  line-height: 1.05;
  color: var(--color-wpins-heading);
}
/* Kontakt na jasnym tle: tokeny tekstu, ikony czerwone, strzałka schowana (zwarcie). */
.wpins-person--compact .wpins-person__contact {
  margin-top: auto;
  padding: 0;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
}
.wpins-person--compact .wpins-person__c-line { min-height: 0; color: var(--color-wpins-text); }
.wpins-person--compact a.wpins-person__c-line:hover,
.wpins-person--compact a.wpins-person__c-line:focus-visible { color: var(--color-wpins-accent-text); }
.wpins-person--compact .wpins-person__c-icon { color: var(--color-wpins-accent-text, #e52528); }
.wpins-person--compact .wpins-person__c-arrow { display: none; }

/* Dyżury w trybie KOMPAKTOWYM = karta katalogu. Layout w obu trybach. */
.wpins-person--compact .wpins-person__duties {
  margin-top: 0.85rem;
  background: transparent;
  border-top: 1px solid var(--color-wpins-border);
  color: var(--color-wpins-text);
}
/* W LIGHT theme karta jest jasna → reset tokenów na ciemne (baza dyżurów jest pod CZARNĄ głowę:
   biały tekst). W DARK theme NIE nadpisujemy — dyżury dziedziczą jasne tokeny motywu, więc etykieta
   „DYŻURY" i godziny są czytelne na ciemnej karcie (WCAG AA). Wzorzec jak `.wpins-person--light`. */
html:not([data-theme="dark"]) .wpins-person--compact .wpins-person__duties {
  --color-wpins-text: var(--color-wpins-ink-90, #1a1a1a);
  --color-wpins-heading: var(--color-wpins-heading, #0a0a0a);
  --color-wpins-text-muted: var(--color-wpins-ink-70, #4d4d4d);
  --color-wpins-accent-text: var(--color-wpins-accent, #e52528);
}
.wpins-person--compact .wpins-person__duties-toggle,
.wpins-person--compact .wpins-person__duties-head {
  min-height: 0;
  padding: 0.7rem 0;
  font-size: 0.7rem;
  color: var(--color-wpins-heading);
}
.wpins-person--compact .wpins-person__duties-toggle:hover,
.wpins-person--compact .wpins-person__duties-toggle:focus-visible { background: transparent; color: var(--color-wpins-accent-text); }
.wpins-person--compact .wpins-person__duties-pad { padding: 0.6rem 0 0.25rem; border-top: 0; color: var(--color-wpins-text); }
.wpins-person--compact .wpins-person__duties-pad table { color: var(--color-wpins-text); }

/* ════════════════════════════════════════════════════════════════════
 * Siatka kadry (wpins/person-grid) — układa karty. 1 kol. mobile → 2 tablet →
 * --wpins-cols (2–4) desktop. Karty rozciągają się na pełną wysokość rzędu.
 * ════════════════════════════════════════════════════════════════════ */
.wpins-person-grid { margin: 0 0 1.5rem; }
.wpins-person-grid__head { margin: 0 0 1.25rem; }
.wpins-person-grid__eyebrow {
  display: block;
  font-family: var(--font-wpins-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-wpins-accent-text, #e52528);
}
.wpins-person-grid__title {
  display: inline-block;
  margin: 0.2rem 0 0;
  padding-bottom: 0.25rem;
  font-family: var(--font-wpins-heading);
  font-weight: 800;
  font-size: var(--text-heading);
  line-height: 1.05;
  color: var(--color-wpins-heading);
  border-bottom: 3px solid var(--color-wpins-accent, #e52528);
}
.wpins-person-grid__items {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .wpins-person-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .wpins-person-grid__items { grid-template-columns: repeat(var(--wpins-cols, 3), minmax(0, 1fr)); }
}
.wpins-person-grid__items > .wpins-person { margin: 0; height: 100%; max-width: none; }

/* ── Edytor siatki ── */
.wpins-person-grid-edit { border: 1px dashed var(--color-wpins-border, #d9d9d9); padding: 1rem; }
.wpins-person-grid-edit__head { margin: 0 0 0.85rem; }
.wpins-person-grid-edit__eyebrow { display: block; font-family: var(--font-wpins-ui, sans-serif); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-wpins-accent-text, #e52528); }
.wpins-person-grid-edit__title { display: block; font-family: var(--font-wpins-heading, sans-serif); font-size: 1.5rem; }
.wpins-person-grid-edit__items > .block-editor-block-list__layout {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(var(--wpins-cols, 3), minmax(0, 1fr));
}
@media (max-width: 781px) {
  .wpins-person-grid-edit__items > .block-editor-block-list__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}