/*
 * gw_place_map — Location map (Figma 1:726 map, 1:684 legend, 1:695 list, 1:1053 / 1:1090
 * PlaceDetail). Layout here; MapLegend / PlaceDetail styles here too (element-specific);
 * PlaceListItem lives in components.css. The `.cm3-*` rules restyle the Clear Map 3
 * detail panel and Mapbox controls to tokens — scoped under .gw-place-map so the plugin
 * CSS (printed later, single-class selectors) loses on specificity, not on order.
 */

.gw-place-map { padding: var(--gw-fluid-space-section) 0; background: var(--gw-surface-page); color: var(--gw-text-primary); }
.gw-place-map--detail { padding-top: 0; padding-bottom: 0; }
.gw-place-map--detail .gw-place-detail { margin-top: 0; }
.gw-place-map__intro { padding: 0 var(--gw-fluid-margin-content); margin-bottom: clamp(32px, 4.1vw, 79px); }
/* Map label (472:1660): orange 35px uppercase, centred on two lines (844 wide) */
.gw-place-map__intro .gw-intro--center .gw-heading-l { max-width: clamp(280px, 44vw, 844px); margin-inline: auto; color: var(--gw-orange-500); font-weight: 700 !important; line-height: 1.2 !important; text-transform: uppercase; }

/* Grid (comp 1:672): list column at the content margin (333/1920), legend above the map, map bleeds
   to the right edge (685 → 1920). The list scrolls inside the map height and fades out at the bottom
   (comp 1:805 cream rect over the list foot). */
.gw-place-map__grid { display: grid; grid-template-columns: minmax(0, 333fr) minmax(0, 1235fr); gap: clamp(32px, 8.85vw, 170px); padding: 0 0 0 var(--gw-fluid-margin-content); align-items: start; }
/* The list starts level with the map, under the legend row (472:1303 / 472:1335 both at y6391) */
.gw-place-map__grid { --gw-legend-offset: calc(clamp(20px, 1.67vw, 32px) + clamp(32px, 4.1vw, 79px)); }
.gw-place-map__main { gap: clamp(32px, 4.1vw, 79px) !important; }
.gw-place-map__side { margin-top: var(--gw-legend-offset);
  display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: var(--gw-map-h); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 140px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 140px), transparent); }
.gw-place-map__main { display: grid; gap: var(--gw-space-5); }
/* Effective map height: the editor's height, capped so the whole map fits under the condensed header (2026-10-05).
   Declared on both boxes because --gw-map-height is set inline on each. */
.gw-place-map, .gw-place-map__map { --gw-map-h: min(var(--gw-map-height, 760px), calc(100svh - var(--gw-header-h-compact, 72px) - 24px)); }
.gw-place-map__map { position: relative; min-height: var(--gw-map-h); scroll-margin-top: calc(var(--gw-header-h-compact, 72px) + 12px); overflow: clip; } /* the plugin parks its closed detail panel at translateX(100%); clip so it never widens the document */
.gw-place-map__notice { padding: var(--gw-space-5); background: var(--gw-surface-alt); }

/* MapLegend (DS, comp 1:684): one row of 16 px labels, category dot + uppercase label, pressed = on; off = 40% */
.gw-map-legend, .gw-map-legend__li { list-style: none; margin: 0; padding: 0; }
.gw-map-legend__li::before, .gw-map-legend__li::marker, .gw-place-list > li::before, .gw-place-list > li::marker { content: none; } /* Salient forces li bullets */
.gw-map-legend { display: flex; flex-wrap: wrap; gap: var(--gw-space-1) clamp(10px, 1.5vw, 44px); padding-right: var(--gw-space-3); justify-content: flex-end; margin-left: calc(-1 * clamp(0px, 6vw, 115px)); } /* six categories need part of the column gap to stay on one row */ /* 472:1292: 32px dots, 16px labels, one row */
.gw-map-legend__item { font-size: clamp(11px, 0.833vw, 16px) !important; display: inline-flex; align-items: center; gap: clamp(8px, 0.83vw, 16px); padding: 0; border: 0; background: none; color: var(--gw-text-primary); font: inherit; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: opacity var(--gw-dur) var(--gw-ease), color var(--gw-dur) var(--gw-ease); border-radius: 0 !important; white-space: nowrap; }
.gw-map-legend__dot { width: clamp(20px, 1.67vw, 32px); height: clamp(20px, 1.67vw, 32px); border-radius: var(--gw-radius-circle); background: var(--gw-cat-color); flex: none; transition: transform var(--gw-dur) var(--gw-ease); }
.gw-map-legend__item:hover .gw-map-legend__dot, .gw-map-legend__item:focus-visible .gw-map-legend__dot { transform: scale(1.25); }
.gw-map-legend__item[aria-pressed="false"], .gw-map-legend__item.inactive { opacity: 0.4; }
.gw-map-legend__item:focus-visible { outline: 2px solid var(--gw-teal-500); outline-offset: 4px; }

