/* Market archive (Bricks template 4092): listings beside a sticky map on desktop; below 992px the
   listings panel becomes a bottom drawer over a full-screen map (state from market-map.js).
   Replaces the child theme's market-listing-cards.css and the custom CSS that lived on Bricks elements.

   market-map.js sets:
   - body.is-map-drawer             drawer layout is active (≤ 991px)
   - .market-drawer[data-drawer-state="closed|open|full"] on the panel
   - --market-header-bottom         bottom edge of the site header, in px

   Gridbuilder's map facet CSS sets an aspect-ratio padding and fixed heights on the map, so the
   map rules below need !important (CLAUDE.md §1 plugin-override exception). */

.market-archive {
  --market-drawer-bar: calc(var(--space-xs) * 6);
  --market-drawer-height: min(65dvh, calc(100dvh - var(--market-header-bottom, 0px) - var(--space-s)));
  padding: 0;
}

/* Layout: listings and map side by side from 992px; stacked (drawer) below. */
.market-archive__layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  inline-size: 100%;
  max-inline-size: none;
  margin-inline: 0;
  padding: 0;
}
.market-archive__listings {
  gap: 0;
  min-inline-size: 0;
  padding: var(--space-m);
}
.market-archive__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  inline-size: 100%;
  max-inline-size: none;
}

/* Header: title left, Reset + Filter right. */
.market-archive__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs);
}
.market-archive__nav {
  gap: 0;
}
.market-archive__title {
  margin: 0;
  font-size: var(--h4);
}
.market-archive__controls {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-s);
  inline-size: auto;
}
/* Reset: markup lives in a signed Bricks code element (cnyzla), so it keeps its Gridbuilder classes.
   The extra .wpgb-facet button outranks Gridbuilder's red reset-button style, which loads later. */
.market-archive__controls .wpgb-facet button.resetsidmap {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-xs) / 2);
  min-inline-size: fit-content;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-dark, var(--neutral-ultra-dark));
  font-size: var(--text-s);
  font-weight: 400;
  line-height: var(--btn-line-height);
  white-space: nowrap;
}
.market-archive__controls .wpgb-facet button.resetsidmap:hover {
  background: transparent;
  color: var(--primary-dark);
}
.market-archive__controls .resetsidmap svg {
  inline-size: 1.6em;
  block-size: 1.6em;
}
.market-archive__filter {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-xs) / 2);
  inline-size: auto;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-dark, var(--neutral-ultra-dark));
  font-size: var(--text-s);
  font-weight: 400;
  text-decoration: none;
}
.market-archive__filter:hover {
  color: var(--primary-dark);
}
.market-archive__controls :is(.resetsidmap, .market-archive__filter):focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* Result count */
.market-archive__count {
  color: var(--text-dark, var(--neutral-ultra-dark));
  font-size: var(--text-m);
  font-weight: 600;
}

/* Card grid */
.market-archive__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--space-xs) * 13.5)), 1fr));
  align-items: stretch; /* Bricks blocks default to flex-start; cards fill the row so date bands line up */
  gap: var(--space-l);
  margin: var(--space-m) 0 0;
  padding: 0;
  list-style: none;
}
.market-archive__grid > li {
  list-style: none;
}

/* Pagination (Gridbuilder numbered pagination facet). */
.market-archive__pagination {
  align-items: center;
  inline-size: 100%;
  margin-block: var(--space-l);
}
.market-archive__pagination .wpgb-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
}
.market-archive__pagination .wpgb-page {
  margin: 0;
  list-style: none;
}
.market-archive__pagination .wpgb-page a {
  display: inline-grid;
  place-items: center;
  min-inline-size: calc(var(--space-xs) * 3.25);
  block-size: calc(var(--space-xs) * 3.25);
  padding: 0 var(--space-xs);
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--text-dark, var(--neutral-ultra-dark));
  font-size: var(--text-s);
  text-decoration: none;
}
.market-archive__pagination .wpgb-page a:hover {
  background: var(--neutral-ultra-light);
}
.market-archive__pagination .wpgb-page a:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.market-archive__pagination .wpgb-page a[aria-current] {
  background: var(--text-dark, var(--neutral-ultra-dark));
  color: var(--white);
}

/* Map facet fills its column. */
.market-archive__map {
  position: relative;
  gap: 0;
  min-inline-size: 0;
}
.market-archive__map :is(.market-archive__map-facet, .wpgb-facet, fieldset, .wpgb-map-facet) {
  inline-size: 100% !important; /* Gridbuilder map facet override */
  block-size: 100% !important; /* Gridbuilder map facet override */
  min-block-size: 0 !important; /* Gridbuilder map facet override */
  margin: 0 !important; /* Gridbuilder map facet override */
  padding-block-end: 0 !important; /* Gridbuilder sets an aspect-ratio padding */
}

