/* Media follows the established white surfaces, system typography and purple feedback. */
.project-detail .project-main{min-width:0}
.project-media{min-width:0;scroll-margin-top:calc(var(--topbar-height) + var(--space-20))}
.project-media-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);flex-wrap:wrap;margin-bottom:var(--space-16)}
.project-media-heading h2{padding:0;border:0;margin:0;font-size:var(--font-size-section-title);font-weight:var(--font-weight-bold)}
.project-media-total,.project-media-position,.project-media-viewer-position,.project-media-note{font-size:var(--font-size-caption);color:var(--ink-muted-readable);font-variant-numeric:tabular-nums}
.project-media-figure{margin:0}
.project-media-stage,.project-media-viewer-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/10;border-radius:var(--radius-input);background:var(--bg);overflow:hidden}
.project-media-stage img,.project-media-stage video,.project-media-picture{width:100%;height:100%;object-fit:contain}
.project-media-stage video{position:absolute;inset:0;background:var(--bg)}
.project-media-picture{position:absolute;inset:0;border:0;padding:0;background:transparent;cursor:zoom-in;display:block}
.project-media-picture img{display:block}
.project-media-picture:focus-visible{outline-offset:calc(-1 * var(--space-4))}
.project-media-enlarge{position:absolute;right:var(--space-12);bottom:var(--space-12);display:flex;align-items:center;gap:var(--space-6);padding:var(--space-6) var(--space-10);border-radius:var(--radius-pill);background:var(--card);box-shadow:var(--shadow);font-size:var(--font-size-card-link);font-weight:var(--font-weight-semibold);color:var(--brand);transition:background var(--motion-duration) var(--motion-easing),transform var(--motion-duration) var(--motion-easing)}
.project-media-enlarge .ui-icon{width:var(--space-16);height:var(--space-16)}
.project-media-picture:hover .project-media-enlarge{background:var(--brand-soft)}
.project-media-picture:active .project-media-enlarge{transform:translateY(var(--press-offset))}
.project-media-caption,.project-media-viewer-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);margin-top:var(--space-10)}
.project-media-description,.project-media-viewer-caption{min-width:0;overflow-wrap:anywhere;color:var(--ink-2);font-size:var(--font-size-small);font-weight:var(--font-weight-regular)}
.project-media-controls{display:flex;align-items:center;gap:var(--space-6);flex:none}
.project-media-position,.project-media-viewer-position{margin-right:var(--space-6);white-space:nowrap}
.project-media-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--touch-target-min);height:var(--touch-target-min);padding:0;border:var(--border-width) solid var(--line);border-radius:var(--radius-pill);background:var(--card);color:var(--ink-2);transition:background var(--motion-duration) var(--motion-easing),border-color var(--motion-duration) var(--motion-easing),transform var(--motion-duration) var(--motion-easing)}
.project-media-icon:hover:not(:disabled){background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
.project-media-icon:active:not(:disabled){transform:translateY(var(--press-offset))}
.project-media-icon:disabled{background:var(--bg);color:var(--ink-3);cursor:not-allowed}
.project-media-thumbnails{display:flex;flex-wrap:wrap;gap:var(--space-10);padding:var(--space-4);margin:var(--space-8) calc(-1 * var(--space-4)) 0}
.project-media-thumb{flex:0 0 var(--space-96);display:flex;flex-direction:column;gap:var(--space-6);min-width:var(--touch-target-min);padding:var(--space-4);border:var(--space-2) solid transparent;border-radius:var(--radius-input);background:var(--card);color:var(--ink-2);scroll-snap-align:start;transition:background var(--motion-duration) var(--motion-easing),border-color var(--motion-duration) var(--motion-easing),transform var(--motion-duration) var(--motion-easing)}
.project-media-thumb:hover{background:var(--bg)}
.project-media-thumb:active{transform:translateY(var(--press-offset))}
.project-media-thumb[aria-pressed=true]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.project-media-thumb-preview{display:flex;width:100%;aspect-ratio:16/10;align-items:center;justify-content:center;background:var(--bg);border-radius:var(--radius-tag);overflow:hidden;position:relative}
.project-media-thumb-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.project-media-thumb-preview img:not([data-loaded]){opacity:0}
.project-media-thumb-preview>.ui-icon{width:var(--space-24);height:var(--space-24)}
.project-media-thumb-label{font-size:var(--font-size-caption);font-weight:var(--font-weight-regular)}
.project-media-note{margin-top:var(--space-10)}
.project-media-source{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8);min-width:0;overflow-wrap:anywhere;color:var(--ink-muted-readable);font-size:var(--font-size-caption);line-height:var(--line-height-body)}
.project-media-source a{display:inline-flex;align-items:center;min-height:var(--touch-target-min);color:var(--brand);font-weight:var(--font-weight-semibold);transition:color var(--motion-duration) var(--motion-easing)}
.project-media-source a:hover{color:var(--brand-hover)}
.project-media-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-10);position:absolute;inset:0;padding:var(--space-16);background:var(--bg);color:var(--ink-muted-readable);text-align:center;font-size:var(--font-size-small)}
.project-media-state>.ui-icon{width:var(--space-28);height:var(--space-28)}
.project-media-state[role=alert] p{color:var(--red-ink)}
.project-media-empty{display:flex;flex-direction:column;gap:var(--space-14);align-items:center;padding:var(--space-60) 0;text-align:center;color:var(--ink-muted-readable);font-size:var(--font-size-body)}
.project-media-empty>.ui-icon{width:var(--space-28);height:var(--space-28)}
.modal.project-media-modal{width:min(var(--container-max),100%);position:relative}
.project-media-modal .modal-close{position:absolute;right:var(--space-28);top:var(--space-26);width:var(--touch-target-min);height:var(--touch-target-min);display:inline-flex;align-items:center;justify-content:center;float:none}
.project-media-viewer h3{padding-right:var(--space-56);min-height:var(--touch-target-min);display:flex;align-items:center;overflow-wrap:anywhere}
.project-media-viewer-stage{aspect-ratio:auto;height:clamp(var(--space-96),56vh,var(--container-max));height:clamp(var(--space-96),56dvh,var(--container-max))}
.project-media-viewer-stage img{width:100%;height:100%;object-fit:contain}
.project-media-viewer-stage.is-zoomed{display:block;overflow-y:auto;touch-action:pan-y}
.project-media-viewer-stage.is-zoomed img{display:block;width:auto;height:auto;max-width:100%;max-height:none;margin-inline:auto}
.project-media-viewer-tools{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-12);flex-wrap:wrap}
.project-media-viewer-tools .btn{padding:var(--space-8) var(--space-16);min-height:var(--touch-target-min)}
.project-media [hidden],.project-media-viewer [hidden]{display:none!important}
@media(max-width:640px){
  .project-media-caption,.project-media-viewer-footer{align-items:flex-start;flex-wrap:wrap;gap:var(--space-6)}
  .project-media-description,.project-media-viewer-caption{flex:1 1 var(--space-96)}
  .project-media-thumb{flex-basis:var(--space-80)}
  .project-media-enlarge{right:var(--space-8);bottom:var(--space-8);padding:var(--space-4) var(--space-8)}
  .project-media-state{gap:var(--space-6);padding:var(--space-8)}
  .project-media-state .btn{padding:var(--space-6) var(--space-14)}
  .project-media-viewer-stage{height:40vh;height:40dvh}
}
/* The shared modal must also cover the detail page's fixed mobile actions. */
@media(max-width:640px){.project-detail~.mobile-actions{z-index:var(--z-nav)}}
@media(prefers-reduced-motion:reduce){.project-media-icon,.project-media-thumb,.project-media-enlarge,.project-media-source a{transition:none}.project-media-icon:active:not(:disabled),.project-media-thumb:active,.project-media-picture:active .project-media-enlarge{transform:none}}