/*
 * /maps and /activities list pages (SSR by functions/web_explore.js,
 * enhanced by /js/explore.js). Builds on the v2 tokens and component
 * library in /css/site.css. Breakpoints 600 / 960 / 1280 / 1440.
 * The `js` class on <html> is set inline at the top of the page body.
 */

:where(.site) .ex-more[hidden], :where(.site) .ex-twmap[hidden], :where(.site) .ex-backdrop[hidden],
:where(.site) .ex-login[hidden], :where(.site) [data-ex-list][hidden] { display: none !important; }

/* ---------- Header band ---------- */

:where(.site) .ex-list-head { padding-block: var(--sp-5) calc(var(--sp-6) + clamp(28px, 5vw, 64px)); }
:where(.site) .ex-list-head h1 { margin: 0 0 var(--sp-2); font-size: var(--fs-2xl); font-weight: 900; line-height: 1.25; color: #fff; }
:where(.site) .ex-list-head > .container > p:not(.eyebrow) { margin: 0 0 var(--sp-4); max-width: 44em; color: rgba(255, 255, 255, .85); }
:where(.site) .ex-list-head .breadcrumb { margin: 0 0 var(--sp-4); color: var(--c-moss-300); }
:where(.site) .ex-list-head .breadcrumb a { color: var(--c-moss-300); }
:where(.site) .ex-list-head .breadcrumb [aria-current] { color: #fff; }
:where(.site) .ex-list-head .search-box { max-width: 640px; }
:where(.site) .ex-list-head .search-box > .icon { color: var(--c-muted); }
:where(.site) .ex-list-head .search-box input { min-height: 44px; font-size: 16px; }
:where(.site) .ex-list-head .tabs { margin: var(--sp-5) 0 0; border-bottom-color: rgba(255, 255, 255, .2); }
:where(.site) .ex-list-head .tab { color: rgba(255, 255, 255, .78); }
:where(.site) .ex-list-head .tab:hover { color: #fff; }
:where(.site) .ex-list-head .tab[aria-current="page"] { color: #fff; border-bottom-color: var(--c-trail-500); }

/* ---------- Layout ---------- */

:where(.site) .ex-layout, :where(.site) .ex-xa { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); padding-top: var(--sp-3); }
@media (min-width: 960px) {
  :where(.site) .ex-layout { grid-template-columns: 272px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
}
@media (min-width: 1280px) {
  :where(.site) .ex-xa { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-6); align-items: start; }
}
:where(.site) .ex-results { min-width: 0; }
:where(.site) .ex-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); }
:where(.site) .ex-toolbar__count { flex: 1 1 12em; margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); }
:where(.site) .ex-toolbar__count b { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--c-text); }
:where(.site) .ex-filter-btn { display: inline-flex; align-items: center; gap: 6px; }
:where(.site) .ex-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--c-trail-500); color: var(--c-forest-900); font-size: var(--fs-xs); font-weight: 800; }
@media (min-width: 960px) { :where(.site) .ex-filter-btn { display: none; } }
:where(.site) .ex-active { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
:where(.site) .ex-active .chip { min-height: 36px; gap: 4px; text-decoration: none; }
:where(.site) .ex-active .chip .icon { width: .9em; height: .9em; }
:where(.site) .ex-older { margin: 0 0 var(--sp-4); color: var(--c-text-2); font-size: var(--fs-sm); }

/* Segmented links (sort, 卡片格 / 動態流). */
:where(.site) .ex-view { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: var(--r-pill); background: var(--c-bg-2); }
:where(.site) .ex-view a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); color: var(--c-text-2); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; white-space: nowrap; }
:where(.site) .ex-view a:hover { color: var(--c-text); }
:where(.site) .ex-view a[aria-current="true"] { background: #fff; color: var(--c-forest-700); box-shadow: var(--shadow-1); }

/* ---------- Filters: desktop panel / bar, phone bottom sheet ---------- */

:where(.site) .ex-filters { padding: var(--sp-5); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-1); }
:where(.site) .ex-filters .filter-panel { gap: var(--sp-5); }
:where(.site) .ex-filters legend { display: flex; align-items: center; gap: 6px; padding: 0; }
:where(.site) .ex-filters legend .icon { color: var(--c-forest-500); }
:where(.site) .ex-filters .chip { min-height: 40px; gap: 4px; cursor: pointer; user-select: none; }
:where(.site) .ex-filters label.chip { position: relative; }
:where(.site) .ex-filters label.chip input { position: absolute; opacity: 0; pointer-events: none; }
:where(.site) .ex-filters label.chip:has(input:checked) { background: var(--c-forest-700); border-color: var(--c-forest-700); color: #fff; }
:where(.site) .ex-filters label.chip:has(input:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 2px; }
:where(.site) .ex-count { font-family: var(--font-num); font-size: var(--fs-xs); opacity: .7; }
:where(.site) .ex-filters input[type="date"] { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--c-line); border-radius: var(--r-sm); background: #fff; font-size: 16px; }
:where(.site) .ex-dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); }
:where(.site) .ex-dates label { display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--c-muted); }
:where(.site) .ex-sheet__head { display: none; }
:where(.site) .ex-sheet__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
:where(.site) .ex-sheet__actions .btn { flex: 1; }
@media (min-width: 960px) {
  :where(.site) .ex-filters:not(.ex-filters--bar) { position: sticky; top: calc(var(--site-header-h) + var(--sp-4)); max-height: calc(100vh - var(--site-header-h) - 32px); overflow-y: auto; scrollbar-width: thin; }
  .js .ex-sheet__actions { display: none; }
  /* /activities: filters as one row above the list. */
  :where(.site) .ex-filters--bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-4); margin-bottom: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
  :where(.site) .ex-filters--bar .filter-panel { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: start; }
  .js .ex-filters--bar .ex-sheet__actions, :where(.site) .ex-filters--bar .ex-sheet__actions { display: flex; margin: 0; }
  :where(.site) .ex-filters--bar .ex-sheet__actions .btn { flex: none; }
}
@media (max-width: 959px) {
  :where(.site) .ex-filters { margin-bottom: var(--sp-4); }
  .js .ex-filters {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1210;
    max-height: 86vh;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding-bottom: 0;
    box-shadow: var(--shadow-3);
    transform: translateY(105%);
    visibility: hidden;
    transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
  }
  .js .ex-sheet-open .ex-filters { transform: none; visibility: visible; transition: transform var(--dur-2) var(--ease); }
  .js .ex-sheet__head { display: flex; align-items: center; justify-content: space-between; margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); }
  .js .ex-sheet__head b { font-size: var(--fs-lg); }
  .js .ex-sheet__head button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--c-bg-2); font-size: 22px; line-height: 1; cursor: pointer; }
  .js .ex-sheet__foot { position: sticky; bottom: 0; margin: var(--sp-5) calc(-1 * var(--sp-5)) 0; padding: var(--sp-3) var(--sp-5) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--c-line); }
  :where(.site) .ex-backdrop { position: fixed; inset: 0; z-index: 1205; background: rgba(11, 46, 34, .45); }
}

