/* ---- card-lightbox.css — the site-wide enlarged-card popup (js/card-lightbox.js) ----
   The wizard modal's affordances (scrim, blur, corner close) under ccg-lb- names
   so neither main.js nor submit.js ever touches it. The card is sized off the
   viewport HEIGHT at the slab's own 5:7 and the width follows, so it is as big
   as the screen allows and never cropped. Two faces on one 3D turn: the back is
   pre-rotated and both hide their backface, so the flip is one transform on the
   parent. Tokens fall back to the site's literal values for a page that has not
   loaded style.css. */
.ccg-lb {
  position: fixed; inset: 0; z-index: 260;
  background: rgba(4, 10, 16, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; transition: opacity .22s;
}
.ccg-lb[hidden] { display: none; }
.ccg-lb.open { opacity: 1; }

.ccg-lb-close {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  font-size: 15px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted, #A6C4E0); cursor: pointer;
  background: rgba(166, 196, 224, .08); border: 1px solid rgba(166, 196, 224, .2);
  border-radius: 999px; padding: 8px 14px 8px 18px;
  transition: border-color .2s, color .2s, background .2s;
}
.ccg-lb-close:hover, .ccg-lb-close:focus-visible {
  color: var(--text, #fff); background: rgba(166, 196, 224, .18); border-color: rgba(166, 196, 224, .4); outline: none;
}
.ccg-lb-close:focus-visible { box-shadow: 0 0 0 3px rgba(54, 212, 249, .35); }
.ccg-lb-x { font-size: 20px; line-height: 1; font-weight: 400; }

.ccg-lb-stage {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 100%;
}

/* height first, width follows at 5:7; the min() keeps a narrow phone from
   pushing the card wider than the screen */
.ccg-lb-card {
  --ccg-lb-h: min(calc(100vh - 150px), calc((100vw - 48px) * 7 / 5));
  height: var(--ccg-lb-h); width: calc(var(--ccg-lb-h) * 5 / 7);
  position: relative; display: block; flex-shrink: 0;
  perspective: 1800px; -webkit-perspective: 1800px;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  border-radius: 14px;
  transition: opacity .2s;
}
@supports (height: 1dvh) {
  .ccg-lb-card { --ccg-lb-h: min(calc(100dvh - 150px), calc((100vw - 48px) * 7 / 5)); }
}
.ccg-lb-card:disabled { cursor: default; }
.ccg-lb-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(54, 212, 249, .55); }

.ccg-lb-inner {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.ccg-lb.is-flipped .ccg-lb-inner { transform: rotateY(180deg); }
.ccg-lb-inner.no-anim { transition: none !important; }

.ccg-lb-face {
  position: absolute; inset: 0; display: block; overflow: hidden;
  border-radius: 14px; background: #0b1a28;
  border: 1px solid rgba(166, 196, 224, .18);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6), var(--shadow-glow, 0 0 40px rgba(54, 212, 249, .22));
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.ccg-lb-back { transform: rotateY(180deg); }
.ccg-lb-img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  -webkit-user-drag: none; user-select: none;
}
.ccg-lb-img:not([src]) { visibility: hidden; }

/* loading: the card sits dim under a one-word status until the front arrives;
   a front that never arrives withdraws the card and leaves the status */
.ccg-lb-loading {
  margin: 0; font: 600 13px var(--font-body, 'Inter', 'Segoe UI', sans-serif);
  letter-spacing: .5px; color: var(--dim, #94ADC4);
}
.ccg-lb.is-loaded .ccg-lb-loading { display: none; }
.ccg-lb:not(.is-loaded) .ccg-lb-card { opacity: .35; }
.ccg-lb.is-broken .ccg-lb-card { display: none; }

.ccg-lb-caption {
  margin: 0; font: 13px var(--font-body, 'Inter', 'Segoe UI', sans-serif);
  color: var(--dim, #94ADC4); text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .ccg-lb, .ccg-lb-card, .ccg-lb-inner { transition: none; }
}
@media (max-width: 480px) {
  .ccg-lb { padding: 16px; }
  .ccg-lb-close { top: 10px; right: 10px; padding: 7px 12px 7px 14px; font-size: 14px; }
  .ccg-lb-card { --ccg-lb-h: min(calc(100vh - 130px), calc((100vw - 32px) * 7 / 5)); }
}
@supports (height: 1dvh) {
  @media (max-width: 480px) {
    .ccg-lb-card { --ccg-lb-h: min(calc(100dvh - 130px), calc((100vw - 32px) * 7 / 5)); }
  }
}