/*
 * county-clark.css — Clark County, Indiana signature layer.
 *
 * Loads ON TOP OF county-san-diego.css, which is the shared premium county
 * base (Los Angeles and Orange do the same). This file owns ONLY the
 * `clark-*` roots. It does not redefine the site shell, the shared header,
 * footer, navigation, base typography, shared buttons or breadcrumbs.
 *
 * The masthead is editorial rather than photographic. No licensed Clark County
 * photograph has been acquired, and the design contract forbids a generic
 * prison image or a reused hero — so the hero plate carries the county's
 * organising fact (one address) as type instead of a picture.
 */

/* The hero is a standard photographic masthead: the shared base already owns
 * its crop, scrim and responsive behavior, so this file adds nothing there. */

/* ---------- Facility identity ---------- */
.clark-formal-name {
  font: 400 .88rem/1.4 Atkinson, Arial, sans-serif !important;
  color: var(--sd-muted);
  margin: .15rem 0 .5rem;
}

/* ---------- Family routes ----------
 * The base grid is 3-up because San Diego has five routes. Clark has exactly
 * four, which in a 3-up grid leaves "04" stranded beside an empty cell and a
 * dangling rule. Four columns matches the four-item quickbar above it.
 */
.clark-page .sd-family__routes { grid-template-columns: repeat(4, 1fr); }
.clark-page .sd-family__routes > a:nth-child(3n) { border-right: 1px solid var(--sd-line); }
.clark-page .sd-family__routes > a:nth-child(4n) { border-right: 0; }

@media (max-width: 1024px) {
  .clark-page .sd-family__routes { grid-template-columns: repeat(2, 1fr); }
  .clark-page .sd-family__routes > a:nth-child(3n) { border-right: 1px solid var(--sd-line); }
  .clark-page .sd-family__routes > a:nth-child(2n) { border-right: 0; }
}

@media (max-width: 640px) {
  .clark-page .sd-family__routes { grid-template-columns: 1fr; }
  .clark-page .sd-family__routes > a { border-right: 0 !important; }
}

/* ---------- Small qualifying notes ---------- */
.clark-note {
  margin: 1.75rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--sd-line);
  font: 400 .96rem/1.55 Atkinson, Arial, sans-serif;
  color: var(--sd-muted);
  max-width: 70ch;
}

/* .sd-courts is a navy field — the default muted grey fails contrast there. */
.sd-courts .clark-note {
  color: #d7e5f1;
  border-left-color: rgba(255, 255, 255, .38);
}

.clark-caveat {
  display: block;
  margin-top: .6rem;
  font: 400 .84rem/1.45 Atkinson, Arial, sans-serif;
  color: var(--sd-muted);
}

.clark-address {
  font: 400 1rem/1.6 Atkinson, Arial, sans-serif;
  color: var(--sd-ink);
}

/* ---------- Closed facility ----------
 * The design contract refuses "a stale facility presented as active". This
 * treatment is deliberately NOT a facility row: no phone, no directions, no
 * ordinal. It reads as a correction, which is what it is.
 */
.clark-closed {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: flex-start;
  margin-top: 2rem;
  padding: clamp(1.25rem, 2.5vw, 1.85rem);
  background: var(--sd-paper);
  border: 1px solid var(--sd-line);
  border-left: 4px solid var(--sd-muted);
}

.clark-closed__flag {
  flex: 0 0 auto;
  margin: 0;
  padding: .3rem .7rem;
  background: var(--sd-muted);
  color: #fff;
  font: 700 .7rem/1 Plein, Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.clark-closed h3 {
  margin: 0 0 .5rem;
  font: 700 clamp(1.15rem, 1.6vw, 1.4rem)/1.2 Plein, Arial, sans-serif;
  color: var(--sd-ink);
}

.clark-closed > div p {
  margin: 0;
  font: 400 .98rem/1.55 Atkinson, Arial, sans-serif;
  color: var(--sd-muted);
  max-width: 70ch;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .clark-closed { flex-direction: column; gap: .85rem; }
}

/* Respect users who ask for less motion or higher contrast. */
@media (prefers-contrast: more) {
  .clark-closed > div p { color: var(--sd-ink); }
}

/* Every agency row carries a full street address, not just a phone number. */
.clark-agency-address {
  display: block;
  margin-top: .4rem;
  font: 400 .88rem/1.45 Atkinson, Arial, sans-serif;
  font-style: normal;
  color: var(--sd-muted);
}