.district-finder { overflow: hidden; }
.finder-intro { margin-bottom: 2.5rem; text-align: center; }
.finder-intro .section-title,
.finder-intro .section-lede { margin-inline: auto; }

.finder-controls { display: grid; justify-items: center; gap: 1.25rem; }
.finder-controls[hidden] { display: none; }
.finder-counties { display: none; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 60rem; }
.finder-county {
  padding: 0.65rem 1.1rem;
  font: 700 0.8125rem/1 var(--font-body);
  letter-spacing: 0.04em;
  color: var(--slate);
  background: var(--white);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.finder-county:hover { border-color: var(--blue); color: var(--blue); }
.finder-county.is-active { color: #fff; background: var(--blue); border-color: var(--blue); }
.finder-county:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.finder-select,
.finder-search { width: min(100%, 28rem); text-align: center; text-align-last: center; }
.finder-status { margin: 0; font-size: 0.875rem; color: var(--muted); }
@media (min-width: 40rem) {
  .finder-counties { display: flex; }
  .finder-select { display: none; }
}

.finder-grid {
  --finder-cols: 2;
  --finder-gap: 0.75rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem var(--finder-gap);
  margin: 3rem 0 0; padding: 0; list-style: none;
}
.finder-grid > li { display: flex; width: calc((100% - (var(--finder-cols) - 1) * var(--finder-gap)) / var(--finder-cols)); }
@media (min-width: 40rem) { .finder-grid { --finder-cols: 3; } }
@media (min-width: 48rem) { .finder-grid { --finder-cols: 4; } }
@media (min-width: 64rem) { .finder-grid { --finder-cols: 5; } }
@media (min-width: 100rem) {
  .finder-grid { --finder-cols: 6; }
  .district-finder .container:has(.finder-grid) { max-width: 96rem; }
}

.finder-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 1rem 0.5rem;
  text-align: center;
  color: var(--slate);
}
.finder-tile__logo { display: grid; place-items: center; width: 6.5rem; height: 6.5rem; margin-bottom: 0.65rem; will-change: transform; }
.finder-tile__logo img { width: 100%; height: 100%; object-fit: contain; }
.finder-tile__county { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.finder-tile__name { font-size: 0.875rem; font-weight: 700; line-height: 1.35; color: var(--slate); }
a.finder-tile[href]:hover .finder-tile__name,
a.finder-tile[href]:focus-visible .finder-tile__name { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
a.finder-tile:not([href]) { cursor: default; }
.finder-tile:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }

.update-note { margin: 3rem auto 0; max-width: 40rem; text-align: center; font-size: 0.9375rem; line-height: 1.7; color: var(--muted); }
.update-note a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.update-note--spaced { margin-top: 4rem; }
.page-section .update-note { margin: 2.5rem 0 0; text-align: left; }