/* ========== CivicTech Country Directory — scoped to .cth-directory ========== */
.cth-directory, .cth-directory * { box-sizing: border-box; }
.cth-directory { font-family: 'Roboto', system-ui, sans-serif; color: #2b2f36; }
.cth-directory a { color: #164079; text-decoration: none; }
.cth-directory a:hover { color: #e8342a; }
.cth-directory input::placeholder, .cth-directory textarea::placeholder { color: #a8b0b8; }

.cth-directory .cth-inner { max-width: 1290px; margin: 0 auto; padding: 0 40px; }

/* PAGE HEAD */
.cth-directory .cth-head { padding: 52px 0 34px; border-bottom: 1px solid #e8eaee; }
.cth-directory .cth-eyebrow { font: 500 13px 'Roboto'; letter-spacing: 1.6px; text-transform: uppercase; color: #8b93a0; }
.cth-directory .cth-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: 14px; flex-wrap: wrap; }
.cth-directory .cth-h1 { font-family: 'Roboto', sans-serif; font-weight: 800; font-size: 44px; line-height: 1.1; color: #16305c; margin: 0; letter-spacing: -0.8px; }
.cth-directory .cth-count { font: 400 16px/1.5 'Roboto'; color: #6b7280; max-width: 420px; text-align: right; padding-bottom: 6px; }
.cth-directory .cth-count strong { color: #16305c; font-weight: 700; }

/* LAYOUT ROW */
.cth-directory .cth-row { display: flex; gap: 56px; align-items: flex-start; padding: 40px 0 96px; }

/* SIDEBAR */
.cth-directory .cth-sidebar { width: 236px; flex: none; position: sticky; top: 28px; }
.cth-directory .cth-map-card { border: 1px solid #e8eaee; border-radius: 10px; background: #fff; padding: 20px; box-shadow: 0 1px 2px rgba(16,24,40,0.04); }
.cth-directory .cth-map-placeholder { height: 118px; border-radius: 6px; background: #eef0f3; display: flex; align-items: center; justify-content: center; color: #a6adb8; font: 500 11px 'Roboto'; letter-spacing: 1px; text-align: center; }
.cth-directory .cth-map-placeholder.has-image { background: none; padding: 0; border-radius: 0; }
.cth-directory .cth-map-placeholder img { width: 100%; height: 100%; object-fit: contain; }
.cth-directory .cth-country-name { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #16305c; margin-top: 28px; }
.cth-directory .cth-tools-listed { font: 400 14px 'Roboto'; color: #8b93a0; margin-top: 4px; }
.cth-directory .cth-back-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font: 500 14px 'Roboto'; color: #164079; }
.cth-directory .cth-jumpto-wrap { margin-top: 22px; border-top: 1px solid #e8eaee; padding-top: 18px; }
.cth-directory .cth-jumpto-label { font: 500 11px 'Roboto'; letter-spacing: 1.4px; text-transform: uppercase; color: #a0a7b2; margin-bottom: 10px; }
.cth-directory .cth-jumpto-list { display: flex; flex-direction: column; gap: 2px; }
.cth-directory .cth-jumpto-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 6px; cursor: pointer; font: 400 14px 'Roboto'; color: #5b6472; background: none; border: none; text-align: left; width: calc(100% + 16px); }
.cth-directory .cth-jumpto-item:hover { background: #f3f5f8; }
.cth-directory .cth-jumpto-item.is-active { color: #16305c; font-weight: 700; }
.cth-directory .cth-jumpto-count { font: 400 12px 'Roboto'; color: #a8aeb8; }

/* CONTENT */
.cth-directory .cth-content { flex: 1; min-width: 0; }
.cth-directory .cth-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.cth-directory .cth-search-wrap { position: relative; flex: 1; min-width: 280px; }
.cth-directory .cth-search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #a8aeb8; font-size: 14px; pointer-events: none; }
.cth-directory .cth-search-input { width: 100%; padding: 12px 16px 12px 38px; border: 1px solid #dfe3e8; border-radius: 8px; font: 400 15px 'Roboto'; color: #2b2f36; outline: none; background: #fff; }
.cth-directory .cth-search-input:focus { border-color: #164079; }
.cth-directory .cth-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cth-directory .cth-chip { padding: 9px 15px; border-radius: 999px; border: 1px solid #dfe3e8; background: #fff; color: #4b5563; font: 500 13.5px 'Roboto'; cursor: pointer; white-space: nowrap; }
.cth-directory .cth-chip.is-active { background: #16305c; color: #fff; border-color: #16305c; }

/* EMPTY STATE */
.cth-directory .cth-empty { border: 1px dashed #dfe3e8; border-radius: 10px; padding: 64px 30px; text-align: center; display: none; }
.cth-directory .cth-empty.is-visible { display: block; }
.cth-directory .cth-empty-title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 19px; color: #16305c; }
.cth-directory .cth-empty-sub { font: 400 15px 'Roboto'; color: #8b93a0; margin-top: 8px; }
.cth-directory .cth-empty-clear { display: inline-block; margin-top: 20px; padding: 10px 20px; border-radius: 6px; background: #16305c; color: #fff; font: 500 14px 'Roboto'; cursor: pointer; border: none; }

/* GROUPS */
.cth-directory .cth-group { margin-bottom: 44px; }
.cth-directory .cth-group.is-hidden { display: none; }
.cth-directory .cth-group-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.cth-directory .cth-group-title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 19px; color: #16305c; margin: 0; white-space: nowrap; }
.cth-directory .cth-group-count { font: 400 13px 'Roboto'; color: #98a0ac; background: #f1f3f6; border-radius: 999px; padding: 3px 10px; }
.cth-directory .cth-group-rule { flex: 1; height: 1px; background: #e8eaee; }
.cth-directory .cth-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }

/* CARD */
.cth-directory .cth-card { position: relative; display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid #e8eaee; border-radius: 10px; padding: 16px; min-height: 112px; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; text-align: left; width: 100%; }
.cth-directory .cth-card.is-hidden { display: none; }
.cth-directory .cth-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,24,40,0.08); border-color: #c9d3e4; }
.cth-directory .cth-card-logo { width: 46px; height: 46px; border-radius: 8px; background: #f1f3f6; border: 1px solid #eef0f3; display: flex; align-items: center; justify-content: center; color: #b6bcc3; font: 500 8px 'Roboto'; overflow: hidden; }
.cth-directory .cth-card-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; background: #fff; }
.cth-directory .cth-card-name { font: 700 15px/1.25 'Roboto'; color: #16305c; }
.cth-directory .cth-card-arrow { position: absolute; top: 14px; right: 15px; color: #cfd6e0; font-size: 13px; }

/* MODAL */
.cth-directory .cth-modal-overlay { position: fixed; inset: 0; z-index: 999999; background: rgba(11,20,38,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 32px; }
.cth-directory .cth-modal-overlay.is-open { display: flex; }
.cth-directory .cth-modal { position: relative; width: 100%; max-width: 580px; max-height: 88vh; overflow: auto; background: #fff; border-radius: 14px; box-shadow: 0 24px 64px rgba(11,20,38,0.28); }
.cth-directory .cth-modal-close { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #8b93a0; font-size: 17px; cursor: pointer; border: none; background: none; }
.cth-directory .cth-modal-close:hover { background: #f1f3f6; color: #16305c; }
.cth-directory .cth-modal-header { padding: 34px 38px 26px; border-bottom: 1px solid #eceef1; display: flex; align-items: flex-start; gap: 18px; }
.cth-directory .cth-modal-logo { width: 68px; height: 68px; flex: none; border-radius: 12px; border: 1px solid #eef0f3; background: #f1f3f6; display: flex; align-items: center; justify-content: center; color: #b6bcc3; font: 500 9px 'Roboto'; overflow: hidden; }
.cth-directory .cth-modal-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; background: #fff; }
.cth-directory .cth-modal-titlewrap { padding-right: 34px; }
.cth-directory .cth-modal-name { font: 700 25px/1.2 'Roboto'; color: #16305c; margin: 2px 0 0; letter-spacing: -0.4px; }
.cth-directory .cth-modal-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cth-directory .cth-modal-type { font: 500 12px 'Roboto'; letter-spacing: .5px; text-transform: uppercase; color: #16305c; background: #eef2f9; border-radius: 999px; padding: 5px 12px; }
.cth-directory .cth-modal-category { font: 400 13.5px 'Roboto'; color: #7b8492; }
.cth-directory .cth-modal-body { padding: 28px 38px; }
.cth-directory .cth-modal-empty { border: 1px dashed #dfe3e8; border-radius: 10px; padding: 30px 28px; text-align: center; }
.cth-directory .cth-modal-empty-title { font: 500 16px 'Roboto'; color: #16305c; }
.cth-directory .cth-modal-empty-sub { font: 400 14.5px/1.65 'Roboto'; color: #8b93a0; margin-top: 8px; max-width: 340px; margin-left: auto; margin-right: auto; }
.cth-directory .cth-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; }
.cth-directory .cth-detail-label { font: 500 11px 'Roboto'; letter-spacing: 1.3px; text-transform: uppercase; color: #a0a7b2; }
.cth-directory .cth-detail-value { font: 400 16px 'Roboto'; color: #2b2f36; margin-top: 6px; word-break: break-all; }
.cth-directory .cth-about-wrap { margin-top: 28px; padding-top: 26px; border-top: 1px solid #eceef1; }
.cth-directory .cth-about-text { font: 400 15.5px/1.7 'Roboto'; color: #4b5563; margin: 10px 0 0; }
.cth-directory .cth-about-empty { margin-top: 12px; border: 1px dashed #dfe3e8; border-radius: 8px; padding: 18px 20px; font: 400 14.5px/1.6 'Roboto'; color: #8b93a0; }
.cth-directory .cth-modal-footer { display: flex; align-items: center; gap: 12px; padding: 20px 38px 26px; border-top: 1px solid #eceef1; background: #fbfbfc; border-radius: 0 0 14px 14px; flex-wrap: wrap; }
.cth-directory .cth-btn-visit { background: #16305c; color: #fff; border-radius: 6px; padding: 12px 22px; font: 500 15px 'Roboto'; display: inline-block; }
.cth-directory .cth-btn-visit:hover { background: #0f2f5c; color: #fff; }
.cth-directory .cth-btn-email { border: 1px solid #dfe3e8; border-radius: 6px; padding: 12px 20px; font: 500 15px 'Roboto'; color: #374151; background: #fff; display: inline-block; }
.cth-directory .cth-btn-email:hover { border-color: #16305c; color: #16305c; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .cth-directory .cth-row { flex-direction: column; gap: 28px; }
  .cth-directory .cth-sidebar { width: 100%; position: static; }
  .cth-directory .cth-head-row { flex-direction: column; align-items: flex-start; }
  .cth-directory .cth-count { text-align: left; max-width: none; }
}