/* A deliberately different theme for the demo: proves that swapping spots-theme.css alone changes
   the look while everything keeps working. Requires spots-core.css and spots-layout.css.
   Look: tiles. At most three wide columns, each card a tile whose title band, in the umap layer's
   colour, overlaps the bottom of its photo; the label is a tilted sticker in that colour pinned to
   the card's top-right corner (the shipped theme draws a map-marker pin inline instead). Condensed
   uppercase display type, hashtag tags, underline search. Only system font stacks: the demo makes
   no external requests beyond the map and the photos. */

:root {
  color-scheme: light dark;
  --spots-text: light-dark(#1f2a1f, #e6ede6);
  --spots-bg: light-dark(#eef1ea, #121512);
  --spots-paper: light-dark(#ffffff, #1c211c);
  --spots-band: light-dark(#14321a, #0a170c);
  --spots-band-text: #eef1ea;
  --spots-accent: light-dark(#2e7d32, #81c784);
  --spots-accent-text: light-dark(#ffffff, #0a170c);
  --spots-muted: light-dark(#6b7a6b, #9fb09f);
  --spots-rule: light-dark(#d5dccf, #2c352c);
  --spots-chip-bg: light-dark(#dfe6da, #27302a);
  --spots-warn-bg: light-dark(#fff6d6, #3a3314);
  --spots-shadow: light-dark(rgba(20, 50, 26, 0.14), rgba(0, 0, 0, 0.55));
  --spots-shadow-strong: light-dark(rgba(20, 50, 26, 0.28), rgba(0, 0, 0, 0.8));
  --spots-font-body: Verdana, "DejaVu Sans", Geneva, Tahoma, sans-serif;
  --spots-font-display: "Arial Narrow", "Liberation Sans Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --spots-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --spots-tile-min-width: 320px;
  --spots-tile-max-width: 400px;
  --spots-tile-max-columns: 3;
  --spots-tile-gap: 1.5rem;
  --spots-photo-zoom: 1.1;              /* card hovered */
  --spots-photo-zoom-focus: 1.2;        /* photo itself hovered */
  --spots-photo-zoom-duration: 350ms;
  --spots-tile-radius: 0.6rem;
  --spots-heading-bar-width: 0.45rem;
  --spots-band-padding: 0.6rem;
  --spots-photo-ratio: 1.5;              /* width / height of the card photo */
  --spots-photo-height: calc(100cqw / var(--spots-photo-ratio));   /* the photo spans the card width (cqw = card) */
  --spots-band-photo-overlap: 1.75rem;   /* how far the title band climbs onto the photo */
  --spots-band-top-offset: 0.55rem;      /* cards without a photo: paper above the band, so the corner sticker juts into it */
  --spots-sticker-tilt: -6deg;
  --spots-sticker-offset: -0.3rem;      /* how far the sticker pokes out over the card edge; must stay inside the body margin */
  --spots-hover-lift: -0.3rem;
  --spots-hover-duration: 160ms;
}

body {
  font-family: var(--spots-font-body);
  font-size: 0.92rem;
  background: var(--spots-bg);
  color: var(--spots-text);
}

/* The content column never grows beyond three tiles of their maximum width */
body > main {
  max-width: calc(var(--spots-tile-max-columns) * var(--spots-tile-max-width) + (var(--spots-tile-max-columns) - 1) * var(--spots-tile-gap));
  margin-inline: auto;
}

/* ── Display type ────────────────────────────────────── */

h1,
section[id] > h3,
.spot-name,
.spot-toc a,
.spot-filter-pill,
.spot-filter-mode-btn,
.spot-filter-counts,
.spot-distance-badge,
.spot-label {
  font-family: var(--spots-font-display);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

h1 {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  margin: 1rem 0 1.5rem;
}

h1::after {
  content: '';
  display: block;
  width: 4rem;
  height: 0.4rem;
  margin-top: 0.5rem;
  background: var(--spots-accent);
}

section[id] > h3 {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  margin: 2.5rem 0 1.25rem;
  padding-left: 0.6rem;
  border-left: var(--spots-heading-bar-width) solid var(--spots-accent);
}

.spotmap {
  border: 0;
  border-radius: var(--spots-tile-radius);
  box-shadow: 0 0.3rem 1rem var(--spots-shadow);
}

/* ── Toc ─────────────────────────────────────────────── */

.spot-toc a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--spots-rule);
  transition: border-color var(--spots-hover-duration);
}

.spot-toc a:hover {
  border-bottom-color: var(--spots-accent);
}

/* ── Filter: flat chips with a tab-like bottom edge ──── */

.spot-filter-pill,
.spot-filter-mode-btn,
.spot-distance-clear {
  font-size: 0.78rem;
  font-weight: 700;
  color: inherit;
  background: var(--spots-chip-bg);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0.2rem;
  padding: 0.2rem 0.55rem;
  line-height: var(--spots-pill-line-height);
  cursor: pointer;
  transition: background-color var(--spots-hover-duration), color var(--spots-hover-duration), border-color var(--spots-hover-duration);
}

.spot-filter-pill:hover,
.spot-filter-mode-btn:hover,
.spot-distance-clear:hover {
  border-bottom-color: var(--spots-accent);
}

.spot-filter-pill--modifier {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-style: italic;
}

.spot-filter-pill-group {
  gap: 2px;
}

.spot-filter-pill--active,
.spot-filter-mode-btn--active {
  outline: none;
  background: var(--spots-accent);
  color: var(--spots-accent-text);
  border-bottom-color: var(--spots-accent);
}

.spot-filter-pill--excluded {
  text-decoration: line-through;
  color: var(--spots-muted);
  background: transparent;
  border: 1px dashed var(--spots-muted);
}

.spot-filter-mode {
  gap: 2px;
}

.spot-filter-counts {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--spots-muted);
}

/* Search: an underline, not a box */
.spot-distance-input {
  font-family: inherit;
  font-size: 0.9rem;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 2px solid currentColor;
  border-radius: 0;
  padding: 0.25rem 0;
  outline: none;
}

.spot-distance-input:focus {
  border-bottom-color: var(--spots-accent);
}

.spot-distance-input::placeholder {
  color: var(--spots-muted);
  font-style: italic;
}

.spot-distance-clear {
  margin-left: 0.4rem;
}

.spot-distance-dropdown {
  background: var(--spots-paper);
  border: 0;
  border-top: 3px solid var(--spots-accent);
  box-shadow: 0 0.6rem 1.4rem var(--spots-shadow-strong);
}

.spot-distance-dropdown li:hover {
  background: var(--spots-accent);
  color: var(--spots-accent-text);
}

.spot-distance-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  background: var(--spots-accent);
  color: var(--spots-accent-text);
}

/* ── Grid: at most three wide tiles, however wide the screen ─ */

.spot-grid:not(.spot-grid--centered) {
  --spots-tile-share: calc((100% - (var(--spots-tile-max-columns) - 1) * var(--spots-tile-gap)) / var(--spots-tile-max-columns));
  grid-template-columns: repeat(auto-fill, minmax(max(var(--spots-tile-min-width), var(--spots-tile-share)), 1fr));
  gap: var(--spots-tile-gap);
  margin-inline: 0;
}

/* ── Tiles ───────────────────────────────────────────── */

/* The card is a stacking context (keeps the band's z-index and the photo's zoom transform inside
   the card) and a size container (the stickers derive the photo height from the card width). */
.spot-card {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  background: var(--spots-paper);
  border-radius: var(--spots-tile-radius);
  box-shadow: 0 0.15rem 0.5rem var(--spots-shadow);
  transition: transform var(--spots-hover-duration) ease-out, box-shadow var(--spots-hover-duration) ease-out;
}

.spot-card:hover {
  transform: translateY(var(--spots-hover-lift));
  box-shadow: 0 0.9rem 1.8rem var(--spots-shadow-strong);
}

.spot-card--sub {
  font-size: 0.94em;
}

/* Photo: clipped by its link so the hover zoom never leaves the tile */
.spot-photo-link {
  overflow: hidden;
  border-radius: var(--spots-tile-radius) var(--spots-tile-radius) 0 0;
}

.spot-photo {
  aspect-ratio: var(--spots-photo-ratio);
  transition: transform var(--spots-photo-zoom-duration) ease-out;
}

.spot-card:hover .spot-photo {
  transform: scale(var(--spots-photo-zoom));
}

.spot-photo-link:hover .spot-photo {
  transform: scale(var(--spots-photo-zoom-focus));
}

/* The title band: edge to edge in the umap layer's colour, text colour derived from it (black on
   light, white on dark). Below a photo it climbs onto the image through a gradient (flex items
   paint in order-modified sequence, so the band paints over the order:-1 photo). */
.spot-header {
  --spots-band-color: var(--spots-pin-color, var(--spots-band));
  /* above the photo, whose zoom transform would otherwise paint over the band */
  position: relative;
  z-index: 1;
  /* the sticker is absolutely positioned, so the name is the header's only flex item */
  justify-content: center;
  margin: calc(-1 * var(--spots-card-body-padding) + var(--spots-band-top-offset)) calc(-1 * var(--spots-card-body-padding)) 0;
  padding: var(--spots-band-padding) var(--spots-card-body-padding);
  background: var(--spots-band-color);
  color: var(--spots-band-text);
  color: lch(from var(--spots-band-color) calc((49.44 - l) * infinity) 0 0);
}

.spot-card:has(.spot-photo-link) .spot-header {
  margin-top: calc(-1 * var(--spots-card-body-gap) - var(--spots-band-photo-overlap));
  padding-top: calc(var(--spots-band-photo-overlap) + var(--spots-band-padding));
  background: linear-gradient(to bottom,
    transparent,
    color-mix(in srgb, var(--spots-band-color) 55%, transparent) 40%,
    var(--spots-band-color) var(--spots-band-photo-overlap));
}

/* Sub-spots: the band is only tinted with the layer colour */
.spot-card--sub .spot-header {
  --spots-band-color: color-mix(in srgb, var(--spots-pin-color, var(--spots-band)) 22%, var(--spots-paper));
  color: inherit;
}

.spot-name {
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
}

/* Sticker: pinned to the tile's top-right corner, layer colour fill, text colour derived from it
   (black on light, white on dark), same rule as the shipped theme. Positioned relative to the
   band (its containing block), so the band's distance from the card top is subtracted. */
.spot-label,
.spot-distance-badge {
  --spots-band-from-card-top: var(--spots-band-top-offset);
  position: absolute;
  top: calc(var(--spots-sticker-offset) - var(--spots-band-from-card-top));
  z-index: 1;
}

.spot-card:has(.spot-photo-link) .spot-label,
.spot-card:has(.spot-photo-link) .spot-distance-badge {
  --spots-band-from-card-top: calc(var(--spots-photo-height) - var(--spots-band-photo-overlap));
}

.spot-label {
  right: var(--spots-sticker-offset);
  font-size: 0.85rem;
  font-weight: 900;
  padding: 0.2em 0.55em;
  background: var(--spots-pin-color, var(--spots-muted));
  color: inherit;
  color: lch(from var(--spots-pin-color, #888) calc((49.44 - l) * infinity) 0 0);
  border-radius: 0.15rem;
  box-shadow: 0 0 0 2px var(--spots-paper), 0 2px 4px var(--spots-shadow-strong);
  transform: rotate(var(--spots-sticker-tilt));
  transition: transform var(--spots-hover-duration);
}

.spot-card:hover .spot-label {
  transform: rotate(0deg);
}

.spot-card--sub .spot-label {
  background: var(--spots-paper);
  color: var(--spots-pin-color, var(--spots-muted));
  outline: 2px solid var(--spots-pin-color, var(--spots-muted));
}

/* Distance badge (distance sort): a second sticker, top-left, mirroring the label */
.spot-distance-badge {
  left: var(--spots-sticker-offset);
  transform: rotate(calc(-1 * var(--spots-sticker-tilt)));
  box-shadow: 0 0 0 2px var(--spots-paper), 0 2px 4px var(--spots-shadow-strong);
}

/* Coordinates row: links first, then the numbers, everything right-aligned */
.spot-coords {
  justify-content: flex-end;
  gap: 0.4rem;
  font-family: var(--spots-font-mono);
  font-size: 0.72rem;
  color: var(--spots-muted);
  cursor: copy;
}

.spot-coords .map-link {
  order: -2;
  display: inline-flex;
}

.spot-coords .spot-share-link {
  order: -1;
  margin-left: 0;
}

.spot-share-link {
  text-decoration: none;
  cursor: copy;
}

.spot-caveat,
.spot-gone-reason {
  font-size: 0.85rem;
  padding: 0.35rem 0.6rem;
  background: var(--spots-warn-bg);
  border-left: 3px solid var(--spots-accent);
}

.spot-card--gone {
  opacity: 0.75;
  filter: saturate(0.3);
}

.spot-card--gone .spot-name {
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--spots-accent);
}

.spot-details {
  font-size: 0.85rem;
}

.spot-details dt {
  font-weight: bold;
}

/* Tags as hashtags, no boxes, right-aligned */
.spot-tags {
  justify-content: flex-end;
}

.spot-tag {
  font-family: var(--spots-font-mono);
  font-size: 0.75rem;
  color: var(--spots-accent);
}

.spot-tag::before {
  content: '#';
  opacity: 0.6;
}

.spot-videos {
  font-size: 0.85rem;
}

.spot-video-link {
  color: inherit;
  font-weight: bold;
}

/* Fata morgana: a faint ghost */
.spot-card--fata {
  opacity: 0.35;
  filter: blur(0.5px);
}

/* ── List view: rows, sticker back inline, the band is the clickable row ─ */

body.list-view .spot-card {
  border-radius: 0.3rem;
}

body.list-view .spot-card:hover {
  transform: none;
  box-shadow: 0 0.15rem 0.5rem var(--spots-shadow);
}

body.list-view .spot-header,
body.list-view .spot-card:has(.spot-photo-link) .spot-header {
  margin: 0;
  padding: 0.4rem 0.75rem;
  background: var(--spots-band-color);
  border-radius: 0 0.3rem 0 0;
  align-items: center;
  transition: background-color var(--spots-hover-duration);
}

body.list-view .spot-header:hover {
  background: var(--spots-accent);
  color: var(--spots-accent-text);
}

body.list-view .spot-header {
  justify-content: flex-start;
}

body.list-view .spot-name {
  font-size: 1.05rem;
  text-align: left;
}

body.list-view .spot-label,
body.list-view .spot-card:hover .spot-label,
body.list-view .spot-distance-badge {
  position: static;
  transform: none;
  box-shadow: none;
}

/* inline on a band of its own colour: the ring keeps it visible */
body.list-view .spot-label {
  outline: 2px solid currentColor;
}

body.list-view .spot-header::after {
  content: '+';
  margin-left: auto;
  font-family: var(--spots-font-display);
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
  color: var(--spots-accent);
}

body.list-view .spot-header:hover::after {
  color: inherit;
}

body.list-view .spot-card--list-open .spot-header::after {
  content: '–';
}

body.list-view .spot-photo {
  aspect-ratio: 4 / 3;
}

body.list-view .spot-photo-link {
  border-radius: 0;
}

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

.spot-page-nav a {
  font-family: var(--spots-font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .spot-card,
  .spot-label,
  .spot-filter-pill,
  .spot-filter-mode-btn,
  .spot-toc a,
  body.list-view .spot-header { transition: none; }
  .spot-card:hover { transform: none; }
}