/* Place list column scrolls when taller than the map */
.gw-place-list { margin: 0; padding: 0 var(--gw-space-2) 140px 0; overflow: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--gw-green-700) transparent; }

/* PlaceDetail (DS, comp 1:861–1:848): left intro, pink-300 pill bar, then a full-bleed pink-500
   card (721/1920) with the photo flush left (685) and green ink on the right; prev/next circles. */
.gw-place-detail { margin-top: clamp(64px, 6.2vw, 118px); color: var(--gw-text-primary); }
.gw-place-detail__intro { padding: 0 var(--gw-fluid-margin-content); }
.gw-place-detail__pills { display: inline-flex; flex-wrap: wrap; gap: var(--gw-space-1); margin: clamp(24px, 3.2vw, 61px) var(--gw-fluid-margin-content) 0; padding: clamp(8px, 0.68vw, 13px) clamp(12px, 1.56vw, 30px); max-width: calc(100% - 2 * var(--gw-fluid-margin-content)); border-radius: var(--gw-radius-pill); background: var(--gw-pink-300); }
.gw-place-detail--orange .gw-place-detail__pills { background: var(--gw-orange-400); }
.gw-place-detail--teal .gw-place-detail__pills { background: var(--gw-teal-400); }
.gw-place-detail__pill { min-height: clamp(44px, 3.28vw, 63px); padding: 0 clamp(24px, 3vw, 56px); border: 0; border-radius: var(--gw-radius-pill) !important; background: transparent; color: var(--gw-cream-100); font-family: var(--gw-font-display); font-weight: 600; font-size: var(--gw-fluid-label-l); letter-spacing: var(--gw-track-label); text-transform: uppercase; cursor: pointer; transition: background var(--gw-dur) var(--gw-ease); }
.gw-place-detail__pill:hover, .gw-place-detail__pill:focus-visible { background: rgba(255, 251, 246, 0.18); }
.gw-place-detail__pill.is-active { background: var(--gw-pink-500); }
/* Active category = a rounded pill that slides between the tabs (element.js sizes and moves it). Once it is
   ready the tabs' own active fill is dropped; without JS the fill above stays. Salient gotcha: its
   button { border-radius: 4px !important } beat the tab's radius, hence the body[data-button-style] selector. */
