/* =========================================
   TCWD Membership Directory — Front-end CSS
   Responsive grid: 3 (≥900px) / 2 (≥600px) / 1 (<600px)
   ========================================= */

/* Base: phone — 1 across */
.tcwd-directory {
  display: grid !important;
  gap: 16px;
  grid-template-columns: 1fr !important;
  width: 100%;
  box-sizing: border-box;
}

/* 2 across: small tablets and up */
@media (min-width: 600px) {
  .tcwd-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 3 across: content areas ≥900px (works in 960px themes) */
@media (min-width: 900px) {
  .tcwd-directory {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Ensure children don't overflow the grid tracks */
.tcwd-directory > * { min-width: 0; }

/* =========================================
   Card layout
   ========================================= */
.tcwd-card {
  display: flex;
  gap: 16px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 10px;
  align-items: flex-start;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.tcwd-logo { flex: 0 0 120px; max-width: 120px; }
.tcwd-logo img {
  width: 120px; height: 120px;
  object-fit: contain; object-position: center;
  background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 8px;
}

.tcwd-info { flex: 1 1 auto; min-width: 0; }
.tcwd-title { font-weight: 700; margin: 0 0 6px; font-size: 1.2rem; }
.tcwd-line { margin: 2px 0; font-size: .8em; }
.tcwd-line em { font-size: .8em; }
.tcwd-actions a { text-decoration: none; }

/* =========================================
   Controls (search + category chips)
   ========================================= */
.tcwd-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.tcwd-search {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 16px;
  box-sizing: border-box;
}
.tcwd-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.tcwd-cat {
  border: 1px solid #d1d5db; background: #fff;
  border-radius: 999px; padding: 6px 12px;
  line-height: 1; cursor: pointer; font-size: 14px;
}
.tcwd-cat.is-active { border-color: #111827; }

/* =========================================
   Empty state
   ========================================= */
.tcwd-empty {
  padding: 12px;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  background: #fafafa;
}

/* =========================================
   Iconed lines (outline look)
   ========================================= */
.tcwd-item { display: flex; align-items: center; gap: 8px; font-size: .8em; }
.tcwd-ico { display: inline-flex; width: 18px; height: 18px; line-height: 1; flex: 0 0 18px; }
.tcwd-ico svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Screen-reader-only label text (keeps semantics) */
.tcwd-sr {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* More space between cards */
.tcwd-directory {
  gap: 24px !important;            /* was 16px */
}

@media (min-width: 600px) {
  .tcwd-directory {
    gap: 28px !important;          /* tablet */
  }
}

@media (min-width: 900px) {
  .tcwd-directory {
    gap: 32px !important;          /* desktop */
  }
}

/* Space above & below the category chips */
.tcwd-cats {
  margin: 12px 0 24px;   /* top | left/right | bottom */
}
/* If your theme is aggressive with CSS, use !important */
.tcwd-cats { margin: 12px 0 24px !important; }