/**
 * Card view display modes — content (both/image/text) + fit (cover/contain).
 * FILE_PATH: assets/css/card_view_display_modes.css
 * SCOPE_ID: card_view_display_modes_css
 */

.card-view-display-toolbar .btn.active,
.card-view-display-toolbar .btn[aria-pressed="true"] {
  background-color: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
  color: #fff;
}

.card-view-display-toolbar .btn-outline-secondary.active,
.card-view-display-toolbar .btn-outline-secondary[aria-pressed="true"] {
  background-color: #495057;
  border-color: #495057;
  color: #fff;
}

/* Full image (contain): letterbox so nothing is cropped */
.card-view-container[data-view-fit="contain"] {
  background-color: #1a1a1a;
}

.card-view-container[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;
}

.card-view-container[data-view-fit="cover"] .preview-background {
  background-size: cover !important;
  background-position: center center !important;
}

/* Content modes */
.card-view-container[data-view-content="image"] .preview-text-container,
.card-view-container[data-view-content="image"] .preview-decorations {
  display: none !important;
}

.card-view-container[data-view-content="text"] .preview-background-container,
.card-view-container[data-view-content="text"] .preview-overlay-effect {
  display: none !important;
}

.card-view-container[data-view-content="text"] {
  background: linear-gradient(160deg, #2c3e50 0%, #1a252f 100%);
  min-height: 60vh;
}

.card-view-container[data-view-content="text"] .preview-text-container {
  position: relative !important;
  height: auto !important;
  min-height: 50vh;
  padding: 2rem 1rem;
}

@media (max-width: 576px) {
  /* Respect Full image on mobile (do not force cover) */
  .card-view-container[data-view-fit="contain"] .preview-background,
  .card-view-container[data-view-fit="contain"][data-background-size="contain"] .preview-background,
  [data-view-fit="contain"] .preview-background {
    background-size: contain !important;
    transform: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .card-view-display-toolbar {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }
}