/* =====================================================================
   Komunikaty — pływająca karta (wariant M3 "Spotlight", bez CTA)
   Samodzielny komponent: podpinasz komunikaty.css + komunikaty.js
   i wstawiasz <div id="pl-kom"></div> tuż pod nawigacją.
   ===================================================================== */
.plk {
  --plk-primary: #0d631b;
  --plk-error2: #93000a;
  --plk-on: #0d1c2e;
  --plk-onv: #40493d;
  --plk-outline: #bfcaba;
  --plk-info-grad: linear-gradient(135deg, #0d631b, #2e7d32);
  --plk-info-glow: rgba(46,125,50,.22);
  --plk-warn-grad: linear-gradient(135deg, #ba1a1a, #93000a);
  --plk-warn-glow: rgba(186,26,26,.20);
  --plk-soft: 0 4px 20px rgba(46,125,50,.16);
  --plk-amb: 0 26px 60px -22px rgba(13,28,46,.32);
}

.plk-wrap { display: flex; justify-content: center; padding: 16px 16px 0; pointer-events: none; z-index: 30; }
.plk-wrap.is-sticky { position: sticky; top: var(--plk-top, 80px); }
@media (max-width: 767px) { .plk-wrap.is-sticky { top: var(--plk-top, 56px); } }
.plk-wrap > * { pointer-events: auto; }

@keyframes plk-in { from { opacity: 0; transform: translateY(-12px) scale(.985); } to { opacity: 1; transform: none; } }
.plk-card { animation: plk-in .4s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) { .plk-card { animation: none; } }

.plk-card {
  position: relative; width: min(640px, 100%); border-radius: 24px; padding: 18px 20px;
  box-shadow: var(--plk-amb), var(--plk-soft);
  display: flex; align-items: center; gap: 16px; overflow: hidden; border: 1px solid transparent;
  font-family: 'Hanken Grotesk', system-ui, sans-serif; color: var(--plk-on);
}
.plk-card.info { background: linear-gradient(135deg, #f0f9f1, #ffffff 60%); border-color: rgba(46,125,50,.18); }
.plk-card.warn { background: linear-gradient(135deg, #fff1ef, #ffffff 60%); border-color: rgba(186,26,26,.16); }
.plk-card::before { content: ""; position: absolute; left: -30px; bottom: -80px; width: 180px; height: 180px; border-radius: 50%; filter: blur(40px); }
.plk-card.info::before { background: var(--plk-info-glow); }
.plk-card.warn::before { background: var(--plk-warn-glow); }
.plk-card > * { position: relative; z-index: 1; }

.plk-ic { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.plk-card.info .plk-ic { background: var(--plk-info-grad); box-shadow: 0 8px 20px -6px var(--plk-info-glow); }
.plk-card.warn .plk-ic { background: var(--plk-warn-grad); box-shadow: 0 8px 20px -6px var(--plk-warn-glow); }
.plk-ic svg { width: 24px; height: 24px; }

.plk-body { flex: 1; min-width: 0; }
.plk-top { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.plk-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: #fff; box-shadow: 0 1px 4px rgba(13,28,46,.08); }
.plk-card.info .plk-tag { color: var(--plk-primary); }
.plk-card.warn .plk-tag { color: var(--plk-error2); }
.plk-tag svg { width: 13px; height: 13px; }
.plk-date { font-size: 12.5px; font-weight: 600; color: var(--plk-onv); display: inline-flex; align-items: center; gap: 5px; }
.plk-date svg { width: 14px; height: 14px; opacity: .65; }
.plk-card h3 { font-size: 16.5px; margin: 0; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.plk-card p { font-size: 13.5px; margin: 3px 0 0; color: var(--plk-onv); line-height: 1.5; }

.plk-tail { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 12px; flex-shrink: 0; align-self: stretch; }
.plk-close { width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: transparent; color: var(--plk-onv); transition: background .15s; }
.plk-close:hover { background: rgba(13,28,46,.07); }
.plk-close:focus-visible { outline: 2px solid var(--plk-primary); outline-offset: 2px; }
.plk-close svg { width: 19px; height: 19px; }
.plk-nav { display: flex; align-items: center; gap: 4px; }
.plk-arrow { width: 26px; height: 26px; border-radius: 8px; border: none; background: rgba(13,28,46,.06); color: var(--plk-onv); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.plk-arrow:hover { background: rgba(13,28,46,.12); }
.plk-arrow svg { width: 15px; height: 15px; }
.plk-count { font-size: 12.5px; font-weight: 700; color: var(--plk-onv); min-width: 44px; text-align: center; letter-spacing: .02em; }
.plk-chev { display: none; align-items: center; color: var(--plk-onv); transition: transform .2s; }
.plk-chev svg { width: 18px; height: 18px; }

/* ---------- Mobile: kompaktowy pasek, tap rozwija treść ---------- */
@media (max-width: 680px) {
  .plk-wrap { padding: 10px 10px 0; }
  .plk-card { padding: 12px 14px; gap: 12px; align-items: flex-start; border-radius: 18px; }
  .plk-ic { width: 40px; height: 40px; }
  .plk-ic svg { width: 20px; height: 20px; }
  .plk-card h3 { font-size: 14.5px; }
  .plk-card p { display: none; }
  .plk-card.is-open p { display: block; }
  .plk-chev { display: flex; }
  .plk-card.is-open .plk-chev { transform: rotate(180deg); }
}