/* /connect/views/directory.css — Member Directory "Vibrant Community" v2
 * Loaded AFTER views.css so it wins the cascade at equal specificity.
 * Every colour comes from the --bcc-* design tokens; the only literal colours
 * are the on-gradient ink #fff and neutral scrim/shadow alpha
 * (rgba(0,0,0,a) / rgba(255,255,255,a)) — no thematic brand hex.
 * Scoped under `.dirx` so it never leaks into other views.
 * Cards are the shared `.bcc-person-card` component (styles live in
 * connect/social.css); Directory only adjusts its grid-scoped layout.
 * Breakpoints: desktop >=1025 | tablet 768-1024 | mobile <=767 | phone <=560.
 * ─────────────────────────────────────────────────────────────────── */

/* Guard: hidden must beat the flex/grid display rules below. */
.dirx [hidden] { display: none !important; }

/* ================================================================
   1. HERO
=============================================================== */
.dirx-hero {
  position:       relative;
  overflow:       hidden;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  flex-wrap:      wrap;
  gap:            var(--bcc-s4);
  border:        1px solid var(--bcc-border-strong);
  border-radius:  var(--bcc-r-xl);
  background:     linear-gradient(135deg, var(--bcc-primary) 0%, var(--bcc-primary-hover) 52%, var(--bcc-accent) 132%);
  box-shadow:     var(--bcc-shadow-2);
  padding:        var(--bcc-s8) var(--bcc-s6);
  margin-bottom:  var(--bcc-s5);
}
.dirx-hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse at 88% 8%, rgba(255,255,255,.14) 0%, transparent 56%),
              linear-gradient(180deg, rgba(0,0,0,0) 46%, rgba(0,0,0,.26) 100%);
  pointer-events: none;
}
.dirx-hero-inner {
  position:   relative;
  z-index:    1;
  flex:       1 1 260px;
  min-width:  0;
  max-width:  600px;
}
.dirx-hero-chip {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           46px;
  height:          46px;
  margin-bottom:   var(--bcc-s3);
  border-radius:   var(--bcc-r-md);
  background:      rgba(255,255,255,.16);
  color:           #fff;
  font-size:       1.25rem;
  backdrop-filter: blur(4px);
}
.dirx .dirx-hero-title {
  font-family:    var(--bcc-font-display);
  font-size:      var(--bcc-t-4xl);
  font-weight:    600;
  letter-spacing: -.01em;
  line-height:    1.1;
  color:          #fff;
  margin:         0 0 var(--bcc-s1);
}
.dirx .dirx-hero-sub {
  font-size:   var(--bcc-t-md);
  font-weight: 400;
  color:       rgba(255,255,255,.82);
  margin:      0;
}

/* Compact "My Family" header action — 44px target at every size. */
.dirx-hero-actions {
  position: relative;
  z-index:   1;
  flex:      0 0 auto;
}
.dirx .dirx-hero-action {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--bcc-s2);
  min-height:      44px;
  padding:         0 var(--bcc-s4);
  border:          1px solid rgba(255,255,255,.3);
  border-radius:   var(--bcc-r-md);
  background:      rgba(255,255,255,.16);
  color:           #fff;
  font-weight:     600;
  text-decoration: none;
  white-space:     nowrap;
  backdrop-filter: blur(4px);
  -webkit-tap-highlight-color: transparent;
  transition:      background-color var(--bcc-dur-2) var(--bcc-ease),
                   transform        var(--bcc-dur-2) var(--bcc-ease);
}
.dirx .dirx-hero-action:active { transform: scale(.97); }
@media (hover: hover) {
  .dirx .dirx-hero-action:hover { background: rgba(255,255,255,.26); }
}
.dirx .dirx-hero-action:focus-visible {
  outline:        2px solid #fff;
  outline-offset: 2px;
}

/* ================================================================
   2. TOOLBAR — search + filter pills
=============================================================== */
.dirx-toolbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s4);
  flex-wrap:       wrap;
  margin-bottom:   var(--bcc-s5);
}
.dirx .dirx-search {
  flex:      1 1 260px;
  max-width: 400px;
  min-width: 220px;
}
.dirx .dirx-search input { height: 42px; }
.dirx .dirx-filters {
  padding:      0;
  margin:       0;
  flex-wrap:    wrap;
  justify-content: flex-end;
}
.dirx .dirx-filters .bcc-pill { min-height: 34px; padding: 0 var(--bcc-s4); }

