/* ============================
   FLIP – alap
============================ */

.flip-container {
  position: relative;
  perspective: 1200px;
}

.flip-box {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  will-change: transform;
  border-radius: 5px;
}

/* flip hover */
.flip-container:hover .flip-box {
  transform: rotateY(180deg);
}

/* ============================
   FRONT / BACK
============================ */

.flip-front,
.flip-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden; /* 🔑 lekerekítés miatt */
}

.flip-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

/* ============================
   🚫 THEME GRADIENT TELJES TILTÁS
============================ */

.flip-container .services-card-item,
.flip-container .services-card-item:hover {
  background: none !important;
  padding: 20px;
}

.flip-container .services-card-item::before,
.flip-container .services-card-item::after {
  display: none !important;
  content: none !important;
}

/* ============================
   FRONT – FIX HÁTTÉR
============================ */

.flip-front .services-card-item {
  background-color: #072032 !important;
  height: 100%;
  min-height: 260px;
}

/* ============================
   BACK – FIX GRADIENT
============================ */

.flip-back-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    #76009c,
    #e31718
  );
  z-index: 0;
}

/* back tartalom a gradient felett */
.flip-back .services-card-item {
  position: relative;
  z-index: 1;
  height: 100%;
}

/* ============================
   BACK CONTENT – FEHÉR
============================ */

.flip-back .services-card-item,
.flip-back .services-card-item h1,
.flip-back .services-card-item h2,
.flip-back .services-card-item h3,
.flip-back .services-card-item h4,
.flip-back .services-card-item h5,
.flip-back .services-card-item h6,
.flip-back .services-card-item p {
  color: #ffffff !important;
}

/* ============================
   LINK – TELJESEN AKTÍV
============================ */

.flip-back .services-card-item a {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto; /* 🔑 */
  margin-bottom: 8px;
}

.flip-back .services-card-item a:hover {
  text-decoration: underline;
}

.flip-back .services-card-item a i {
  color: #ffffff !important;
}

/* ============================
   Mobil: hover tiltás
============================ */

@media (hover: none) {
  .flip-container:hover .flip-box {
    transform: none;
  }
}

/* 1) A gradient réteg SOHA ne fogja el a kattintást */
.flip-back-gradient {
  pointer-events: none !important;
}

/* 2) Alapból a front legyen kattintható, a back ne */
.flip-front { pointer-events: auto !important; }
.flip-back  { pointer-events: none !important; }

/* 3) Amikor flipped (hover), akkor fordítva: a back legyen kattintható */
.flip-container:hover .flip-front { pointer-events: none !important; }
.flip-container:hover .flip-back  { pointer-events: auto !important; }

/* 4) A back oldali tartalom/linkek legyenek biztosan “élők” */
.flip-back .services-card-item,
.flip-back .services-card-item .content,
.flip-back .services-card-item a {
  pointer-events: auto !important;
  cursor: pointer;
}


/* ikon méret */
.services-card-item .icon i,
.services-card-item .icon svg {
  font-size: 52px;
  width: 52px;
  height: 52px;
}

/* front ikon – front */
.flip-front .services-card-item .icon i,
.flip-front .services-card-item .icon svg {
  color: #e31718;
  fill: #e31718;

}

/* back ikon – back */
.flip-back .services-card-item .icon i,
.flip-back .services-card-item .icon svg {
  color: #ffffff;
  fill: #ffffff;
}