/* Apple Invites reference: a focused photograph with two gently fanned neighbours.
   Rebuilt with CSS transitions in the existing React gallery; no motion dependency. */
.project-stage.project-showcase {
  --ease-gallery: cubic-bezier(.23,1,.32,1);
  --invite-width: clamp(300px,36vw,440px);
  --invite-height: 440px;
  --rz-card: clamp(22px,2vw,26px);
  --rz-card-leading: 1.2;
  --rz-caption: 13px;
  display: block;
  overflow: hidden;
  background: var(--bg);
  padding-inline: 0;
}
.project-showcase .gallery-scene { position: relative; display: block; width: 100%; min-width: 0; }
.project-showcase .gallery-viewport { position: relative; height: 530px; width: 100%; touch-action: pan-y; isolation: isolate; }
.project-showcase .gallery-slide, .project-showcase .gallery-slide.is-shown {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: block;
  width: var(--invite-width);
  height: var(--invite-height);
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #0b0d12;
  box-shadow: 0 20px 36px rgb(0 0 0 / .28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: center;
  transition: transform 600ms var(--ease-gallery), opacity 450ms var(--ease-gallery), visibility 600ms;
}
.project-showcase .gallery-slide.is-shown { z-index: 2; opacity: .64; visibility: visible; pointer-events: auto; }
.project-showcase .gallery-slide.is-active { z-index: 4; opacity: 1; }
.project-showcase .gallery-image { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; background-position: center; background-size: cover; }
.project-showcase .gallery-image img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center; }
.project-showcase .gallery-image::before { content: ""; position: absolute; z-index: 1; inset: 38% -24px -24px; background-image: inherit; background-position: center bottom; background-size: auto var(--invite-height); filter: blur(16px); mask-image: linear-gradient(transparent,#000 62%); -webkit-mask-image: linear-gradient(transparent,#000 62%); }
.project-showcase .gallery-image::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg,transparent 22%,rgb(7 10 16 / .1) 38%,rgb(7 10 16 / .88) 71%,rgb(7 10 16 / .98)); }
html[data-rezim-system] .project-stage.project-showcase .gallery-caption { position: absolute; z-index: 3; inset: auto 0 0; display: flex; flex-direction: column; padding: 26px!important; gap: 10px!important; color: #fff; text-align: center; }
.project-showcase .gallery-caption h3 { margin: 0; min-height: 0; text-wrap: balance; overflow-wrap: anywhere; }
.project-showcase .gallery-type { margin-top: 6px; color: #e2e6ee; font-size: 13px; line-height: 1.4; }
.project-showcase .gallery-details { display: grid; gap: 3px; min-height: 0; color: #d4dae5; line-height: 1.45; overflow-wrap: anywhere; }
.project-showcase .gallery-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 20px; margin-top: 4px; }
.project-showcase .gallery-actions a { display: inline-flex; align-items: center; min-height: 40px; margin: 0; color: #fff; font-size: 13px; line-height: 1.4; }
.project-showcase .gallery-case-pending { display: none; }
.project-showcase .gallery-select { position: absolute; z-index: 5; inset: 0; display: block; width: 100%; height: 100%; border: 0; border-radius: inherit; background: transparent; }
.project-showcase .gallery-select:focus-visible { outline: 3px solid var(--focus); outline-offset: -5px; }
.project-showcase .gallery-arrow { position: absolute; z-index: 6; top: calc(50% - 24px); display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #647084; border-radius: 50%; background: rgb(24 26 31 / .9); color: #fff; transition: background-color 180ms ease,border-color 180ms ease; }
.project-showcase .gallery-prev { left: 0; }
.project-showcase .gallery-next { right: 0; }
.project-showcase .gallery-arrow svg { width: 24px; height: 24px; }
@media (hover:hover) and (pointer:fine) {
  .project-showcase .gallery-arrow:hover { background: var(--blue); border-color: var(--blue); }
  .project-showcase .gallery-actions a:hover { color: var(--focus); }
}
@media (max-width:1000px) {
  .project-stage.project-showcase { --invite-height: 420px; }
  .project-showcase .gallery-viewport { height: 500px; }
  html[data-rezim-system] .project-stage.project-showcase .gallery-caption { padding: 20px!important; }
}
@media (max-width:760px) {
  .project-stage.project-showcase { --invite-width: min(78vw,360px); --invite-height: 430px; --rz-card: 23px; }
  .project-showcase .gallery-viewport { height: 500px; }
  .project-showcase .gallery-arrow { width: 44px; height: 44px; top: calc(50% - 22px); }
  .project-showcase .gallery-prev { left: -10px; }
  .project-showcase .gallery-next { right: -10px; }
}
@media (max-width:380px) {
  .project-stage.project-showcase { --invite-height: 420px; --rz-card: 21px; --rz-caption: 12px; }
  html[data-rezim-system] .project-stage.project-showcase .gallery-caption { padding: 18px!important; gap: 8px!important; }
}
.project-showcase[data-instant="true"] .gallery-slide { transition: none; }
@media (prefers-reduced-motion:reduce) { .project-showcase .gallery-slide { transition: opacity 150ms ease; } }

/* Pixel retains its own source photographs and project viewer. */
html[data-rezim-system] .section.project-showcase { padding-inline: var(--rz-page-pad)!important; }
.project-showcase { --blue:#315cff; --focus:#9eb4ff; }
.project-showcase .gallery-arrow svg { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.project-showcase .gallery-arrow:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
.project-showcase .gallery-caption h3 { font-size:var(--rz-card); font-weight:600; line-height:1.2; letter-spacing:-.015em; }
.project-showcase .gallery-actions a { text-decoration:underline; text-underline-offset:5px; }
.project-showcase .gallery-select[hidden] { display:none; }
.project-showcase .gallery-image img { transition:none; }
.no-js .project-showcase .gallery-arrow, .no-js .project-showcase .gallery-select { display:none; }