/* ======================================================================================================
 * Version: 1.3.2
 * Created: 2026-06-11 SAST
 * Updated: 2026-06-13
 * File: eco-guilds-camp-detail.css
 * Path: assets/css/eco-guilds/partials/eco-guilds-camp-detail.css
 * Author: Buktika - Binka
 * Purpose: Floating camp-detail pane (Block 2, BKT 40050) — large lightbox with its own
 *          MapLibre detail map and a sidecar info panel. Same page, legible at camp scale.
 * License: © Buktika, 2026. All rights reserved.
 * ChangeLog:
 *   v1.3.2 (2026-06-13): Fixed blank/collapsed map area — the grid `1fr` map row was collapsing to
 *     0 (header/info stacked at top, empty panel below). Switched the touch sheet to a flex column
 *     (display:flex; flex-direction:column): map = flex:1 with a 45vh hard floor so it can never be
 *     zero; header + info = flex:0 0 auto. Deterministic, DOM-order layout.
 *   v1.3.1 (2026-06-13): Dropped the invalid `justify-content: stretch` from the touch overlay
 *     (kept align-items:flex-start). Pairs with JS v1.5.1 (blank-map resize fix).
 *   v1.3.0 (2026-06-13): Fixed "opens un-maximised; must swipe up to reveal the bar" — the sheet
 *     was centred and sized in 100vh (toolbar-retracted height), so its top overflowed above the
 *     visible area until a swipe retracted the toolbar. Now top-aligned (align-items:flex-start)
 *     and sized in 100dvh (dynamic viewport, 100vh fallback) so the header sits at the true top.
 *     Replaced the full-width green "× Close" slab with a proper header bar: a "Camp detail" title
 *     on the left and a round green close button on the right (data-close).
 *   v1.2.0 (2026-06-13): Fixed "no way to close on mobile" — the close bar was gated on width
 *     (max-width:720px) only, so a wide touch device (phone landscape / foldable / tablet) hid it
 *     and left just the tiny corner ×. Now shown on `(hover: none)` too, matching the JS that locks
 *     the nested map on touch. Close bar is guaranteed on every touchscreen regardless of width.
 *   v1.1.0 (2026-06-13): Touch foundation. Added .eg-camp-detail__closebar — an oversized,
 *     full-width, high-contrast close target pinned to the top of the panel on small/touch screens
 *     (the corner × proved unreachable on mobile, where the embedded map captured taps). The nested
 *     map is locked non-interactive on touch (set in JS), so this bar is the guaranteed exit.
 *   v1.0.0 (2026-06-11): Initial floating detail pane.
 * ====================================================================================================== */

.eg-camp-detail[hidden] { display: none; }

/* Touch header bar — hidden on desktop (corner × suffices for mouse users). */
.eg-camp-detail__bar { display: none; }

.eg-camp-detail {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eg-camp-detail__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 28, 22, 0.62);
}

.eg-camp-detail__panel {
  position: relative;
  width: 92vw;
  height: 86vh;
  max-width: 1400px;
  display: grid;
  grid-template-columns: 1fr 320px;
  background: #f4f1e9;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.eg-camp-detail__map { width: 100%; height: 100%; }

.eg-camp-detail__info {
  padding: 22px 22px 26px;
  overflow-y: auto;
  border-left: 1px solid #ddd6c6;
  background: #faf8f2;
}

.eg-camp-detail__title {
  margin: 0 0 14px;
  font-size: 1.25rem;
  color: #2e5d3a;
}

.eg-camp-detail__facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 0.95rem;
}
.eg-camp-detail__facts dt { color: #6c6b60; }
.eg-camp-detail__facts dd { margin: 0; color: #1a1a1a; font-weight: 600; }

.eg-camp-detail__note {
  margin-top: 18px;
  font-size: 0.82rem;
  color: #6c6b60;
  line-height: 1.45;
}

.eg-camp-detail__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #2e5d3a;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.eg-camp-detail__close:hover { background: #fff; }

/* Full-screen sheet + header bar on ANY touch device (hover:none) OR any narrow screen. The touch
   clause is essential: a wide touch device (phone landscape, foldable, tablet) is still touch and
   must still get the header — matching the JS that locks the map on (hover:none). */
@media (max-width: 720px), (hover: none) {
  /* Top-align (don't centre) so the header sits at the true top, and use DYNAMIC viewport height
     (100dvh) so the sheet matches the VISIBLE area — fixes the "swipe up to reveal the bar" bug
     caused by 100vh being the toolbar-retracted height. 100vh is the fallback for old browsers. */
  .eg-camp-detail {
    align-items: flex-start;
  }
  /* Flex column (not grid): deterministic, DOM-order = header, map, info, and the map child cannot
     collapse to 0 the way a grid 1fr row did here. */
  .eg-camp-detail__panel {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }
  .eg-camp-detail__map {
    flex: 1 1 auto;
    height: auto;
    min-height: 45vh;        /* hard floor so the map is always clearly visible */
  }
  /* The header replaces the tiny corner × on mobile. */
  .eg-camp-detail__close { display: none; }
  .eg-camp-detail__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.4rem 0.6rem 0.4rem 1rem;
    background: #faf8f2;                  /* matches the panel, with a divider below */
    border-bottom: 1px solid #ddd6c6;
    box-sizing: border-box;
  }
  .eg-camp-detail__bar-title {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #2e5d3a;
  }
  .eg-camp-detail__barclose {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;                        /* ~42px round tap target */
    height: 2.6rem;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: #2e5d3a;                  /* green-deep, clearly a button */
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  }
  .eg-camp-detail__barclose:active { filter: brightness(0.92); }
  .eg-camp-detail__info {
    flex: 0 0 auto;
    border-left: 0;
    border-top: 1px solid #ddd6c6;
    max-height: 38vh;
    font-size: 1.05rem;                  /* larger body text for readability */
  }
  .eg-camp-detail__title { font-size: 1.5rem; }
  .eg-camp-detail__facts { font-size: 1.05rem; }
}