/*!
 * =============================================================================
 * File:        /_assets/css/card-flip.css
 * Component:   Bootstrap Flip Card
 * Version:     1.0.0
 *
 * Description:
 * Provides the responsive 3D flip-card presentation for paired front/back
 * images. Desktop devices flip cards on hover. Touch and keyboard interaction
 * is managed by /_assets/js/card-flip.js.
 *
 * Requirements:
 * • Each card uses the .flip-card class.
 * • Front and back faces use the provided component classes.
 * • Paired images should use identical dimensions and proportions.
 *
 * Dependencies:
 * • Bootstrap 4.3+
 * • /_assets/js/card-flip.js
 *
 * Author:
 * Amplify Corp.
 *
 * =============================================================================
 */

.flip-card {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    perspective: 1500px;
    -webkit-appearance: none;
    appearance: none;
}

.flip-card__inner {
    position: relative;
    display: block;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.65s ease;
}

.flip-card__face {
    display: block;
    width: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.flip-card__front {
    position: relative;
    z-index: 2;
    transform: rotateY(0deg);
}

.flip-card__back {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: rotateY(180deg);
}

.flip-card__face img {
    display: block;
    width: 100%;
    height: auto;
}

/* Touch and keyboard-controlled state */
.flip-card.is-flipped .flip-card__inner {
    transform: rotateY(180deg);
}

/* Desktop hover behaviour */
@media (hover: hover) and (pointer: fine) {
    .flip-card:hover .flip-card__inner {
        transform: rotateY(180deg);
    }
}

/* Keyboard focus */
.flip-card:focus {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}

/* Reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .flip-card__inner {
        transition-duration: 0.01ms;
    }
}