/* ---------- Small Taiwan map (/maps) ---------- */

:where(.site) .ex-twmap { margin-bottom: var(--sp-5); }
:where(.site) .ex-twmap > summary { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4); border-radius: var(--r-pill); background: #fff; box-shadow: var(--shadow-1); font-weight: 700; cursor: pointer; list-style: none; }
:where(.site) .ex-twmap > summary::-webkit-details-marker { display: none; }
:where(.site) .ex-twmap > summary .icon { color: var(--c-forest-500); }
:where(.site) .ex-twmap[open] > summary { margin-bottom: var(--sp-3); }
:where(.site) .ex-twmap__map { height: 280px; border-radius: var(--r-md); overflow: hidden; background: var(--c-moss-100) url("/images/brand/contour.svg") center / 320px auto; box-shadow: var(--shadow-1); }
:where(.site) .ex-twmap__hint { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--c-muted); }
@media (min-width: 960px) {
  :where(.site) .ex-twmap > summary { display: none; }
  :where(.site) .ex-twmap__map { height: 320px; }
}
.ex-mappin { width: 16px; height: 16px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--c-forest-500); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: pointer; }
.ex-mappin.is-on { width: 18px; height: 18px; background: var(--c-trail-500); }
.ex-mappin:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.ex-mappop { font: 700 13px/1.5 var(--font); }
.ex-mappop a { color: var(--c-forest-700); }
:where(.site) .tcard.is-flash { box-shadow: 0 0 0 3px var(--c-trail-500), var(--shadow-2); }
:where(.site) .card-route { scroll-margin-top: calc(var(--site-header-h) + var(--sp-4)); }

/* ---------- Card grids ---------- */

:where(.site) .ex-grid { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { :where(.site) .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { :where(.site) .ex-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { :where(.site) .ex-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1440px) { :where(.site) .ex-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
:where(.site) .ex-grid .avatar-stack:empty { display: none; }
:where(.site) .ex-route-meta { display: flex; flex-wrap: wrap; gap: 6px; }
:where(.site) .ex-route-meta .chip { min-height: 26px; padding: 0 10px; font-size: var(--fs-xs); gap: 4px; }
:where(.site) .ex-routes { position: relative; z-index: 3; }
:where(.site) .ex-routes p { margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); }
:where(.site) .ex-routes ul { display: grid; margin: calc(-1 * var(--sp-1)) 0; padding: 0; list-style: none; }
:where(.site) .ex-routes li { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-sm); }
:where(.site) .ex-routes a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: var(--touch); color: var(--c-forest-700); font-weight: 700; text-decoration: none; }
:where(.site) .ex-routes a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.site) .ex-routes a:hover span { text-decoration: underline; }
:where(.site) .ex-routes .icon { color: var(--c-trail-500); }
:where(.site) .ex-routes small { flex: none; margin-left: auto; color: var(--c-muted); font-family: var(--font-num); }
:where(.site) .ex-routes__more a { color: var(--c-text-2); font-weight: 500; }

