/* Grid / layout layer extracted from service-directory.css */

/* modules/services/assets/service-map.css */
/* Tailwind drives almost all UI styling now.
   This file only contains small structural rules required for Leaflet + drawer. */

/*
  Sticky/scroll layout notes
  - The left column (results) scrolls inside the viewport (no visible scrollbar).
  - The right column (map) sticks and fills its available height.
  - When the results reach the bottom, scroll can continue to the page (footer).

  If your theme has a sticky header, you can set this CSS variable anywhere:
    --dir-sticky-top: <header height in px>;
*/

:root {
  /*
    Sticky offset for the map column.
    Keep 0 unless you have a fixed header overlapping the map.
  */
  --dir-sticky-top: 0px;

  /*
    Reserved space below the sticky map/list.
    Keep at 0 unless you truly have an always-on-screen fixed footer.
    (A normal theme footer that sits BELOW the directory should not require this.)
  */
  --dir-gap-bottom: 0px;

  /*
    Set dynamically via JS based on the directory layout's offset from the top of the viewport.
    This allows the list + map to fill the remaining viewport height without creating a bottom gap.
  */
  --dir-layout-top: 0px;
}

.dir-layout {
  align-items: stretch;
}

.dir-scroll {
  /* viewport-height scrolling for the list */
  /* Use the full viewport height for the scrolling pane.
     100dvh handles mobile browser UI; 100vh is the fallback. */
  max-height: calc(100vh - var(--dir-layout-top) - var(--dir-sticky-top) - var(--dir-gap-bottom));
  max-height: calc(100dvh - var(--dir-layout-top) - var(--dir-sticky-top) - var(--dir-gap-bottom));
  overflow-y: auto;
  overscroll-behavior: auto; /* allow scroll chaining to the page (footer) */
  padding-right: 2px; /* avoids content shift when scrollbar is hidden */

  /* Hide scrollbar (still scrollable) */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}
.dir-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.dir-col-map {
  position: sticky;
  top: var(--dir-sticky-top);
  /* Match the list pane height so the two columns align cleanly. */
  height: calc(100vh - var(--dir-layout-top) - var(--dir-sticky-top) - var(--dir-gap-bottom));
  height: calc(100dvh - var(--dir-layout-top) - var(--dir-sticky-top) - var(--dir-gap-bottom));
}

/* Leaflet needs explicit height on the map element */
#dir-map {
  /* Fill the sticky map column (Leaflet wants a deterministic size). */
  height: 100%;
  min-height: 0;
}

#dir-map .leaflet-container {
  width: 100%;
  height: 100%;
}

/* View toggle (Split / Grid / Map) */
.dir-view-toggle {
  border-color: rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.9);
}

.dir-view-btn {
  color: var(--wp--preset--color--brand-black);
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 1;
}

.dir-view-btn[aria-pressed="true"] {
  background: rgba(0,0,0,0.06);
}

/* Layout modes */
#dir-service-wrapper[data-view="grid"] .dir-col-map {
  display: none !important;
}
#dir-service-wrapper[data-view="grid"] .dir-col-list {
  width: 100% !important;
  flex: 0 0 100% !important;
}

#dir-service-wrapper[data-view="map"] .dir-col-list {
  display: none !important;
}
#dir-service-wrapper[data-view="map"] .dir-col-map {
  width: 100% !important;
  flex: 0 0 100% !important;
  position: relative;
}

/* iPad portrait-ish: 50/50 split */
@media (min-width: 768px) and (max-width: 1024px) {
  #dir-service-wrapper[data-view="split"] .dir-col-list,
  #dir-service-wrapper[data-view="split"] .dir-col-map {
    width: 50% !important;
    flex: 0 0 50% !important;
  }
}

/* Phone portrait: stack map above grid */
@media (max-width: 767px) {
  #dir-service-wrapper[data-view="split"] .dir-layout {
    flex-direction: column;
  }

  #dir-service-wrapper[data-view="split"] .dir-col-map {
    order: 0;
    width: 100% !important;
    flex: 0 0 auto !important;
    position: relative;
    height: 54vh;
    min-height: 360px;
  }

  #dir-service-wrapper[data-view="split"] .dir-col-list {
    order: 1;
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* Let the page scroll normally on mobile */
  #dir-service-wrapper[data-view="split"] .dir-scroll {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  #dir-service-wrapper[data-view="map"] .dir-col-map {
    min-height: 68vh;
  }
}

/* ------------------------------------------------------------
   View-mode responsive grid columns
   - Split view stays 3-up on xl (Tailwind classes handle this)
   - Grid-only view: 4-up on small laptops (lg), 5-up on xl
------------------------------------------------------------ */
@media (min-width: 1024px) {
  #dir-service-wrapper[data-view="grid"] #dir-services-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1280px) {
  #dir-service-wrapper[data-view="grid"] #dir-services-list {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}