/* Crime Solvers Central - directory pages (serialkillers.php, massmurders.php)
   Card layout that reflows from 1 column (phones) to 2 (tablets) to 3 (desktop). Added 11-04-26. */
.kd-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px 40px; color: #1f2937; }
.kd-wrap a { text-decoration: none; }

/* Hero */
.kd-hero { background: #fff; border: 1px solid #e5e9f2; border-radius: 12px; padding: 24px 26px 20px; margin: 18px 0 14px; }
.kd-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #1d4ed8; margin: 0 0 6px; }
.kd-hero h1 { font-size: 28px; font-weight: 700; color: #111827; line-height: 1.2; margin: 0 0 8px; }
.kd-lede { font-size: 15px; color: #4b5563; line-height: 1.6; margin: 0; max-width: 820px; }
.kd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; }
.kd-stat { background: #f8f9fb; border: 1px solid #eef0f5; border-radius: 10px; padding: 10px 14px; }
.kd-stat b { display: block; font-size: 22px; font-weight: 700; color: #111827; line-height: 1.15; }
.kd-stat span { font-size: 12px; color: #6b7280; }
.kd-warn { display: flex; gap: 10px; align-items: flex-start; background: #fffbeb; border: 1px solid #fde68a; color: #78350f; border-radius: 10px; padding: 10px 14px; margin: 16px 0 0; font-size: 13px; line-height: 1.5; }
.kd-warn i { color: #d97706; font-size: 16px; margin-top: 2px; }
.kd-warn a { color: #92400e; font-weight: 600; text-decoration: underline; }

/* Toolbar (sticks under the site header while scrolling) */
.kd-tools { position: sticky; top: 68px; z-index: 20; background: #fff; border: 1px solid #e5e9f2; border-radius: 12px; padding: 12px; margin: 0 0 14px;
            display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; box-shadow: 0 4px 14px rgba(17,24,39,.05); }
.kd-tools label { display: block; font-size: 11px; font-weight: 600; color: #596882; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 3px; }
.kd-field { position: relative; min-width: 0; }
.kd-tools input, .kd-tools select { width: 100%; height: 40px; border: 1px solid #d6dbe6; border-radius: 8px; background: #fff; color: #1f2937 !important; font-size: 14px; padding: 0 12px; }
.kd-tools input:focus, .kd-tools select:focus { outline: none; border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,.15); }
.kd-tools select option { color: #1f2937; }
.kd-search input { padding-left: 36px; }
.kd-search i { position: absolute; left: 12px; bottom: 12px; color: #9ca3af; font-size: 15px; }
.kd-count { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #6b7280; margin-top: -2px; }
.kd-count b { color: #111827; }
.kd-reset { background: none; border: 0; color: #1d4ed8; font-weight: 600; font-size: 13px; padding: 0; cursor: pointer; }
.kd-reset[hidden] { display: none; }

/* Card grid */
.kd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kd-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0; }
.kd-card:hover { border-color: #bfcdf5; box-shadow: 0 8px 22px rgba(17,24,39,.08); transform: translateY(-1px); }
.kd-card.kd-hide { display: none; }
.kd-top { display: flex; gap: 12px; align-items: flex-start; }
.kd-photo { flex: 0 0 76px; width: 76px; height: 92px; border-radius: 8px; object-fit: cover; object-position: center 20%; background: #eef0f5; }
.kd-head { min-width: 0; flex: 1; }
.kd-name { display: block; font-size: 16px; font-weight: 700; color: #111827; line-height: 1.3; overflow-wrap: anywhere; }
.kd-name::after { content: ""; position: absolute; inset: 0; border-radius: 12px; } /* whole card is clickable */
.kd-card:hover .kd-name { color: #1d4ed8; }
.kd-nick { font-size: 13px; font-style: italic; color: #6b7280; margin-top: 2px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kd-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kd-pill { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: #f3f4f6; color: #374151; line-height: 1.4; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-pill.kd-v { background: #fee2e2; color: #991b1b; }
.kd-pill.kd-y { background: #e0e7ff; color: #3730a3; }
.kd-facts { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid #f0f1f4; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 5px 10px; font-size: 13px; }
.kd-facts dt { color: #8392a5; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.kd-facts dd { margin: 0; color: #374151; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kd-more { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 600; color: #1d4ed8; }
.kd-more i { font-size: 12px; margin-left: 3px; }

.kd-empty { text-align: center; padding: 40px 16px; color: #6b7280; background: #fff; border: 1px dashed #d6dbe6; border-radius: 12px; }
.kd-loadwrap { text-align: center; margin: 20px 0 4px; }
.kd-load { background: #1d4ed8; color: #fff !important; border: 0; border-radius: 8px; padding: 11px 26px; font-size: 14px; font-weight: 600; cursor: pointer; }
.kd-load:hover { background: #1e40af; }
.kd-load[hidden] { display: none; }

/* Citizen detective callout */
.kd-cta { display: flex; gap: 20px; align-items: center; justify-content: space-between; background: #111827; color: #e5e7eb; border-radius: 12px; padding: 22px 24px; margin: 26px 0 0; }
.kd-cta h2 { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.kd-cta p { font-size: 14px; line-height: 1.55; margin: 0; color: #cbd5e1; }
.kd-cta-btns { display: flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
.kd-btn { display: inline-block; border-radius: 8px; padding: 10px 16px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.kd-btn-blue { background: #1d4ed8; color: #fff !important; }
.kd-btn-blue:hover { background: #2563eb; }
.kd-btn-ghost { border: 1px solid #475569; color: #fff !important; }
.kd-btn-ghost:hover { border-color: #94a3b8; }

/* Tablet */
@media (max-width: 1099px) {
  .kd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .kd-tools { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kd-tools .kd-search { grid-column: 1 / -1; }
  .kd-cta { flex-direction: column; align-items: flex-start; }
}
/* Phone */
@media (max-width: 639px) {
  .kd-wrap { padding: 0 10px 30px; }
  .kd-hero { padding: 18px 16px 16px; margin-top: 12px; }
  .kd-hero h1 { font-size: 22px; }
  .kd-lede { font-size: 14px; }
  .kd-stat { padding: 8px 10px; }
  .kd-stat b { font-size: 16px; white-space: nowrap; }
  .kd-stat span { font-size: 11px; }
  .kd-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; gap: 8px; border-radius: 10px; }
  .kd-tools .kd-third { grid-column: 1 / -1; }
  .kd-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .kd-card { padding: 12px; }
  .kd-photo { flex-basis: 64px; width: 64px; height: 78px; }
  .kd-facts { grid-template-columns: 66px minmax(0, 1fr); }
  .kd-cta { padding: 18px 16px; }
  .kd-cta-btns { width: 100%; }
  .kd-btn { flex: 1; text-align: center; }
}