/* ========= Design Tokens ========= */
:root{
  --surface:#FAFAFA;
  --text:#0B1F3A;
  --brand:#0067a5;
  --brand-600:#005689;
  --border:#e6e6e6;
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.08);
  --shadow-hover:0 4px 6px rgba(0,0,0,.08), 0 12px 28px rgba(0,0,0,.18);
}

/* Optional base */
html,body{color:var(--text);background:#fff}
body{font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}

/* ========= Card Grid ========= */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,320px));
  gap:24px;
  justify-content:center;
  overflow:visible;
  position:relative;
}

/* ========= Card ========= */
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
  color:inherit;
  text-decoration:none;
  overflow:hidden;
  will-change:transform;
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-hover);
  z-index:2;
}

/* Full-card clickable overlay */
.card .card-link{
  position:absolute;
  inset:0;
  z-index:9999;
  display:block;
  text-indent:-9999px;
  color:transparent;
}

/* Inner content */
.card-inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  min-height:230px;
  padding:24px;
  box-sizing:border-box;
}

/* Title */
.card h2{
  margin:0 0 16px;
  text-align:center;
  font-size:24px;
  line-height:1.3;
  color:var(--text);
  font-weight:700;
}

/* ========= Metadata list ========= */
.meta ul{
  margin:0;
  padding:0;
  list-style:none;
}
.meta li{
  display:flex;
  align-items:center;
  gap:8px;
  padding:16px 0;
  font-size:18px;
  color:var(--text);
  font-weight:500;
  text-align:left;
}
/* Pin icon */
.meta li::before{
  content:"";
  width:18px;
  height:18px;
  flex-shrink:0;
  background:var(--brand);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"/></svg>') center/contain no-repeat;
}

/* ========= CTA ========= */
.cta-row{margin-top:auto;text-align:center}
.btn{
  display:inline-block;
  padding:10px 18px;
  background:var(--brand);
  color:#fff;
  border-radius:8px;
  font-size:16px;
  font-weight:500;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
  will-change:transform;
}
.card:hover .btn{
  background:var(--brand-600);
  transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(0,0,0,.15);
}

/* ========= County links (index) ========= */
ul.county-links{
  list-style:none;
  padding:0;
  margin:0;
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-size:18px;
}
ul.county-links li{margin-bottom:28px}
ul.county-links a{
  text-decoration:none;
  color:#0067a5;
  font-weight:500;
  transition:color .2s ease;
  display:inline-block;
  line-height:1.6;
}
ul.county-links a:hover{color:#002855}

/* ========= Court links (county detail) ========= */
ul.court-links{
  list-style:none;
  margin:0;
  padding:0;
  font-family:'Inter', system-ui, -apple-system, sans-serif;
}
ul.court-links li{margin-bottom:12px}
ul.court-links h3{
  margin:0 0 8px;
  font-size:20px;
  font-weight:600;
}
ul.court-links h3 a{
  text-decoration:none;
  color:#0067a5;
  transition:color .2s ease;
}
ul.court-links h3 a:hover{color:#002855}

/* Cities list */
ul.city-list{
  list-style:disc;
  margin:0 0 12px 20px;
  padding:0;
  font-size:16px;
}
ul.city-list li{
  margin-bottom:8px;
  line-height:1.5;
}
ul.city-list li a{
  text-decoration:none;
  color:#0067a5;
  font-weight:400;
  transition:color .2s ease;
}
ul.city-list li a:hover{color:#002855}

/* ========= Accessibility ========= */
@media (prefers-reduced-motion: reduce){
  .card, .btn,
  ul.county-links a,
  ul.court-links h3 a,
  ul.city-list li a{
    transition:none;
  }
  .card:hover{transform:none}
  .card:hover .btn{transform:none}
}

/* ========= Tablet ========= */
@media (max-width:768px){
  .card-grid{
    grid-template-columns:1fr;
    gap:20px;
    padding:0 16px;
  }
  .card h2{font-size:22px}
  .meta li{font-size:16px}
  .btn{padding:12px 20px;font-size:17px}
  ul.county-links{font-size:17px}
  ul.county-links li{margin-bottom:24px}
}

/* ========= Mobile ========= */
@media (max-width:640px){
  .card-grid{padding:0 12px}
  .card-inner{padding:20px;min-height:200px}
  .card h2{font-size:20px;margin-bottom:12px}
  .meta li{font-size:15px}
  ul.county-links{font-size:16px}
  ul.county-links li{margin-bottom:20px}
  ul.court-links h3{font-size:18px}
  ul.city-list{font-size:15px;margin-left:16px}
  ul.city-list li{margin-bottom:6px}
}