/* Our pages (S48): the Apartments page, the landing strip's entries, Help, and O-06's opt-out */

/* The Apartments page (SEO-1): a plain list by town. One column on phones, three entries a row from 768 px. */
.bh-listing-page { display: grid; gap: var(--space-8); align-content: start; width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--space-8) var(--page-pad) var(--space-12); }
.bh-listing-head { display: grid; gap: var(--space-2); }
.bh-listing-town-group { display: grid; gap: var(--space-4); }

/* An entry: the cover photo, the title and the town. The landing strip shows the same. */
.bh-listing { display: grid; gap: var(--space-6); }
.bh-listing-item { display: grid; gap: var(--space-1); align-content: start; min-width: 0; }
.bh-listing-link { display: grid; gap: var(--space-2); min-width: 0; color: var(--ink-1); font-weight: var(--weight-bold); text-decoration: none; }
.bh-listing-link:hover .bh-listing-title { text-decoration: underline; }
.bh-listing-cover { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); background: var(--sunken); }
.bh-listing-cover--none { display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.bh-listing-town { display: flex; align-items: center; gap: var(--space-1); }

@media (min-width: 768px) {
  .bh-listing { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
}

/* Help: questions under two headings, in the reading column */
.bh-help { max-width: 720px; }
.bh-help-section { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.bh-help-section > h3 { margin-top: var(--space-3); }

/* O-06: the switch that keeps the apartment on the Apartments page, in a card of its own */
.bh-listing-switch { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); }