/* The Wall — a sea of pinned buttons. Reuses theme.css variables so it follows
   the site's light/dark theming. Physical-button verbs on purpose: buttons are
   "pinned", they bob like they're on a corkboard. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  min-height: 100vh;
}

.wall {
  position: relative;
  min-height: 100vh;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  text-align: center;
  /* Pins sway (rotate), which inflates their square element box even though the
     round pin stays put; clip it here so that never widens the page. Pin
     centers are already kept a peak-pulse radius clear of the edge (wall.js), so
     nothing visible is cut. */
  overflow: clip;
}

/* The nav floats on top of the full-page button field: pins roam the whole
   viewport (including behind it), so a higher z-index keeps the nav in front.
   Shrink-wrapped to the text so it stays compact. */
.wall__nav {
  position: relative;
  z-index: 2;
  width: fit-content;
  margin-inline: auto;
}

.wall__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  margin: 0;
}

.wall__subtitle {
  color: var(--color-text-secondary);
  margin: var(--space-sm) 0 0;
}

.wall__count {
  white-space: nowrap;
}

/* ── The buttons ─────────────────────────────────────────────────────────── */

/* A field covering the entire page. wall.js scatters buttons across the whole
   viewport (no keep-out); the nav floats solidly on top of them. */
.wall__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Positioned at the field origin; the drift loop in wall.js moves each pin
   with the `translate` property (kept separate from `transform`, which the
   pop-in scale transition owns). */
.wall-btn {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  line-height: 0;
  opacity: 0;
  transform: scale(0.4);
}

.wall-btn.is-pinned {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.wall-btn img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* the pin look: a hard rim plus a soft drop shadow */
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wall-btn:hover img,
.wall-btn:focus-visible img {
  transform: scale(1.12);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.12),
    0 6px 16px rgba(0, 0, 0, 0.28);
}

/* ── Nav CTAs (between the header and the buttons) ───────────────────────── */

.wall__nav {
  margin-top: var(--space-lg);
  padding-bottom: var(--space-sm);
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  align-items: center;
  /* Let the pills wrap below one another on a narrow phone rather than overflow. */
  flex-wrap: wrap;
}

.wall__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-text-primary);
  /* Solid fill so drifting pins passing behind never show through the pill,
     and so the label side of the pill reads as one filled button. */
  background: var(--color-surface);
  border: 1px solid var(--color-text-primary);
  border-radius: 999px;              /* full capsule; QR panel fills its right */
  padding-left: 1.1em;
  overflow: hidden;                  /* clip the QR panel to the capsule end */
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.wall__cta:hover {
  background: var(--color-text-primary);
  color: var(--color-bg);
}

/* ── Zoom dialog ─────────────────────────────────────────────────────────── */

.wall-zoom {
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-lg);
  text-align: center;
  max-width: min(90vw, 560px);
}

.wall-zoom::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.wall-zoom__disc {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  line-height: 0;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.3);
}

.wall-zoom__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-text-secondary);
  font-size: 1rem;
  cursor: pointer;
}

.wall-zoom__close:hover {
  background: var(--color-bg);
  color: var(--color-text-primary);
}