/* ==========================================================================
   Potęga Prasy — component styles
   --------------------------------------------------------------------------
   Extracted verbatim from the design-system React components' injected CSS
   (the components dir, group by group). In WordPress these are plain classes applied by PHP
   partials and block style variations. Markup contracts:
     Button  <a|button class="pp-btn pp-btn--{variant} pp-btn--{size} [pp-btn--sticker] [pp-btn--block]">
     Badge   <span class="pp-badge pp-badge--{variant}"><span class="pp-badge__dot"></span> …</span>
     Card    <div class="pp-card pp-card--{variant} [pp-card--rail|rail-brand] [pp-card--interactive]">
     Tag     <span class="pp-tag [pp-tag--clickable] [pp-tag--selected]"><span class="pp-tag__hash">#</span> …</span>
     Tabs    <div class="pp-tabs [pp-tabs--pill]"><a class="pp-tab [pp-tab--active]"> … </a></div>
     Equalizer <span class="pp-eq [pp-eq--paused]"><span class="pp-eq__bar"></span> …</span>
     Avatar  <span class="pp-avatar pp-avatar--{size} pp-avatar--p{0-4}"> … </span>
   ========================================================================== */

/* ---- Button -------------------------------------------------------------- */
.pp-btn{
  --_bg:var(--brand); --_fg:#fff; --_bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-display); font-weight:600; line-height:1;
  border-radius:var(--radius-pill); border:var(--border-2) solid var(--_bd);
  background:var(--_bg); color:var(--_fg); cursor:pointer;
  text-decoration:none; white-space:nowrap; user-select:none;
  transition:transform var(--dur-fast) var(--ease-out),
             background var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out), filter var(--dur-base);
}
.pp-btn:hover{ filter:brightness(.95); text-decoration:none; }
.pp-btn:active{ transform:translateY(1px) scale(.985); }
.pp-btn:focus-visible{ outline:var(--border-3) solid var(--focus-ring); outline-offset:2px; }
.pp-btn[disabled], .pp-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; filter:none; transform:none; }

.pp-btn--sm{ font-size:var(--text-sm); padding:.5em 1em; }
.pp-btn--md{ font-size:var(--text-base); padding:.7em 1.4em; }
.pp-btn--lg{ font-size:var(--text-lg); padding:.8em 1.7em; }

