/* HdKD Mitglieder — directory. Reuses the calendar filter + rooms card design language. */

.hdkd-mem { font-family: inherit; }

/* ---- Filter toolbar (same language as .hdkd-ev-cal__filters) ---- */
.hdkd-mem__filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }

.hdkd-mem__search { position: relative; display: inline-flex; align-items: center; }
.hdkd-mem__search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #999; pointer-events: none; }
.hdkd-mem__search input {
  font-family: inherit; font-size: 13px; font-weight: 500; color: #2A2520;
  width: 240px; max-width: 100%;
  padding: 9px 16px 9px 38px;
  border: 1px solid rgba(0,0,0,0.1); border-radius: 9999px; background: #fff;
  appearance: none; -webkit-appearance: none;
  transition: border-color 200ms ease-in-out;
}
.hdkd-mem__search input:focus { outline: none; border-color: #1C8D82; }
.hdkd-mem__search input::placeholder { color: #999; }

.hdkd-mem__sel {
  width: 190px !important; min-width: 0 !important; flex: 0 0 auto;
  font-family: inherit; font-size: 13px; font-weight: 500; color: #2A2520;
  padding: 9px 36px 9px 16px !important;
  border: 1px solid rgba(0,0,0,0.1); border-radius: 9999px; background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important;
  appearance: none !important; -webkit-appearance: none !important; cursor: pointer; margin: 0 !important;
  transition: border-color 200ms ease-in-out;
}
.hdkd-mem__sel:focus { outline: none; border-color: #1C8D82; }
.hdkd-mem__sel.is-set { border-color: #1C8D82; background-color: rgba(28,141,130,0.06); color: #1C8D82; font-weight: 600; }

.hdkd-mem__reset {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  font-family: inherit; font-size: 13px; font-weight: 500; color: #1C8D82;
  background: transparent; border: none; cursor: pointer; padding: 8px 6px; white-space: nowrap;
  transition: opacity 200ms ease-in-out;
}
.hdkd-mem__reset:hover { opacity: 0.65; }
.hdkd-mem__reset[hidden] { display: none !important; }

.hdkd-mem__count { margin-left: auto; font-size: 13px; opacity: 0.5; white-space: nowrap; }

/* ---- Landscape "review-row" cards: grey avatar + name/meta + arrow ---- */
.hdkd-mem__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }

.hdkd-mem-card {
  display: flex; align-items: center; gap: 16px;
  min-width: 0; /* grid items default to min-width:auto — without this the no-wrap name overflows on mobile */
  background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px;
  padding: 15px 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  text-decoration: none; color: inherit;
  transition: border-color 200ms ease-in-out, box-shadow 200ms ease-in-out, transform 200ms ease-in-out;
}
.hdkd-mem-card:hover { border-color: rgba(0,0,0,0.16); box-shadow: 0 6px 20px rgba(0,0,0,0.07); transform: translateY(-1px); }

.hdkd-mem-card__avatar {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #eef0f2; color: #707883;
  font-family: inherit; font-weight: 600; font-size: 19px; letter-spacing: -0.01em;
}
.hdkd-mem-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Verein logos: white plate + full logo visible (contain), not cropped like a photo. */
.hdkd-mem-card__avatar--logo { background: #fff; }
.hdkd-mem-card__avatar--logo img { object-fit: contain; padding: 5px; box-sizing: border-box; }

.hdkd-mem-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hdkd-mem-card__name {
  font-family: inherit; font-weight: 500; font-size: 16px; letter-spacing: -0.015em; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hdkd-mem-card__meta { font-size: 12px; opacity: 0.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hdkd-mem-card__arr { flex: 0 0 auto; font-size: 18px; opacity: 0.25; transition: opacity 200ms ease-in-out, transform 300ms ease-in-out, color 200ms ease-in-out; }
.hdkd-mem-card:hover .hdkd-mem-card__arr { opacity: 1; color: #1C8D82; transform: translateX(4px); }

.hdkd-mem__empty { padding: 40px 0; text-align: center; opacity: 0.5; font-size: 14px; }

/* ---- Pill teaser (home section, e.g. the orange band): white pills + "+N weitere" ---- */
.hdkd-mem-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.hdkd-mem-pill {
  display: inline-flex; align-items: center;
  padding: 11px 18px;
  /* Radius = ~half a single-line pill's height (≈40px). Single-line names stay
     perfect capsules; long names that wrap to 2 lines become tidy rounded
     rectangles instead of the ovals a 9999px radius produces on a tall box. */
  border-radius: 20px;
  background: #fff; color: #2A2520;
  font-family: inherit; font-size: 14.5px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
}
.hdkd-mem-pill:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.14); color: #2A2520; }
/* Hidden overflow Vereine (beyond data-show) — JS reshuffles which are shown. */
.hdkd-mem-pill--extra { display: none; }
/* "+N weitere" as a quiet inline note, not a button (the section already has its own CTA) */
.hdkd-mem-pill-more {
  display: inline-flex; align-items: center; padding: 13px 6px;
  font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  color: rgba(255,255,255,0.78);
}
/* "+N weitere" turned into a real CTA to the full directory (more_url set):
   charcoal pill + white text + light circular arrow — clear action on orange. */
.hdkd-mem-pill-more--cta {
  gap: 12px; padding: 11px 12px 11px 22px;
  border-radius: 9999px;
  background: #2A2520; color: #fff !important;
  font-weight: 600; text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.hdkd-mem-pill-more--cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.22); color: #fff !important; }
.hdkd-mem-cta-arrow {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%; background: #fff; color: #2A2520;
  display: inline-grid; place-items: center;
}
.hdkd-mem-cta-arrow svg { width: 15px; height: 15px; }

@media (max-width: 520px) {
  .hdkd-mem__grid { grid-template-columns: 1fr; }
  .hdkd-mem__count { margin-left: 0; }
  .hdkd-mem__search input { width: 100%; font-size: 16px; }  /* 16px: no iOS focus-zoom */
  /* Tighter pills so more fit per row and fewer names wrap. */
  .hdkd-mem-pills { gap: 8px; }
  .hdkd-mem-pill { padding: 9px 14px; font-size: 13.5px; border-radius: 17px; }
}