/* Container + flip behavior */
.ifb { perspective: 1000px; width: 100%; height: 420px; }
.ifb__inner { position: relative; width: 100%; height: 100%; transition: transform .8s; transform-style: preserve-3d; }

/* Flip on hover (direction set by class) */
.ifb.ifb--flip-y:hover .ifb__inner { transform: rotateY(180deg); }
.ifb.ifb--flip-x:hover .ifb__inner { transform: rotateX(180deg); }

/* Faces */
.ifb__front, .ifb__back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* FRONT (card layout) */
.ifb__front {
  background: #fff;
  display: grid;
  grid-template-rows: 200px 1fr; /* overridden by control */
}
.ifb__img { position: relative; overflow: hidden; }
.ifb__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Front body */
.ifb__body { padding: 24px; background: #fff; }
.ifb__title { margin: 0 0 10px; font-size: 26px; line-height: 1.25; color: #2a2f33; }
.ifb__sep { height: 1px; background: #e8eaee; margin: 12px 0 16px; }
.ifb__text { margin: 0 0 16px; color: #6b7280; font-size: 16px; line-height: 1.6; }
.ifb__loc { margin: 0; color: #333; font-size: 16px; }

/* BACK */
.ifb__back {
  transform: rotateY(180deg); /* default when flipping on Y */
  background: #0A2540; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 28px;
}
.ifb.ifb--flip-x .ifb__back { transform: rotateX(180deg); } /* adjust when flipping on X */

.ifb__back h3 { margin: 0 0 10px; font-size: 24px; }
.ifb__back p { margin: 0 0 16px; font-size: 16px; line-height: 1.6; opacity: .95; }
.ifb__btn {
  display: inline-block; padding: 10px 16px; border-radius: 8px;
  background: #fff; color: #0A2540; text-decoration: none; font-weight: 600;
}

/* Responsive tweak */
@media (max-width: 767px) {
  .ifb { height: 460px; }
  .ifb__front { grid-template-rows: 180px 1fr; }
}