.pp-btn--primary{ --_bg:var(--brand); --_fg:#fff; }
.pp-btn--primary:hover{ --_bg:var(--brand-strong); filter:none; }
.pp-btn--accent{ --_bg:var(--accent); --_fg:var(--pp-ink); }
.pp-btn--accent:hover{ --_bg:var(--accent-strong); filter:none; }
.pp-btn--secondary{ --_bg:transparent; --_fg:var(--brand-ink); --_bd:var(--brand); }
.pp-btn--secondary:hover{ --_bg:var(--brand-soft); filter:none; }
.pp-btn--ghost{ --_bg:transparent; --_fg:var(--text-strong); --_bd:transparent; }
.pp-btn--ghost:hover{ --_bg:var(--surface-sunk); filter:none; }
.pp-btn--ink{ --_bg:var(--pp-ink); --_fg:#fff; }
.pp-btn--ink:hover{ --_bg:var(--pp-sand-800); filter:none; }

.pp-btn--sticker{ border-color:var(--pp-ink); box-shadow:var(--shadow-sticker); border-radius:var(--radius-md); }
.pp-btn--sticker:active{ box-shadow:2px 2px 0 var(--pp-ink); transform:translate(2px,2px); }
.pp-btn--block{ display:flex; width:100%; }
.pp-btn__icon{ display:inline-flex; flex:none; }

/* ---- Badge --------------------------------------------------------------- */
.pp-badge{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-mono); font-weight:700; font-size:var(--text-2xs);
  letter-spacing:var(--tracking-caps); text-transform:uppercase; line-height:1;
  padding:.45em .7em; border-radius:var(--radius-pill); white-space:nowrap;
  border:var(--border-1) solid transparent;
}
.pp-badge--neutral{ background:var(--surface-sunk); color:var(--text-body); border-color:var(--border-soft); }
.pp-badge--brand{ background:var(--pp-blue-100); color:var(--pp-blue-800); border-color:var(--pp-blue-300); }
.pp-badge--accent{ background:var(--pp-orange-100); color:var(--pp-orange-800); border-color:var(--pp-orange-300); }
.pp-badge--ink{ background:var(--pp-ink); color:#fff; }
/* calm, always-on broadcasting */
.pp-badge--broadcasting{ background:var(--pp-blue-900); color:#fff; border-color:rgba(255,255,255,.16); }
.pp-badge--broadcasting .pp-badge__dot{ background:var(--pp-blue-300); }
/* loud, special live */
.pp-badge--live{ background:var(--pp-onair); color:#fff; }
.pp-badge--live .pp-badge__dot{ background:#fff; animation:pp-badge-pulse 1.4s ease-in-out infinite; }
/* status */
.pp-badge--success{ background:var(--pp-live-bg); color:var(--pp-live-ink); border-color:var(--pp-live-border); }
.pp-badge--solid-success{ background:var(--pp-live); color:#fff; }
.pp-badge--warn{ background:var(--pp-warn-bg); color:var(--pp-warn-ink); border-color:var(--pp-warn-border); }
.pp-badge__dot{ width:.55em; height:.55em; border-radius:50%; background:currentColor; flex:none; }
@keyframes pp-badge-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---- Card ---------------------------------------------------------------- */
.pp-card{
  background:var(--surface-card); border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.pp-card--interactive{ cursor:pointer; }
.pp-card--interactive:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.pp-card--sticker{ border:var(--border-2) solid var(--pp-ink); box-shadow:var(--shadow-sticker); border-radius:var(--radius-md); }
.pp-card--sticker.pp-card--interactive:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--pp-ink); }
.pp-card--dark{ background:var(--surface-ink); color:var(--text-on-dark); box-shadow:var(--shadow-md); }
.pp-card--flush{ box-shadow:none; border:var(--border-1) solid var(--border-hair); }
.pp-card--rail{ border-top:var(--space-1) solid var(--accent); }
.pp-card--rail-brand{ border-top:var(--space-1) solid var(--brand); }
.pp-card__body{ padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); }
.pp-card__media{ display:block; width:100%; object-fit:cover; }

/* ---- Tag ----------------------------------------------------------------- */
.pp-tag{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-sans); font-weight:600; font-size:var(--text-sm); line-height:1;
  padding:.45em .8em; border-radius:var(--radius-pill);
  background:var(--surface-card); color:var(--text-body);
  border:var(--border-2) solid var(--border-hair); cursor:default;
  transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base), color var(--dur-base);
}
.pp-tag--clickable{ cursor:pointer; }
.pp-tag--clickable:hover{ border-color:var(--brand); color:var(--brand-ink); text-decoration:none; }
.pp-tag--selected{ background:var(--brand); border-color:var(--brand); color:#fff; }
.pp-tag--selected:hover{ color:#fff; }
.pp-tag__hash{ color:var(--accent-strong); font-family:var(--font-mono); }
.pp-tag--selected .pp-tag__hash{ color:#fff; }
.pp-tag__x{ display:inline-flex; margin-right:-.2em; border:0; background:none; padding:0 .1em; cursor:pointer;
  color:inherit; opacity:.6; font:inherit; line-height:1; }
.pp-tag__x:hover{ opacity:1; }

/* ---- Tabs ---------------------------------------------------------------- */
.pp-tabs{ display:flex; gap:var(--space-5); border-bottom:var(--border-2) solid var(--border-hair); }
.pp-tabs--pill{ gap:var(--space-2); border-bottom:0; }
.pp-tab{
  appearance:none; border:0; background:none; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:var(--text-base);
  color:var(--text-muted); padding:var(--space-3) 0; position:relative;
  transition:color var(--dur-base) var(--ease-out); text-decoration:none;
}
.pp-tab::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px;
  border-radius:3px 3px 0 0; background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out); }
.pp-tab:hover{ color:var(--text-strong); text-decoration:none; }
.pp-tab--active{ color:var(--brand-ink); }
.pp-tab--active::after{ transform:scaleX(1); }
.pp-tabs--pill .pp-tab{ padding:var(--space-2) var(--space-4); border-radius:var(--radius-pill); }
.pp-tabs--pill .pp-tab::after{ display:none; }
.pp-tabs--pill .pp-tab--active{ background:var(--brand); color:#fff; }
.pp-tab__count{ font-family:var(--font-mono); font-size:var(--text-2xs); margin-left:.5em;
  background:var(--surface-sunk); color:var(--text-muted); padding:.15em .45em; border-radius:var(--radius-pill); }
.pp-tab--active .pp-tab__count{ background:var(--brand-soft); color:var(--brand-ink); }

/* ---- Equalizer ----------------------------------------------------------- */
.pp-eq{ display:inline-flex; align-items:flex-end; gap:2px; height:1em; }
.pp-eq__bar{
  width:0.16em; min-width:2px; border-radius:2px; background:currentColor;
  transform-origin:bottom; height:100%;
  animation:pp-eq-bounce 900ms var(--ease-out, ease) infinite alternate;
}
.pp-eq__bar:nth-child(1){ animation-duration:600ms; animation-delay:0ms; }
.pp-eq__bar:nth-child(2){ animation-duration:780ms; animation-delay:-220ms; }
.pp-eq__bar:nth-child(3){ animation-duration:520ms; animation-delay:-120ms; }
.pp-eq__bar:nth-child(4){ animation-duration:880ms; animation-delay:-340ms; }
.pp-eq__bar:nth-child(5){ animation-duration:680ms; animation-delay:-90ms; }
.pp-eq--paused .pp-eq__bar{ animation-play-state:paused; transform:scaleY(0.28); opacity:.7; }
/* Bars driven by the Web Animations API (the persistent player bar) opt out of
   the CSS keyframe so the two do not fight; JS owns their timing. */
.pp-eq--waapi .pp-eq__bar{ animation:none; }
@keyframes pp-eq-bounce{ from{ transform:scaleY(0.28); } to{ transform:scaleY(1); } }
@media (prefers-reduced-motion: reduce){
  .pp-eq__bar{ animation:none; transform:scaleY(0.55); }
}

/* ---- Avatar (was inline-styled in React; class form here) ---------------- */
.pp-avatar{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  border-radius:50%; overflow:hidden; user-select:none;
  font-family:var(--font-display); font-weight:600;
  background:var(--pp-blue-500); color:#fff;
}
.pp-avatar img{ width:100%; height:100%; object-fit:cover; }
.pp-avatar--sm{ width:28px; height:28px; font-size:11.2px; }
.pp-avatar--md{ width:40px; height:40px; font-size:16px; }
.pp-avatar--lg{ width:56px; height:56px; font-size:22.4px; }
.pp-avatar--xl{ width:80px; height:80px; font-size:32px; }
.pp-avatar--ring{ box-shadow:0 0 0 2px var(--surface-card), 0 0 0 4px var(--brand); }
/* name-rotated palette (matches Avatar.jsx PALETTE order) */
.pp-avatar--p0{ background:var(--pp-blue-500);  color:#fff; }
.pp-avatar--p1{ background:var(--pp-orange-500); color:var(--pp-ink); }
.pp-avatar--p2{ background:var(--pp-blue-700);  color:#fff; }
.pp-avatar--p3{ background:var(--pp-orange-600); color:#fff; }
.pp-avatar--p4{ background:var(--pp-ink);       color:#fff; }