/* directory-map.css — browse-page map overview (T1, #382 / #380 Phase 1).
   Loaded only by the five browse shells (/tours/, /es/, /yue/, /fil/, /ko/),
   never by a tour SHELL, so this file carries no sw.cacheVersion obligation —
   see CLAUDE.md "Service worker / PWA caching". Leaflet's own leaflet.css
   supplies the base map/marker/popup styling; this file only themes it to
   match the directory page (var(--mark), var(--rule), var(--r-md) etc. from
   styles.css, which this file intentionally does not duplicate or modify). */

.directory-map {
  width: 100%;
  height: clamp(240px, 40vw, 380px);
  margin: 1.25rem 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--rule-soft);
}

.directory-map .leaflet-popup-content-wrapper {
  border-radius: var(--r-sm);
}

.map-popup__card {
  display: block;
  min-width: 180px;
  text-decoration: none;
  color: inherit;
}

.map-popup__title {
  display: block;
  font-family: var(--serif);
  font-size: .95rem;
  color: var(--ink);
}

.map-popup__meta {
  display: block;
  margin-top: 2px;
  font-size: .82rem;
  color: var(--ink-2);
}

/* Card highlighted by a marker click (T1 read-only scaffolding; Phase 2
   wires this to the filter model). Same accent the filter chips use for
   "selected" (--mark), so a map pin and its card read as the same kind of
   selection. */
.tour-card--map-active {
  outline: 3px solid var(--mark);
  outline-offset: 2px;
  border-radius: var(--r-md);
}

/* Viewport filter pill (T2, #383 / #380 Phase 2): shown under the map once a
   pan/zoom has narrowed the list to the tours in view. "Show all" re-fits the
   map to the full facet set and clears the viewport filter — one tap, fully
   reversible. Created in JS (tours.js), so it needs no per-shell HTML. */
.area-pill {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: -0.5rem 0 1.25rem;
  padding: .5rem .75rem;
  font-size: .85rem;
  color: var(--ink-2);
  background: var(--rule-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}
.area-pill[hidden] { display: none; }
.area-pill__reset {
  margin-left: auto;
  padding: .25rem .6rem;
  font: inherit;
  color: var(--mark);
  background: none;
  border: 1px solid var(--mark);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.area-pill__reset:hover { background: var(--mark); color: #fff; }

/* =====================================================================
   Mobile stack + wide sticky-sidebar layout (Q5, T4/#385; reordered per #386
   feedback). Narrow: everything is one column in DOM order — search, then
   the map <details> (mirrors #filter-drawer's chrome from styles.css and
   collapses by default via JS, tours.js, so it doesn't push the canonical
   card list below the fold), then filters, then the results gallery. Wide:
   .browse-layout splits into a sticky left sidebar (search + map + filters,
   .browse-layout__controls) and a right column that is just the scrolling
   tour gallery (.browse-layout__main) — the map is no longer the sidebar
   itself, it is one item inside it.
   ===================================================================== */
.browse-layout { display: block; }

.map-drawer {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: #fff;
  margin: 0 0 1.25rem;
  overflow: hidden;
}
.map-drawer summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.1rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .92rem;
}
.map-drawer summary::-webkit-details-marker { display: none; }
.map-drawer summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--ink-2);
  transition: transform .18s var(--ease);
}
.map-drawer[open] summary::after { transform: rotate(180deg); }
.map-drawer[open] summary { border-bottom: 1px solid var(--rule); }

/* Overrides the base .directory-map box model above — the drawer supplies
   its own border/radius/margin now. ~40vh per the T4 spec. */
.map-drawer .directory-map { height: 40vh; min-height: 220px; margin: 0; border: 0; border-radius: 0; }

@media (min-width: 900px) {
  .browse-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .browse-layout__controls { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
  .browse-layout__main { min-width: 0; }
  /* Smaller than the old sidebar-is-the-map height (480px) — the map now
     shares the sticky column with search + filters instead of owning it. */
  .map-drawer .directory-map { height: clamp(220px, 22vw, 320px); }
}

/* =====================================================================
   Wide-desktop layout (#397). On the 1120px-capped .wrap the browse page
   left a huge empty margin on wide monitors. The reporter's fix is the right
   one for a map + gallery page: break out of the cap and give the space to a
   genuinely WIDE MAP on the left with a single vertical column of tour cards
   scrolling on the RIGHT.

   Why single-column results and not a wider auto-fit grid: .place uses
   `display: contents` and .place-head spans `1 / -1` (styles.css), so every
   place group forces a full-width row break. With one tour per place, a
   multi-column grid wastes the rest of each row and reads ragged — the wider
   we go the worse it looks. One card per row keeps grouped single-tour
   places tidy and matches "a vertical scroll for tours on the right."

   Scoped with :has(.browse-layout) so ONLY the five browse shells widen; the
   home page (also body.directory, but no .browse-layout — and it doesn't even
   load this file) and every tour SHELL keep --maxw. Browse-only, SW-exempt
   file, so this carries no sw.cacheVersion obligation. Gated at 1280px so the
   existing 900–1279px design (which already fills the 1120px cap) is left
   untouched; the re-orientation only kicks in where there is real slack.
   ===================================================================== */
@media (min-width: 1280px) {
  main.wrap:has(.browse-layout) { max-width: min(1560px, 94vw); }
  /* Keep the intro copy at a comfortable reading measure on the wide page. */
  main.wrap:has(.browse-layout) .directory-head { max-width: 68ch; }

  /* Wide sticky map/controls column on the left, fixed tour-list column on
     the right — the left column stays put (already sticky from the 900px
     block) while the tour list scrolls against it. */
  .browse-layout { grid-template-columns: minmax(0, 1fr) clamp(380px, 30%, 470px); gap: 2.5rem; }
  .map-drawer .directory-map { height: clamp(440px, 60vh, 720px); }

  /* Search + filters read oddly at full column width, so cap them; the map
     alone fills the wide column below. */
  .browse-layout__controls .search-input,
  .browse-layout__controls > details:not(.map-drawer) { max-width: 680px; }

  /* One card per row — see rationale above. */
  .browse-layout__main #results { grid-template-columns: 1fr; }
}