/* spots-layout.css: the minimum structure that makes the page usable without pain: flow, gaps,
   sizes, positions, wrapping, and a colour-free marker for active/excluded controls. No colours,
   no fonts, no decoration (those are spots-theme.css). Replaceable as a whole. */

:root {
  --spots-pill-padding: 0.1rem 0.35rem;
  --spots-pill-line-height: 1.5;
  --spots-card-min-width: 240px;
  --spots-card-gap: 1rem;
  --spots-card-body-padding: 0.75rem;
  --spots-card-body-gap: 0.45rem;
  --spots-big-screen-min-width: 940px;
}

.spotmap {
  width: 100%;
  height: 50vh;
}

/* ── Filter UI ───────────────────────────────────────── */

.spot-filter {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.5rem 0 1.5rem;
}

.spot-filter-groups {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.spot-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.3rem;
}

.spot-filter-pill-group {
  display: inline-flex;
  flex-wrap: wrap;
}

/* Colour-free state markers; the theme replaces them with inverted colours and a cross. */
.spot-filter-pill--active,
.spot-filter-mode-btn--active {
  outline: 2px solid currentColor;
}

.spot-filter-pill--excluded {
  text-decoration: line-through;
}

.spot-filter-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
}

.spot-filter-group .spot-filter-cooking-group-mode {
  margin-left: auto;
}

.spot-filter-cooking-combiner-wrap {
  align-self: flex-end;
}

.spot-filter-cooking-combiner {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.spot-filter-mode {
  display: inline-flex;
  flex-shrink: 0;
}

.spot-filter-sort {
  display: flex;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin-left: auto;
  scroll-margin-top: 1rem;
}

.spot-distance-combobox {
  flex: 0 1 20rem;
  width: 20rem;
  min-width: 5rem;
}

.spot-distance-input {
  width: 100%;
  box-sizing: border-box;
}

/* System colours, not a design choice: a transparent dropdown over the cards is unusable. */
.spot-distance-dropdown {
  background: Canvas;
  color: CanvasText;
}

.spot-distance-dropdown li {
  padding: 0.2rem 0.35rem;
}

.spot-distance-clear {
  flex-shrink: 0;
}

/* ── Table of contents ───────────────────────────────── */

.spot-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0.75rem 0 1.5rem;
}

.spot-toc a {
  white-space: nowrap;
}

/* ── Scroll-to-top (a host shell may render the link) ── */

.scroll-top {
  display: none;
}

@media (min-width: 940px) {
  .scroll-top {
    display: block;
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
  }
}

/* ── Spot grid ───────────────────────────────────────── */

.spot-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--spots-card-min-width), 1fr));
  gap: var(--spots-card-gap);
  margin-bottom: 1rem;
  align-items: start;
}
@media (min-width: 1200px) {
  .spot-grid {
    --c-count: 4;
    --extra-side-margin: calc(-0.5 * calc(var(--c-count)*var(--spots-card-min-width) + calc(var(--c-count) - 1)*var(--spots-card-gap) - 100%));
    margin-inline: var(--extra-side-margin);
  }
}
@media (min-width: 1800px) {
  .spot-grid {
    --c-count: 5;
    --extra-side-margin: calc(-0.5 * calc(var(--c-count)*var(--spots-card-min-width) + calc(var(--c-count) - 1)*var(--spots-card-gap) - 100%));
    margin-inline: var(--extra-side-margin);
  }
}

.spot-grid--centered {
  grid-template-columns: minmax(var(--spots-card-min-width), min(290px, 100%));
  justify-content: center;
}

/* ── Spot card ───────────────────────────────────────── */

.spot-card {
  display: flex;
  flex-direction: column;
}

.spot-photo-link {
  display: block;
  flex-shrink: 0;
}

.spot-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Photo sits inside spot-body; order:-1 keeps it visually first, the negative margin counters
   the body padding so it stays edge-to-edge. */
.spot-body .spot-photo-link {
  order: -1;
  margin: calc(-1 * var(--spots-card-body-padding)) calc(-1 * var(--spots-card-body-padding)) 0;
}

.spot-body {
  padding: var(--spots-card-body-padding);
  display: flex;
  flex-direction: column;
  gap: var(--spots-card-body-gap);
  flex: 1;
}

.spot-header {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

/* min-width 0 lets the heading shrink below its longest word so a long name never pushes the
   label out of the card; the word then breaks instead. */
.spot-name {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.spot-label {
  flex-shrink: 0;
}

.spot-coords {
  display: flex;
  align-items: center;
}

.spot-share-link {
  margin-left: 0.35rem;
}

/* ── Per-spot share page ─────────────────────────────── */

.spot-page main {
  padding-top: 1rem;
}

.spot-page-nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.spot-grid--single {
  max-width: 28rem;
  margin-inline: auto;
}

.spot-page-map {
  margin-top: 1.5rem;
}

/* ── Card details ────────────────────────────────────── */

.spot-details {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  row-gap: 0.15rem;
  margin: 0;
}

.spot-details dt {
  white-space: nowrap;
}

.spot-details dd {
  margin: 0;
}

.spot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.1rem;
}

.spot-videos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.1rem;
}

.spot-video-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* ── List view ───────────────────────────────────────── */

body.list-view .spot-grid {
  gap: 0.45rem;
  margin-inline: 0;
}

body.list-view .spot-card--sub {
  margin-left: 1.1rem;
}

body.list-view .spot-body {
  padding: 0;
  gap: 0;
}

body.list-view .spot-body-expanded-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spots-card-body-gap);
  padding: var(--spots-card-body-padding);
}

body.list-view .spot-body-info {
  display: flex;
  flex-direction: column;
  gap: var(--spots-card-body-gap);
}

/* Photo: reset the card-view order/margin tweaks */
body.list-view .spot-photo-link {
  order: 0;
  margin: 0;
}

/* Header acts as the clickable row */
body.list-view .spot-header {
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  user-select: none;
}

/* Label before name */
body.list-view .spot-label {
  order: -1;
}

/* Desktop: photo left, info right; always applied (not just when open) to avoid a layout jump */
@media (min-width: 600px) {
  body.list-view .spot-body-expanded-inner {
    flex-direction: row;
    align-items: flex-start;
  }

  body.list-view .spot-photo-link {
    flex-shrink: 0;
    width: 256px;
  }

  body.list-view .spot-body-info {
    flex: 1;
  }
}

/* In distance sort the order is by proximity, not by parent; an indent would be misleading */
body.list-view.distance-sort-active .spot-card--sub {
  margin-left: 0;
}