/* LeadershipSection.css */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');

.leadership-page {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f8f9fa;
  min-height: 100vh;
  padding: 2rem 0;
  overflow-x: hidden; /* Prevent any horizontal overflow globally */
}

.container-fluid {
  padding: 0 0.5rem; /* Minimal padding to fit content snugly */
  margin: 0;
  width: 100%;
  max-width: none; /* Allow full viewport width */
}

.leaders-container {
  padding: 2.5rem 1rem; /* Reduced side padding to maximize space for cards - SAME for both sections to ensure alignment */
  margin-bottom: 2.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  box-sizing: border-box; /* Include padding in width for exact alignment */
}

.bg-blue {
  background: linear-gradient(135deg, #f8fbff 0%, #f0f7ff 100%);
}

.bg-red {
  background: linear-gradient(135deg, #fff8f8 0%, #fff0f0 100%);
}

.leaders-grid {
  display: grid;
  gap: 1rem; /* Base gap, SAME for both sections to ensure alignment */
  justify-content: center;
  width: 100%; /* Ensure grid takes full container width */
  box-sizing: border-box;
}

/* Five columns: Use 1fr to distribute space equally, fitting exactly without overflow */
.five-column {
  grid-template-columns: repeat(5, 1fr); /* Equal width columns that fit the container - SAME for both rows */
  gap: 1rem;
  justify-items: center; /* Center each card in its cell */
  align-items: start; /* Top-align for consistent vertical positioning */
}

/* Remove .two-column-centered - no longer needed; second row uses .five-column with positioning */

.leader-card {
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 100%; /* Fit within grid cell */
  margin: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.leader-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Light background colors */
.bg-light-blue {
  background: linear-gradient(135deg, #f8fbff 0%, #e6f0ff 100%);
}

.bg-light-red {
  background: linear-gradient(135deg, #fff8f8 0%, #ffe6e6 100%);
}

.bg-light-yellow {
  background: linear-gradient(135deg, #fffdf0 0%, #fff5e6 100%);
}

.bg-light-green {
  background: linear-gradient(135deg, #f0fff8 0%, #e6fff0 100%);
}

.leader-image-container {
  position: relative;
  height: 250px; /* Base height, scaled down responsively - ensures uniform card sizes */
  overflow: hidden;
  display: flex;
  align-items: flex-start; /* Align to top to minimize space above image */
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent; /* Let image cover fully; no background visible */
  box-sizing: border-box;
}

.leader-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* CHANGED: Fill container completely, crop if needed - NO EMPTY SPACES */
  object-position: top center; /* Prioritize top (e.g., faces) to avoid cropping key parts */
  transition: transform 0.3s ease;
  display: block;
  box-sizing: border-box;
}

.leader-card:hover .leader-img {
  transform: scale(1.02); /* Slight scale on hover - works with cover fit */
}

.profile-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f3f5;
}

.profile-icon i {
  font-size: 2rem; /* Scaled for smaller cards */
  color: #868e96;
}

.leader-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 0.8rem;
  text-align: center;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.leader-name {
  font-weight: 700;
  font-size: 0.9rem; /* Base font size, scaled down */
  margin: 0 0 0.2rem 0;
  line-height: 1.1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  white-space: nowrap; /* Prevent text wrapping in small cards */
  overflow: hidden;
  text-overflow: ellipsis;
}

.leader-role {
  font-size: 0.7rem;
  margin: 0;
  opacity: 0.9;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-center {
  text-align: center;
}

.mt-5 {
  margin-top: 3rem;
}

.unit-badge {
  display: inline-block;
  background: #8B0000;
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 46, 138, 0.3);
  text-align: center;
}

.unit-text {
  color: white;
  font-weight: 600;
  font-style: normal;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 1.1rem;
}

/* Empty grid cells for second row: Invisible placeholders to maintain 5-column structure */
.empty-grid-cell {
  visibility: hidden; /* Hidden, no visual impact */
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* Positioning for second row cards: Exactly below 2nd and 4th of first row */
.position-under-second {
  grid-column: 2 / 3; /* Spans exactly column 2 */
}

.position-under-fourth {
  grid-column: 4 / 5; /* Spans exactly column 4 */
}

/* Responsive Design: Scale sizes down progressively to fit without overflow/scroll.
   Both rows use same .five-column, so alignment is exact at all sizes. */
@media (min-width: 1200px) {
  .leaders-container {
    padding: 2.5rem 2rem;
  }
  
  .five-column {
    gap: 2rem;
  }
  
  .leader-image-container {
    height: 350px; /* Scaled up, images cover fully */
  }
  
  .leader-name {
    font-size: 1rem;
  }
  
  .leader-role {
    font-size: 0.8rem;
  }
  
  .profile-icon i {
    font-size: 3rem;
  }
  
  .leader-overlay {
    padding: 1rem;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .leaders-container {
    padding: 2rem 1.5rem;
  }
  
  .five-column {
    gap: 1.5rem;
  }
  
  .leader-image-container {
    height: 300px; /* Scaled, images cover fully */
  }
  
  .leader-name {
    font-size: 0.95rem;
  }
  
  .leader-role {
    font-size: 0.75rem;
  }
  
  .profile-icon i {
    font-size: 2.5rem;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .container-fluid {
    padding: 0 0.75rem;
  }
  
  .leaders-container {
    padding: 1.5rem 1rem;
  }
  
  .five-column {
    gap: 1rem;
  }
  
  .leader-image-container {
    height: 250px; /* Scaled, images cover fully */
  }
  
  .leader-name {
    font-size: 0.85rem;
  }
  
  .leader-role {
    font-size: 0.7rem;
  }
  
  .profile-icon i {
    font-size: 2.2rem;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .leadership-page {
    padding: 1.5rem 0;
  }
  
  .container-fluid {
    padding: 0 0.5rem;
  }
  
  .leaders-container {
    padding: 1.2rem 0.8rem;
  }
  
  .five-column {
    gap: 0.8rem;
  }
  
  .leader-image-container {
    height: 200px; /* Scaled down, images cover fully - no spaces */
  }
  
  .leader-name {
    font-size: 0.8rem;
  }
  
  .leader-role {
    font-size: 0.65rem;
  }
  
  .profile-icon i {
    font-size: 1.8rem;
  }
  
  .leader-overlay {
    padding: 0.6rem;
  }
}

@media (max-width: 575px) {
  .leadership-page {
    padding: 1rem 0;
  }
  
  .container-fluid {
    padding: 0 0.25rem; /* Minimal padding for mobile */
  }
  
  .leaders-container {
    padding: 1rem 0.5rem;
    margin-bottom: 2rem;
  }
  
  .five-column {
    gap: 0.5rem; /* Small gap to fit 5 cards tightly */
  }
  
  .leader-image-container {
    height: 140px; /* Smaller height to keep proportions - images cover fully */
  }
  
  .leader-name {
    font-size: 0.7rem; /* Smaller but readable; ellipsis if too long */
  }
  
  .leader-role {
    font-size: 0.6rem;
  }
  
  .profile-icon i {
    font-size: 1.5rem;
  }
  
  .leader-overlay {
    padding: 0.4rem;
  }
  
  .unit-badge {
    padding: 0.4rem 1rem;
  }
  
  .unit-text {
    font-size: 0.95rem;
  }
}

@media (max-width: 400px) {
  .leaders-container {
    padding: 0.8rem 0.3rem;
  }
  
  .five-column {
    gap: 0.3rem;
  }
  
  .leader-image-container {
    height: 120px; /* Even smaller - images cover fully, no spaces */
  }
  
  .leader-name {
    font-size: 0.65rem;
  }
  
  .leader-role {
    font-size: 0.55rem;
  }
  
  .profile-icon i {
    font-size: 1.2rem;
  }
  
  .leader-overlay {
    padding: 0.3rem;
  }
}