/* The foodienita map (ADR-0001, ADR-0002). On a wide screen the list and the map side by side,
   the map filling the window's height; on a phone the map on top and the list under it, and a
   tapped pin opens its card over the map. Colours come from /styles.css. */

.atlas-page {
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --card: color-mix(in srgb, var(--paper) 92%, var(--ink));
  --radius: 14px;
}

.atlas {
  display: flex;
  flex-direction: column;
}

/* Phones: the panel's parts and the map in one column, the map right under the title. */

.panel {
  display: contents;
}

.panel-head,
.cards,
.empty {
  margin-inline: var(--gutter);
}

.panel-head {
  order: 0;
  padding-bottom: 1rem;
}

.map-wrap {
  position: relative;
  order: 1;
  height: 52vh;
  min-height: 300px;
  margin-inline: var(--gutter);
  overflow: hidden;
  border-radius: var(--radius);
}

.cards {
  order: 2;
}

.panel noscript {
  order: 3;
}

.map {
  position: absolute;
  inset: 0;
  background: var(--card);
  font: inherit;
}

.panel-head {
  padding-top: clamp(1rem, 3vw, 2rem);
}

.cards {
  padding-bottom: var(--section);
}

.atlas-title {
  max-width: none;
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1;
}

.count {
  margin-top: 0.4rem;
  color: var(--ink-soft);
}

.pick-place:focus-visible,
.selected .close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Cards: the cover, the name, where and what, the price and the score, and the post. */

.cards {
  display: grid;
  gap: 4px;
  margin-top: 1.25rem;
}

.card {
  position: relative;
  border-radius: var(--radius);
  transition: background-color 0.15s;
}

.card:hover,
.card.is-selected {
  background: var(--card);
}

.card.is-selected {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.pick-place {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 10px 10px 34px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.thumb {
  display: block;
  width: 84px;
  height: 105px;
  border-radius: 10px;
  object-fit: cover;
  background: color-mix(in srgb, var(--accent) 18%, var(--paper));
}

.thumb.blank {
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 45%, var(--paper)) 0 28%, transparent 29%),
    color-mix(in srgb, var(--accent) 14%, var(--paper));
}

.card-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.meta {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.price,
.score {
  padding: 0.12em 0.6em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, var(--paper));
  font-size: 0.85rem;
  font-weight: 600;
}

.score .icon {
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.25em;
  vertical-align: -0.12em;
  fill: currentColor;
  color: var(--accent);
}

.ig {
  font-size: 0.9rem;
  font-weight: 600;
}

.card .ig {
  position: absolute;
  bottom: 12px;
  left: 108px;
}

.empty {
  margin-top: 1.5rem;
  color: var(--ink-soft);
}


/* Pins: a dot far away, the place's photo from NEAR_ZOOM on (map.js). The marker is a button
   with no size: MapLibre puts its centre on the place, and the pin centres itself on it. */

.pin-anchor {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.maplibregl-marker.is-selected {
  z-index: 1;
}

.pin {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

.pin .dot {
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
}

.pin .face {
  display: none;
  width: 46px;
  height: 46px;
  border: 3px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.35);
}

.is-near .pin:not(.blank) .dot {
  display: none;
}

.is-near .pin .face {
  display: block;
}

.pin-anchor.is-selected .dot {
  width: 22px;
  height: 22px;
  background: var(--ink);
}

.pin-anchor.is-selected .face {
  width: 64px;
  height: 64px;
  border-color: var(--accent);
}

.pin-anchor:focus-visible .dot,
.pin-anchor:focus-visible .face {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The selected place over the map: on phones, where the list is out of view. */

.selected {
  position: absolute;
  z-index: 1000;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.25);
}

.selected[hidden] {
  display: none;
}

.selected .thumb {
  width: 72px;
  height: 90px;
}

.selected .ig {
  margin-top: 4px;
}

.selected .close {
  align-self: start;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

/* MapLibre's controls in the site's colours. */

.maplibregl-ctrl-group {
  background: var(--paper);
}

@media (prefers-color-scheme: dark) {
  .maplibregl-ctrl-group .maplibregl-ctrl-icon {
    filter: invert(1);
  }
}

.maplibregl-ctrl.maplibregl-ctrl-attrib {
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  color: var(--ink-soft);
  font-size: 0.7rem;
}

.maplibregl-ctrl-attrib a {
  color: inherit;
}

/* Wide screens: the list on the left, scrolling on its own; the map fills the rest. */

@media (min-width: 60rem) {
  .atlas-page {
    display: flex;
    flex-direction: column;
    height: 100dvh;
  }

  .atlas {
    flex: 1;
    flex-direction: row;
    min-height: 0;
  }

  .panel {
    display: block;
    flex: none;
    width: clamp(22rem, 32vw, 30rem);
    overflow-y: auto;
  }

  .panel-head {
    padding-bottom: 0;
  }

  .cards {
    padding-bottom: 2rem;
  }

  .map-wrap {
    flex: 1;
    order: 0;
    height: auto;
    margin: 0 var(--gutter) var(--gutter) 0;
  }

  .selected {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}