/* project-dialog.css — Project detail dialog (two-column desktop layout, stacked on mobile). */

.dialog-backdrop{ position: fixed; inset: 0px; z-index: 100; background: rgba(0, 0, 0, 0.933); display: flex; align-items: center; justify-content: center; padding: 28px; overflow-y: auto; overscroll-behavior: contain; }
.dialog-heading{ display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.dialog-heading > .eyebrow{ color: var(--red); font-size: 10px; }
.dialog-heading .icon-button{ border: 0px; }
.dialog-media{ position: relative; aspect-ratio: 16 / 9; background: rgb(5, 5, 5); min-width: 0px; isolation: isolate; }
.dialog-media > iframe{ width: 100%; height: 100%; position: absolute; inset: 0px; border: 0px; z-index: 2; }
.dialog-media > .media-image{ width: 100%; height: 100%; }
.dialog-media.still{ aspect-ratio: 16 / 9; max-height: 60dvh; }
.dialog-media.still > .media-image > img{ object-fit: contain; }
.dialog-description{ display: flex; justify-content: space-between; align-items: start; gap: 30px; padding: 24px; }
.dialog-description h2{ font-size: clamp(20px, 3vw, 29px); letter-spacing: -0.04em; line-height: 1.3; margin-bottom: 10px; }
.dialog-description .accent{ font-size: 11px; }
.dialog-description p{ font-size: 12px; color: var(--muted); margin-top: 12px; max-width: 630px; }
.dialog-description > .outline-button{ flex-shrink: 0; margin-top: 4px; }
.embed-note{ font-size: 10px; color: var(--muted); padding: 0px 24px 22px; }
.loading-ring{ display: block; width: 25px; height: 25px; border-width: 1px; border-style: solid; border-right-color: rgb(76, 34, 42); border-bottom-color: rgb(76, 34, 42); border-left-color: rgb(76, 34, 42); border-image: none; border-top-color: var(--red); border-radius: 50%; animation: 1s linear 0s infinite normal none running spin; }
.render-controls{ padding: 12px 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.render-controls > div:first-child{ display: flex; gap: 8px; }
.render-controls > div:first-child > button{ min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); font-size: 11px; }
.render-controls > div:first-child > button.selected{ background: var(--red); border-color: var(--red); }
.shot-controls{ display: flex; align-items: center; gap: 12px; }
.shot-controls > span{ font-size: 9px; white-space: nowrap; }
@keyframes spin{ 
  100% { transform: rotate(360deg); }
}

@media (max-width: 800px){
.dialog-description{ gap: 20px; }
.dialog-description > .outline-button{ font-size: 10px; padding: 10px 12px; }
}

@media (max-width: 600px){
.dialog-backdrop{ padding: 12px; }
.dialog-heading{ padding: 7px 12px; }
.dialog-media, .dialog-media.still{ aspect-ratio: 4 / 3; }
.dialog-description{ flex-direction: column; padding: 18px; gap: 16px; }
.dialog-description h2{ font-size: 23px; }
.dialog-description p{ font-size: 11px; }
.dialog-description > .outline-button{ width: 100%; font-size: 11px; }
.embed-note{ font-size: 9px; padding: 0px 18px 18px; }
.render-controls{ padding: 10px 12px; flex-wrap: wrap; }
.render-controls > div:first-child{ width: 100%; gap: 6px; }
.render-controls > div:first-child > button{ padding: 10px 12px; flex: 1 1 0%; font-size: 10px; }
.shot-controls{ width: 100%; justify-content: center; gap: 20px; }
.render-controls > div:first-child{ flex-wrap: wrap; }
.render-controls > div:first-child > button{ flex: 1 1 26%; }
}

.loading-ring.paused{ animation: auto ease 0s 1 normal none running none; }
#dlg{width:min(1100px,94vw);max-height:92vh;padding:0;border:1px solid var(--line);background:#101010;color:var(--ink);overflow:auto}
#dlg::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(6px)}
#dlg #x{position:absolute;top:10px;right:10px;z-index:3;width:40px;height:40px;border-radius:50%;background:rgba(9,9,9,.8);border:1px solid var(--line);font-size:20px;line-height:1;cursor:pointer}
#dlg .m-body{display:grid;gap:0}

@media(min-width:900px){
#dlg .m-body{grid-template-columns:1.6fr 1fr}
#dlg .m-body.vert{grid-template-columns:auto 1fr}
}

#dlg .player{background:#000;aspect-ratio:16/9;width:100%}
#dlg .vert .player{aspect-ratio:9/16;height:min(82vh,760px);width:auto;max-width:100%;margin:auto}
#dlg iframe{width:100%;height:100%;border:0;display:block}
#dlg .m-info{padding:28px;align-self:center}
#dlg .m-info h3{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(26px,3vw,40px);text-transform:uppercase;margin:10px 0 12px}
#dlg .m-info p{color:var(--muted);line-height:1.7}
#dlg dl{margin:20px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13px}
#dlg dt{color:var(--muted)}
#dlg dd{margin:0}
#dlg .fallback{display:grid;place-items:center;height:100%;color:var(--muted)}
#dlg{overflow:hidden;max-height:none;width:min(1180px,94vw)}
#dlg .m-body{max-height:92vh;overflow-y:auto;overflow-x:hidden;grid-template-columns:minmax(0,1fr)}
#dlg .m-body>*{min-width:0}
#dlg .m-body{background:#0b0909}
#dlg .m-info{background:#101010}
#dlg #x{z-index:20}
#dlg .player{position:relative;overflow:hidden;isolation:isolate}
#dlg .m-info{align-self:start;padding:28px 24px 32px}
#dlg .m-info .eyebrow{display:flex;align-items:center;gap:10px;color:var(--red);font-size:11px;letter-spacing:.16em}
#dlg .m-info .eyebrow::before{content:"";width:22px;height:1px;background:var(--red)}
#dlg .m-info h3{font-size:clamp(28px,6vw,40px);line-height:1;margin:14px 0 16px}
#dlg .m-info p{font-size:14px;line-height:1.75;max-width:62ch;margin:0}
#dlg dl{margin:24px 0 0;grid-template-columns:96px minmax(0,1fr);gap:0 18px;border-top:1px solid var(--line);font-size:13px}
#dlg dt,#dlg dd{padding:10px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
#dlg dt{text-transform:uppercase;letter-spacing:.12em;font-size:10px;padding-top:12px}

@media(min-width:900px){
#dlg .m-body{overflow:hidden;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:stretch}
#dlg .m-body.vert{grid-template-columns:auto minmax(0,1fr)}
#dlg .player{align-self:center}
#dlg .m-info{align-self:stretch;overflow-y:auto;max-height:92vh;padding:36px 34px;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:safe center}
}

#dlg .player .ph{display:grid;place-items:center}