body[data-button-style] button.gw-place-detail__pill { position: relative; z-index: 1; border-radius: var(--gw-radius-pill) !important; }
.gw-place-detail__pill-ind { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: var(--gw-radius-pill); background: var(--gw-pink-500); opacity: 0; pointer-events: none; transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1), width 520ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity var(--gw-dur) var(--gw-ease); }
.gw-place-detail__pill-ind.is-ready { opacity: 1; }
.gw-place-detail__pill-ind.is-ready ~ .gw-place-detail__pill.is-active { background: transparent; }
.gw-place-detail--orange .gw-place-detail__pill-ind { background: var(--gw-orange-500); }
.gw-place-detail--teal .gw-place-detail__pill-ind { background: var(--gw-teal-500); }
.gw-place-detail--orange .gw-place-detail__pill.is-active { background: var(--gw-orange-500); }
.gw-place-detail--teal .gw-place-detail__pill.is-active { background: var(--gw-teal-500); }
.gw-place-detail__pill:focus-visible { outline: 2px solid var(--gw-cream-100); outline-offset: 3px; }
.gw-place-detail__pills { position: relative; z-index: 1; min-width: min(100% - 2 * var(--gw-fluid-margin-content), clamp(320px, 54.5vw, 1047px)); justify-content: space-between; }
.gw-place-detail__card { position: relative; margin-top: clamp(24px, 2.6vw, 49px); background: #FFCED9; } /* 472:1439: pink-500 at ~20 % on cream */
.gw-place-detail--pink .gw-place-detail__rule { border-top-color: var(--gw-cream-100); }
.gw-place-detail--pink .gw-place-detail__rule::after { background: var(--gw-pink-500); }
.gw-place-detail--pink .gw-place-detail__pin { color: var(--gw-pink-500); }
.gw-place-detail--pink .gw-place-detail__arrow { color: var(--gw-pink-500); border-width: 1.5px; }
.gw-place-detail--pink .gw-place-detail__arrow:hover, .gw-place-detail--pink .gw-place-detail__arrow:focus-visible { background: var(--gw-pink-500); color: var(--gw-cream-100); }
.gw-place-detail--pink .gw-place-detail__site:hover, .gw-place-detail--pink .gw-place-detail__site:focus-visible { color: var(--gw-pink-500); }
/* Intro heading accent + cut-outs right of the intro (472:1433, 472:1435-1436) */
.gw-place-detail { position: relative; }
.gw-place-detail__intro .gw-intro__body { max-width: clamp(280px, 52.9vw, 1016px); }
.gw-place-detail__art { position: absolute; z-index: 2; top: 0; right: 0; width: 100%; height: 0; pointer-events: none; }
.gw-place-detail__art-img { position: absolute; display: block; height: auto !important; }
.gw-place-detail__art-img:nth-child(1) { left: 57.5%; top: clamp(40px, 5.3vw, 102px); width: 30.6%; }   /* 588 at x1104, 102 below the eyebrow */
.gw-place-detail__art-img:nth-child(2) { left: 72.3%; top: clamp(120px, 18.85vw, 362px); width: 22.4%; } /* 430 at x1388, 362 below */
.gw-place-detail--orange .gw-place-detail__card { background: var(--gw-orange-500); }
.gw-place-detail--teal .gw-place-detail__card { background: var(--gw-teal-500); }
.gw-place-detail__state { display: grid; grid-template-columns: minmax(0, 685fr) minmax(0, 1235fr); min-height: clamp(420px, 37.6vw, 721px); }
.gw-place-detail__state[hidden] { display: none; }
/* Slides share one grid cell so two can overlap while one replaces the other (element.js, Web Animations). */
.gw-place-detail__card { display: grid; grid-template-columns: minmax(0, 1fr); }
.gw-place-detail__state { grid-area: 1 / 1; }
.gw-place-detail__state.is-entering { z-index: 1; }
.gw-place-detail__state.is-leaving { pointer-events: none; }
.gw-place-detail__media { overflow: hidden; }
.gw-place-detail__count { order: 3; flex: 1 1 100%; margin: 10px 0 0; padding: 0; text-align: center; font-family: var(--gw-font-display); font-weight: 600; font-size: var(--gw-fluid-label-s); letter-spacing: var(--gw-track-label); color: var(--gw-green-700); font-variant-numeric: tabular-nums; }
.gw-place-detail--pink .gw-place-detail__count { color: var(--gw-pink-500); }
.gw-place-detail__nav { z-index: 3; flex-wrap: wrap; justify-content: center; width: 139px; } /* two 63px arrows + 13px gap; the count sits under them, clear of the copy */
@media (prefers-reduced-motion: reduce) { .gw-place-detail__pill-ind { transition: none; } }
.gw-place-detail__media { position: relative; min-height: 100%; background: rgba(1, 46, 43, 0.12); }
.gw-place-detail__img { position: absolute; inset: 0; display: block; width: 100%; height: 100% !important; object-fit: cover; }
.gw-place-detail__copy { padding: clamp(32px, 4.8vw, 92px) clamp(24px, 12.5vw, 240px) clamp(32px, 2.6vw, 50px) clamp(24px, 7.9vw, 152px); }
.gw-place-detail__rule { position: relative; width: min(100%, 734px); border-top: var(--gw-stroke-rule) solid var(--gw-green-700); margin-bottom: clamp(32px, 4.3vw, 83px); }
.gw-place-detail__rule::after { content: ''; position: absolute; left: 43px; top: -2px; width: 215px; height: 3px; background: var(--gw-green-700); }
.gw-place-detail__name { margin: 0; color: var(--gw-green-700); }
.gw-place-detail__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gw-space-2) var(--gw-space-5); margin-top: clamp(16px, 1.3vw, 24px); text-transform: uppercase; letter-spacing: 0.15em; color: var(--gw-green-600); }
.gw-place-detail__address { display: inline-flex; align-items: center; gap: var(--gw-space-2); }
.gw-place-detail__pin { width: auto; height: 1.6em; flex: none; }
.gw-place-detail__site, .gw-place-detail__map-btn { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--gw-green-600); text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; transition: color var(--gw-dur) var(--gw-ease); border-radius: 0 !important; }
.gw-place-detail__site:hover, .gw-place-detail__site:focus-visible, .gw-place-detail__map-btn:hover, .gw-place-detail__map-btn:focus-visible { color: var(--gw-cream-100); }
.gw-place-detail__blurb { margin-top: clamp(20px, 1.8vw, 34px); max-width: clamp(280px, 40vw, 768px); color: var(--gw-green-700); font-size: var(--gw-fluid-body-l) !important; line-height: var(--gw-fluid-lh-body-l) !important; } /* 472:1461: 27/52 */
.gw-place-detail__blurb > :last-child { margin-bottom: 0; }
.gw-place-detail__drive { margin: var(--gw-space-3) 0 0; text-transform: uppercase; letter-spacing: 0.15em; color: var(--gw-green-600); }
.gw-place-detail__nav { position: absolute; top: clamp(96px, 16.8vw, 322px); right: clamp(24px, 5.3vw, 102px); display: flex; gap: 13px; }
.gw-place-detail__arrow { width: 63px; height: 63px; color: var(--gw-green-700); }
.gw-place-detail__arrow--prev svg { transform: scaleX(-1); }
.gw-place-detail__arrow:hover, .gw-place-detail__arrow:focus-visible { background: var(--gw-green-700); color: var(--gw-cream-100); }
.gw-place-detail__arrow:focus-visible { outline: 2px solid var(--gw-cream-100); outline-offset: 3px; }

