/* Zorg dat de card zelf een stacking context krijgt */
.portfolio_list li .list_inner{
  position: relative;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
  perspective: 1200px;
}

/* Flip */
.portfolio_list li .list_inner.is_flipped{
  transform: rotateY(180deg);
}



/* Front lagen: lager dan back */
.portfolio_list li .list_inner .image{ position: relative; z-index: 1; }
.portfolio_list li .list_inner .details{ position: relative; z-index: 2; }

/* Back face */
.portfolio_list li .list_inner .case_back {
    position: absolute;
    inset: 0;
    padding: 15px;
    /* border-radius: 12px; */
    background: rgb(255 255 255 / 92%);
    border: 1px solid rgba(255, 255, 255, .14);
    transform: rotateY(180deg);
    backface-visibility: hidden;
    display: flex;
    pointer-events: auto;
    flex-direction: column;
    gap: 10px;
    z-index: 3;
    flex-wrap: wrap;
    height: fit-content;
}

/* Flip state */
.portfolio_list li .list_inner.is_flipped{
  transform: rotateY(180deg);
}

/* Stats styling */
.case_stats{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media (max-width: 520px){
  .case_stats{ grid-template-columns: 1fr; }
}

.case_stat{
  border-bottom: 1px solid rgba(255,255,255,.14);
  padding: 2px 3px;
  background: rgba(225, 225, 225, 0.079);
}
.case_stat .label{
  display:block;
  font-size: 12px;
  opacity: .8;
}
.case_stat .value{
  display:block;
  font-weight: 800;
  font-size: 14px;
  margin-top: 2px;
}

.case_one_liner{
  margin: 0;
  opacity: .92;
  font-size: 14px;
  line-height: 1.5;
}

.case_actions{
  margin-top: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn_small {
  display: inline-block;
  padding: 8px 12px;
  font-weight: 700;
  text-decoration: none;
  background: #070505;
  color: #ffffff;
}

.btn_small.ghost{
  background: rgba(255,255,255,.14);
  color: #009dff;
  border: 1px solid rgba(255,255,255,.35);
}

.case_flip_hint{
  display:block;
  font-size: 12px;
  opacity: .7;
}


/* Heel belangrijk: overlay-link mag NOOIT de back blokkeren */
.portfolio_list li .list_inner.is_flipped .image .chang_tm_full_link{
  pointer-events: none !important;
}

/* Optioneel: ook de .main layer mag geen events stelen */
.portfolio_list li .list_inner.is_flipped .image .main{
  pointer-events: none !important;
}

/* Als geflipt: voorkant echt verbergen */
.portfolio_list li .list_inner.is_flipped .image,
.portfolio_list li .list_inner.is_flipped .details{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, visibility .15s ease;
}

/* Als niet geflipt: voorkant weer normaal */
.portfolio_list li .list_inner .image,
.portfolio_list li .list_inner .details{
  opacity: 1;
  visibility: visible;
  transition: opacity .15s ease, visibility .15s ease;
}

/* Back altijd zichtbaar wanneer geflipt */
.portfolio_list li .list_inner .case_back{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.portfolio_list li .list_inner.is_flipped .case_back{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}