/* spots-core.css: only what the JS and the card markup need to function. Never remove a rule here;
   every one of them backs a behaviour (hide/show, the accordion, the dropdown, the grids).
   Layout and look live in spots-layout.css and spots-theme.css, both replaceable. */

/* `.spot-card` gets a display value from the layout file, which would override the browser's
   default [hidden] rule; the JS hides cards with the `hidden` attribute, so keep this explicit. */
.spot-card[hidden] {
  display: none;
}

/* ── Toggles (body classes set by the JS) ─────────────────── */

body.hide-photos .spot-photo-link {
  display: none;
}

body.hide-subspots .spot-card--sub {
  display: none;
}

.spot-subspot-inherit {
  display: none;
}

body.hide-subspots .spot-subspot-inherit {
  display: inline;
}

/* ── Cooking mode controls (shown only while the mode is active) ── */
/* Specificity 0-2-0 on purpose: beats the layout file's `.spot-filter-mode` rule without !important. */

.spot-filter-group .spot-filter-cooking-group-mode {
  display: none;
}

.spot-filter--cooking .spot-filter-cooking-group-mode {
  display: inline-flex;
}

.spot-filter-cooking-combiner-wrap {
  display: grid;
  grid-template-rows: 0fr;
}

.spot-filter--cooking .spot-filter-cooking-combiner-wrap {
  grid-template-rows: 1fr;
}

.spot-filter-cooking-combiner {
  overflow: hidden;
}

/* ── Distance combobox dropdown ───────────────────────────── */

.spot-distance-combobox {
  position: relative;
}

.spot-distance-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 14rem;
  overflow-y: auto;
  z-index: 100;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Grids ────────────────────────────────────────────────── */

.spot-grid {
  display: grid;
}

/* Accordion wrappers: layout-transparent in card view, active roles in list view (below). */
.spot-body-collapse,
.spot-body-expanded-content,
.spot-body-expanded-inner,
.spot-body-info {
  display: contents;
}

/* ── List view (body.list-view) ───────────────────────────── */

body.list-view .spot-grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* spot-body: 2-column grid; badge (auto, col 1) + header (1fr, col 2) share the first row,
   collapse spans both columns on the second row; col 1 collapses to 0 when no badge. */
body.list-view .spot-body {
  display: grid;
  grid-template-columns: auto 1fr;
}

body.list-view .spot-distance-badge {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

body.list-view .spot-header {
  grid-column: 2;
  grid-row: 1;
}

body.list-view .spot-body-collapse {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-rows: 0fr;
}

body.list-view .spot-card--list-open .spot-body-collapse {
  grid-template-rows: 1fr;
}

/* The clip element: overflow:hidden and NO padding here (padding on an overflow:hidden grid item
   is not clipped at 0fr); padding belongs on .spot-body-expanded-inner. */
body.list-view .spot-body-expanded-content {
  display: block;
  overflow: hidden;
}