/* Clear Map 3 chrome → tokens */
.gw-place-map .clear-map-3-container { font-family: var(--gw-font-body); }
.gw-place-map .cm3-detail-panel { background: var(--gw-surface-page); color: var(--gw-text-primary); border-radius: 0; box-shadow: none; border-left: var(--gw-stroke-rule) solid var(--gw-green-700); }
.gw-place-map .cm3-detail-name { font-family: var(--gw-font-display); font-weight: 900; font-size: var(--gw-fluid-display-xs); line-height: 0.96; color: var(--gw-text-primary); text-transform: none; letter-spacing: 0; }
.gw-place-map .cm3-detail-address, .gw-place-map .cm3-detail-description { font-family: var(--gw-font-body); color: var(--gw-text-primary); }
.gw-place-map .cm3-detail-address { font-size: var(--gw-fluid-label-s); text-transform: uppercase; letter-spacing: 0.15em; }
.gw-place-map .cm3-detail-description { font-size: var(--gw-fluid-body-m); line-height: var(--gw-fluid-lh-body-m); }
.gw-place-map .cm3-detail-website, .gw-place-map .cm3-detail-directions { font-family: var(--gw-font-display); font-weight: 600; font-size: var(--gw-fluid-label-s); text-transform: uppercase; letter-spacing: 0.04em; color: var(--gw-cream-100); background: var(--gw-green-700); border: var(--gw-stroke-button) solid var(--gw-green-700); border-radius: var(--gw-radius-pill) !important; padding: 0.9em 1.6em; text-decoration: none; transition: background var(--gw-dur) var(--gw-ease), color var(--gw-dur) var(--gw-ease); }
.gw-place-map .cm3-detail-website:hover, .gw-place-map .cm3-detail-directions:hover, .gw-place-map .cm3-detail-website:focus-visible, .gw-place-map .cm3-detail-directions:focus-visible { background: var(--gw-teal-500); border-color: var(--gw-teal-500); color: var(--gw-green-900); }
.gw-place-map .cm3-detail-close { background: var(--gw-cream-100); color: var(--gw-green-700); border-radius: var(--gw-radius-circle) !important; border: var(--gw-stroke-circle-s) solid var(--gw-green-700); }
.gw-place-map .cm3-detail-close:focus-visible { outline: 2px solid var(--gw-teal-500); outline-offset: 2px; }
.gw-place-map .cm3-detail-backdrop { background: rgba(1, 46, 43, 0.45); }
.gw-place-map .cm3-filter-panel { display: none !important; }
.gw-place-map .mapboxgl-ctrl-group { background: var(--gw-cream-100); border-radius: var(--gw-radius-pill); box-shadow: none; border: var(--gw-stroke-rule) solid var(--gw-green-700); overflow: hidden; }
.gw-place-map .mapboxgl-ctrl-group button { width: 44px; height: 44px; border-radius: 0 !important; }
.gw-place-map .mapboxgl-ctrl-group button + button { border-top: var(--gw-stroke-rule) solid var(--gw-green-700); }
.gw-place-map .mapboxgl-ctrl-group button:focus-visible { box-shadow: inset 0 0 0 2px var(--gw-teal-500); }
.gw-place-map .mapboxgl-popup-content { font-family: var(--gw-font-body); border-radius: 0; box-shadow: none; border: var(--gw-stroke-rule) solid var(--gw-green-700); }

