/* Store locator additions (sections/locator.php, assets/js/sections/locator.js).
   pages.css styles the mockup's markup; this file loads after it and adds
   the toolbar, list/grid views, pagination and the Leaflet map.

   Layout: one column up to 1199px (toolbar, map, results); from 1200px
   the map sits beside the toolbar and results and stays in view. Below
   1200px the list column was too narrow for the chips, the view switch
   and the pager (UI audit, 30 September 2026). */

/* ================= LAYOUT ================= */
.locator .locator__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "toolbar" "map" "results";
  gap: var(--space-m);
  align-items: start;
}

@media (min-width: 1200px) {
  .locator .locator__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas: "toolbar map" "results map";
    grid-template-rows: auto 1fr;
    column-gap: var(--space-l);
    row-gap: var(--space-m);
  }
}

/* ================= TOOLBAR ================= */
.locator__toolbar {
  grid-area: toolbar;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.locator__toolbar .locator__search,
.locator__toolbar .locator__filters { margin: 0; }

.locator__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
}
.locator__count {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--text-s);
  color: var(--text-dark-muted);
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.locator .view-toggle[hidden] { display: none; }

/* Function-room switch */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 4.4rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dark-muted);
  cursor: pointer;
}
.switch__track {
  position: relative;
  flex: none;
  width: 4.4rem;
  height: 2.4rem;
  border-radius: var(--radius-round);
  background: var(--base-trans-20);
  transition: background-color var(--duration-fast) ease;
}
.switch__thumb {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--bg-ultra-light);
  box-shadow: 0 1px 3px var(--base-trans-40);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}
.switch:hover { color: var(--text-dark); }
.switch[aria-checked="true"] { color: var(--secondary); }
.switch[aria-checked="true"] .switch__track { background: var(--tertiary); }
.switch[aria-checked="true"] .switch__thumb { transform: translateX(2rem); }
.switch:focus-visible { outline: none; }
.switch:focus-visible .switch__track { outline: 2px solid var(--secondary); outline-offset: 2px; }

/* ================= RESULTS ================= */
.locator__results {
  grid-area: results;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  scroll-margin-top: calc(var(--header-height) + var(--space-s));
}

/* Card media: an arch thumbnail in the list, a wide arch in the grid.
   Stores without a photo keep the mockup's "m" arch. */
.store-card__media {
  flex: none;
  width: 7.2rem;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border-radius: var(--radius-arch);
  background: linear-gradient(180deg, var(--accent-light), var(--primary));
}
.store-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}
.store-card:hover .store-card__img { transform: scale(1.05); }
.store-card__media .store-card__arch {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.store-card__region { color: var(--text-dark-muted); }

.store-card__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
}
.store-card__map-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 3.2rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--primary-trans-40);
  text-underline-offset: 0.3em;
  cursor: pointer;
  transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}
.store-card__map-btn:hover { color: var(--primary); text-decoration-color: currentColor; }
.store-card__map-btn:focus-visible { outline: 2px solid var(--secondary); outline-offset: 3px; border-radius: var(--radius-xs); }

/* Grid view */
.store-list[data-view="grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: var(--space-s);
}
.store-list[data-view="grid"] .store-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-s);
  padding: var(--space-xs);
}
.store-list[data-view="grid"] .store-card__media { width: 100%; aspect-ratio: 4 / 3; }
.store-list[data-view="grid"] .store-card__body { flex: 1 1 auto; padding-inline: var(--space-xs); }
.store-list[data-view="grid"] .store-card__actions {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs);
  border-top: 1px dashed var(--border-color-light);
}

@media (max-width: 599px) {
  .store-list[data-view="list"] .store-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .store-list[data-view="list"] .store-card__media { width: 5.6rem; }
  .store-list[data-view="list"] .store-card__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* Page-change entrance. Cards start visible; this only adds the settle. */
@keyframes store-card-in {
  from { opacity: 0; transform: translateY(1.2rem); }
}
.store-card.is-entering {
  animation: store-card-in 480ms var(--ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}

/* Beats both views' display rules: filtered-out and off-page cards. */
.locator .store-list .store-card[hidden] { display: none; }

/* ================= PAGINATION ================= */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
}
.pager[hidden] { display: none; }
.pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-width: 4.4rem;
  min-height: 4.4rem;
  padding-inline: var(--space-xs);
  border: 1px solid var(--base-trans-20);
  border-radius: var(--radius-round);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-s);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-dark);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
}
.pager__btn--step {
  padding-inline: var(--space-s);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pager__btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.pager__btn[aria-current="page"] {
  background: var(--tertiary);
  border-color: var(--tertiary);
  color: var(--text-light);
}
.pager__btn:disabled { opacity: 0.4; cursor: default; }
.pager__btn:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.pager__gap { min-width: 2.4rem; text-align: center; color: var(--text-dark-muted); }
.pager__label { display: none; }

/* Phones: Prev · Page 2 of 7 · Next, so the pager stays on one row. */
@media (max-width: 599px) {
  .pager { justify-content: space-between; }
  .pager__btn:not(.pager__btn--step),
  .pager__gap { display: none; }
  .pager__label {
    display: block;
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--text-dark-muted);
    font-variant-numeric: tabular-nums;
  }
}

