/* ===== FLIP – WPBakery + Medin kompat ===== */

.flip-scope,
.flip-scope * { box-sizing: border-box; }

/* Medin néha overflow-oz: engedjük a 3D-t kijönni */
.flip-scope,
.flip-scope .vc_row,
.flip-scope .wpb_column,
.flip-scope .wpb_wrapper { overflow: visible !important; }

/* RAW HTML padding fix */
.flip-scope .wpb_raw_html .wpb_wrapper { padding: 0 !important; }

/* Alap konténer + 3D tér */
.flip-scope .flipcard {
  width: 100%;
  max-width: 560px;
  height: 400px;            /* állítható */
  margin: 0 auto;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  position: relative;
}

/* Belső: 3D színpad */
.flip-scope .flipcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .6s ease;
  will-change: transform;
}

/* Hoverre fordulás */
.flip-scope .flipcard:hover .flipcard-inner { transform: rotateY(180deg); }

/* Két oldal – egymásra fektetve */
.flip-scope .flipcard-front,
.flip-scope .flipcard-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Előlap: IMG-vel (stabilabb Medin alatt) */
.flip-scope .flipcard-front img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;     /* Medin img reset ellen */
  object-fit: cover;
  display: block;
  transform: translateZ(0);       /* grafikusi bugok ellen */
}

/* Hátlap */
.flip-scope .flipcard-back {
  background: #06a8e8;
  color: #fff;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

/* Medin egyes szülőkön transform van -> hozd létre új stacking contextet */
.flip-scope .flipcard,
.flip-scope .flipcard-front,
.flip-scope .flipcard-back { z-index: 0; }

/* Opcionális: mobilon kapcsold ki a flipet */
@media (max-width: 767px){
  .flip-scope .flipcard:hover .flipcard-inner { transform: none; }
}

/* — Ha arányos kártyát szeretnél (nem fix 400px): add a .flipcard mellé a .ratio-4x5 osztályt — */
.flip-scope .ratio-4x5 { height: auto; position: relative; }
.flip-scope .ratio-4x5::before { content:""; display:block; padding-top:125%; }
.flip-scope .ratio-4x5 .flipcard-inner,
.flip-scope .ratio-4x5 .flipcard-front,
.flip-scope .ratio-4x5 .flipcard-back { position:absolute; inset:0; }