/* Project modal scroll behavior overrides.
   The whole modal panel should scroll as one case file instead of trapping content inside nested boxes.

   The site header is sticky and changes height between desktop and mobile.
   These rules intentionally override the base modal geometry in styles.css. */

:root {
  --project-modal-header-offset: 118px;
}

.project-modal {
  position: fixed !important;
  top: var(--project-modal-header-offset) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: var(--project-modal-header-offset) 0 0 0 !important;
  z-index: 100 !important;
  display: none;
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: 0 !important;
  height: calc(100dvh - var(--project-modal-header-offset)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 24px 22px 32px !important;
}

.project-modal.open {
  display: flex !important;
}

.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
}

.modal-panel {
  margin: 0 0 32px !important;
  max-height: none !important;
  overflow: visible !important;
}

#modal-content {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

.log-scroll {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

.project-modal::-webkit-scrollbar {
  width: 10px;
}

.project-modal::-webkit-scrollbar-thumb {
  background: rgba(100,216,255,.28);
  border-radius: 999px;
}

@media (max-width: 980px) {
  :root {
    --project-modal-header-offset: 124px;
  }
}

@media (max-width: 680px) {
  :root {
    --project-modal-header-offset: 214px;
  }

  .project-modal {
    padding: 18px 12px 28px !important;
  }
}
/* Project modal mobile containment fix.
   Outer modal owns width. Inner boxes inherit width. Text wraps inside its own box. */

.project-modal,
.project-modal * {
  box-sizing: border-box;
}

.modal-panel,
#modal-content,
.modal-body-grid,
.modal-block,
.log-block,
.log-scroll,
.log-entry,
.modal-links,
.modal-list {
  min-width: 0;
  max-width: 100%;
}

.modal-block,
.log-block,
.log-entry {
  width: 100%;
  overflow: hidden;
}

.modal-list,
.modal-list li,
.log-entry,
.log-entry p,
.modal-summary {
  overflow-wrap: anywhere;
  word-break: normal;
}

.modal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  overflow: hidden;
}

.modal-links a {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

@media (max-width: 680px) {
  .project-modal {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .modal-panel {
    width: 100%;
    max-width: 100%;
  }

  #modal-content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .modal-body-grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .modal-block {
    width: 100%;
    max-width: 100%;
  }

  .modal-links a {
    max-width: 100%;
  }

  .log-meta {
    flex-wrap: wrap;
  }
}