/* List filter above the list: category select + the reset (home) button on one row, the count under
   them. The select mirrors the legend: one category solo, or all. */
.gw-place-filter { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 0 var(--gw-space-2) clamp(16px, 1.46vw, 28px) 0; padding-bottom: clamp(16px, 1.46vw, 28px); border-bottom: var(--gw-stroke-rule) solid var(--gw-rule); }
.gw-place-map .gw-place-filter__cat { width: 100%; height: 46px; margin: 0; padding: 0 40px 0 18px !important; border: var(--gw-stroke-button) solid var(--gw-green-700) !important; border-radius: var(--gw-radius-pill) !important; background-color: transparent !important; box-shadow: none !important; color: var(--gw-text-primary) !important; font-family: var(--gw-font-display) !important; font-weight: 600; font-size: 13px !important; line-height: 1 !important; letter-spacing: var(--gw-track-label); text-transform: uppercase; text-overflow: ellipsis; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2300554F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 12px 8px !important; transition: background-color var(--gw-dur) var(--gw-ease); }
.gw-place-map .gw-place-filter__cat:hover { background-color: rgba(0, 85, 79, 0.06) !important; }
.gw-place-map .gw-place-filter__home { order: -1; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: var(--gw-stroke-button) solid var(--gw-green-700); border-radius: var(--gw-radius-circle) !important; background: transparent; color: var(--gw-green-700); cursor: pointer; transition: background var(--gw-dur) var(--gw-ease), color var(--gw-dur) var(--gw-ease); }
.gw-place-map .gw-place-filter__home:hover { background: var(--gw-green-700); color: var(--gw-citron-500); }
.gw-place-map .gw-place-filter__cat:focus-visible, .gw-place-map .gw-place-filter__home:focus-visible { outline: 2px solid var(--gw-teal-500); outline-offset: 2px; }
.gw-place-item[hidden] { display: none !important; }
/* Drive-time label on the map, at the route's midpoint (a Mapbox marker: the outer box is the plugin's to transform). */
.gw-route-label { pointer-events: none; z-index: 2; }
.gw-route-label__text { display: block; padding: 9px 16px; border-radius: var(--gw-radius-pill); background: var(--gw-green-900); color: var(--gw-citron-500); font-family: var(--gw-font-display); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: var(--gw-track-label); text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 8px rgba(1, 46, 43, 0.3); animation: gw-route-label-in 0.4s var(--gw-ease) 0.9s both; }
@keyframes gw-route-label-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gw-route-label__text { animation: none; } }
@media (prefers-reduced-motion: reduce) { .gw-place-map .gw-place-filter__cat, .gw-place-map .gw-place-filter__home { transition: none; } }

/* Desktop (Danny, 2026-10-05): the legend is one compact row level with the list's home button + category select, and
   the map's top edge sits on the rule under those controls. --gw-pm-ctl = control height, --gw-pm-pad = the space
   between the controls and the rule; the list column grows by the same amount so list and map still end together. */
