/* Polderbyte Design System — component primitives
   Ported from the design-system bundle's React components to plain CSS. */

/* Badge */
.pb-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:var(--fs-caption);letter-spacing:.02em;line-height:1;padding:5px 9px;border-radius:var(--radius-pill);white-space:nowrap}
.pb-badge--brand{background:var(--brand-soft);color:var(--brand-strong)}
.pb-badge--neutral{background:var(--ink-100);color:var(--ink-600)}

/* BlockLabel — solid cobalt block, label bottom-aligned. Signature brand motif. */
.pb-block{display:flex;align-items:flex-end;font-family:var(--font-display);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.01em;line-height:1.04;color:#fff;background:var(--brand);border-radius:var(--radius-md);box-shadow:var(--shadow-brand-sm);padding:var(--space-5);box-sizing:border-box}
.pb-block--square{aspect-ratio:1/1}
.pb-block--wide{aspect-ratio:16/7}
.pb-block--tall{aspect-ratio:3/4}
.pb-block--ink{background:var(--ink-900);box-shadow:var(--shadow-lg)}
.pb-block--sm{font-size:var(--fs-h4);padding:var(--space-4)}
.pb-block--md{font-size:var(--fs-h2)}
.pb-block--lg{font-size:var(--fs-display-md)}

/* Card */
.pb-card{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid transparent;overflow:hidden;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-standard);will-change:transform}
.pb-card--outline{box-shadow:none;border-color:var(--border)}
.pb-card--flat{box-shadow:var(--shadow-sm);border-color:var(--border-subtle)}
.pb-card--pad{padding:var(--space-6)}
.pb-card--interactive{cursor:pointer}
.pb-card--interactive:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}
.pb-card--interactive:active{transform:translateY(-1px)}

/* Tag */
.pb-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);line-height:1;padding:7px 12px;border-radius:var(--radius-sm);background:var(--color-surface);color:var(--text-body);border:1px solid var(--border);transition:border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-standard);will-change:transform}
.pb-tag:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.pb-tag--brand{background:var(--brand-soft);color:var(--brand-strong);border-color:transparent}

/* Button */
.pb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);font-weight:var(--fw-bold);border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;line-height:1;white-space:nowrap;text-decoration:none;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.pb-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.pb-btn--sm{font-size:var(--fs-body-sm);padding:0 14px;height:34px}
.pb-btn--md{font-size:var(--fs-body);padding:0 18px;height:42px}
.pb-btn--lg{font-size:var(--fs-body-lg);padding:0 26px;height:52px}
.pb-btn--pill{border-radius:var(--radius-pill)}
.pb-btn--primary{background:var(--brand);color:var(--text-on-brand);box-shadow:var(--shadow-brand-sm)}
.pb-btn--primary:hover{background:var(--brand-strong);color:var(--text-on-brand)}
.pb-btn--primary:active{background:var(--brand-pressed);transform:translateY(1px);box-shadow:none}

/* ArrowButton — the signature pill + circle-arrow CTA */
.pb-arrowbtn{display:inline-flex;align-items:center;gap:16px;font-family:var(--font-sans);font-weight:var(--fw-bold);border:0;cursor:pointer;border-radius:var(--radius-pill);line-height:1;white-space:nowrap;text-decoration:none;transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
.pb-arrowbtn:focus-visible{outline:none;box-shadow:var(--ring),var(--shadow-lg)}
.pb-arrowbtn__disc{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex:none;transition:transform var(--dur-base) var(--ease-out)}
.pb-arrowbtn__disc svg{width:55%;height:55%}
.pb-arrowbtn:hover .pb-arrowbtn__disc{transform:translateX(3px)}
.pb-arrowbtn:active{transform:translateY(1px)}
/* light: white pill, blue disc */
.pb-arrowbtn--light{background:var(--color-surface);color:var(--text-strong);box-shadow:var(--shadow-lg)}
.pb-arrowbtn--light:hover{box-shadow:var(--shadow-xl);color:var(--text-strong)}
.pb-arrowbtn--light .pb-arrowbtn__disc{background:var(--brand);color:#fff;box-shadow:var(--shadow-brand-sm)}
/* solid: blue pill, translucent disc */
.pb-arrowbtn--solid{background:var(--brand);color:#fff;box-shadow:var(--shadow-brand)}
.pb-arrowbtn--solid:hover{background:var(--brand-strong);color:#fff}
.pb-arrowbtn--solid .pb-arrowbtn__disc{background:rgba(255,255,255,.2);color:#fff}
/* sizes: pad-left, pad-right(=disc gutter), height, disc */
.pb-arrowbtn--md{padding:7px 7px 7px 24px;font-size:var(--fs-body)}
.pb-arrowbtn--md .pb-arrowbtn__disc{width:38px;height:38px}
.pb-arrowbtn--lg{padding:9px 9px 9px 30px;font-size:var(--fs-body-lg)}
.pb-arrowbtn--lg .pb-arrowbtn__disc{width:48px;height:48px}
/* Pulse — subtle breathing disc to draw the eye to a primary CTA */
.pb-arrowbtn--pulse .pb-arrowbtn__disc{animation:pb-disc-pulse 3.6s ease-in-out infinite;will-change:transform}
.pb-arrowbtn--pulse:hover .pb-arrowbtn__disc{animation-play-state:paused}
@keyframes pb-disc-pulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.35)}
  50%{transform:scale(1.04);box-shadow:0 0 0 6px rgba(255,255,255,0)}
}