/* ================================================================
   3. GRID + PERSON CARDS
   Cards ARE the shared `.bcc-person-card` component. Directory only
   stacks it into an avatar-forward people tile and hosts it cleanly.
=============================================================== */
.dirx .dirx-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap:                   var(--bcc-s4);
}
.dirx-empty {
  grid-column: 1 / -1;
}
.dirx-empty-icon {
  color:         var(--bcc-ink-3);
  font-size:     2rem;
  margin-bottom: var(--bcc-s3);
  opacity:       .5;
}

/* Host wrapper keeps the card filling the grid cell. */
.dirx .dirx-member {
  display:   flex;
  min-width: 0;
}
.dirx .dirx-member > .bcc-person-card {
  flex:  1 1 auto;
  width: 100%;
}

/* Directory tile layout: avatar-forward, centred, actions wrap below. */
.dirx .bcc-person-card {
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            var(--bcc-s2);
  padding:        var(--bcc-s5) var(--bcc-s4) var(--bcc-s4);
}
.dirx .bcc-person-card .bcc-person-card__avatar { margin-bottom: var(--bcc-s1); }
.dirx .bcc-person-card .bcc-person-card__id {
  flex:       0 0 auto;
  max-width:  100%;
}
.dirx .bcc-person-card .bcc-person-card__name { white-space: normal; word-break: break-word; }
.dirx .bcc-person-card .bcc-person-card__ctx  { white-space: normal; }
.dirx .bcc-person-card .bcc-person-card__actions {
  width:           100%;
  margin-left:     0;
  justify-content: center;
}

/* Connected-avatar treatment preserved for connected members. */
.dirx .dirx-member-connected .bcc-person-card__avatar { position: relative; }
.dirx .dirx-member-connected .bcc-person-card__avatar .bcc-avatar {
  box-shadow: 0 0 0 2px var(--bcc-surface-1), 0 0 0 4px var(--bcc-success-soft);
}
.dirx .dirx-member-connected .bcc-person-card__avatar::after {
  content:       '';
  position:      absolute;
  right:         1px;
  bottom:        1px;
  width:         13px;
  height:        13px;
  border-radius: 50%;
  background:    var(--bcc-success);
  border:        2px solid var(--bcc-surface-1);
}

/* ================================================================
   4. SKELETONS
=============================================================== */
.dirx .dir-card {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  gap:             var(--bcc-s2);
  padding:         var(--bcc-s5) var(--bcc-s4) var(--bcc-s4);
  background:      var(--bcc-surface-1);
  border:          1px solid var(--bcc-border);
  border-radius:   var(--bcc-r-lg);
  box-shadow:      var(--bcc-shadow-1);
}
.dirx-skel-avatar {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  margin:        0 auto var(--bcc-s2);
}
.dirx-skel-line {
  height:        12px;
  margin:        0 auto var(--bcc-s2);
}
.dirx-skel-w70 { width: 70%; }
.dirx-skel-w45 { width: 45%; }
.dirx-skel-btn {
  height:        32px;
  width:         100%;
  border-radius: var(--bcc-r-md);
  margin-top:    var(--bcc-s1);
}
.dirx .dir-card-skeleton { pointer-events: none; }

/* ================================================================
   5. "PEOPLE YOU MAY KNOW"
=============================================================== */
.dirx .dir-suggested-header {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s2);
  font-family:   var(--bcc-font-display);
  font-size:     var(--bcc-t-lg);
  font-weight:   600;
  color:         var(--bcc-ink);
  margin-bottom: var(--bcc-s3);
}
.dirx .dir-suggested-header .bcc-icon { color: var(--bcc-accent); }
.dirx .dir-suggested-row {
  display:               flex;
  flex-direction:        row;
  gap:                   var(--bcc-s3);
  overflow-x:            auto;
  margin-bottom:         var(--bcc-s5);
  padding-bottom:        var(--bcc-s3);
  scroll-snap-type:      x mandatory;
  scroll-padding-left:   var(--bcc-s4);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width:       none;
}
.dirx .dir-suggested-row::-webkit-scrollbar { display: none; }
.dirx .dir-suggested-row > .bcc-person-card {
  flex:               0 0 auto;
  min-width:          208px;
  scroll-snap-align:  start;
}