@media (min-width: 1000px) {
  .gw-place-map__grid { --gw-pm-ctl: 46px; --gw-pm-pad: clamp(16px, 1.46vw, 28px); grid-template-columns: minmax(0, 400fr) minmax(0, 1300fr); gap: clamp(24px, 3.4vw, 64px); } /* wider list + map, tighter gutter than the comp's 170 (Danny, 2026-10-05) */
  .gw-place-map__side { margin-top: 0; max-height: calc(var(--gw-map-h) + var(--gw-pm-ctl) + var(--gw-pm-pad)); }
  .gw-place-map__main { gap: var(--gw-pm-pad) !important; }
  .gw-map-legend { min-height: var(--gw-pm-ctl); align-items: center; gap: 6px clamp(10px, 1.05vw, 22px); padding-right: var(--gw-fluid-margin-chrome); margin-left: 0; }
  .gw-map-legend__item { font-size: clamp(10px, 0.76vw, 13px) !important; letter-spacing: 0.06em; gap: clamp(5px, 0.45vw, 9px); white-space: nowrap; }
  .gw-map-legend__dot { width: clamp(11px, 0.94vw, 18px); height: clamp(11px, 0.94vw, 18px); }
}
@media (min-width: 1280px) { .gw-map-legend { flex-wrap: nowrap; } } /* narrower desktops may still wrap to two rows */

