/* kubepass.css — member pass demo, journey columns. */

.pass { margin-top: var(--space-6); display: grid; grid-template-columns: 300px 1fr; gap: var(--space-8); align-items: center; }
.pass__card {
  all: unset; box-sizing: border-box; cursor: pointer;
  perspective: 1000px; width: 300px; height: 186px; display: block;
}
.pass__card:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 4px; border-radius: var(--radius-lg); }
.pass__inner {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--duration-slow) var(--easing-out);
}
.pass__card.is-flipped .pass__inner { transform: rotateY(180deg); }
.pass__face {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-1);
  padding: var(--space-5);
  border-radius: var(--radius-lg); border: 0.5px solid var(--border-card);
  background: var(--gradient-accent); color: var(--fg-on-dark);
  box-shadow: var(--shadow-card-hi);
}
.pass__face--back { transform: rotateY(180deg); background: var(--surface-3); color: var(--fg-primary); align-items: center; }
.pass__brand { font-size: var(--size-caption); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.pass__points { font-size: var(--size-display); font-weight: 200; line-height: var(--line-tight); }
.pass__points b { font-weight: 200; }
.pass__tier { font-size: var(--size-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pass__hint { font-size: var(--size-micro); opacity: 0.8; margin-top: var(--space-2); }
/* QR drawn in CSS — no image file, no network. */
.pass__qr {
  width: 104px; height: 104px; border-radius: var(--radius-sm);
  background-color: var(--fg-primary);
  background-image:
    repeating-linear-gradient(90deg, var(--surface-3) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(0deg, var(--surface-3) 0 6px, transparent 6px 12px);
  background-size: 24px 24px, 24px 24px;
}
.pass__card.is-earned .pass__face { border-color: var(--accent-500); box-shadow: var(--shadow-bubble-accent); }

.pass__meta { display: flex; flex-direction: column; gap: var(--space-3); max-width: 340px; }
.pass__streak { margin: 0; font-size: var(--size-body-lg); }
.pass__streak b { font-weight: 800; color: var(--fg-accent); }
.pass__ring { height: 10px; border-radius: var(--radius-pill); background: var(--surface-2); border: 0.5px solid var(--border-card); overflow: hidden; }
.pass__ringFill { display: block; height: 100%; width: 0; background: var(--gradient-accent); transition: width var(--duration-slow) var(--easing-out); }
.pass__toNext { margin: 0; font-size: var(--size-caption); color: var(--fg-tertiary); }
.pass__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.pass__status { margin: 0; font-size: var(--size-body); color: var(--fg-tertiary); }

.journeys { margin-top: var(--space-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--space-5); align-items: start; }
.journey__who { font-size: var(--size-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-accent); font-weight: 700; margin: 0 0 var(--space-2); }
.journey__name { font-size: var(--size-body-lg); font-weight: 700; margin: 0 0 var(--space-3); }
.journey__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.journey__item { font-size: var(--size-body); color: var(--fg-secondary); padding-left: var(--space-5); position: relative; }
.journey__item::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--accent-500);
}
.journey__item b { color: var(--fg-primary); font-weight: 700; }

@media (max-width: 720px) {
  .pass { grid-template-columns: 1fr; }
  .pass__card { width: 100%; max-width: 320px; }
}

/* ── Product gallery — portrait phone captures ── */
.screens { margin-top: var(--space-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: var(--space-5); align-items: start; }
.shot--phone img { aspect-ratio: 0.8; object-fit: cover; object-position: top center; background: var(--surface-2); }