/* ============================================================
   BEZPAPÍROVÁ CESTA — sdílená karta „únikovky“ (PaperlessPath).
   Papír je bílý; tahle karta je navy s tyrkysem, ať je na první
   pohled jasné, že je to jiná cesta než číst dál. Prefix .pp-.
   ============================================================ */

.pp {
  --pp-mono: "JetBrains Mono", monospace;
  position: relative;
  color: #fff;
  /* jemná tyrkysová záře v rohu jako pozadí — ne ::before, ať karta nemusí
     mít overflow:hidden (to by uřezalo světlo obíhající kolem tlačítka) */
  background:
    radial-gradient(60% 60% at 100% 100%, rgb(70 205 207 / .28), transparent 70%),
    var(--navy);
  border-radius: 14px;
  isolation: isolate;
}
.pp__k {
  display: block;
  font-family: var(--pp-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--turquoise);
}
/* vyšší specificita: hub.css barví h2 do navy — na navy kartě by zmizel */
.pp h2.pp__h {
  margin-top: .55rem;
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: #fff;
  text-wrap: balance;
}
.pp__p { margin-top: .55rem; line-height: 1.55; color: #c9dbea; }
.pp__btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.05rem;
  width: 100%;
  min-height: 46px;
  padding: .7rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: #0b3156;
  text-decoration: none;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: .98rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 28px -12px rgb(0 0 0 / .6);
  transition: translate .15s ease, box-shadow .15s ease;
}
.pp__btn:hover { translate: 0 -2px; }
.pp__btn:active { translate: 0 0; scale: .985; }
.pp__btn:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 4px; }
.pp__label { position: relative; z-index: 2; }
.pp__fx {
  position: absolute; inset: -1.5px; border-radius: 999px; pointer-events: none; z-index: 1;
  filter: drop-shadow(0 0 2px rgb(70 205 207 / 1)) drop-shadow(0 0 8px rgb(70 205 207 / .85))
          drop-shadow(0 0 18px rgb(70 205 207 / .55));
  transition: filter .3s ease;
}
.pp__btn:hover .pp__fx {
  filter: drop-shadow(0 0 4px rgb(70 205 207 / 1)) drop-shadow(0 0 14px rgb(70 205 207 / .9))
          drop-shadow(0 0 30px rgb(70 205 207 / .6));
}
.pp__ring {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  padding: 2.5px; background: rgb(70 205 207 / .22);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.pp__sweep {
  position: absolute; inset: -75%; border-radius: 50%;
  background: conic-gradient(from 0deg, #eafeff 0 3%, var(--turquoise) 12%, var(--sky) 26%, transparent 46% 100%);
  animation: pp-spin 5.2s linear infinite;
}
@keyframes pp-spin { to { transform: rotate(360deg); } }
@supports (offset-path: border-box) {
  .pp__sweep {
    inset: auto; border-radius: 50%;
    width: clamp(120px, 58%, 300px); height: clamp(22px, 10%, 40px);
    background: radial-gradient(ellipse farthest-side, #fff 0 6%, #e6feff 18%, var(--turquoise) 42%,
      rgb(70 205 207 / .28) 66%, rgb(70 205 207 / 0) 100%);
    offset-path: border-box; offset-distance: 0%; offset-rotate: auto;
    animation: pp-travel 5.2s linear infinite;
  }
  @keyframes pp-travel { to { offset-distance: 100%; } }
}

/* ── rail: karta do panelu / sloupce ── */
.pp--rail { padding: 1.25rem 1.3rem 1.35rem; }
.pp--rail .pp__h { font-size: 1.22rem; }
.pp--rail .pp__p { font-size: .86rem; }

/* ── compact: proužek nad panelem průběhu ── */
.pp--compact { padding: 1rem 1.15rem 1.15rem; }
.pp--compact .pp__k { font-size: .6rem; }
.pp--compact h2.pp__h { margin-top: .35rem; font-size: 1rem; line-height: 1.3; }
.pp--compact .pp__btn { margin-top: .85rem; min-height: 44px; font-size: .94rem; }

/* ── band: pás přes šířku obsahu ── */
.pp--band {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  align-content: center;
  gap: 0 2.5rem;
  padding: clamp(1.3rem, 2.6vw, 1.8rem) clamp(1.3rem, 3vw, 2.2rem);
}
.pp--band .pp__h { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.pp--band .pp__p { max-width: 58ch; font-size: .96rem; }
.pp--band .pp__k, .pp--band .pp__h, .pp--band .pp__p { grid-column: 1; }
.pp--band .pp__btn { grid-column: 2; grid-row: 1 / span 3; width: auto; margin-top: 0; }
@media (max-width: 760px) {
  .pp--band { grid-template-columns: 1fr; }
  .pp--band .pp__btn { grid-column: 1; grid-row: auto; margin-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) { .pp__btn { transition: none; } .pp__sweep { animation: none; } }
@media print { .pp { display: none !important; } }