/* ================= MAP ================= */
/* isolation keeps Leaflet's high z-index panes below the fixed header. */
.locator .map-panel {
  grid-area: map;
  /* pages.css makes the panel sticky down to 992px; here it only sticks
     in the two-column layout (1200px up), so below that it must not pin
     over the list. relative keeps the isolation stacking context. */
  position: relative;
  top: auto;
  display: block;
  place-items: normal; /* pages.css centres; that shrinks the map to 0 wide */
  min-height: 0;
  padding: 0;
  isolation: isolate;
}
.map-panel__map { height: 36rem; }
@media (min-width: 1200px) {
  .locator .map-panel {
    position: sticky;
    top: calc(var(--header-height) + var(--space-s));
  }
  .map-panel__map {
    height: min(72rem, calc(100svh - var(--header-height) - var(--space-xl)));
    min-height: 48rem;
  }
}
.map-panel__map[hidden] { display: none; }
.map-panel__fallback {
  margin: 0;
  padding: var(--space-l);
  font-size: var(--text-s);
  color: var(--text-dark-muted);
  text-align: center;
}

.map-panel__map.leaflet-container {
  background: var(--bg-semi-light);
  font-family: var(--font-body);
  font-size: var(--text-xs);
}
.map-panel__map:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; }
/* Warm the OpenStreetMap tiles towards the cream palette. */
.map-panel__map .leaflet-tile-pane { filter: saturate(0.75) sepia(0.12); }
.map-panel .leaflet-bar {
  border: 0;
  border-radius: var(--radius-s);
  overflow: hidden;
  box-shadow: var(--shadow-m);
}
.map-panel .leaflet-bar a { color: var(--tertiary); }
.map-panel .leaflet-bar a:hover { color: var(--primary); }
.map-panel .leaflet-control-attribution { background: var(--bg-ultra-light); color: var(--text-dark-muted); }
.map-panel .leaflet-control-attribution a { color: var(--secondary); }

/* Pins (L.divIcon) */
.store-pin { background: none; border: 0; }
.store-pin svg {
  display: block;
  overflow: visible;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 3px 4px var(--tertiary-trans-60));
  transition: transform var(--duration-fast) var(--ease-out-back);
}
.store-pin path { fill: var(--primary); stroke: var(--bg-ultra-light); stroke-width: 1.5; }
.store-pin circle { fill: var(--bg-ultra-light); }
.store-pin:hover svg,
.store-pin:focus-visible svg,
.store-pin.is-active svg { transform: scale(1.2); }
.store-pin.is-active path { fill: var(--tertiary); }
.store-pin:focus-visible { outline: none; }

/* Clusters */
.store-cluster {
  display: grid;
  place-items: center;
  border: 3px solid var(--bg-ultra-light);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 4px 10px var(--tertiary-trans-60);
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: var(--text-s);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--duration-fast) ease;
}
.store-cluster:hover { background: var(--secondary); }

/* Popups */
.store-popup .leaflet-popup-content-wrapper {
  border-radius: var(--radius-m);
  background: var(--bg-ultra-light);
  box-shadow: var(--shadow-l);
}
.store-popup .leaflet-popup-tip { background: var(--bg-ultra-light); }
.store-popup .leaflet-popup-content {
  margin: 0;
  padding: var(--space-s) var(--space-l) var(--space-s) var(--space-s);
  font-family: var(--font-body);
  line-height: 1.4;
}
.store-popup__body { display: flex; flex-direction: column; gap: var(--space-xs); }
.store-popup__name { font-size: var(--text-m); color: var(--text-dark); }
.store-popup__address { margin: 0; font-size: var(--text-s); color: var(--text-dark-muted); }
.store-popup a.link-arrow { color: var(--secondary); }

@media (prefers-reduced-motion: reduce) {
  .store-card.is-entering { animation: none; }
  .store-card__img,
  .switch__track,
  .switch__thumb,
  .pager__btn,
  .store-pin svg { transition: none; }
  .store-card:hover .store-card__img { transform: none; }
}