/* ============================
   OUR TEAM – FILTER WRAPPER
   ============================ */

.team-filter-widget {
  text-align: center;
  padding: 20px;
}

/* Filter groups (top controls) */
.team-filter-group {
  margin: 10px 0 20px;
}

.team-filter-group span {
  font-weight: 600;
  margin-right: 10px;
}

.team-filter-group .team-filter-btn {
  background: none;
  border: none;
  margin: 0 6px;
  cursor: pointer;
  font-weight: 600;
  padding: 5px 10px;
  color: #333;
}

.team-filter-group .team-filter-btn.active {
  color: #f3bc41;
  text-decoration: underline;
}

/* ============================
   OUR TEAM – CARD GRID
   ============================ */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
}

/* Card container */
.team-item {
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease;
}

.team-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* Image (rounded only on top corners) */
.team-thumb img {
  width: 100%;
  display: block;
}

/* Content box */
.team-info {
  padding: 18px 20px 24px;
}

/* Name (title) */
.team-name {
  font-size: 20px;
  font-weight: 700;
  color: #0B3C61; /* deep blue */
  margin-bottom: 8px;
  line-height: 1.3;
}

/* Position (subtitle) */
.team-position {
  font-size: 15px;
  color: #5A7A9C; /* lighter blue */
  margin: 0;
  line-height: 1.4;
}

/* ============================
   TEAM POPUP OVERLAY (FULLSCREEN BACKDROP)
   ============================ */
.team-popup-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.65);
  display: none;
  justify-content: flex-end;   /* ⬅️ muy importante: pegado a la IZQUIERDA */
  align-items: stretch;          /* altura completa */
  z-index: 99999;
  padding: 0;
  overflow: hidden;
}

/* Disable body scroll when popup is open */
body.no-scroll {
  overflow: hidden;
}

/* ============================
   LEFT DRAWER POPUP
   ============================ */

.team-popup {
  background: #ffffff;
  width: 40vw;                 /* 40% ancho */
  max-width: 750px;
  height: 100vh;               /* siempre 100% altura */
  border-radius: 0px 0 0 0px; /* curveado solo lado izquierdo */
  box-shadow: -6px 0 20px rgba(0,0,0,0.25);
  position: relative;
  padding: 40px;
  animation: teamDrawerIn .35s ease forwards;
  overflow-y: auto;
}

/* Slide-in from left animation */
@keyframes teamDrawerIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Close button */
.team-popup-close {
  position: absolute;
  right: 20px;
  top: 16px;
  font-size: 24px;
  cursor: pointer;
  font-weight: bold;
  color: #333;
  transition: .2s ease;
}

.team-popup-close:hover {
  color: #f3bc41;
  transform: scale(1.15);
}

/* ============================
   POPUP INNER LAYOUT
   ============================ */
.team-popup-inner {
  display: grid;
  grid-template-columns: 35% 65%;
  grid-template-rows: auto auto;
  gap: 22px;
  align-items: start;
}

/* Header area: image + name/position */
.team-popup-left {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.team-popup-right {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

/* Full-width BIO */
.team-popup-bio {
  grid-column: 1 / 3; /* span both columns */
  grid-row: 2 / 3;
  margin-top: 10px;
  line-height: 1.55;
  font-size: 16px;
  color: #222;
  
}

.team-popup-left img {
  width: 100%;
  border-radius: 16px;
  display: block;
}


/* Name */
#team-popup-name {
  color: #0B3C61;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
}

/* Position */
#team-popup-position {
  color: #F3BC41;
  font-size: 16px;
  margin-bottom: 12px;
}

/* LinkedIn icon */
.team-linkedin-icon {
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  color: #0A66C2;
  text-decoration: none;
  margin-bottom: 16px;
}

.team-linkedin-icon:hover {
  color: #084a8e;
}

/* Bio text */
.team-popup-bio {
  color: #151a40;
  font-family: "Open Sans", Sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}

.team-item.has-bio {
  cursor: pointer;
}

/* Mobile: drawer becomes full width */
@media (max-width: 768px) {
  .team-popup {
    width: 100vw;
    max-width: 100%;
    border-radius: 0;
    padding: 28px 20px;
  }
}

/* Center grid when there are exactly 2 team items */
.team-grid:has(.team-item:nth-child(2):last-child) {
  justify-content: center;
  grid-template-columns: repeat(2, minmax(280px, 280px));
}

.team-grid:has(.team-item:only-child) {
  justify-content: center;
  grid-template-columns: minmax(280px, 280px);
}