/* ---------- Place page (js/place-page.js; renderPlace in js/entity-pages.js) ----------
   Feature prefix .pl-. Phone first, one column: the shared header (css/entity-header.css), the description, the address, the
   chips, the links, the reviews. The map and address open in the Directions sheet. Wide layout (1200px and wider,
   EH_WIDE_MIN in js/entity-header.js): the left column holds all of it and the right column holds the map card. */

/* A text link that opens or scrolls somewhere on this page: 44 px tall hit area, the text stays 14 px. */
.pl-link {
  display: inline-flex;
  align-items: center;
  position: relative;
  min-height: 0;
  line-height: 22px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--brand-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* The 44 px hit area comes from an invisible box around the 22 px line, so the visible lines can sit close together. */
.pl-link::before {
  content: "";
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -8px;
  right: -8px;
}

.pl-link:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }

.pl-muted { color: var(--text-muted); }

/* The header's three-dot menu: the same 44 px box as the heart beside it. */
.pl-menu .row-menu-btn { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.pl-menu .row-menu-btn::after { content: none; }

/* Header rhythm on a phone: the same as Market and Store. */
.pl-layout .eh-facts-2 { margin-top: 25px; }

/* The buttons: Directions fills the row alone; Call (when there is a phone) shares it half and half. Both 48 px tall. */
.pl-actions { display: flex; gap: 12px; }
.pl-actions .btn { flex: 1 1 0; min-width: 0; min-height: 48px; width: auto; }

.pl-description { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--text); }
.pl-layout .market-col-header > .pl-address { margin: 10px 0 0; }
.pl-layout .market-col-header > .tag-row { margin-top: 10px; }

/* ---------- Page layout ---------- */
.pl-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "header" "reviews";
  column-gap: 0;
  align-items: start;
}

.pl-col-side { display: none; }

@media (min-width: 1200px) { /* EH_WIDE_MIN */
  .pl-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas: "header side" "reviews side";
    column-gap: 24px;
  }

  .pl-col-side { display: block; grid-area: side; min-width: 0; }
}

.pl-map-card:focus { outline: none; }
.pl-map-card:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 4px; }

/* The map and address lines, in the desktop map card and in the sheet. */
.pl-address { margin: 0; padding: 10px 14px 0; }
.pl-pinfix { margin: 0; padding: 4px 14px 0; }
.pl-gmaps { padding: 12px 14px 0; }
.pl-gmaps .btn { width: 100%; min-height: 48px; }
.pl-pin-note { margin: 0; padding: 14px; }

#esSheet .pl-address { padding: 12px 0 0; }
#esSheet .pl-pinfix { padding: 4px 0 0; }
#esSheet .pl-pin-note { padding: 14px 0; }
#esSheet .market-minimap { height: 200px; margin-bottom: 0; }

/* The Place page's reviews keep their markup (css/reviews.css): 44 px hit areas. */
.pl-layout .market-col-reviews .review-controls { gap: 16px 8px; }
.pl-layout .market-col-reviews .review-filter-group { gap: 8px; }
.pl-layout .market-col-reviews .review-filter-btn { min-height: 44px; min-width: 44px; padding: 0 12px; }
.pl-layout .market-col-reviews .review-select-group select { min-height: 44px; }

/* The top bar is sticky (css/header-nav.css). Scroll targets on this page stop below it. */
#plMapCard { scroll-margin-top: calc(var(--topbar-h, 96px) + 12px); }

#esSheet .pl-gmaps { padding: 12px 0 0; }
/* The pin-fix link's hit area reaches 12 px below its line: keep the Open in Google Maps button clear of it. */
.pl-pinfix { padding-bottom: 12px; }
#esSheet .pl-pinfix { padding-bottom: 12px; }