/* ===============================
   TR Flip Card — FINAL (no clipping)
   - Size follows image (no forced aspect-ratio)
   - Desktop: hover
   - Mobile: tap (JS)
   - Fix: Z-offset to prevent edge clipping
=============================== */

.tr-flip-card{
  --flip-radius: 0px;                 /* скругление: 0 */
  --flip-duration: 700ms;
  --flip-ease: cubic-bezier(.2,.8,.2,1);
  --flip-shadow: none;                /* тень: none */
  --flip-z: 0.7px;                    /* ключевой фикс от обрезания строука */

  position: relative;
  display: block;
  width: 100%;
  perspective: 1200px;
  border-radius: var(--flip-radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.tr-flip-card__inner{
  display: grid;                      /* размер берётся от img */
  width: 100%;
  transform-style: preserve-3d;
  transition: transform var(--flip-duration) var(--flip-ease);
  border-radius: inherit;
  box-shadow: var(--flip-shadow);
  overflow: visible;                  /* важно: не клипать край */
}

.tr-flip-card__face{
  grid-area: 1 / 1;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: visible;                  /* важно: не клипать край */
}

/* Фронт чуть “вперёд” по Z — убирает отрезание справа/снизу */
.tr-flip-card__front{
  transform: translateZ(var(--flip-z));
}

.tr-flip-card__back{
  transform: rotateY(180deg) translateZ(var(--flip-z));
}

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

/* Hover только для устройств с настоящим hover */
@media (hover: hover) and (pointer: fine){
  .tr-flip-card:hover .tr-flip-card__inner{
    transform: rotateY(180deg);
  }
}

/* Переворот по классу (мобила/клавиатура) */
.tr-flip-card.is-flipped .tr-flip-card__inner{
  transform: rotateY(180deg);
}

/* Фокус */
.tr-flip-card:focus-visible{
  outline: 2px solid rgba(100,160,255,.45);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  .tr-flip-card__inner{ transition: none; }
}