/**
 * Xeva Team Member Filter Bar & Card Styles
 *
 * @package Xeva
 */

/* Filter Bar Container */
.xeva-team-filter-bar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 1.5rem;
   background-color: var(--xeva-ash);
   padding: 3rem;
   border-radius: 3.2rem;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
   border: 1px solid rgba(0, 0, 0, 0.06);
   margin-bottom: 3rem;
}

/* Filter Controls Wrapper */
.xeva-team-filter-group {
   display: flex;
   flex: 1 1 200px;
   flex-direction: column;
   gap: 0.5rem;
}

.sr-only,
.screen-reader-text {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
   margin: -1px !important;
   overflow: hidden !important;
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
}

.xeva-team-filter-input,
.xeva-team-filter-select {
   width: 100%;
   padding: 1rem 1.4rem;
   border-radius: 2.4rem;
   border: 1px solid #dcdde0;
   background-color: #D9D9D9;
   color: black;
   font-size: 1.5rem;
   transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.xeva-team-filter-select option {
   color: black;
}

.xeva-team-filter-input:focus,
.xeva-team-filter-select:focus {
   outline: none;
   border-color: var(--xeva-gold, #c99d5d);
   background-color: #ffffff;
   box-shadow: 0 0 0 3px rgba(201, 157, 93, 0.15);
   color: black;
}

input[type=search].xeva-team-filter-input {
   background-color: white;
   color: var(--xeva-ink);
   border-radius: 2.4rem;
}

/* Reset Button & Count */
.xeva-team-filter-actions {
   display: flex;
   align-items: center;
   gap: 1.5rem;
   margin-left: auto;
}

.xeva-team-count-badge {
   font-size: 1.4rem;
   font-weight: 600;
   color: #555555;
   white-space: nowrap;
}

.xeva-team-reset-btn {
   background: transparent;
   border: 1px solid #dcdde0;
   padding: 0.9rem 1.6rem;
   border-radius: 0.8rem;
   font-size: 1.4rem;
   font-weight: 600;
   color: #444444;
   cursor: pointer;
   transition: all 0.2s ease;
}

.xeva-team-reset-btn:hover {
   background-color: var(--xeva-gold, #c99d5d);
   border-color: var(--xeva-gold, #c99d5d);
   color: #ffffff;
}

/* No Results Warning */
.xeva-team-no-results {
   display: none;
   text-align: center;
   padding: 4rem 2rem;
   background: #f9f9fa;
   border-radius: 1.6rem;
   color: #666666;
   font-size: 1.6rem;
   margin-top: 2rem;
}

/* Scroll Reveal Opacity Fade-in */
.xeva-scroll-reveal {
   opacity: 0;
   transition: opacity 0.28s ease-out;
   will-change: opacity;
}

.xeva-scroll-reveal.is-in-view {
   opacity: 1;
}

/* 2-Column Stagger Effect: Column 2 in each row enters with subtle delay */
.gb-query-loop-item:nth-child(even).xeva-scroll-reveal,
.xeva-team-card:nth-child(even).xeva-scroll-reveal,
article.type-team_member:nth-child(even).xeva-scroll-reveal {
   transition-delay: 0.05s;
}

/* Smooth Card Visibility Transitions for Filter Actions */
.xeva-card-visible {
   animation: xevaFadeIn 0.35s ease forwards;
}

@keyframes xevaFadeIn {
   from {
      opacity: 0;
      transform: translateY(8px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@media (prefers-reduced-motion: reduce) {
   .xeva-card-visible {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
   }
}

/* Mobile Responsive Stacking */
@media (max-width: 768px) {
   .xeva-team-filter-bar {
      flex-direction: column;
      align-items: stretch;
   }

   .xeva-team-filter-actions {
      margin-left: 0;
      justify-content: space-between;
      width: 100%;
   }

   .gb-query-loop-item:nth-child(even).xeva-scroll-reveal,
   .xeva-team-card:nth-child(even).xeva-scroll-reveal {
      transition-delay: 0s;
   }

   .xeva-team-filter-group {
      flex: 1 1 4rem;
   }
}

/* ==========================================================================
   TEAM CARD RESPONSIVE LAYOUT & WIDE-SCREEN GRID
   ========================================================================== */

:root {
   /* Reference Token: Customize wide desktop threshold here */
   --team-breakpoint-widescreen: 1600px;
}

/* --------------------------------------------------------------------------
   1. Defensive Card Flexbox & Image Sizing (Prevents Photo Crushing)
   -------------------------------------------------------------------------- */
.team-card {
   min-width: 0;
}

/* Prevent image cell from forcing giant grid row height */
.team-card>a:first-child,
.team-card-image-container {
   min-height: 0 !important;
}

/* Lock broker headshot width so long text can NEVER squish the image */
/* .team-card>a:first-child:has(img),
.team-card>a:first-child:has(picture) {
   flex: 0 0 130px !important;
   width: 130px !important;
   min-width: 130px !important;
   max-width: 130px !important;
   overflow: hidden;
} */

.team-card>a:first-child picture,
.team-card>a:first-child img,
.team-card-image {
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
   display: block;
   /* Neutralize WP 6.7 core 3000px/1500px containment blowout ONLY on team cards */
   contain-intrinsic-size: none !important;
}

/* Text Container: allows children to shrink and truncate within flex parent */
.team-card>div:last-child {
   flex: 1 1 auto !important;
   min-width: 0 !important;
   overflow: hidden;
}

/* --------------------------------------------------------------------------
   2. Contact Details: Icon Alignment & Text Ellipsis (>= 600px)
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
   .team-card .team-card-details a {
      display: flex !important;
      align-items: center !important;
      gap: 0.8rem;
      min-width: 0 !important;
      max-width: 100% !important;
   }

   .team-card .team-card-details a .gb-shape {
      flex-shrink: 0 !important;
      display: inline-flex;
   }

   .team-card .team-card-details a .gb-text {
      flex: 1 1 auto;
      min-width: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
   }
}

/* --------------------------------------------------------------------------
   3. Featured / Leadership Card Styling: Champagne Luxury (Disabled for now)
   -------------------------------------------------------------------------- */

/* .team-card.featured-card {
   background-image: linear-gradient(135deg,
         #fffdfa 0%,
         #fcf7ee 45%,
         #f7ead5 100%) !important;

   border: 1px solid rgba(201, 157, 93, 0.45) !important;

   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;

   overflow: hidden;
}

.team-card.featured-card>div,
.team-card.featured-card>a {
   background: transparent !important;
   background-color: transparent !important;
}

.team-card.featured-card .team-card-title,
.team-card.featured-card .team-card-role,
.team-card.featured-card .team-card-details,
.team-card.featured-card .team-card-details a,
.team-card.featured-card .team-card-details .gb-text {
   color: #1b1c1e !important;
}

.team-card.featured-card .team-card-details a .gb-shape svg {
   fill: var(--xeva-gold, #c99d5d) !important;
} */

/* --------------------------------------------------------------------------
   3. Executive Team Section Spacing
   -------------------------------------------------------------------------- */
.executive-team-grid,
.xeva-executive-grid {
   margin-bottom: clamp(4rem, 6vw, 7rem);
}

/* --------------------------------------------------------------------------
   4. Wide Screen 3-Column Layout (Default: 1600px)
   Tweak the pixel value below to trigger earlier (e.g. 1500px) or later (1680px)
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {

   .our-team-grid,
   .executive-team-grid,
   .xeva-executive-grid {
      grid-template-columns: repeat(3, 1fr) !important;
   }

   .team-card {
      grid-template-columns: 170px 1fr !important;
      gap: 1rem !important;
   }

   /* 1. Real photos stretch full height */
   .team-card:has(.team-card-image) picture {
      display: block;
      height: 100%;
   }

   /* 2. Exception: if it contains the placeholder, back to auto */
   .team-card:has(.team-card-placeholder) picture {
      height: auto;
   }


   /* .team-card.gb-loop-item,
   .team-card.gb-grid-column,
   .gb-grid-wrapper>.team-card {
      width: 33.333% !important;
      flex-basis: 33.333% !important;
      max-width: 33.333% !important;
   }
      */

   .team-card-details {
      font-size: 1.8rem !important;
   }

   .team-card-role {
      margin-bottom: 1rem !important;
   }

   .team-card-title {
      font-size: 2.8rem !important;
   }

   .team-card-image {
      aspect-ratio: auto !important;
   }

   .team-card-social {
      height: 3rem !important;
      width: 3rem !important;

      & .gb-shape svg {
         height: 2rem !important;
         width: 2rem !important;
      }
   }
}