/*

How to Use
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
    </div>
  </div>
</div>
*/


/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

.flip-card {
    background-color: transparent;
    --width: 300px;
    height: 200px;
    border: 0px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
    cursor: pointer;
}


/* This container is needed to position the front and back side */

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flipped .flip-card-inner {
    transform: rotateY(180deg);
}


/* Position the front and back side */

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
}


/* Style the front side (fallback if image is missing) */

.flip-card-front {
    background-color: #ffffff;
    color: black;
}


/* Style the back side */

/* 2026-06-06 - Trinity - Constrain embedded vendor maps on the detail pages so they don't overflow the contact card */
.vendor-map iframe {
    width: 100%;
    max-width: 320px;
    height: 170px;
    border: 0;
    border-radius: .5rem;
}
.vendor-map img {
    max-width: 100%;
    height: auto;
    border-radius: .5rem;
}

/* Style the back side */

.flip-card-back {
    --background-color: rgb(255, 255, 255);
    --color: white;
    transform: rotateY(180deg);
}

/* 2026-06-13 - Trinity - Variable-height flip for the alternate card views (.vcard). Both faces share ONE CSS-grid
   cell, so the card sizes to its content (the taller face) and neither face overflows onto the cards below. Reuses
   the .flip-card click->.flipped JS + onmouseup tracking, so a click flips AND logs the view via vendorFeedback(). */
.flip-card.vcard { height: auto; cursor: pointer; }
.flip-card.vcard .flip-card-inner { height: auto; }
/* Front sits in normal flow, so the card sizes to the (uniform) front. The back overlays it, constrained to that
   height and clipping any overflow — so the description fills whatever space is left and a wordy vendor can't make
   its card taller than the rest. The inner .card owns the background (a white face would peek past its rounded corners). */
.flip-card.vcard .flip-card-front {
    position: relative;
    width: 100%;
    height: auto;
    background: transparent;
}
.flip-card.vcard .flip-card-back {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: auto;
    height: auto;
    background: transparent;
    overflow: hidden;
}
/* 2026-06-13 - Trinity - Promo ribbon to the TOP-RIGHT on the alternate layouts (it defaults to bottom-right, where
   it covered the views counter). */
.flip-card.vcard .ribbon_1 { top: 8px; right: 8px; bottom: auto; left: auto; z-index: 3; }