/* Project collection pages: a render beside the title, documents shown as whole PDFs, drawings and renders that open large. */
.pp-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-bottom: 36px; }
.pp-hero h1 { margin-top: 6px; }
.pp-hero .image-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 10px; overflow: hidden; outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 4px; }
.pp-hero h1 { white-space: nowrap; }
@media (max-width: 820px) { .pp-hero h1 { white-space: normal; } }
.pp-hero .image-open img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 820px) { .pp-hero { grid-template-columns: 1fr; } }
.pp-block { margin: 0 0 44px; }
.pp-block > h2 { margin: 0 0 4px; }
.pp-block > .pp-sub { margin: 0 0 14px; opacity: .72; font-size: .95em; }
.pp-pdf { width: 100%; height: min(78vh, 760px); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; background: #1d1c20; display: block; }
.pp-pdf-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.pp-pdf-links a { padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; text-decoration: none; font-size: .9em; }
.pp-block .image-open { cursor: zoom-in; }
#media-dialog { max-width: 96vw; max-height: 96vh; padding: 0; border: 0; background: #111; }
#media-dialog img { display: block; max-width: 96vw; max-height: calc(96vh - 44px); object-fit: contain; }
#media-dialog button { position: sticky; top: 0; float: right; margin: 8px; }

/* slide-through deck */
.pp-deck { outline: none; }
.dk-stage { position: relative; height: min(72vh, 680px); background: #1b1a1e; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: pan-y; user-select: none; }
.dk-stage.zoomed { cursor: grab; touch-action: none; }
.dk-page { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .15s; transform-origin: center; -webkit-user-drag: none; }
.dk-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 8px; background: rgba(20,20,24,.6); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.dk-prev { left: 10px; } .dk-next { right: 10px; }
.dk-nav:hover { background: rgba(20,20,24,.85); }
.dk-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0 8px; font-size: .9em; }
.dk-tools { display: flex; gap: 6px; }
.dk-tools button { min-width: 34px; height: 30px; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; background: transparent; color: inherit; cursor: pointer; font-size: 16px; }
.dk-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.dk-thumb { flex: 0 0 auto; width: 96px; padding: 0; border: 2px solid transparent; border-radius: 4px; background: none; cursor: pointer; opacity: .6; }
.dk-thumb img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.dk-thumb.on { border-color: #fff; opacity: 1; }
.pp-deck:fullscreen { background: #111; padding: 12px; display: flex; flex-direction: column; }
.pp-deck:fullscreen .dk-stage { flex: 1; height: auto; }

/* explore-in-3D box: label and arrow pointing at a snip of the model */
.pp-model { display: inline-flex; align-items: center; gap: 14px; padding: 8px 8px 8px 16px; border: 1.5px solid rgba(255,255,255,.75); border-radius: 6px; text-decoration: none; color: inherit; transition: background .2s; }
.pp-model:hover { background: rgba(255,255,255,.08); }
.pp-model span { font-weight: 600; white-space: nowrap; }
.pp-model i { font-style: normal; font-size: 1.2em; }
.pp-model img { width: 112px; height: 64px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(255,255,255,.4); display: block; }