/* ===== FILTER BAR (anchors, full-width, thick underline) ===== */
.team-filters {
  display: flex;
  align-items: flex-end;
  gap: 0;
  border-bottom: 1px solid #1C0403;
  padding-bottom: 0;
  margin-bottom: 40px;
}
.team-filters .team-filter {
  display: block;
  flex: 1 1 0;
  text-align: center;
  padding: 12px 8px 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1C0403;
  text-decoration: none;
  position: relative;
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
}
.team-filters .team-filter::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 4px;
  background: transparent;
  transition: background .2s ease;
}
.team-filters .team-filter:hover::after,
.team-filters .team-filter.is-active::after {
  background: #1C0403;
}

/* ===== GRID ===== */
.team-grid {
  display: grid;
  gap: 28px;
}

.team-grid.cols-5 {
  grid-template-columns: repeat(5, 1fr);
}
.team-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.team-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.team-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.team-grid.cols-1 {
  grid-template-columns: 1fr;
}
@media (max-width: 1024px) {
  .team-grid.cols-3,
  .team-grid.cols-4,
  .team-grid.cols-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== CARD (hover gradient + caption + button) ===== */
.team-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  outline: none;
}
.team-card .card-media {
  aspect-ratio: 4/5;
  overflow: hidden;
}
.team-card .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradient overlay on hover */
.team-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 4, 3, 0) 0%, rgba(28, 4, 3, 1) 100%);
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}
.team-card:hover::before,
.team-card:focus-visible::before {
  opacity: 1;
}

/* Caption */
.team-card .card-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem;
  color: #FFF6F5;
  opacity: 0;
  text-transform: uppercase;
  transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease;
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
}
.team-card:hover .card-caption,
.team-card:focus-visible .card-caption {
  opacity: 1;
  transform: none;
}

.team-card .name {
  margin: 0 0 12px 0;
  line-height: 1.1;
  font-size: 18px;
}
.team-card .role {
  margin: 0 0 40px 0;
  opacity: .95;
  font-size: 18px;
}

/* Read bio "button" */
.team-card .read-bio {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  padding: 12px 24px;
  background: #FF8971;
  color: #3C0A07;
  border: 1px solid #FF8971;
  text-decoration: none;
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
  position: absolute;
  bottom: 0;
  right: 0;
}
.team-card .read-bio:hover {
  filter: brightness(0.95);
}

/* Selected outline */
.team-card.is-selected {
  box-shadow: inset 0 0 0 3px #5BC0FF;
}

/* Hidden payload */
.team-card .bio-content[hidden] {
  display: none !important;
}

/* ===== DRAWER placed inside grid (spans full row) ===== */
.team-grid .team-drawer {
  grid-column: 1 / -1;
  margin-top: 0;
}

/* Container animates height/opacity/offset; starts fully out of layout */
.team-drawer {
  display: none; /* Critical to prevent gap when closed */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  background: #D8C8C7;
  will-change: max-height, opacity, transform;
  transition: max-height .5s ease, opacity .38s ease, transform .38s ease;
}

/* Inner subtle fade/slide */
.team-drawer .drawer-inner {
  position: relative;
  padding: 4rem;
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 32px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .32s ease, transform .38s ease;
}

/* Open state */
.team-drawer.is-open {
  display: block; /* Back in layout to animate */
  opacity: 1;
  transform: none;
}
.team-drawer.is-open .drawer-inner {
  opacity: 1;
  transform: none;
}

/* Drawer content layout */
.team-drawer .bio-header {
  grid-column: 1;
}
.team-drawer .bio-meta {
  grid-column: 1;
}
.team-drawer .bio-body {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* Close button */
.drawer-close {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0 !important;
  color: #1C0403 !important;
  border: 1px solid #1C0403 !important;
  cursor: pointer;
  line-height: 1;
}

/* Left column styles */
.team-drawer .bio-header h2 {
  margin: 0 0 6px 0;
  color: #1C0403;
}
.team-drawer .bio-header .role {
  margin: 0 0 14px 0;
  color: #1C0403;
  opacity: .8;
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
  text-transform: uppercase;
}
.team-drawer .bio-meta {
  color: #1C0403;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  align-content: center;
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
  text-transform: uppercase;
}
.team-drawer .bio-meta a {
  color: #1C0403;
  text-decoration: underline;
}

/* Right column styles */
.team-drawer .bio-body {
  color: #1C0403;
  line-height: 1.5;
  max-width: 675px;
}
.team-drawer .bio-body p {
  color: #1C0403;
  margin: 0 0 1em 0;
}

@media (max-width: 900px) {
  .team-drawer .drawer-inner {
    grid-template-columns: 1fr;
  }
  .team-drawer .bio-header,
  .team-drawer .bio-meta,
  .team-drawer .bio-body {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ===== PAGINATION & INIT VISIBILITY ===== */
.team-grid:not(.js-on) .team-card {
  display: none; /* Prevent flash of all */
}
.team-section:not(.js-on) .team-more-wrap {
  display: none; /* Hide button until ready */
}

/* Visibility helpers */
.team-card {
  display: block;
}
.team-card.is-hidden {
  display: none;
}

/* "View more" button (basic look) */
.team-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.team-more {
  appearance: none;
  border: 1px solid #1C0403;
  background: #fff;
  color: #1C0403;
  padding: .6rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: .03em;
}
.team-more:hover {
  opacity: .85;
}

.team-card[data-has-bio="0"] {
  cursor: default !important;
}

/* Force pointer cursor for advisory-board cards (and all children) */
.team-section .team-grid .team-card[data-has-bio="0"],
.team-section .team-grid .team-card[data-has-bio="0"] * {
  cursor: default !important;
}


@media (max-width: 767px) {
  .team-filters{
    flex-wrap: wrap;
    align-items: stretch;
    border-bottom: 0;        /* optional: looks cleaner when wrapped */
        margin-bottom: 24px;
  }

  .team-filters .team-filter{
    flex: 1 1 100% !important;           /* 2 per row */
    padding: 14px 10px 14px !important;
    white-space: normal;     /* allow wrap */
  }

  /* underline stays under each "cell" */
  .team-filters .team-filter::after{
    bottom: 0;
  }
}

@media (max-width: 767px) {
  .team-section .team-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .team-drawer .drawer-inner{
    padding: 18px 16px;      /* much tighter */
    gap: 14px;
    grid-template-columns: 1fr;
    box-sizing: border-box;
  }

  .team-drawer .bio-body{
    max-width: none;         /* remove the artificial empty space */
  }

  .drawer-close{
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
  }
}

/* =========================
   MOBILE: disable hover UI
   ========================= */
@media (max-width: 767px) {

  /* Remove gradient overlay */
  .team-card::before{
    display: none !important;
  }

  /* Never show hover caption on mobile */
  .team-card .card-caption{
    display: none !important;
  }

  /* Safety: prevent accidental hover reveal on some mobile browsers */
  .team-card:hover::before,
  .team-card:hover .card-caption{
    opacity: 0 !important;
    transform: none !important;
  }

  /* Remove hover cursor affordance */
  .team-card{
    cursor: pointer;
  }

  /* Hide read-bio button explicitly (belt + suspenders) */
  .team-card .read-bio{
    display: none !important;
  }
}