/* Interactive map on the homepage */
.smap-section #smapChips { margin-top: 28px; }
.smap { display: grid; grid-template-columns: 300px minmax(0, 1fr); margin-top: 24px; height: min(680px, 78svh); min-height: 460px; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(14, 19, 23, 0.12); background: var(--white); box-shadow: 0 10px 34px rgba(14, 19, 23, 0.08); }

/* List */
.smap-list { overflow-y: auto; border-right: 1px solid rgba(14, 19, 23, 0.1); overscroll-behavior: contain; }
.smap-count { position: sticky; top: 0; z-index: 1; margin: 0; padding: 14px 18px; background: var(--white); border-bottom: 1px solid rgba(14, 19, 23, 0.08); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.smap-list ul { list-style: none; margin: 0; padding: 0; }
.smap-list li button { position: relative; display: block; width: 100%; text-align: left; padding: 12px 40px 12px 18px; border: 0; border-bottom: 1px solid rgba(14, 19, 23, 0.06); background: none; color: var(--ink); cursor: pointer; font: inherit; }
.smap-list li button:hover { background: var(--paper); }
.smap-list li button[aria-current="true"] { background: var(--paper); box-shadow: inset 3px 0 0 var(--red); }
.smap-list strong { display: block; font-size: 0.95rem; line-height: 1.25; }
.smap-list span { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--muted); }
.smap-in { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 999px; background: var(--teal); color: var(--white); font: normal 700 0.7rem/20px var(--sans); text-align: center; }

/* Map */
.smap-stage { position: relative; min-width: 0; isolation: isolate; z-index: 0; }
.smap-canvas { position: absolute; inset: 0; background: #e8e6e1; }
.smap-loading, .smap-fail { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; color: var(--muted); font-size: 0.9rem; }
.smap .leaflet-container { font: inherit; }
.smap .leaflet-control-attribution { font-size: 0.62rem; }
.smap-pin-wrap { background: none; border: 0; }
.smap-pin { display: block; width: 26px; height: 26px; border-radius: 999px; background: var(--red); border: 3px solid var(--white); box-shadow: 0 2px 8px rgba(14, 19, 23, 0.35); transform: scale(0.7); transition: transform 0.15s, background 0.15s; cursor: pointer; }
.smap-pin:hover { transform: scale(0.9); }
.smap-pin.is-trip { background: var(--teal); }
.smap-pin.is-trip::after { content: "✓"; display: block; color: var(--white); font: 800 11px/20px var(--sans); text-align: center; }
.smap-pin.is-active { transform: scale(1); background: var(--ink); box-shadow: 0 0 0 6px rgba(200, 32, 47, 0.28), 0 4px 12px rgba(14, 19, 23, 0.4); }

/* Preview card */
.smap-card { position: absolute; z-index: 500; left: 16px; bottom: 16px; width: min(360px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto; background: var(--white); border-radius: var(--radius); box-shadow: 0 18px 44px rgba(8, 12, 16, 0.3); }
.smap-close { position: absolute; z-index: 3; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 999px; border: 0; background: rgba(14, 19, 23, 0.72); color: var(--white); font: 700 1.2rem/1 var(--sans); cursor: pointer; }
.smap-pic { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--teal); }
.smap-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.smap-pic .card-tag { color: var(--white); }
.smap-body { padding: 16px 18px 18px; }
.smap-kind { margin: 0; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.smap-body h3 { margin: 6px 0 8px; font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.01em; }
.smap-body > p:not(.smap-kind) { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.smap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
.addt.smap-addt { position: static; height: 38px; padding: 0 16px; background: var(--red); color: var(--white); box-shadow: none; }
.addt.smap-addt:hover { background: var(--red-dark); }
.addt.smap-addt[aria-pressed="true"] { background: var(--teal); }
.smap-link { font-size: 0.85rem; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--red); }

@media (max-width: 860px) {
  .smap { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .smap-list { display: none; }
  .smap-stage { height: 72svh; min-height: 420px; }
  .smap-card { left: 10px; right: 10px; bottom: 10px; width: auto; max-height: none; overflow: visible; display: grid; grid-template-columns: 96px minmax(0, 1fr); }
  .smap-pic { aspect-ratio: auto; min-height: 100%; border-radius: var(--radius) 0 0 var(--radius); }
  .smap-pic .card-tag { display: none; }
  .smap-pic .card-ph::before { display: none; }
  .smap-close { top: 6px; right: 6px; width: 30px; height: 30px; background: rgba(14, 19, 23, 0.08); color: var(--ink); }
  .smap-body { padding: 12px 40px 12px 14px; }
  .smap-body h3 { font-size: 1.02rem; margin: 4px 0 4px; }
  .smap-body > p:not(.smap-kind) { font-size: 0.84rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .smap-actions { gap: 6px 14px; margin-top: 10px; margin-right: -26px; }
  .addt.smap-addt { width: auto; height: 34px; padding: 0 14px; }
  .addt.smap-addt span { display: inline; }
  .smap-link { font-size: 0.8rem; }
}
.smap .leaflet-tile-pane { filter: saturate(0.55) contrast(0.96) brightness(1.03); }