/* Native PDF previews fill the cards; opening a preview is separate from choosing a template. */
.cv-ux-step-template .cv-ux-template-cta {
  position: static;
  order: 3;
  transform: none;
  opacity: 1;
  width: 100%;
  max-width: none;
  margin-top: auto;
  border: 0;
  cursor: pointer;
}

.cv-ux.cv-ux-step-template .cv-ux-template { padding: 10px; }

.cv-ux.cv-ux-step-template .cv-ux-mini-preview {
  width: 100%;
  height: auto;
  max-height: clamp(200px, calc(100svh - 430px), 380px);
  aspect-ratio: 17 / 22;
}

.cv-ux-step-template .cv-ux-template-preview-button {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  pointer-events: auto;
  cursor: zoom-in;
}

.cv-ux-step-template .cv-ux-signature-thumbnail { height: auto; }
.cv-ux-step-template .cv-ux-template-magnify { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(17 19 24 / 24%); opacity: 0; transition: opacity 150ms ease; }
.cv-ux-template-magnify svg { box-sizing: content-box; padding: 14px; border-radius: 50%; background: #d9ff63; color: #111318; box-shadow: 0 2px 12px rgb(0 0 0 / 18%); }
.cv-ux-template-preview-button:hover .cv-ux-template-magnify,
.cv-ux-template-preview-button:focus-visible .cv-ux-template-magnify { opacity: 1; }
.cv-ux-step-template :is(.cv-ux-template-preview-button, .cv-ux-template-cta):focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .cv-ux-step-template .cv-ux-template-magnify { transition: none; }
}

@media (max-width: 760px) {
  .cv-ux.cv-ux-step-template .cv-ux-template {
    padding: 8px;
  }

  .cv-ux.cv-ux-step-template .cv-ux-mini-preview {
    width: 100%;
    height: auto;
    max-height: none;
  }

  .cv-ux-step-template .cv-ux-template-cta {
    margin: 0;
  }
}

@media (hover: none) {
  .cv-ux-step-template .cv-ux-template-magnify { inset: auto 3px 3px auto; background: transparent; opacity: 1; }
  .cv-ux-template-magnify svg { width: 18px; height: 18px; padding: 5px; }
}