/* Real portfolio media: intact frames, readable captions and explicit states. */
/* Snapshot images must scale proportionally before decode or live-feed replacement.
   Width/height attributes reserve the ratio, not a fixed CSS pixel height. */
@media screen {
 .approved-selection .portfolio-grid > figure { margin:0; min-width:0; }
 .approved-selection img { display:block; width:100%; height:auto; object-fit:contain; }
}
.portfolio { margin-block:28px; min-width:0; }
.portfolio-status { margin:20px 0; color:#c5c7c3;  max-width:65ch; }
.portfolio-filters { display:flex; flex-wrap:wrap; gap:10px; }
.portfolio-filters button { min-height:44px; padding:10px 14px; border:1px solid #72766f; background:transparent; color:#f0f0f0;  cursor:pointer; }
.portfolio-filters button[aria-pressed="true"] { background:#f0f0f0; color:#0a0a0a; }
.portfolio-filters button:disabled { cursor:default; }
.portfolio-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 32px; align-items:start; }
.portfolio-card { margin:0; min-width:0; }
.portfolio-card-link { display:block; width:100%; padding:0; border:0; background:none; color:#f0f0f0; text-align:left; text-decoration:none; cursor:pointer; }
.portfolio-image-frame { position:relative; display:grid; place-items:center; overflow:hidden; width:100%; max-height:75svh; background:#111; }
.portfolio-image { display:block; width:100%; height:100%; min-height:0; object-fit:contain; }
.portfolio-image-error { display:grid; place-items:center; width:100%; min-height:180px; padding:24px; border:1px solid #72766f; color:#c5c7c3;  }
.portfolio-card-info { padding-top:16px; overflow-wrap:anywhere; }
.portfolio-card-title { display:block; margin:0 0 8px;  }
.portfolio-card-caption { margin:0 0 12px; color:#c5c7c3;  }
.portfolio-more { margin-top:32px; }
#portfolioDialog { position:fixed; max-width:min(96vw,1100px); width:1100px; max-height:calc(100svh - 32px); overflow:auto; padding:20px; background:#111; color:#f0f0f0; border:1px solid #72766f; }
#portfolioDialog::backdrop { background:rgba(0,0,0,.9); }
#portfolioDialog .dialog-top { display:flex; align-items:center; justify-content:space-between; gap:20px; }
#portfolioDialog .dialog-top h2 { margin:0;  overflow-wrap:anywhere; }
#portfolioDialog button { min-width:44px; min-height:44px; border:1px solid #72766f; color:#f0f0f0; background:transparent; padding:8px 14px;  cursor:pointer; }
.portfolio-dialog-image { display:grid; place-items:center; margin-block:20px; }
.portfolio-dialog-image .portfolio-image { width:auto; max-width:100%; max-height:calc(100svh - 260px); height:auto; }
#portfolioDialogCaption { color:#c5c7c3; overflow-wrap:anywhere;  }
#portfolioDialog .dialog-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
body[data-home-runtime] .portfolio .work-image img { filter:none; object-fit:contain; }
body[data-home-runtime] .portfolio .work-image::after { display:none; }
body[data-home-runtime] .portfolio .work-item:nth-child(even) { margin-top:0; }

body[data-home-runtime] .portfolio .work-tag { display:inline-block;  margin-top:12px; }
@media (min-width:1900px) { .portfolio-grid { gap:56px; } }
@media (max-width:760px) { .portfolio-grid { grid-template-columns:minmax(0,1fr); gap:32px; } .portfolio-image-frame { max-height:80svh; } }
@media (max-height:520px) and (orientation:landscape) { .portfolio-image-frame { max-height:none; } #portfolioDialog { max-height:100svh; width:100%; } .portfolio-dialog-image .portfolio-image { max-height:70svh; } }
@media (forced-colors:active) { .portfolio-card-link,.portfolio-filters button { border:1px solid ButtonText; } .portfolio-filters button[aria-pressed="true"] { outline:2px solid Highlight; } }