@media (max-width: 999px) {
  .gw-place-map__grid { grid-template-columns: minmax(0, 1fr); padding: 0; gap: var(--gw-space-5); }
  .gw-place-map__main { order: -1; }
  .gw-map-legend { padding: 0 var(--gw-fluid-margin-chrome); margin-left: 0; justify-content: center; gap: var(--gw-space-2) var(--gw-space-3); }
  .gw-place-map__map { min-height: 0; }
  .gw-place-map__map .clear-map-3-container { min-height: 70vh; }
  .gw-place-map__side { margin-top: 0; max-height: none; overflow: visible; padding: 0 var(--gw-fluid-margin-chrome); -webkit-mask-image: none; mask-image: none; }
  .gw-place-list { overflow: visible; padding: 0; }
  .gw-place-detail__art { display: none; }
  .gw-place-detail__pills { display: flex; min-width: 0; margin-inline: var(--gw-fluid-margin-chrome); max-width: none; padding: 8px 12px; }
  .gw-place-detail__pill { min-height: 48px; padding: 0 16px; font-size: var(--gw-fluid-label-s); }
  .gw-place-detail__state { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .gw-place-detail__media { aspect-ratio: 4 / 3; min-height: 0; }
  .gw-place-detail__copy { padding: var(--gw-space-6) var(--gw-fluid-margin-chrome) calc(var(--gw-space-6) + 80px); }
  .gw-place-detail__nav { top: auto; bottom: var(--gw-space-5); right: var(--gw-fluid-margin-chrome); }
}

/* Drive time (inc/place-routes.php + element.js): a small outline pill under the address, the
   result beside it. Leaves room on the right for the absolutely placed WEBSITE link. */
.gw-place-item__drive { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; max-width: calc(100% - 90px); margin-top: clamp(8px, 0.73vw, 14px); }
.gw-place-map .gw-place-item__route { min-height: 30px; padding: 0 14px; border: var(--gw-stroke-button) solid var(--gw-green-700); border-radius: var(--gw-radius-pill) !important; background: transparent; color: var(--gw-green-700); font-family: var(--gw-font-display); font-weight: 600; font-size: 12px !important; letter-spacing: var(--gw-track-label); text-transform: uppercase; line-height: 1; cursor: pointer; transition: background var(--gw-dur) var(--gw-ease), color var(--gw-dur) var(--gw-ease); }
.gw-place-map .gw-place-item__route:hover { background: rgba(0, 85, 79, 0.08); }
.gw-place-map .gw-place-item__route[aria-pressed="true"] { background: var(--gw-green-700); color: var(--gw-citron-500); }
.gw-place-map .gw-place-item__route:focus-visible { outline: 2px solid var(--gw-teal-500); outline-offset: 3px; }
.gw-place-item__time { color: var(--gw-text-primary); font-size: 12px !important; line-height: 1.25; letter-spacing: var(--gw-track-label); text-transform: uppercase; }
.gw-place-item__time:empty { display: none; }
.gw-place-item.is-routing .gw-place-item__time { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .gw-place-map .gw-place-item__route { transition: none; } }

/* ---- 2026-10-07 (Danny): differentiate from the two-panel comp. ---- */
/* Hover preview: the hovered row (or the hovered pin's row) stays, every other row dims. */
.gw-place-item { transition: opacity 0.3s var(--gw-ease); }
.gw-place-map.is-previewing .gw-place-item:not(.is-hover) { opacity: 0.32; }
.gw-place-item.is-hover .gw-place-item__name { color: var(--gw-teal-500); }

/* Drive-time circle labels (Mapbox markers at the top of each guide circle): quiet, no border. */
.gw-circle-label { pointer-events: none; padding: 4px 9px; border-radius: var(--gw-radius-pill); background: rgba(255, 251, 246, 0.86); color: var(--gw-green-700); font-family: var(--gw-font-display); font-weight: 600; font-size: 10px; line-height: 1; letter-spacing: var(--gw-track-label); text-transform: uppercase; white-space: nowrap; }

/* Desktop layout: the map bleeds edge to edge; the list is a glass panel floating over its left side (inset from the left as much as from the top) and
   the legend a glass strip at the top right (the comp's two side-by-side panels are gone). element.js pads
   the map by the panel's width so the seal centres in the uncovered part. */
@media (min-width: 1000px) {
  .gw-place-map__grid { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; } /* the panel and legend position against the map box */
  .gw-place-map__main { position: relative; display: block; }
  .gw-place-map__side { position: absolute; z-index: 3; top: clamp(16px, 1.67vw, 32px); bottom: clamp(16px, 1.67vw, 32px); left: clamp(16px, 1.67vw, 32px); width: clamp(320px, 26vw, 420px); max-height: none; margin: 0; padding: clamp(16px, 1.46vw, 28px) clamp(16px, 1.46vw, 28px) 0;
    background: rgba(255, 251, 246, 0.82); -webkit-backdrop-filter: blur(var(--gw-blur-sheet)); backdrop-filter: blur(var(--gw-blur-sheet)); box-shadow: 0 1px 0 rgba(0, 85, 79, 0.08), 0 24px 60px -30px rgba(1, 46, 43, 0.35);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 110px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 110px), transparent); }
  .gw-place-filter { margin-right: 0; }
  .gw-place-list { padding-right: var(--gw-space-2); padding-bottom: 110px; }
  .gw-map-legend { position: absolute; z-index: 3; top: clamp(16px, 1.67vw, 32px); right: var(--gw-fluid-margin-chrome); min-height: 0; margin: 0; padding: 10px clamp(14px, 1.2vw, 22px); border-radius: var(--gw-radius-pill); background: rgba(255, 251, 246, 0.82); -webkit-backdrop-filter: blur(var(--gw-blur-sheet)); backdrop-filter: blur(var(--gw-blur-sheet)); box-shadow: 0 1px 0 rgba(0, 85, 79, 0.08); flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - clamp(16px, 1.67vw, 32px) - clamp(320px, 26vw, 420px) - var(--gw-fluid-margin-chrome) - 14px); } /* wraps to two rows on narrower desktops rather than running under the panel */
  .gw-place-map .mapboxgl-ctrl-top-right { top: auto; bottom: clamp(24px, 2.5vw, 48px); right: var(--gw-fluid-margin-chrome); } /* zoom controls bottom right, clear of the legend */
  .gw-place-map .mapboxgl-ctrl-top-right .mapboxgl-ctrl { margin: 0; }
  .gw-place-map .mapboxgl-ctrl-bottom-left { left: auto; right: calc(var(--gw-fluid-margin-chrome) + 46px + 14px); bottom: 0; display: flex; align-items: flex-end; gap: 6px; } /* attribution + logo at the bottom right beside the zoom controls, clear of the panel and the ring labels */
  .gw-place-map .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl { margin: 0 0 8px; }
  .gw-map-legend__item { font-size: clamp(10px, 0.72vw, 12px) !important; }
}