/* styles for flip cards */ 

.cwf-grid .cwf-grid--3-columns {
  justify-items: center;
}

.leds-staff-card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.leds-staff-card {
  perspective: 1000px;
    -webkit-perspective: 1000px; /* For Safari */
  margin:0;
  margin-bottom: 10px;
  box-sizing: border-box;
  position: relative;
  height: 600px;
  border: 1px solid #DEDEDE;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 325px;
}

.leds-staff-card-image img {
 border-radius: 7px 7px 0 0; 
}

.leds-staff-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  transition: transform 0.8s;
  -webkit-transform: translateZ(0px); /* Creates a new layer for better scrolling on mobile */
}

.leds-staff-card-info {
  padding: .5rem;
}

.leds-staff-section-title{
  margin-top: 2em !important;
  margin-bottom: 0px !important;
}


/* Apply rotation when flipped */
.leds-staff-card-inner.is-flipped {
  transform: rotateY(180deg);
}

.leds-staff-card-front,
.leds-staff-card-back {
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* For Safari */
   transform: rotateX(0deg); /* Fix for Firefox */
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px;
}

.leds-staff-card-front {
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
 /* text-align: center;*/
  z-index: 2;
}

.leds-staff-card-front h3, .leds-staff-card-front h4 {text-align: center;}
.leds-staff-card-front ul {padding: 0 0.75rem;}
.leds-staff-card-front ul li {list-style-type: none;}

.leds-staff-card-back {
  background-color: #FFFFFF;
  color: #000000;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 60px 1em 1em 1em;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Enables smooth scrolling on iOS */
  transform: rotateY(180deg);
  z-index: 1;
}

/* Flip button styling for the front and back */
.flip-btn {
  padding: 8px;
  border-radius: 20px;
  background-color: var(--vcu-gold);
  border: 1px solid #000;
  cursor: pointer;
  font-size: 1em;
  display: inline-block;
  width: 90%;
  box-sizing: border-box;
  position: absolute;
  left: 5%;
}

.flip-btn:hover {background-color: var(--vcu-black); color: var(--vcu-white);}

/* Front flip button positioned at the bottom */
.leds-staff-card-front .flip-btn {
  bottom: 20px; /* Always at the bottom on the front */
}

/* Back flip button positioned at the top */
.leds-staff-card-back .flip-btn {
  top: 20px; /* Always at the top on the back */
  left: 5%;
  width: 90%; /* Keeps the button width consistent */
}

.leds-staff-card-inner.is-flipped {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg); /* For Safari */
}


@media (max-width: 768px) {
  /* Add margin below the LinkedIn button to avoid overlap */
  .leds-staff-card-contact {
    margin-bottom: 20px;
  }

  /* Keep the front flip button slightly lower on mobile for spacing */
  .leds-staff-card-front .flip-btn {
    bottom: 15px; /* Adjusts slightly for more room */
  }

  /* Ensure the flip button on the back remains at the top */
  .leds-staff-card-back .flip-btn {
    top: 20px; /* Keeps the back button at the top */
    left: 5%;
    width: 90%;
    position: absolute;
  }
}