/* Selected-place card. Load after mobile-first.css. Phone: bottom card. 760px+: side card under the search column.
   search.js sets --place-card-inset on <main> (card height + 8px) while the card is shown. */

.place-card {
  position: absolute; z-index: 3; left: var(--mf-l); right: var(--mf-r); bottom: var(--mf-dock);
  display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 2px 4px; align-items: start;
  max-height: 45dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 6px 14px 16px; border-radius: 18px; background: #fff; color: var(--ink, #12332a);
  box-shadow: 0 0 0 1px #063c2e0f, 0 8px 28px #063c2e24;
}
.place-card[hidden] { display: none; }
main.has-place-card .directions-open { display:none; }
/* Hierarchy: name first and largest; type and address are quieter secondary lines; one primary action. */
.place-card-text { min-width: 0; padding-top: 4px; }
.place-card-name { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.25; color: var(--green); overflow-wrap: anywhere; }
.place-card-kind { margin: 4px 0 0; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .03em; text-transform: uppercase; color: #4e6f61; }
.place-card-detail { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--mf-muted); overflow-wrap: anywhere; }
.place-card-kind[hidden] { display: none; }
.place-card-close {
  display: grid; place-items: center; width: 44px; height: 44px; margin: -8px 0 0; padding: 0;
  border: 0; border-radius: 12px; background: none; color: var(--mf-muted); font-size: 28px; line-height: 1; cursor: pointer;
}
.place-card-close:hover { background: #eef4ef; }
.place-card-routes {
  grid-column: 1 / -1; min-height: 48px; margin: 12px 10px 0 0; padding: 0 16px; border: 0; border-radius: 12px;
  background: var(--green); color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}.place-card-routes[hidden] { display: none; }
.place-card-close:focus-visible, .place-card-routes:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.maplibregl-marker[role=button]:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 8px; }

/* Keep map tools reachable above a phone card. */
main.has-place-card .bottom-tools,
main.has-place-card .report-fab { bottom: calc(var(--mf-dock) + var(--place-card-inset, 0px)); }
main.has-place-card > #map-controls { bottom: calc(var(--mf-dock) + 60px + var(--place-card-inset, 0px)); }
main.has-place-card .notice { bottom: calc(var(--mf-dock) + 60px + var(--place-card-inset, 0px)); }

@media (min-width: 760px) {
  .place-card { right: auto; width: 360px; max-width: calc(100% - 32px); max-height: min(320px, 45dvh); }
  /* Side card: only the bottom-left dock sits beneath it; right-hand tools stay put. */
  main.has-place-card .report-fab { bottom: var(--mf-dock); }
  main.has-place-card > #map-controls { bottom: auto; }
  main.has-place-card .notice { bottom: calc(var(--mf-dock) + 64px); }
}

@media (min-width: 1100px) {
  .place-card { width: 380px; }
}

@media (max-height: 500px) {
  .place-card { grid-template-columns: minmax(0, 1fr) 44px auto; max-height: 60dvh; padding-top: 8px; padding-bottom: 8px; }
  .place-card-routes { grid-row: 1; grid-column: 3; margin: 2px 6px 0 0; }
  main.has-place-card > #map-controls { bottom: var(--mf-dock); }
}