/* Client cards keep their bento layout until a video is opened. */
.project-video-trigger {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent; text-align: left;
  cursor: pointer;
}
.project-video-trigger:focus-visible { outline: 3px solid var(--acid); outline-offset: -5px; }
.project-video-trigger:hover img { transform: scale(1.04); filter: saturate(1) contrast(1.04); }
.project-video-trigger:hover .media-overlay strong { background: var(--paper); }
.project-video-panel[hidden], .project-video[hidden], .project-video-status[hidden] { display: none; }
.project-video-panel { position: absolute; inset: 0; background: var(--ink); color: var(--paper); }
.project-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #111; cursor: auto; }
.project-video-close {
  position: absolute; z-index: 2; top: 12px; right: 12px; display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; border: 1px solid var(--ink); background: var(--acid); color: var(--ink);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; cursor: pointer;
}
.project-video-close span { font: 22px/1 var(--sans); }
.project-video-close:hover { background: var(--paper); }
.project-video-close:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.project-video-status {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 15px; padding: 60px 24px; text-align: center;
  background: radial-gradient(ellipse at 50% 20%, #3c3e31, var(--ink) 70%);
}
.project-video-symbol { display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid var(--acid); border-radius: 50%; color: var(--acid); font-size: 32px; }
.project-video-status strong { font-size: 22px; letter-spacing: -.04em; }
.project-video-status p { max-width: 230px; margin: 0; color: #c5c6bc; font-size: 14px; line-height: 1.5; }
.project-grid.has-open-video { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.project-grid.has-open-video .project-card { grid-column: var(--video-column); grid-row: var(--video-row); }
.project-grid .project-card.is-video-open {
  grid-row: 1 / 3; width: min(100%, 390px, calc((100svh - 290px) * 9 / 16 + 16px)); justify-self: center; align-self: start; scroll-margin-top: 112px;
}
.project-grid .project-card.is-video-open .project-media {
  flex: none; min-height: 0; width: 100%; aspect-ratio: 9 / 16; background: var(--ink);
}
.project-card.is-video-open .project-info { padding: 16px 12px; }
.project-card.is-video-open .project-info h3 { font-size: 22px; }
.project-card.is-video-open .project-video-trigger { visibility: hidden; }
.project-card:not(.is-video-open) { cursor: pointer; }
body.cursor-on-video .cursor-dot, body.cursor-on-video .cursor-ring { opacity: 0; }
@media (max-width: 620px) {
  .project-grid.has-open-video { grid-template-columns: 1fr; grid-template-rows: none; }
  .project-grid.has-open-video .project-card { grid-column: auto; grid-row: auto; }
  .project-grid .project-card.is-video-open { grid-row: auto; scroll-margin-top: 88px; }
}