/* Places: the directory front and the place pages. Loaded after monocle.css.
   Everything here is Monocle furniture arranged for a record, not a piece:
   a facts list, a hero when there is a photograph, and ledgers for the rest.
   Accent rule applies: lines and chips only. */

.place-head .kicker a { color: inherit; text-decoration: none; }
.place-head .kicker a:hover { text-decoration: underline; text-decoration-color: var(--color-blue-slate, #56667a); }

/* Hero photograph, 3:2, edge to edge in the column, 4px corners like every card. */
.place-hero { padding-top: 24px; }
.place-hero figure { margin: 0; }
.place-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px;
  background: var(--color-paper-grey, #f0f0f0);
}
.place-hero figcaption { margin-top: 8px; }

/* The facts: a two-column definition list on a rule grid. */
.facts {
  margin: 20px 0 0;
  padding: 0;
  border-top: 1px solid var(--color-gallery-border, #ddd);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
}
.fact {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-gallery-border, #ddd);
}
.fact dt {
  font: 400 11px/1.5 var(--font-helvetica-neue, Helvetica, Arial, sans-serif);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-dispatch-grey, #6e6e6e);
  padding-top: 3px;
}
.fact dd {
  margin: 0;
  font: 400 16px/1.5 var(--font-plantin, Georgia, serif);
  color: var(--color-press-black, #000);
  overflow-wrap: anywhere;
}
.fact dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-gallery-border, #ddd); }
.fact dd a:hover { border-bottom-color: var(--color-blue-slate, #56667a); color: var(--color-blue-slate, #56667a); }
@media (max-width: 782px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact { grid-template-columns: 110px minmax(0, 1fr); }
}

/* The live list reuses the ledger; the note is the no-script and empty state. */
.place-live-note { padding: 16px 0 4px; }
.place-live .ledger-row h3 { font-size: 18px; }

/* The directory front: a town label in the ledger's label slot. */
.ledger-row > .meta:first-child { min-width: 120px; }

/* A fact that is a list (what is there, the sources) runs the full width. */
.fact.is-wide { grid-column: 1 / -1; }
.fact-list { list-style: none; margin: 0; padding: 0; }
.fact-list li { padding: 2px 0 2px 14px; position: relative; }
.fact-list li::before { content: ""; position: absolute; left: 0; top: .75em; width: 5px; height: 1px; background: var(--color-dispatch-grey, #6e6e6e); }
.place-hero figcaption a { color: inherit; }

/* Openings and closings: each row's name links its place page, and the
   sources sit in a meta line under the dek. */
.oc-row h3 a { color: inherit; text-decoration: none; }
.oc-row h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--color-blue-slate, #56667a); }
.oc-row .oc-src { margin-top: 6px; }
.oc-row .oc-src a { color: inherit; }

/* ---------- The directory's filter bar and folded shelves (/places) ---------- */
/* scripts/directory.js shows the bar and folds each shelf; the page without
   it is every row. The bar is sticky under the pinned bar (--pin-top,
   scripts/site.js). */
.dir-bar:not([hidden]) {
  position: sticky;
  top: var(--pin-top, 0px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: var(--editorial-white);
  border-bottom: 1px solid var(--gallery-border);
}
.dir-field { display: flex; align-items: center; gap: 12px; flex: 1; max-width: 460px; }
.dir-field .kicker { white-space: nowrap; }
.dir-field input {
  flex: 1;
  min-width: 0;
  background: var(--editorial-white);
  border: 1px solid var(--gallery-border);
  border-radius: var(--radius-inputs);
  padding: 9px 14px;
  font: 400 14px var(--sans);
  color: var(--press-black);
}
.dir-field input:focus { outline: 2px solid var(--blue-slate); outline-offset: 1px; }
.dir-bar .meta { white-space: nowrap; }
.dir-hidden { display: none !important; }
.ledger.is-collapsed .ledger-row:nth-of-type(n + 7) { display: none; }
.dir-more {
  display: block;
  width: 100%;
  text-align: left;
  font: 700 11px var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--press-black);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gallery-border);
  padding: 14px 0;
  cursor: pointer;
}
.dir-more::after { content: " \2193"; color: var(--dispatch-grey); }
.dir-more:hover { color: var(--blue-slate); }
@media (max-width: 640px) {
  .dir-bar:not([hidden]) { gap: 10px; }
  .dir-field .kicker { display: none; }
}