/* ---------- Feed view (動態流) ---------- */

:where(.site) .ex-feed { display: grid; gap: var(--sp-4); max-width: 680px; margin-inline: auto; }
:where(.site) .feed-item { min-width: 0; }
:where(.site) .feed-item__track { display: block; overflow: hidden; }
:where(.site) .feed-item__track svg { display: block; width: 100%; height: 100%; }
:where(.site) .feed-item__track--cover { padding: 0; }
:where(.site) .feed-item__track--cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
:where(.site) .feed-item__body { display: grid; gap: var(--sp-2); min-width: 0; }
:where(.site) .feed-item__title { font-size: var(--fs-lg); }
:where(.site) .feed-item .stat-strip { flex-wrap: wrap; gap: 4px var(--sp-3); overflow: visible; }
:where(.site) .feed-item__title a { color: inherit; text-decoration: none; }
:where(.site) .feed-item__title a:hover { text-decoration: underline; }
:where(.site) .feed-item__cover { border-radius: var(--r-sm); }
:where(.site) .feed-item .reaction-bar { padding-top: var(--sp-3); border-top: 1px solid var(--c-rock-100); }
@media (min-width: 600px) { :where(.site) .feed-item__summary { grid-template-columns: 132px minmax(0, 1fr); } }

/* ---------- Pager / load more ---------- */

:where(.site) .ex-more { display: grid; justify-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }
:where(.site) .ex-more__status { margin: 0; min-height: 1.5em; color: var(--c-muted); font-size: var(--fs-sm); text-align: center; }
:where(.site) .ex-more .btn { min-width: 220px; }
:where(.site) .ex-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
:where(.site) .ex-pager a, :where(.site) .ex-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch); min-height: var(--touch); padding: 0 14px; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: #fff; color: var(--c-text); font-family: var(--font-num); font-weight: 700; text-decoration: none; }
:where(.site) .ex-pager span[aria-hidden] { border-color: transparent; background: none; min-width: 24px; padding: 0; }
:where(.site) .ex-pager a:hover { border-color: var(--c-forest-700); color: var(--c-forest-700); }
:where(.site) .ex-pager [aria-current="page"] { background: var(--c-forest-700); border-color: var(--c-forest-700); color: #fff; }

/* ---------- States ---------- */

:where(.site) .ex-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
:where(.site) .ex-login { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-7) var(--sp-5); border-radius: var(--r-lg); background: var(--c-moss-100) url("/images/brand/contour.svg") center / 480px auto; text-align: center; }
:where(.site) .ex-login > .icon { width: 44px; height: 44px; color: var(--c-forest-700); }
:where(.site) .ex-login h2 { margin: 0; font-size: var(--fs-xl); }
:where(.site) .ex-login p { margin: 0; max-width: 30em; color: var(--c-text-2); }
:where(.site) .ex-login[hidden] { display: none; }

/* ---------- /activities right sidebar (≥ 1280) ---------- */

:where(.site) .ex-aside { display: none; }
@media (min-width: 1280px) {
  :where(.site) .ex-aside { display: grid; gap: var(--sp-6); position: sticky; top: calc(var(--site-header-h) + var(--sp-4)); }
}
:where(.site) .ex-aside h2 { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--sp-3); font-size: var(--fs-base); font-weight: 800; }
:where(.site) .ex-aside h2 .icon { color: var(--c-forest-500); }
:where(.site) .ex-aside__more { margin-left: auto; font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
:where(.site) .ex-aside__cards { display: grid; gap: var(--sp-4); }
:where(.site) .ex-hikers { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
:where(.site) .ex-hiker { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3); border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-1); }
:where(.site) .ex-hiker .avatar { width: 44px; height: 44px; }
:where(.site) .ex-hiker__name { display: block; overflow: hidden; color: var(--c-text); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
:where(.site) .ex-hiker__name:hover { text-decoration: underline; }
:where(.site) .ex-hiker small { display: block; color: var(--c-muted); font-size: var(--fs-xs); }
:where(.site) .ex-aside .card-community .media { aspect-ratio: 2 / 1; }
:where(.site) .ex-aside .card-community .tcard__title { font-size: var(--fs-base); }
:where(.site) .ex-aside .section--cta { padding: 0; }
:where(.site) .ex-aside .app-cta { grid-template-columns: 1fr; padding: var(--sp-5); }
:where(.site) .ex-aside .app-cta h2 { font-size: var(--fs-lg); color: #fff; }
:where(.site) .ex-aside .app-cta .btn--lg { min-height: 44px; font-size: var(--fs-base); padding-inline: var(--sp-4); }
:where(.site) .ex-aside .app-cta__art { display: none; }

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