/* =========================================================================
   locations.css — the /locations directory.

   A glossary-style index rather than the tile grid used elsewhere: a search
   field, an A–Z jump rail, and lettered groups of entries. Loaded only on the
   location archive (see sizrok_enqueue), so nothing here affects other pages.
   Uses the core tokens from styles.css — no new colours are introduced.
   ========================================================================= */

/* Visually hidden but read aloud. The theme has no such utility yet, so it is
   defined here rather than assumed. */
.locdir .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- head ---------------------------------------------------- */

.locdir__lede {
  max-width: 54ch;
}

/* ---------- controls ------------------------------------------------ */

.locdir__controls {
  position: sticky;
  top: calc(var(--nav-h) + 8px);
  z-index: 20;
  padding: var(--space-5) 0 var(--space-4);
  margin-bottom: var(--space-8);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.locdir__search-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.locdir__search {
  position: relative;
  flex: 1 1 280px;
  min-width: 0;
}

.locdir__search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--mid);
  pointer-events: none;
}

.locdir__input {
  width: 100%;
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  padding: 12px 16px 12px 40px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.locdir__input::placeholder { color: var(--mid); }

/* Ink, not orange: every form field on the site focuses to black with a soft
   black ring (.cv-form, .field__input, .builder__textarea). Orange focus would
   be a one-off. */
.locdir__input:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 4px rgba(13, 13, 11, 0.05);
}



/* ---------- A–Z rail ------------------------------------------------ */

.locdir__az {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.locdir__az-btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px 9px;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.locdir__az-btn:hover:not(:disabled) {
  background: var(--cream);
  border-color: var(--rule-2);
}

.locdir__az-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.locdir__az-btn:disabled {
  color: var(--warm-2);
  cursor: default;
}

/* ---------- lettered groups ----------------------------------------- */

.locdir__group { margin-bottom: var(--space-12); scroll-margin-top: 160px; }

.locdir__letter {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.locdir__letter span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--mid);
}

.locdir__letter::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.locdir__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--space-6);
}

/* ---------- entry --------------------------------------------------- */

.locdir__item {
  display: block;
  text-decoration: none;
  color: inherit;
}

.locdir__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--cream);
  border: 1px solid var(--rule);
  margin-bottom: var(--space-4);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}

.locdir__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* the empty state is a quiet inset frame, never a text label */
.locdir__thumb-frame {
  position: absolute;
  inset: 12px;
  border: 1px solid var(--rule-2);
  border-radius: 4px;
}

.locdir__item:hover .locdir__thumb {
  transform: translateY(-4px);
  border-color: var(--rule-2);
}

.locdir__name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 2px;
}

.locdir__item:hover .locdir__name { color: var(--orange); }

/* No capitals: the brand does not set copy in uppercase anywhere. */
.locdir__scope {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--mid);
}

/* When a result matched on a district rather than the place name, the scope
   line is replaced by the district that matched. Deliberately NOT orange:
   on this site orange means brand accent or interactive state, and this is
   neither. Dropping the caps and taking ink weight is enough to read as
   content rather than a label. */
.locdir__scope.is-match {
  color: var(--ink);
  font-weight: 600;
}

/* the national hub reads as the parent of the set */
.locdir__item--hub .locdir__thumb {
  background: var(--ink);
  border-color: var(--ink);
}

.locdir__item--hub .locdir__thumb-frame { border-color: var(--rule-d-2); }

/* ---------- empty state --------------------------------------------- */

.locdir__empty {
  display: none;
  padding: var(--space-16) 0;
  text-align: center;
  color: var(--mid);
}

.locdir__empty b { color: var(--ink); }

.locdir.is-empty .locdir__empty { display: block; }

/* ---------- responsive ---------------------------------------------- */

@media (max-width: 640px) {
  .locdir__controls { position: static; }
  .locdir__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-5); }
  .locdir__az-btn { padding: 6px 7px; font-size: 11px; }
}

/* Someone who prefers less motion still gets the colour change on hover. */
@media (prefers-reduced-motion: reduce) {
  .locdir__thumb { transition: border-color 0.35s var(--ease); }
  .locdir__item:hover .locdir__thumb { transform: none; }
}