/* ===========================================================================
   LAYOUT - Structure générale de la page
   
   Organisation:
   - Map Container: #map layout and positioning
   - Filters Container: Container layout (items in 04-components.css)
   - Filter Modals: Modal dialogs for filters
   - Basemap Menu: Positioning (styles in 04-components.css)
   
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Container global
--------------------------------------------------------------------------- */
#container {
  position: relative;
  height: 100%;
}

/* ---------------------------------------------------------------------------
   Carte MapLibre GL
--------------------------------------------------------------------------- */
#map {
  width: 100%;
  height: 100%;
  background-color: var(--surface-base);
}

/* Ensure invisible hitline strokes remain clickable */
.maplibregl-canvas {
  cursor: grab;
}

/* ---------------------------------------------------------------------------
   Filters Container — now uses .dock-panel (see 11-toggles.css)
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Panneau de détails — Right-side floating popup
--------------------------------------------------------------------------- */
#detail-content {
  flex: 1;
  overflow: visible;
  padding: 20px;
  padding-top: 0;
  background: transparent;
}

/* ---------------------------------------------------------------------------
   Project Detail Panel — glass card with cinematic entrance
--------------------------------------------------------------------------- */
#project-detail {
  position: fixed;
  top: calc(16px + var(--dock-h, 46px) + 2 * var(--dock-pad, 4px) + 2px + 10px);
  right: 16px;
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 16px - var(--dock-h, 46px) - 2 * var(--dock-pad, 4px) - 2px - 10px - 16px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--surface-base) 85%, transparent);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-radius: 24px;
  box-shadow:
    0 32px 100px rgba(0, 0, 0, 0.2),
    0 12px 40px rgba(0, 0, 0, 0.1),
    0 0 0 1px var(--border-light);
  z-index: 1300;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

/* Scrollable body inside the panel */
.detail-scroll-body {
  flex: 1 1 auto;
  min-height: 0;       /* allows shrinking below intrinsic height when panel hits max-height */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.detail-scroll-body::-webkit-scrollbar { width: 3px; }
.detail-scroll-body::-webkit-scrollbar-track { background: transparent; margin: 16px 0; }
.detail-scroll-body::-webkit-scrollbar-thumb {
  background: var(--black-alpha-08);
  border-radius: 10px;
}
.detail-scroll-body::-webkit-scrollbar-thumb:hover { background: var(--black-alpha-18); }

#project-detail > * {
  font-size: 1rem;
  line-height: 1.5;
}

#project-detail[style*="display: flex"],
#project-detail.visible {
  animation: detailEnter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

#project-detail h2 {
  margin-top: 0;
}

/* Accent glow along top edge */
#project-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cat-color, var(--primary)), transparent);
  border-radius: 0 0 2px 2px;
  opacity: 0.45;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.4s ease, left 0.4s ease, right 0.4s ease;
}

#project-detail:hover::before {
  opacity: 0.8;
  left: 8%;
  right: 8%;
}

@keyframes detailEnter {
  from {
    opacity: 0;
    transform: translateX(32px) scale(0.93);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

/* Mobile: project detail as compact bottom sheet */
@media (max-width: 720px) {
  #project-detail {
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    max-width: 100%;
    max-height: 60vh;
    border-radius: 22px 22px 16px 16px;
  }

  #project-detail[style*="display: flex"],
  #project-detail.visible {
    animation: detailEnterMobile 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .detail-hero {
    height: 160px;
  }
}

@keyframes detailEnterMobile {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.96);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}