/**
 * Adaptive card frame for non-square custom uploads (portrait/ultrawide).
 * FILE_PATH: assets/css/card_view_adaptive_image.css
 * SCOPE_ID: card_view_adaptive_image_css
 */

.card-view-container[data-is-custom="1"][data-view-fit="contain"] {
  background-color: #121212;
  /* Match uploaded photo aspect ratio when known */
  aspect-ratio: var(--card-bg-ar, 16 / 10);
  width: min(100%, calc(var(--card-bg-ar, 1.6) * min(85vh, 900px)));
  max-width: 100%;
  min-height: 0;
  height: auto;
  max-height: 85vh;
  margin-left: auto;
  margin-right: auto;
}

.card-view-container[data-is-custom="1"][data-view-fit="contain"] .preview-background {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  transform: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Ensure Full image + overlay keeps text absolutely on the photo (never flow under it) */
.card-view-container[data-is-custom="1"][data-view-fit="contain"][data-layout="overlay"][data-view-content="both"] {
  display: block;
  position: relative;
  overflow: hidden;
}

.card-view-container[data-is-custom="1"][data-view-fit="contain"][data-layout="overlay"][data-view-content="both"] .preview-background-container {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
}

.card-view-container[data-is-custom="1"][data-view-fit="contain"][data-layout="overlay"][data-view-content="both"] .preview-text-container {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 2;
}

/* Legacy stack rules kept inactive for old cached markup; overlay is preferred */
.card-view-container[data-is-custom="1"][data-layout="stack"][data-view-fit="contain"][data-view-content="both"][data-image-orient="unknown"] .preview-background-container {
  aspect-ratio: var(--card-bg-ar, 9 / 16);
  min-height: 420px;
}

.card-view-container[data-is-custom="1"][data-layout="stack"][data-view-fit="contain"][data-view-content="both"] {
  aspect-ratio: auto;
  width: 100%;
  max-width: 520px;
  max-height: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #1a1a1a;
  overflow: visible;
}

.card-view-container[data-is-custom="1"][data-layout="stack"][data-view-fit="contain"][data-view-content="both"] .preview-background-container {
  position: relative !important;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
  aspect-ratio: var(--card-bg-ar, 9 / 16);
  max-height: 70vh;
}

.card-view-container[data-is-custom="1"][data-layout="stack"][data-view-fit="contain"][data-view-content="both"] .preview-background {
  position: absolute;
  inset: 0;
}

.card-view-container[data-is-custom="1"][data-layout="stack"][data-view-fit="contain"][data-view-content="both"] .preview-overlay-effect {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.card-view-container[data-is-custom="1"][data-layout="stack"][data-view-fit="contain"][data-view-content="both"] .preview-text-container {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0;
  padding: 1rem 0.75rem 1.25rem;
  flex: 0 0 auto;
  align-items: stretch !important;
}

.card-view-container[data-is-custom="1"][data-layout="stack"][data-view-fit="contain"][data-view-content="both"] .preview-text-content {
  max-width: 100%;
  max-height: none;
  width: 100%;
  margin: 0;
}

.card-view-container[data-is-custom="1"][data-layout="stack"][data-view-fit="contain"][data-view-content="both"] .preview-decorations {
  display: none !important;
}

/* Image-only portrait: just show the photo frame */
.card-view-container[data-is-custom="1"][data-view-fit="contain"][data-view-content="image"] {
  max-width: min(100%, 520px);
}

/* Fill frame on custom portrait: use a taller frame so less of the photo is destroyed */
.card-view-container[data-is-custom="1"][data-image-orient="portrait"][data-view-fit="cover"] {
  aspect-ratio: var(--card-bg-ar, 9 / 16);
  width: min(100%, 480px);
  max-width: 100%;
  min-height: 0;
  height: auto;
  max-height: 85vh;
  margin-left: auto;
  margin-right: auto;
}

.card-view-container[data-is-custom="1"][data-image-orient="portrait"][data-view-fit="cover"] .preview-background {
  background-size: cover !important;
  background-position: center center !important;
  transform: none !important;
}

@media (max-width: 576px) {
  .card-view-container[data-is-custom="1"][data-view-fit="contain"],
  .card-view-container[data-is-custom="1"][data-image-orient="portrait"][data-view-fit="cover"] {
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
    min-height: 0 !important;
    height: auto !important;
    max-height: none;
  }

  .card-view-container[data-is-custom="1"][data-layout="stack"][data-view-fit="contain"][data-view-content="both"] {
    max-width: 100%;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  .card-view-container[data-is-custom="1"][data-layout="stack"][data-view-fit="contain"][data-view-content="both"] .preview-background-container {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    aspect-ratio: var(--card-bg-ar, 9 / 16);
    max-height: 70vh;
  }

  .card-view-container[data-is-custom="1"][data-layout="stack"][data-view-fit="contain"][data-view-content="both"] .preview-text-container {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .card-view-container[data-is-custom="1"][data-view-fit="contain"] .preview-background {
    opacity: 1 !important;
  }
}