/* Work detail only; common button appearance stays in buttons.css. */
.portfolio-detail { grid-template-areas: "work heading" "work info"; grid-template-rows: auto 1fr; row-gap: var(--space-18); }
.portfolio-detail-heading { grid-area: heading; padding: var(--space-8); }
.portfolio-detail-heading h1 { margin: 0; font-size: clamp(var(--type-title), 2.1vw, 30px); line-height: 1.28; overflow-wrap: anywhere; }
.portfolio-detail-heading p { margin: var(--space-8) 0 0; color: var(--text-muted); font-size: var(--type-caption); }
.portfolio-detail-work { grid-area: work; scroll-margin-top: 140px; }
.portfolio-detail-info { grid-area: info; }
.portfolio-device-picker { display: flex; gap: var(--space-20); padding: 0 0 var(--space-16); margin: 0; border: 0; }
.portfolio-device-picker[hidden], .portfolio-detail-expand[hidden] { display: none; }
.portfolio-device-picker legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.portfolio-device-picker label { display: inline-flex; align-items: center; gap: var(--space-6); cursor: pointer; font-size: var(--type-ui); }
.portfolio-detail-work.is-gallery-ready .portfolio-originals--columns { grid-template-columns: minmax(0, 1fr); }
.portfolio-detail-work:not(.is-comparing)[data-device="pc"] .portfolio-originals-mobile,
.portfolio-detail-work:not(.is-comparing)[data-device="mobile"] .portfolio-originals-pc { display: none; }
.portfolio-detail-work.is-gallery-ready .portfolio-originals { padding: 0; background: var(--surface); }
.portfolio-detail-work.is-gallery-ready .portfolio-detail-media { border: 0; border-radius: 0; background: var(--surface); box-shadow: none; }
.portfolio-detail-expand { width: 100%; margin-top: var(--space-16); }
@media (max-width: 860px) {
  .portfolio-detail { grid-template-areas: "heading" "work" "info"; grid-template-rows: auto; gap: var(--space-24); }
  .portfolio-detail-heading { padding: 0; }
  .portfolio-detail-work { scroll-margin-top: 80px; }
  .portfolio-detail-info { order: initial; }
  /* No script: all originals remain readable, phone captures first. */
  .portfolio-detail-work .portfolio-originals--columns { grid-template-columns: minmax(0, 1fr); }
  .portfolio-detail-work .portfolio-originals-mobile { order: -1; }
.portfolio-detail-work.is-collapsible:not(.is-expanded) .portfolio-detail-media { max-height: 800px; overflow: hidden; mask-image: linear-gradient(to bottom, black calc(100% - 72px), transparent); }
  .portfolio-detail-work.is-collapsible:not(.is-expanded) .portfolio-detail-media:focus-within { max-height: none; mask-image: none; }

}

/* Wide gallery: preserve the original PC/mobile comparison, even with a sidebar. */
.portfolio-detail-work.is-comparing .portfolio-originals--columns { grid-template-columns: minmax(0, 2.7fr) minmax(0, 1fr); }
.portfolio-detail-work.is-comparing .portfolio-originals-mobile { order: initial; }