/* Product lists: medal flip card (MedalListing.php, medal-listing.js), builds on medal-viewer.css */

.dbk-medal-viewer.is-flip {
    margin: 0 0 1em;
}

.is-flip .dbk-medal-viewer__scene {
    display: block;
    perspective: calc(var(--dbk-size) * 2.8);   /* same depth impression as the large viewer */
    cursor: pointer;
    touch-action: auto;
}

.is-flip .dbk-medal-viewer__card,
.is-flip .dbk-medal-viewer__photo {
    display: block;
}

/* WooCommerce: "ul.products li.product a img" gets a bottom margin */
.woocommerce ul.products li.product .dbk-medal-viewer__img {
    margin: 0;
}

/* Touch screens: two square buttons, together as wide as the image */
.is-flip .dbk-medal-viewer__controls {
    gap: 0;
    margin-top: .4rem;
}

.is-flip .dbk-medal-viewer__controls button {
    flex: 1 1 50%;
    margin: 0;
    border-radius: 0;
    padding: .45rem .25rem;
    font-size: .8rem;
    line-height: 1.2;
}

.is-flip .dbk-medal-viewer__controls button + button {
    border-left-width: 0;
}

/* with a mouse the card turns on hover; without JavaScript the buttons would do nothing */
.is-flip:not(.is-ready) .dbk-medal-viewer__controls {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .is-flip .dbk-medal-viewer__controls {
        display: none;
    }
}