/* ==========================================================================
   leadership.css — Leadership page styles
   ========================================================================== */

/* Hero */
.leadership-hero {
  height: fit-content;
  padding-top: 10vh;
}
.leadership-hero h1 {
  margin-block: 1.5%;
}
.leadership-hero p {
  max-width: 35%;
}
.leadership-hero h5 {
  letter-spacing: 1.5px;
}

/* Card grid */
.leadership-content {
  width: 100%;
  padding: 2.5%;
  height: fit-content;
  display: flex;
  flex-wrap: wrap;
  gap: 1%;
}

/* Individual leader card */
.leader-card {
  width: 24%;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-card-border);
  background: var(--color-off-white-green);
  margin-bottom: 2%;
  height: clamp(350px, 60vh, 900px);
  perspective: 1000px;
}

.leader-card img {
  width: 100%;
  border-radius: var(--radius-card);
  object-fit: cover;
  height: 70%;
  object-position: top;
}

.leader-card h5 {
  color: var(--color-green-dark);
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.5px;
  margin-top: 8%;
  margin-bottom: 2%;
}

.leader-card h6 {
  color: var(--color-gray-dark);
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 1.2px;
  margin-bottom: 10%;
  text-transform: uppercase;
}

/* Flip card animation */
.leader-card-inner {
  text-align: center;
  transition: var(--transition-flip);
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
}

.leader-card:hover .leader-card-inner {
  transform: rotateY(180deg);
}

.leader-card-front {
  position: relative;
  width: 100%;
}

.leader-card-back {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: var(--color-green-dark);
  color: var(--color-white);
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
}

.leader-card-back p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 350;
  line-height: 120%;
  max-width: 60%;
  text-align: center;
  color: var(--color-white);
}

.leader-title {
  /* Container for name + job title below image */
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (width <= 768px) {
  .leadership-hero {
    padding: 20px;
    margin-top: 50px;
  }
  .leadership-hero h1 {
    margin-block: 0;
    margin-bottom: 10px;
  }
  .leadership-hero p {
    max-width: 100%;
    margin-bottom: 20px;
  }
  .leadership-hero h5 {
    margin-bottom: 20px;
  }

  .leadership-content {
    gap: 15px;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .leader-card {
    width: 100%;
    min-height: 260px;
    height: 260px;
  }
  .leader-card img {
    height: 60%;
  }
  .leader-card h5 {
    font-size: 20px;
  }
}