/* /map — the places browser (continent › country › location › photo grid).
   Restored 2026-08-05; see life_page_builder.map_page_html for why.

   Everything here sits on john-clean.css's tokens (--jh-bg / --jh-panel / --jh-line /
   --jh-font-display / --jh-max) so the page reads as the current site rather than as
   the 2026-06 page that was retired. The place-card grid deliberately mirrors the
   /destinations page's proportions (john-destinations-page.css) — same panel fill,
   same hairline, same clamped full-page map height — so the two browsers feel like
   one family. The PHOTO grid is a CSS masonry-ish column layout rather than a card
   grid, because the tiles are the portfolio's own mixed aspect ratios. */

.jh-placespage {
  background: var(--jh-bg);
  min-height: 70vh;
  /* .jh-site-header is position:absolute and overlays the top of <main> — the shell
     assumes every page opens with a full-bleed hero that runs UNDER it. This page has
     no hero (it opens straight into the breadcrumb), so it clears the header itself.
     Measured 78px at every breakpoint 2026-08-05; a custom property so the two paddings
     below stay in step. NB /destinations has the same no-hero shape and does NOT do
     this — its eyebrow sits under the logo. Not fixed here; that page is not mine. */
  --jh-places-headroom: 78px;
}

.jh-placespage__inner {
  max-width: var(--jh-max);
  margin: 0 auto;
  padding: calc(var(--jh-places-headroom) + 18px) 22px 40px;
}

/* ---- head: breadcrumb + the grid/map toggle ------------------------------ */

.jh-placespage__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--jh-line);
}

.jh-placespage__eyebrow {
  font-family: var(--jh-font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--jh-muted);
}

.jh-placespage__crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  font-size: 0.95rem;
}

.jh-placespage__crumb {
  appearance: none;
  border: 0;
  background: none;
  padding: 2px 4px;
  margin: 0;
  font: inherit;
  color: var(--jh-muted);
  cursor: pointer;
  border-radius: 4px;
}

.jh-placespage__crumb:hover,
.jh-placespage__crumb:focus-visible {
  color: var(--jh-text);
  background: var(--jh-bg-alt);
}

/* The deepest crumb is where you already are: styled as text, not a control. */
.jh-placespage__crumb[aria-current="page"] {
  color: var(--jh-text);
  cursor: default;
  font-family: var(--jh-font-display);
}

.jh-placespage__crumb[aria-current="page"]:hover {
  background: none;
}

.jh-placespage__crumb-sep {
  color: var(--jh-line);
  user-select: none;
}

.jh-placespage__views {
  margin-left: auto;
  display: inline-flex;
  border: 1px solid var(--jh-line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--jh-panel);
}

.jh-placespage__view {
  appearance: none;
  border: 0;
  background: none;
  margin: 0;
  padding: 7px 16px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--jh-muted);
  cursor: pointer;
}

.jh-placespage__view.is-active {
  background: var(--jh-text);
  color: var(--jh-bg);
}

/* ---- status / empty states ---------------------------------------------- */

.jh-placespage__status {
  margin: 32px 0;
  color: var(--jh-muted);
  font-size: 0.95rem;
}

.jh-placespage__status a {
  color: var(--jh-text);
}

/* ---- place cards --------------------------------------------------------- */

.jh-placespage__section + .jh-placespage__section {
  margin-top: 34px;
}

.jh-placespage__section-title {
  margin: 0 0 14px;
  font-family: var(--jh-font-display);
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--jh-muted);
}

.jh-placescards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

.jh-placecard {
  appearance: none;
  border: 1px solid var(--jh-line);
  border-radius: 10px;
  background: var(--jh-panel);
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.jh-placecard:hover,
.jh-placecard:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--jh-shadow);
}

.jh-placecard__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--jh-bg-alt);
}

.jh-placecard__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px 13px;
}

.jh-placecard__name {
  font-family: var(--jh-font-display);
  font-size: 1rem;
  letter-spacing: 0.02em;
  min-width: 0;
  overflow-wrap: anywhere;
}

.jh-placecard__count {
  flex: none;
  font-size: 0.78rem;
  color: var(--jh-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- photo grid ---------------------------------------------------------- */

/* Columns, not a row grid: the portfolio tiles are landscape/portrait/panorama and a
   fixed-ratio grid crops all three badly. `break-inside: avoid` is what keeps a photo
   whole across a column boundary. */
.jh-placesphotos {
  column-count: 4;
  column-gap: 12px;
}

.jh-placesphoto {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0 0 12px;
  background: var(--jh-bg-alt);
  display: block;
  width: 100%;
  break-inside: avoid;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}

.jh-placesphoto img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 160ms ease;
}

.jh-placesphoto:hover img,
.jh-placesphoto:focus-visible img {
  opacity: 0.86;
}

/* ---- map view ------------------------------------------------------------ */

.jh-placespage__map {
  height: clamp(440px, 76vh, 1100px);
  border: 1px solid var(--jh-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--jh-bg-alt);
}

.jh-placespage__map .leaflet-container {
  height: 100%;
  width: 100%;
  background: var(--jh-bg-alt);
  font-family: var(--jh-font-body);
}

/* Place markers: a count pill for a continent/country/place, a plain dot for a single
   photo. Built as Leaflet divIcons, so the sizing lives here rather than in the JS. */
.jh-placesmark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(23, 21, 17, 0.28);
  background: rgba(255, 251, 244, 0.94);
  color: var(--jh-text);
  font-family: var(--jh-font-body);
  font-size: 0.78rem;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(17, 17, 17, 0.16);
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.jh-placesmark:hover {
  background: var(--jh-text);
  color: var(--jh-bg);
  border-color: var(--jh-text);
}

.jh-placesmark__count {
  font-variant-numeric: tabular-nums;
  color: var(--jh-muted);
}

.jh-placesmark:hover .jh-placesmark__count {
  color: var(--jh-bg);
}

.jh-placesmark--photo {
  padding: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border-width: 2px;
  background: var(--jh-text);
}

/* ---- responsive ---------------------------------------------------------- */

@media (max-width: 1080px) {
  .jh-placesphotos { column-count: 3; }
}

@media (max-width: 760px) {
  .jh-placespage__inner { padding: calc(var(--jh-places-headroom) + 14px) 14px 28px; }
  .jh-placespage__views { margin-left: 0; }
  .jh-placescards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .jh-placesphotos { column-count: 2; }
  .jh-placespage__map { height: clamp(380px, 64vh, 760px); }
}

@media (max-width: 400px) {
  .jh-placescards { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}