/* File: /css/hub-atlas.css | Version: 1.0.0 | 2026-10-31: a subject's atlas, the image gallery under its introduction (inc/inc-hub-atlas.asp; Steve: "Yes, start it"). */
.hub-atlas { margin-top: 62px; }

.hub-atlas__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-bottom: 14px;
}

.hub-atlas__filters[hidden] { display: none; }

.hub-atlas__filter {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: var(--hub-muted);
  font-size: var(--fs-sm);
}

.hub-atlas__filter select {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--hub-line);
  background: var(--hub-feature-bg);
  color: var(--hub-ink);
  font-size: var(--fs-2xl);
}

.hub-atlas__count {
  margin: 0 0 18px;
  color: var(--hub-muted);
  font-size: var(--fs-sm);
}

.hub-atlas__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 26px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hub-atlas__item { min-width: 0; }
.hub-atlas__item[hidden] { display: none; }
.hub-atlas__figure { margin: 0; }

.hub-atlas__open {
  position: relative;
  display: block;
  border: 1px solid var(--hub-line);
  background: var(--hub-feature-bg);
}

.hub-atlas__open:focus-visible { outline: 2px solid var(--hub-gold); outline-offset: 2px; }

.hub-atlas__open img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hub-atlas__badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 8px;
  background: var(--hub-gold);
  color: var(--hub-paper);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hub-atlas__caption { padding-top: 10px; }

.hub-atlas__name {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-4xl);
  line-height: 1.25;
}

.hub-atlas__place {
  display: block;
  margin-top: 3px;
  color: var(--hub-muted);
  font-size: var(--fs-lg);
  line-height: 1.4;
}

/* The record and the claim wait for the viewer, so the grid can hold many buildings: the viewer copies the caption's
   contents, outside .hub-atlas__caption, where they show. */
.hub-atlas__detail { display: block; margin-top: 0.25rem; }
.hub-atlas__caption .hub-atlas__detail { display: none; }

.hub-atlas__credits {
  margin-top: 34px;
  border-top: 1px solid var(--hub-line);
  padding-top: 14px;
}

.hub-atlas__credits summary {
  min-height: 44px;
  padding: 10px 0;
  color: var(--hub-gold-dark);
  font-size: var(--fs-2xl);
  cursor: pointer;
}

.hub-atlas__credit-list {
  margin: 8px 0 0;
  padding-left: 22px;
  color: var(--hub-muted);
  font-size: var(--fs-lg);
  line-height: 1.6;
}

.hub-atlas__credit-list li { margin-bottom: 6px; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .hub-atlas__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }

  .hub-atlas__name { font-size: var(--fs-2xl); }
  .hub-atlas__place { font-size: var(--fs-md); }
}