/* V126 — definitive flashcard layout fix.
 * The legacy v123/v124 flip used absolutely positioned faces. That made the
 * visible verso escape the card's intrinsic height, so long corrections and
 * self-mark buttons could overflow below the card and the VERSO kicker could
 * visually collide with the outer page label.
 *
 * Keep both faces in the same grid cell so the card height is the maximum of
 * recto/verso, but switch the flip presentation to visibility/opacity. This
 * preserves one-face-at-a-time behaviour while making layout entirely content
 * driven. !important is intentional: this hotfix must win even when the older
 * v124 stylesheet is printed later by a shortcode/page builder.
 */
.dbm-cvc-specific__card--flashcard .dbm-cvc-specific__page {
  position: relative !important;
  z-index: 3 !important;
  margin-bottom: 18px !important;
}

.dbm-cvc-specific__flashcard {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 0 !important;
  height: auto !important;
  perspective: none !important;
  overflow: visible !important;
}

.dbm-cvc-specific__flashcard-face {
  position: relative !important;
  inset: auto !important;
  grid-area: 1 / 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  transform: none !important;
  backface-visibility: visible !important;
  transition: opacity .2s ease, visibility .2s ease !important;
}

.dbm-cvc-specific__flashcard-front {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.dbm-cvc-specific__flashcard-back {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.dbm-cvc-specific__flashcard.is-flipped .dbm-cvc-specific__flashcard-front {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.dbm-cvc-specific__flashcard.is-flipped .dbm-cvc-specific__flashcard-back {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.dbm-cvc-specific__flashcard-kicker {
  margin: 0 0 14px !important;
  flex: 0 0 auto !important;
}

.dbm-cvc-specific__flashcard .dbm-cvc-specific__answer,
.dbm-cvc-specific__flashcard .dbm-cvc-specific__explanation,
.dbm-cvc-specific__flashcard .dbm-cvc-specific__source,
.dbm-cvc-specific__flashcard .dbm-cvc-specific__dispute-link,
.dbm-cvc-specific__flashcard .dbm-cvc-specific__selfmark {
  flex: 0 0 auto !important;
}

.dbm-cvc-specific__flashcard .dbm-cvc-specific__selfmark {
  margin-top: 24px !important;
  padding-bottom: 0 !important;
}

@media (max-width: 640px) {
  .dbm-cvc-specific__flashcard,
  .dbm-cvc-specific__flashcard-face {
    min-height: 0 !important;
  }
  .dbm-cvc-specific__flashcard-face {
    padding: 20px !important;
  }
}


/* V127 — size the flashcard from the visible face only.
 * Keeping both faces in the same grid cell makes the hidden face determine
 * the card height whenever it contains more content. */
.dbm-cvc-specific__flashcard-front,
.dbm-cvc-specific__flashcard-back {
  display: none !important;
}
.dbm-cvc-specific__flashcard:not(.is-flipped) .dbm-cvc-specific__flashcard-front {
  display: flex !important;
}
.dbm-cvc-specific__flashcard.is-flipped .dbm-cvc-specific__flashcard-back {
  display: flex !important;
}