/*
 * Plugin hero stage "qrCodeCard" (stages/qrCodeCard.php): one white card with an ink border and
 * a hard offset shadow (the site's pixel language) holding a real code, and a big rounded
 * tooltip in ink above its top right corner (the modern touch). The card stays white in dark
 * mode so the code scans. Sizes follow the card width (--cw).
 */
.qr-code-card {
  --cw: min(calc(var(--safe-w) * 0.6), calc(var(--region-h) * 0.82));
  --u: calc(var(--cw) / 100);
  --ink: var(--color-text-primary);
  position: absolute; z-index: 1; inset: 0;
}
.qr-code-card__card {
  position: absolute; box-sizing: border-box; width: var(--cw); aspect-ratio: 1;
  left: calc(var(--pad) + (var(--safe-w) - var(--cw)) / 2);
  top: calc(var(--region-top) + (var(--region-h) - var(--cw)) * 0.62);
  padding: calc(5 * var(--u));
  background: #fff;
  border: calc(1.4 * var(--u)) solid var(--ink);
  border-radius: calc(4 * var(--u));
  box-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 var(--ink);
}
.qr-code-card__card img { display: block; width: 100%; height: 100%; }
/* The tooltip: a pill in ink with a tail pointing down at the code. */
.qr-code-card__tip {
  position: absolute; z-index: 2;
  left: calc(var(--pad) + (var(--safe-w) + var(--cw)) / 2 - 30 * var(--u));
  top: calc(var(--region-top) + (var(--region-h) - var(--cw)) * 0.62 - 20 * var(--u));
  padding: calc(5 * var(--u)) calc(9 * var(--u));
  border-radius: 999px;
  background: var(--ink); color: var(--color-bg);
  font: 700 calc(9 * var(--u)) / 1 var(--font-secondary); letter-spacing: -0.02em; white-space: nowrap;
  box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) calc(-4 * var(--u)) oklch(0% 0 0 / 0.35);
}
.qr-code-card__tip::after {
  content: ""; position: absolute; left: calc(12 * var(--u)); bottom: calc(-3.5 * var(--u));
  width: calc(7 * var(--u)); height: calc(7 * var(--u)); background: inherit; rotate: 45deg;
  border-radius: 0 0 calc(1.4 * var(--u)) 0;
}
@media (prefers-reduced-motion: no-preference) {
  .qr-code-card__tip { animation: qr-code-card-bob 3.2s ease-in-out infinite alternate; }
}
@keyframes qr-code-card-bob { from { translate: 0 0; } to { translate: 0 calc(-2 * var(--u)); } }