/* ---------- Desktop: listings | sticky map ---------- */
@media (min-width: 992px) {
  .market-archive__layout {
    flex-direction: row;
    align-items: stretch;
  }
  .market-archive__listings,
  .market-archive__map {
    flex: 0 0 50%;
    inline-size: 50%;
  }
  .market-archive__map {
    position: sticky;
    inset-block-start: var(--market-header-bottom, 0px);
    align-self: flex-start;
    block-size: calc(100vh - var(--market-header-bottom, 0px));
  }
}
@media (min-width: 1880px) {
  .market-archive__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Below 992px: full-screen map with a bottom drawer ---------- */
@media (max-width: 991px) {
  /* The site footer holds the main-menu modal: keep it in the DOM, hide only its page content. */
  body:is(.post-type-archive-market-listing, .tax-market-category) > footer {
    position: relative;
    z-index: 1003;
    block-size: 0;
    overflow: visible;
  }
  body:is(.post-type-archive-market-listing, .tax-market-category) > footer > .fr-footer-echo {
    display: none;
  }

  /* Without the drawer script the map still needs a height. */
  body:not(.is-map-drawer) .market-archive__map {
    block-size: 60vh;
  }

  body.is-map-drawer {
    overflow: hidden;
  }
  body.is-map-drawer > header {
    position: relative;
    z-index: 1002;
  }
  .is-map-drawer .market-archive__map {
    position: fixed;
    inset: var(--market-header-bottom, 0px) 0 0;
    z-index: 1000;
    inline-size: 100vw;
  }
  .is-map-drawer:has(.market-drawer[data-drawer-state="open"]) .market-archive__map {
    inset-block-end: var(--market-drawer-height);
  }

  /* The page h1 stays for screen readers; the drawer bar shows the visible title. */
  .is-map-drawer .market-archive__nav {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .is-map-drawer .market-archive__header {
    display: flex;
    flex-direction: row; /* Bricks blocks default to column */
    justify-content: flex-end;
    margin-block: var(--space-l);
  }
  .is-map-drawer .market-archive__count {
    display: none; /* shown in the drawer bar */
  }
  .is-map-drawer .market-archive__grid {
    margin-block-start: 0;
    padding-block-end: var(--space-s);
  }
}
@media (min-width: 769px) and (max-width: 991px) {
  .is-map-drawer .market-archive__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .is-map-drawer .market-archive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
  }
}
@media (max-width: 480px) {
  .is-map-drawer .market-archive__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Drawer (the listings panel, classes added by market-map.js) ---------- */
.market-drawer__bar {
  display: none;
}
@media (max-width: 991px) {
  .is-map-drawer .market-drawer {
    position: fixed;
    inset: auto 0 0;
    z-index: 1001;
    display: block;
    inline-size: 100vw;
    block-size: var(--market-drawer-height);
    padding: 0 var(--space-s) var(--space-s);
    overflow: hidden auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--white);
    box-shadow: 0 calc(var(--space-xs) * -.6) var(--space-m) var(--neutral-trans-20);
  }
  .is-map-drawer .market-drawer::-webkit-scrollbar {
    display: none;
  }
  .is-map-drawer .market-drawer[data-drawer-state="closed"] {
    overflow: hidden;
    transform: translateY(calc(100% - var(--market-drawer-bar)));
  }
  .is-map-drawer .market-drawer[data-drawer-state="full"] {
    inset-block-start: calc(var(--market-header-bottom, 0px) + var(--space-m));
    block-size: calc(100dvh - var(--market-header-bottom, 0px) - var(--space-m));
  }

  .is-map-drawer .market-drawer__bar {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    block-size: var(--market-drawer-bar);
    margin-inline: calc(var(--space-s) * -1);
    padding: calc(var(--space-xs) / 2) var(--space-s);
    border-block-end: 1px solid var(--neutral-light);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--white);
    touch-action: none;
    user-select: none;
    cursor: pointer;
  }
  .market-drawer__handle {
    position: absolute;
    inset-block-start: calc(var(--space-xs) / 2);
    inset-inline-start: 50%;
    inline-size: calc(var(--space-xs) * 3);
    block-size: calc(var(--space-xs) * .3);
    border-radius: var(--radius-circle);
    background: var(--neutral-light);
    translate: -50% 0;
  }
  .market-drawer__heading {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--space-xs) / 6);
    min-inline-size: 0;
  }
  .market-drawer__title {
    color: var(--text-dark, var(--neutral-ultra-dark));
    font-size: var(--text-m);
    font-weight: 600;
  }
  .market-drawer__count {
    color: var(--neutral-dark);
    font-size: var(--text-xs);
    line-height: var(--heading-line-height);
  }
  .market-drawer__toggle {
    min-block-size: calc(var(--space-xs) * 3.25);
    padding: calc(var(--space-xs) / 2) var(--space-xs);
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--primary-dark);
    font: inherit;
    font-size: var(--text-s);
    cursor: pointer;
  }
  .market-drawer__toggle:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
  }
}
@media (max-width: 991px) and (prefers-reduced-motion: no-preference) {
  .is-map-drawer .market-drawer {
    transition: transform 200ms cubic-bezier(.32, .72, 0, 1), block-size 200ms cubic-bezier(.32, .72, 0, 1);
  }
}

/* Without JavaScript the map can't load: show the listings full width instead of an empty map area. */
@media (scripting: none) {
  .market-archive__map {
    display: none;
  }
  .market-archive__listings {
    flex-basis: 100%;
    inline-size: 100%;
  }
}