/* ════════════════════════════════════════════════════════════════════
 * wpins/biogram-section — numerowana sekcja biogramu (akordeon).
 * Numer 01.. = licznik CSS (rodzic `.wpins-biogram__sections` w szablonie / `.editor-styles-wrapper`
 * w edytorze robi counter-reset). Wzorzec akordeonu jak dziekanat (grid-rows 0fr→1fr, `__sign`).
 * Klik = delegacja w motywie (front.js). Dark = uniesiona powierzchnia (nie pełna czerń).
 * ════════════════════════════════════════════════════════════════════ */
.wpins-biogram-section {
  counter-increment: biosec;
  margin: 0 0 0.9rem;
  border: 1px solid var(--color-wpins-border, #e8e8e8);
  background: var(--color-wpins-canvas, #fff);
  color: var(--color-wpins-text);
}
[data-theme="dark"] .wpins-biogram-section {
  background: var(--color-wpins-alt, #161616);
  border-color: var(--color-wpins-border, #2a2a2a);
}
/* Edytor: numeruj sekcje (na froncie counter-reset jest na `.wpins-biogram__sections`). */
.editor-styles-wrapper { counter-reset: biosec; }

/* ── Nagłówek (zawsze widoczny): numer | tytuł | znak (+/−) ── */
.wpins-biogram-section__heading { margin: 0; }
.wpins-biogram-section__head {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem 1.25rem;
  width: 100%;
  margin: 0;
  padding: 1.3rem 1.5rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.wpins-biogram-section__num {
  font-family: var(--font-wpins-heading); font-weight: 800;
  font-size: 1.5rem; line-height: 1;
  color: var(--color-wpins-accent-text, #e52528);
}
.wpins-biogram-section__num::before { content: counter(biosec, decimal-leading-zero); }
.wpins-biogram-section__title {
  min-width: 0;
  font-family: var(--font-wpins-heading); font-weight: 700;
  font-size: clamp(1.1rem, 3vw, 1.5rem); line-height: 1.15;
  color: var(--color-wpins-heading);
  overflow-wrap: break-word;
}
/* znak +/− BEZ kółka — sam znak (spójność z blokiem Kontakt/dziekanat); 42px = touch target */
.wpins-biogram-section__sign {
  flex: 0 0 auto;
  width: 42px; height: 42px; padding: 9px;
  box-sizing: border-box;
  border: 0; /* bez ramki/kółka wokół znaku +/− */
  color: var(--color-wpins-accent-text, #e52528);
  transition: color 0.2s ease;
}
.wpins-biogram-section__head:hover .wpins-biogram-section__sign { color: var(--color-wpins-accent-text, #e52528); }
.wpins-biogram-section__sign-v { transform-box: fill-box; transform-origin: center; transition: transform 0.3s ease; }
.wpins-biogram-section.is-open .wpins-biogram-section__sign-v { transform: scaleY(0); }
.wpins-biogram-section__head:focus-visible { outline: 3px solid var(--color-wpins-focus, #e52528); outline-offset: -3px; }

/* ── Panel (animacja wysokości; pad na DZIECKU — grid-item zwija się do 0) ── */
.wpins-biogram-section__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; }
.wpins-biogram-section.is-open .wpins-biogram-section__panel { grid-template-rows: 1fr; }
.wpins-biogram-section__panel-inner { overflow: hidden; min-height: 0; }
/* treść wyrównana pod TYTUŁ (wcięcie = numer + gap); na mobile bez wcięcia */
.wpins-biogram-section__panel-pad { padding: 0 1.5rem 1.5rem calc(1.5rem + 2.25rem + 1.25rem); }
@media (max-width: 600px) {
  .wpins-biogram-section__panel-pad { padding-left: 1rem; }
  /* Mały ekran: numer (i znak) w OSOBNYM WIERSZU nad tytułem, a tytuł PEŁNĄ szerokością pod nimi →
     długie słowa (np. „Zainteresowania") zawijają się czysto, bez rozcinania w połowie. */
  .wpins-biogram-section__head {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "num   sign"
      "title title";
    align-items: center;
    gap: 0.35rem 0.8rem;
    padding: 1.1rem 1rem;
  }
  .wpins-biogram-section__num   { grid-area: num; font-size: 1.25rem; }
  .wpins-biogram-section__title { grid-area: title; }
  .wpins-biogram-section__sign  { grid-area: sign; align-self: start; }
}

/* Treść sekcji — listy/akapity przewiewne, marker czerwony. */
.wpins-biogram-section__panel-pad > :first-child { margin-top: 0; }
.wpins-biogram-section__panel-pad > :last-child { margin-bottom: 0; }
.wpins-biogram-section__panel-pad ul,
.wpins-biogram-section__panel-pad ol { margin: 0; padding-left: 1.2rem; }
/* Preflight Tailwinda zeruje list-style → przywracamy punktory/numery (marker koloruje reguła niżej). */
.wpins-biogram-section__panel-pad ul { list-style: disc; }
.wpins-biogram-section__panel-pad ol { list-style: decimal; }
.wpins-biogram-section__panel-pad li { margin: 0.35rem 0; line-height: 1.55; }
.wpins-biogram-section__panel-pad li::marker { color: var(--color-wpins-accent-text, #e52528); }
.wpins-biogram-section__panel-pad p { margin: 0.6rem 0; line-height: 1.6; }

/* Edytor: pad ma normalny padding (grid-item zwinięcia nie ma, panel zawsze otwarty). */
.wpins-biogram-section-edit .wpins-biogram-section__panel { grid-template-rows: 1fr; }

@media (prefers-reduced-motion: reduce) {
  .wpins-biogram-section__panel,
  .wpins-biogram-section__sign-v { transition: none; }
}