/* Flip card — i2t3 component styles
 * CSS-only 3D flip (no JS). Flips on hover and on :focus-within (so tap on
 * touch devices and keyboard focus also reveal the back). Front is light,
 * back uses the theme primary colour.
 */

.i2t3-flipcard {
    display: block;
    perspective: 1200px;
    outline: none;
}

.i2t3-flipcard__inner {
    position: relative;
    width: 100%;
    min-height: 18rem;
    transition: transform .6s;
    transform-style: preserve-3d;
}

.i2t3-flipcard:hover .i2t3-flipcard__inner,
.i2t3-flipcard:focus-within .i2t3-flipcard__inner {
    transform: rotateY(180deg);
}
.i2t3-flipcard--vertical:hover .i2t3-flipcard__inner,
.i2t3-flipcard--vertical:focus-within .i2t3-flipcard__inner {
    transform: rotateX(180deg);
}

.i2t3-flipcard__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    border-radius: .5rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: auto;
}

.i2t3-flipcard__front {
    background: #fff;
    border: 1px solid var(--i2t3-border-color, #dee2e6);
}

.i2t3-flipcard__back {
    background: var(--i2t3-flipcard-back, var(--i2t3-primary, #0d6efd));
    color: #fff;
    transform: rotateY(180deg);
}
.i2t3-flipcard--vertical .i2t3-flipcard__back {
    transform: rotateX(180deg);
}

.i2t3-flipcard__icon {
    font-size: 2.5rem;
    color: var(--i2t3-flipcard-back, var(--i2t3-primary, #0d6efd));
    margin-bottom: 1rem;
}

.i2t3-flipcard__img {
    max-width: 5rem;
    height: auto;
    margin-bottom: 1rem;
}

.i2t3-flipcard__title {
    margin-bottom: .5rem;
}

.i2t3-flipcard__backtext > :last-child {
    margin-bottom: 0;
}