/* ================================================================
   6. PRAY MODAL
=============================================================== */
.dirx-pray .bcc-form-group { margin-bottom: 0; }
.dirx-pray .bcc-textarea { min-height: 110px; }

/* ================================================================
   6b. TOUCH + INTERACTION FEEDBACK
   Tap highlight off; :active feedback is always available; hover
   transforms are gated to real pointer devices via (hover: hover).
=============================================================== */
.dirx .dirx-filters .bcc-pill,
.dirx .bcc-person-card,
.dirx .bcc-btn,
.dirx .bcc-person-card__btn {
  -webkit-tap-highlight-color: transparent;
}
.dirx .dirx-filters .bcc-pill {
  touch-action: manipulation;
  transition: background-color var(--bcc-dur-2) var(--bcc-ease),
              border-color     var(--bcc-dur-2) var(--bcc-ease),
              color            var(--bcc-dur-2) var(--bcc-ease),
              transform        var(--bcc-dur-2) var(--bcc-ease);
}
.dirx .bcc-person-card {
  transition: transform    var(--bcc-dur-2) var(--bcc-ease),
              border-color var(--bcc-dur-2) var(--bcc-ease),
              box-shadow   var(--bcc-dur-2) var(--bcc-ease);
}
.dirx .dirx-filters .bcc-pill:active,
.dirx .bcc-btn:active { transform: scale(.97); }
.dirx .bcc-person-card:active { transform: scale(.992); }

@media (hover: hover) {
  .dirx .bcc-person-card:hover { transform: translateY(-2px); }
}

/* ================================================================
   7. RESPONSIVE
=============================================================== */
@media (max-width: 1024px) {
  .dirx .dirx-grid { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); }
}

@media (max-width: 767px) {
  .dirx-hero { padding: var(--bcc-s6) var(--bcc-s5); }
  .dirx .dirx-hero-title { font-size: var(--bcc-t-3xl); }
  .dirx-hero-actions { width: 100%; }
  .dirx .dirx-hero-action { width: 100%; }
  .dirx-toolbar { flex-direction: column; align-items: stretch; }
  .dirx .dirx-search { flex: 0 0 auto; max-width: none; min-width: 0; height: 48px; }
  .dirx .dirx-filters { justify-content: flex-start; }

  /* Comfortable tap targets on touch devices. */
  .dirx .dirx-filters .bcc-pill { min-height: 44px; }
  .dirx .dirx-search input { height: 48px; }
  .dirx .bcc-person-card__actions .bcc-btn,
  .dirx .bcc-person-card__btn { min-height: 44px; height: auto; }
}

/* Tablet/phone handoff: two tidy columns before the single-column phone. */
@media (max-width: 640px) {
  .dirx .dirx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .dirx .dirx-grid { grid-template-columns: 1fr; }
  .dirx .bcc-person-card .bcc-person-card__actions {
    flex-basis:      100%;
    margin-left:     0;
    justify-content: flex-start;
  }

  /* Filter pills become one horizontal, momentum-scrolled row. */
  .dirx .dirx-filters {
    flex-wrap:             nowrap;
    overflow-x:            auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width:       none;
  }
  .dirx .dirx-filters::-webkit-scrollbar { display: none; }
  .dirx .dirx-filters .bcc-pill { flex: 0 0 auto; }
}

/* ================================================================
   8. REDUCED MOTION
=============================================================== */
@media (prefers-reduced-motion: reduce) {
  .dirx .dir-card,
  .dirx .bcc-person-card,
  .dirx .bcc-btn,
  .dirx .dirx-hero-action,
  .dirx .dirx-filters .bcc-pill { transition: none; }
  .dirx .bcc-person-card:hover,
  .dirx .bcc-person-card:active,
  .dirx .bcc-btn:active,
  .dirx .dirx-hero-action:active,
  .dirx .dirx-filters .bcc-pill:active { transform: none; }
}

/* ================================================================
   9. MOBILE / TABLET SCALING FIXES
   ================================================================ */

/* Long member names / context must not overflow narrow tiles. */
@media (max-width: 1024px) {
  .dirx .bcc-person-card__name,
  .dirx .bcc-person-card__ctx { overflow-wrap: anywhere; }
}

/* Filter pills stay 44px on touch tablets (the 34px base rule otherwise
   out-specifies the shared coarse-pointer 44px target). */
@media (pointer: coarse) {
  .dirx .dirx-filters .bcc-pill { min-height: 44px; }
}