/* ---------- Market page (js/market-page.js; renderMarket in js/entity-pages.js) ----------
   Feature prefix .mk-. Phone first, one column: the shared header, the "Map and info" disclosure (closed by default), the
   stores as compact rows, the items list, the reviews. Wide layout (1200px and wider; the phone-style layout runs below it, inside the main column next to the sidebar, see EH_WIDE_MIN in js/entity-header.js): the header in the left column with the
   address, description and freshness under it, the map card and the directions in the right column, the store cards and
   the reviews below. The grid areas below replace the ones in css/detail-pages.css and css/desktop-wide.css for this page. */

.mk-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "header" "disc" "panel" "stores" "reviews";
  column-gap: 0;
  align-items: start;
}

.mk-disclosure { grid-area: disc; }
.mk-panel { grid-area: panel; min-width: 0; }

/* "Map and info": a full-width disclosure, 44 px minimum, closed by default. */
.mk-disclosure {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin: 14px 0 12px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.mk-disclosure:focus-visible,
.mk-link:focus-visible,
.mk-row:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
}

.mk-disclosure-icon { flex: none; color: var(--brand-text); }
.mk-disclosure-label { flex: 1; min-width: 0; }

/* The chevron is 24 px and turns to point up while the panel is open (aria-expanded on the button). */
.mk-disclosure-chevron { flex: none; color: var(--text-muted); transition: transform 0.2s ease; }
.mk-disclosure[aria-expanded="true"] .mk-disclosure-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .mk-disclosure-chevron { transition: none; } }

.mk-panel { margin-bottom: 8px; }
.mk-panel.is-collapsed { display: none; }

.mk-map-col { margin-bottom: 12px; border-radius: var(--radius-lg); }
.mk-map-col:focus { outline: none; }
.mk-map-col:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 4px; }
.mk-map-col .market-minimap { margin-bottom: 0; }

.mk-pin-note { margin: 0; padding: 14px; background: var(--surface-2); border-radius: var(--radius-lg); }

.mk-info { margin-bottom: 12px; }
.mk-info > * { margin-top: 0; }
.mk-description { margin-top: 6px; }

/* A text link that opens or scrolls somewhere on this page: 44 px tall hit area, the text stays 14 px. */
.mk-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 of a text link comes from an invisible box around its 22 px line (not from visible padding), so the
   visible lines can sit close together. Two links 24 px apart in the header still give each one a 44 px area with no overlap. */
.mk-link::before {
  content: "";
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -8px;
  right: -8px;
}

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

.mk-menu .row-menu-btn::after { content: none; }

.mk-cats-line { margin-top: 0; }

/* Header rhythm on a phone (the shared header sets the chips, the actions and the facts line; see css/entity-header.css). */
.mk-layout .eh-facts-2 { margin-top: 25px; }

/* On a phone the categories are one line; the tag row is for desktop only. */
.mk-tags-desktop { display: none; }
.eh-footer-slot { margin-top: 12px; }

/* Compact store rows (phone): the whole row is one link, about 72 px tall. */
.mk-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.mk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  text-decoration: none;
}

.mk-row:hover { background: var(--surface-2); }

.mk-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.mk-row-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.mk-row-meta { font-size: 14px; line-height: 1.4; color: var(--text-muted); }

.mk-row-chevron { flex: none; color: var(--text-muted); }

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

  .mk-disclosure { display: none; }

  /* Desktop ignores the phone hiding: the panel's three parts become grid items of the page layout. */
  .mk-panel,
  .mk-panel.is-collapsed { display: contents; margin: 0; }

  .mk-map-col { grid-area: side; margin-bottom: 0; }
  .mk-info { grid-area: info; margin-bottom: 0; }
  .mk-dirs { grid-area: dirs; min-width: 0; }

  .mk-cats-line { display: none; }
  .mk-tags-desktop { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
}

/* The Reviews section below the Market stores keeps its markup (css/reviews.css, shared with the Store and Product pages).
   Here only the filter buttons and the two selects get 44 px hit areas, with room between them so the areas do not overlap. */
.mk-layout .market-col-reviews .review-controls { gap: 16px 8px; }
.mk-layout .market-col-reviews .review-filter-group { gap: 8px; }
.mk-layout .market-col-reviews .review-filter-btn { min-height: 44px; min-width: 44px; padding: 0 12px; }
.mk-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. */
#reviewsSection,
#marketItemsHeading,
#mkPanel,
#mkMapCard { scroll-margin-top: calc(var(--topbar-h, 96px) + 12px); }

/* The buttons: Get directions fills the row alone; Contact (when the market has contact details) shares it half and half, like the
   Place and Store rows. On a wider screen the buttons keep their own width, as the single button always did. */
.mk-actions { display: flex; gap: 12px; }
.eh-actions .mk-actions .btn { flex: 1 1 0; min-width: 0; width: auto; }
@media (min-width: 860px) {
  .eh-actions .mk-actions .btn { flex: 0 0 auto; }
}