/* =========================================================
   PMI — Webinary (wtyczka)
   Kolory z palety Blocksy; fallbacki na wypadek innego motywu.
   ========================================================= */

.pmi-webinary-app {
  --pmi-heading:#0f2d52;
  --pmi-text:#334155;
  --pmi-white:#fafbfc;
  --pmi-violet:var(--theme-palette-color-9, #4f17a8);
  --pmi-violet-50:var(--theme-palette-color-12, #efedf3);
  --pmi-aqua-600:var(--theme-palette-color-19, #026080);
  --pmi-tangerine-50:var(--theme-palette-color-21, #fef7f3);
  --pmi-tangerine-800:var(--theme-palette-color-23, #451409);
  --pmi-tangerine-600:#a12608;
  --pmi-font-head:"DM Serif Display", Georgia, serif;
  --pmi-font-body:"Plus Jakarta Sans", system-ui, sans-serif;
}
.pmi-webinary-app *,
.pmi-webinary-app *::before,
.pmi-webinary-app *::after { box-sizing:border-box; }

/* ---------------- HERO ---------------- */
.pmi-web-hero { background:#fff; padding:80px 20px 40px; }
.pmi-web-hero__inner { max-width:1130px; margin:0 auto;
  display:flex; flex-direction:column; gap:24px; }
.pmi-web-hero__title { margin:0; font-family:var(--pmi-font-head); font-weight:400;
  font-size:44px; line-height:50px; letter-spacing:-0.015em; color:var(--pmi-heading); }
.pmi-web-hero__subtitle { margin:0; font-family:var(--pmi-font-body); font-weight:500;
  font-size:16px; line-height:26px; color:var(--pmi-text); max-width:520px; }

/* ---------------- SEKCJA ---------------- */
.pmi-web { background:#fff; padding:0 20px 80px; }
.pmi-web__inner { max-width:1130px; margin:0 auto;
  display:flex; flex-direction:column; gap:40px; }
.pmi-webinary-app.is-loading .pmi-web__list { opacity:.5; }
.pmi-web__list { transition:opacity .15s; }

/* ---------------- Filtry ---------------- */
.pmi-web__filters { display:flex; flex-direction:column; gap:20px; }
.pmi-web__filters-title { margin:0; font-family:var(--pmi-font-head); font-weight:400;
  font-size:32px; line-height:38px; letter-spacing:-0.01em; color:var(--pmi-text); }

.pmi-web__row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.pmi-web__row-label { min-width:86px; flex:none;
  font-family:var(--pmi-font-body); font-weight:700;
  font-size:18px; line-height:28px; color:var(--pmi-text); }
.pmi-web__chips { display:flex; flex-wrap:wrap; gap:10px; }

.pmi-chip {
  display:inline-flex; align-items:center; gap:8px;
  height:50px; padding:12px 20px; border-radius:28px; cursor:pointer;
  border:1px solid var(--pmi-text); background:transparent; color:var(--pmi-text);
  font-family:var(--pmi-font-body); font-weight:500; font-size:16px; line-height:26px;
  transition:background .2s, color .2s; }
.pmi-chip.is-active { background:var(--pmi-text); color:var(--pmi-white); }

/* X pojawia się tylko na aktywnym chipie */
.pmi-chip__x { width:0; height:16px; overflow:hidden; opacity:0;
  transition:width .2s, opacity .2s; }
.pmi-chip.is-active .pmi-chip__x { width:16px; opacity:1; position:relative; }
.pmi-chip.is-active .pmi-chip__x::before,
.pmi-chip.is-active .pmi-chip__x::after {
  content:""; position:absolute; left:50%; top:50%; width:14px; height:1.6px;
  background:currentColor; border-radius:2px; }
.pmi-chip.is-active .pmi-chip__x::before { transform:translate(-50%,-50%) rotate(45deg); }
.pmi-chip.is-active .pmi-chip__x::after  { transform:translate(-50%,-50%) rotate(-45deg); }

.pmi-chip--clear { background:var(--pmi-tangerine-50);
  border-color:var(--pmi-tangerine-600); color:var(--pmi-tangerine-600); }

.pmi-web__heading { margin:0; font-family:var(--pmi-font-head); font-weight:400;
  font-size:32px; line-height:38px; letter-spacing:-0.01em; color:var(--pmi-heading); }
.pmi-web__empty { margin:0; font-family:var(--pmi-font-body); font-size:16px; color:var(--pmi-text); }

/* ---------------- Karta webinaru ---------------- */
.pmi-web__list { display:flex; flex-direction:column; gap:40px; }
.pmi-web__card { display:flex; gap:16px; padding:16px; border-radius:20px; }
.pmi-web__card--upcoming { background:#fff; border:2px solid #d0d5dd;
  box-shadow:0 8px 24px rgba(16,24,40,.1); }
.pmi-web__card--ended { background:#cbc8d0; }

.pmi-web__left { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:24px; }
.pmi-web__topic { display:flex; flex-direction:column; gap:16px; }

.pmi-web__labels { display:flex; flex-wrap:wrap; gap:12px; }
.pmi-web__label { display:inline-flex; align-items:center; padding:4px 16px; border-radius:16px;
  font-family:var(--pmi-font-body); font-weight:500; font-size:14px; line-height:20px; }
.pmi-web__label--cat      { background:var(--pmi-tangerine-800); color:var(--pmi-tangerine-50); }
.pmi-web__label--platform { background:var(--pmi-violet-50); color:var(--pmi-violet); }
.pmi-web__label--archival { background:var(--pmi-tangerine-600); color:var(--pmi-white); }

.pmi-web__title { margin:0; font-family:var(--pmi-font-head); font-weight:400;
  font-size:24px; line-height:32px; letter-spacing:-0.012em; color:var(--pmi-text); }
.pmi-web__speaker { margin:0; font-family:var(--pmi-font-body); font-weight:700;
  font-size:18px; line-height:28px; color:var(--pmi-violet); }

.pmi-web__dateinfo { display:flex; flex-direction:column; gap:4px; }
.pmi-web__detail { display:inline-flex; flex-wrap:wrap; gap:24px; padding:20px; border-radius:20px;
  background:var(--pmi-violet-50); width:fit-content; max-width:100%; }
.pmi-web__detail-item { display:inline-flex; align-items:center; gap:4px;
  font-family:var(--pmi-font-body); font-weight:700; font-size:18px; line-height:28px; color:var(--pmi-text); }
.pmi-web__ic { width:28px; height:28px; flex:none; color:var(--pmi-text); }
.pmi-web__info { display:flex; align-items:flex-start; gap:4px; }
.pmi-web__info-ic { width:16px; height:16px; flex:none; color:var(--pmi-text); margin-top:1px; }
.pmi-web__info span { font-family:var(--pmi-font-body); font-weight:500;
  font-size:12px; line-height:16px; letter-spacing:.02em; color:var(--pmi-text); }

.pmi-web__descwrap { display:flex; flex-direction:column; gap:8px; }
.pmi-web__desc { font-family:var(--pmi-font-body); font-weight:500;
  font-size:16px; line-height:26px; color:var(--pmi-text); }
.pmi-web__desc p { margin:0 0 12px; }
.pmi-web__desc p:last-child { margin-bottom:0; }

/* --- Rozwijanie: zajawka ~7 linijek + PŁYNNY zjazd w dół / w górę.
   Zajawkę tnie line-clamp, a animację robi max-height (wartości ustawia JS). --- */
.pmi-web__collapse { --pmi-lines:7; position:relative; }
.pmi-web__collapse-inner {
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--pmi-lines);              /* przytnij zajawkę do N linijek */
  max-height:calc(var(--pmi-lines) * 1.625em);      /* zapas dla przeglądarek bez line-clamp */
  transition:max-height .4s ease;
}
/* delikatny zanik na dole zajawki (znika przy rozwijaniu) */
.pmi-web__collapse::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:2em;
  background:linear-gradient(to bottom, transparent, var(--pmi-fade, #fff));
  pointer-events:none; opacity:1; transition:opacity .3s ease; }
.pmi-web__card--ended .pmi-web__collapse::after { --pmi-fade:#cbc8d0; }
.pmi-web__collapse.is-open::after { opacity:0; }

/* w trakcie i po rozwinięciu: bez przycięcia line-clamp (max-height animuje wysokość) */
.pmi-web__collapse.is-animating .pmi-web__collapse-inner,
.pmi-web__collapse.is-open .pmi-web__collapse-inner {
  -webkit-line-clamp:unset; display:block; }
/* po rozwinięciu opis zostaje otwarty także po wyczyszczeniu inline max-height */
.pmi-web__collapse.is-open .pmi-web__collapse-inner { max-height:none; }

/* gdy przycisk niepotrzebny (tekst się mieści) — JS doda tę klasę */
.pmi-web__collapse.is-short + .pmi-web__viewmore { display:none; }

.pmi-web__viewmore { display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  padding:8px 0; border:0; background:transparent; cursor:pointer;
  text-decoration:underline; color:var(--pmi-text); text-align:left;
  font-family:var(--pmi-font-body); font-weight:500; font-size:16px; line-height:26px; }
.pmi-web__viewmore svg { width:24px; height:24px; flex:none; transition:transform .3s ease; }
.pmi-web__viewmore.is-open svg { transform:rotate(180deg); }

/* ---------------- Prawa kolumna: prelegent ---------------- */
.pmi-web__right { width:389px; flex:none; display:flex; flex-direction:column; gap:20px;
  align-items:center; padding:20px; border-radius:20px; }
.pmi-web__card--upcoming .pmi-web__right {
  background:linear-gradient(180deg, var(--pmi-violet-50) 0%, #9f82cd 86.771%); }
.pmi-web__card--ended .pmi-web__right {
  background:linear-gradient(180deg, #000 0%, #d9d9d9 86.771%); }

.pmi-web__portrait { width:200px; height:200px; flex:none; border-radius:60px 0 60px 0;
  background:#fff center/cover no-repeat; }

.pmi-web__speaker-card { width:100%; background:#fff; border-radius:20px; padding:20px;
  display:flex; flex-direction:column; gap:12px; }
.pmi-web__sp-head { display:flex; align-items:center; gap:10px; }
.pmi-web__sp-name { font-family:var(--pmi-font-body); font-weight:700;
  font-size:18px; line-height:28px; color:var(--pmi-text); }
.pmi-web__sp-linkedin { display:inline-flex; color:#0a66c2; }
.pmi-web__sp-linkedin svg { width:24px; height:24px; }
.pmi-web__sp-role { margin:0; font-family:var(--pmi-font-body); font-weight:500;
  font-size:16px; line-height:26px; color:var(--pmi-text); }
.pmi-web__sp-bio { margin:0; font-family:var(--pmi-font-body); font-weight:500;
  font-size:16px; line-height:26px; color:var(--pmi-text); }

/* Przycisk rejestracji — hover dopełnia zaokrąglenia */
.pmi-web__register { width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:60px; padding:14px 16px 14px 24px; text-decoration:none;
  background:var(--pmi-violet); color:var(--pmi-white);
  border-radius:26px 0 26px 0;
  font-family:var(--pmi-font-body); font-weight:500; font-size:16px; line-height:26px;
  transition:border-radius .35s cubic-bezier(.4, 0, .2, 1); }
.pmi-web__register svg { width:24px; height:24px; flex:none; }
.pmi-web__register:hover,
.pmi-web__register:focus-visible { border-radius:26px; }

/* ---------------- "Zobacz więcej" ---------------- */
.pmi-web__seemore[hidden] { display:none; }
.pmi-web__seemore { align-self:center;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px 12px 24px; text-decoration:none;
  background:var(--pmi-tangerine-800); color:var(--pmi-white);
  border-radius:26px 0 26px 0;
  font-family:var(--pmi-font-body); font-weight:500; font-size:16px; line-height:26px;
  transition:border-radius .35s cubic-bezier(.4, 0, .2, 1); }
.pmi-web__seemore svg { width:20px; height:20px; flex:none; }
.pmi-web__seemore:hover,
.pmi-web__seemore:focus-visible { border-radius:26px; }

/* ---------------- MOBILE ---------------- */
@media (max-width:1024px) {
  .pmi-web__right { width:320px; }
}

@media (max-width:767px) {
  .pmi-web-hero { padding:50px 16px 24px; }
  .pmi-web-hero__title { font-size:32px; line-height:40px; }
  .pmi-web { padding:0 16px 50px; }
  .pmi-web__inner { gap:32px; }
  .pmi-web__filters-title { font-size:28px; line-height:36px; }
  .pmi-web__heading { font-size:28px; line-height:36px; }

  /* filtry: etykieta nad chipsami */
  .pmi-web__row { flex-direction:column; align-items:flex-start; gap:8px; }
  .pmi-web__row-label { min-width:0; }
  .pmi-chip { height:32px; padding:4px 12px; font-size:14px; line-height:20px; gap:4px; }
  .pmi-chip.is-active .pmi-chip__x { width:14px; }

  /* karta: jedna kolumna */
  .pmi-web__card { flex-direction:column; padding:16px 8px; }
  .pmi-web__right { width:100%; }
  .pmi-web__detail { width:100%; padding:16px 10px; gap:12px; }
  .pmi-web__detail-item { font-size:16px; }
  .pmi-web__ic { width:24px; height:24px; }
}