/* NGC Members Directory Couture v3.3 — mobile-only surface harmonization.
   No changes to desktop rules or native Youzify behavior. */
@media screen and (max-width: 768px) {
  body.ngc-mdc-v3 {
    --ngc-mobile-surface: #21151c;
    --ngc-mobile-card: #181116;
    --ngc-mobile-border: #76545b;
  }
  /* Outer strips and nested native navigation backgrounds use ONE surface. */
  body.ngc-mdc-v3 #youzify #youzify-bp.youzify-members-directory-page .youzify-mobile-nav,
  body.ngc-mdc-v3 #youzify #youzify-bp.youzify-members-directory-page .youzify-mobile-nav-wrapper,
  body.ngc-mdc-v3 #youzify #youzify-bp.youzify-members-directory-page .youzify-mobile-nav-item,
  body.ngc-mdc-v3 #youzify #youzify-bp.youzify-members-directory-page #directory-show-menu,
  body.ngc-mdc-v3 #youzify #youzify-bp.youzify-members-directory-page #directory-show-filter,
  body.ngc-mdc-v3 #youzify-members-directory .youzify-mobile-nav,
  body.ngc-mdc-v3 #youzify-members-directory .youzify-mobile-nav-wrapper,
  body.ngc-mdc-v3 #youzify-members-directory .youzify-mobile-nav-item,
  body.ngc-mdc-v3 #youzify-members-directory #directory-show-menu,
  body.ngc-mdc-v3 #youzify-members-directory #directory-show-filter {
    background: var(--ngc-mobile-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  /* Keep only the actual button inset as a dark card with its existing outline. */
  body.ngc-mdc-v3 #youzify #youzify-bp.youzify-members-directory-page .youzify-mobile-nav .youzify-mobile-nav-container,
  body.ngc-mdc-v3 #youzify-members-directory .youzify-mobile-nav .youzify-mobile-nav-container {
    background: var(--ngc-mobile-card) !important;
    background-image: none !important;
    border: 1px solid var(--ngc-mobile-border) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
  }
  /* The horizontal colored bars are backgrounds of the native anchor / text nodes. */
  body.ngc-mdc-v3 #youzify #youzify-bp.youzify-members-directory-page .youzify-mobile-nav-container a,
  body.ngc-mdc-v3 #youzify #youzify-bp.youzify-members-directory-page .youzify-mobile-nav-container a span,
  body.ngc-mdc-v3 #youzify-members-directory .youzify-mobile-nav-container a,
  body.ngc-mdc-v3 #youzify-members-directory .youzify-mobile-nav-container a span {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  body.ngc-mdc-v3 #youzify #youzify-bp.youzify-members-directory-page .youzify-mobile-nav-container a::before,
  body.ngc-mdc-v3 #youzify #youzify-bp.youzify-members-directory-page .youzify-mobile-nav-container a::after,
  body.ngc-mdc-v3 #youzify-members-directory .youzify-mobile-nav-container a::before,
  body.ngc-mdc-v3 #youzify-members-directory .youzify-mobile-nav-container a::after {
    background-color: transparent !important;
    box-shadow: none !important;
  }
}

/* v3.3.7: MOBILE ONLY — keep native avatar 116px and contain it inside its card.
   Explicitly target the actual Youzify .youzify-item-avatar wrapper (Inspect). */
@media screen and (max-width: 800px) {
  body.ngc-mdc-v3 .ngc-mdc-card-grid > li.ngc-mdc-card {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important; min-height: 0 !important;
    margin: 0 !important;
    padding-top: 28px !important;
    box-sizing: border-box !important;
  }
  body.ngc-mdc-v3 .ngc-mdc-card-grid {
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
  }
  body.ngc-mdc-v3 .ngc-mdc-card .youzify-item-avatar {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    display: block !important;
    float: none !important;
    width: 116px !important; height: 116px !important;
    max-width: 116px !important; max-height: 116px !important;
    margin: 0 auto 18px !important;
    box-sizing: border-box !important;
  }
  body.ngc-mdc-v3 .ngc-mdc-card .youzify-item-avatar > a {
    display: block !important;
    width: 116px !important; height: 116px !important;
    max-width: 116px !important; max-height: 116px !important;
    margin: 0 !important; padding: 0 !important;
    border-radius: 50% !important;
  }
  body.ngc-mdc-v3 .ngc-mdc-card .youzify-item-avatar img.avatar {
    display: block !important;
    width: 116px !important; height: 116px !important;
    min-width: 116px !important; min-height: 116px !important;
    max-width: 116px !important; max-height: 116px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
  }
}