/* Project details: photo-led case studies, with a responsive thumbnail gallery. */
#project-dialog {
  width: min(1410px, calc(100vw - 48px));
  max-width: 1410px;
  max-height: calc(100dvh - 48px);
  padding: 28px 54px 34px;
  border: 0;
  border-radius: 12px;
  background: #fcfdf9;
  color: #11265a;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
#project-dialog[open] { display: block; }
#project-dialog:not([open]) { display: none; }
#project-dialog::backdrop { background: #314b50d9; backdrop-filter: blur(8px); }
#project-dialog .dialog-close {
  position: absolute; right: 9px; top: 9px; z-index: 3;
  width: 32px; height: 32px; min-height: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: #eef0ec;
  color: #687279; font: 25px/1 Arial, sans-serif;
}
#project-dialog button { -webkit-tap-highlight-color: transparent; }
#project-dialog button:focus-visible, #project-dialog a:focus-visible { outline: 3px solid #467f8b; outline-offset: 4px; }
.project-gallery { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: 20px; }
.project-photo { margin: 0; position: relative; min-width: 0; overflow: hidden; border-radius: 7px; background: #e9eeeb; }
.project-photo-stage { aspect-ratio: 1.98; display: grid; place-items: center; width: 100%; height: 100%; }
#project-dialog #dialog-image, #dialog-crop { width: 100%; height: 100%; max-height: 480px; min-height: 0; display: block; object-fit: cover; }
#project-dialog #dialog-image.is-reference { object-fit: contain; padding: 38px; background: #edf3f3; }
#project-dialog [hidden] { display: none !important; }
#dialog-crop { overflow: hidden; }
#photo-caption { position: absolute; bottom: 13px; left: 14px; right: 14px; width: fit-content; max-width: calc(100% - 28px); background: #10252bc9; border-radius: 4px; padding: 7px 11px; font-size: 12px; line-height: 1.5; color: white; backdrop-filter: blur(8px); }
#photo-caption.is-reference { background: #11265ae6; }
.project-thumbnails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 16px; min-height: 0; }
.project-thumbnail { position: relative; border: 0; border-radius: 7px; padding: 0; background: #e9eeeb; overflow: hidden; min-width: 0; min-height: 0; cursor: pointer; }
.project-thumbnail img, .project-thumbnail svg { display: block; width: 100%; height: 100%; object-fit: cover; overflow: hidden; transition: transform .25s ease; }
.project-thumbnail:hover img, .project-thumbnail:hover svg { transform: scale(1.035); }
.project-thumbnail[aria-pressed="true"]::after { content: ''; position: absolute; inset: 0; border: 3px solid #11265a; border-radius: inherit; box-shadow: inset 0 0 0 2px #fff; pointer-events: none; }
.project-thumbnail.is-reference img { object-fit: contain; padding: 12px 12px 25px; background: #edf3f3; }
.thumbnail-note { position: absolute; bottom: 0; left: 0; width: 100%; padding: 4px 5px; color: #465a61; background: #f5f7f2e8; font-size: 9px; line-height: 1.2; letter-spacing: .02em; text-align: center; }
.project-thumbnails[data-count="2"] { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.project-thumbnails[data-count="2"] .project-thumbnail:first-child { grid-column: 1 / -1; }
.project-thumbnails[data-count="3"], .project-thumbnails[data-count="4"] { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.project-thumbnails[data-count="3"] .project-thumbnail:first-child { grid-column: 1 / -1; }
#project-dialog .dialog-copy { padding: 25px 5px 0; }
#project-dialog #dialog-category { font-size: 12px; line-height: 1.6; font-weight: 400; letter-spacing: 0; color: #737978; margin: 0 0 9px; }
#project-dialog #dialog-title { font-family: Arial, sans-serif; color: #11265a; font-size: clamp(25px, 2.5vw, 36px); font-weight: 500; line-height: 1.18; letter-spacing: -.035em; margin: 0 0 10px; }
#project-dialog #dialog-location { color: #777d7b; font-size: 14px; line-height: 1.6; margin: 0; max-width: none; }
#project-dialog #dialog-details { display: block; margin: 28px 0 0; }
#project-dialog #dialog-details > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; border-top: 1px solid #e2e6e0; padding: 20px 0; }
#project-dialog #dialog-details dt { color: #11265a; text-transform: uppercase; letter-spacing: 0; font-size: 14px; font-weight: 500; }
#project-dialog #dialog-details dd { margin: 0; color: #747b78; font-size: 15px; line-height: 1.6; }
.project-dialog-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; margin-top: 4px; }
#project-dialog .project-navigation { grid-column: 2; display: flex; align-items: center; gap: 56px; padding: 0; margin: 0; border: 0; color: #747b78; font-size: 13px; }
#project-dialog .project-navigation button { min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: inherit; font: inherit; white-space: nowrap; }
#project-dialog .project-navigation button:hover { color: #11265a; }
#project-position { white-space: nowrap; font-variant-numeric: tabular-nums; }
#project-dialog #dialog-contact { grid-column: 3; justify-self: end; min-height: 54px; padding: 17px 23px; font-size: 11px; white-space: nowrap; border-radius: 100px; background: #11265a; }
#project-dialog #dialog-contact span { font-size: 23px; margin-left: 22px; }
@media (min-width: 1000px) and (max-height: 820px) {
  #project-dialog { width: min(1300px, calc(100vw - 48px)); padding-top: 22px; padding-bottom: 22px; }
  .project-photo-stage { aspect-ratio: 2.35; }
  #project-dialog .dialog-copy { padding-top: 18px; }
  #project-dialog #dialog-details { margin-top: 18px; }
  #project-dialog #dialog-details > div { padding: 16px 0; }
}
@media (max-width: 1050px) {
  #project-dialog { padding: 40px 28px 28px; }
  .project-gallery { gap: 12px; }
  .project-thumbnails { gap: 10px; }
  .project-dialog-footer { grid-template-columns: 1fr auto; }
  #project-dialog .project-navigation { grid-column: 1; gap: 28px; }
  #project-dialog #dialog-contact { grid-column: 2; }
}
@media (max-width: 700px) {
  #project-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 44px 18px 22px; border-radius: 10px; }
  #project-dialog .dialog-close { width: 36px; height: 36px; right: 6px; top: 4px; }
  .project-gallery { display: flex; flex-direction: column; gap: 10px; }
  .project-photo-stage { aspect-ratio: 1.5; }
  #project-dialog #dialog-image, #dialog-crop { max-height: none; }
  .project-thumbnails, .project-thumbnails[data-count] { display: flex; gap: 9px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: thin; scroll-snap-type: x proximity; }
  .project-thumbnail { flex: 0 0 24%; aspect-ratio: 1.25; scroll-snap-align: start; }
  .thumbnail-note { font-size: 8px; }
  #photo-caption { font-size: 10px; bottom: 9px; left: 9px; padding: 5px 8px; }
  #project-dialog .dialog-copy { padding: 19px 0 0; }
  #project-dialog #dialog-category { font-size: 10px; margin-bottom: 8px; }
  #project-dialog #dialog-title { font-size: 26px; line-height: 1.15; }
  #project-dialog #dialog-location { font-size: 12px; }
  #project-dialog #dialog-details { margin-top: 20px; }
  #project-dialog #dialog-details > div { grid-template-columns: 1fr; gap: 7px; padding: 16px 0; }
  #project-dialog #dialog-details dt { font-size: 11px; }
  #project-dialog #dialog-details dd { font-size: 13px; }
  .project-dialog-footer { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
  #project-dialog .project-navigation { width: 100%; justify-content: space-between; gap: 15px; }
  #project-dialog #dialog-contact { width: 100%; justify-content: space-between; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .project-thumbnail img, .project-thumbnail svg { transition: none; } }