/* Real product screenshots: keep the full interface visible in case details. */
.yupi-project {
  background:var(--depth-sky);
  color:var(--studio-ink);
}
.yupi-project .project-tag,
.yupi-project .depth-project-copy>p {color:var(--studio-muted);}
.yupi-scene {
  position:relative;
  width:100%;
  max-width:470px;
  min-width:0;
  height:470px;
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
  perspective:1200px;
}
.yupi-screen {
  position:absolute;
  display:block;
  overflow:hidden;
  background:var(--studio-ink);
  border:4px solid var(--studio-ink);
  border-radius:20px;
  box-shadow:var(--depth-shadow);
  transition:transform var(--duration-reveal) var(--ease-reveal);
}
.yupi-screen img {display:block;width:100%;height:auto;}
.yupi-screen-platform {
  width:250px;
  left:0;
  top:10px;
  transform:rotateY(8deg) rotateZ(-5deg);
}
.yupi-screen-telegram {
  width:180px;
  right:5px;
  top:64px;
  transform:rotateY(-9deg) rotateZ(6deg);
}
.yupi-scene-caption {
  position:absolute;
  bottom:0;
  left:0;
  right:15px;
  font-size:8px;
  line-height:1.6;
  letter-spacing:.055em;
  color:var(--studio-muted);
}
.yupi-scene:hover .yupi-screen-platform {transform:rotateY(3deg) rotateZ(-3deg) translateY(-5px);}
.yupi-scene:hover .yupi-screen-telegram {transform:rotateY(-3deg) rotateZ(4deg) translateY(-5px);}
.case-details-list {padding-left:21px;margin:4px 0 24px;color:var(--studio-muted);font-size:15px;line-height:1.6;}
.case-details-list li+li {margin-top:10px;}
.case-outcome {padding:18px 20px;background:var(--studio-paper);border-left:3px solid var(--studio-blue);border-radius:0 10px 10px 0;}
.case-proof-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:30px 0;align-items:start;}
.case-proof {min-width:0;margin:0;}
.case-proof img {display:block;width:100%;height:auto;border:1px solid var(--studio-line);border-radius:12px;}
.case-proof figcaption {margin-top:12px;color:var(--studio-muted);font-size:12px;line-height:1.6;}
#case-dialog[data-project="yupi"] .case-proof-grid {max-width:620px;margin-left:auto;margin-right:auto;}
@media (max-width:1100px) and (min-width:768px) {
  .yupi-screen-platform {width:225px;}
  .yupi-screen-telegram {width:155px;right:-15px;top:100px;}
}
@media (max-width:767px) {
  .gallery-panel .yupi-scene {height:395px;margin-top:20px;max-width:350px;justify-self:center;}
  .yupi-screen-platform {width:205px;left:2px;top:10px;}
  .yupi-screen-telegram {width:145px;right:0;top:58px;}
  .yupi-scene-caption {font-size:7px;bottom:12px;text-align:center;}
  .case-proof-grid {gap:16px;}
}
@media (max-width:480px) {
  .case-proof-grid {grid-template-columns:minmax(0,1fr);max-width:310px;margin-left:auto;margin-right:auto;gap:28px;}
  #case-dialog[data-project="yupi"] .case-proof-grid {max-width:310px;}
  .case-outcome {padding:15px;}
}
@media (max-width:360px) {
  .yupi-screen-platform {width:180px;}
  .yupi-screen-telegram {width:130px;top:64px;}
  .gallery-panel .yupi-scene {height:355px;}
}
@media (prefers-reduced-motion:reduce) {
  .yupi-screen {transition:none;}
  .yupi-scene:hover .yupi-screen-platform {transform:rotateY(8deg) rotateZ(-5deg);}
  .yupi-scene:hover .yupi-screen-telegram {transform:rotateY(-9deg) rotateZ(6deg);}
}

/* Case evidence uses one quiet frame instead of mismatched image backdrops. */
.project-gallery .case-showcase-media,
.project-gallery .case-showcase-card-featured .case-showcase-media {
  height:auto;
  aspect-ratio:4/3;
  background:#111725;
  border:1px solid rgb(255 255 255 / .1);
  box-shadow:0 16px 42px rgb(7 12 28 / .12);
}
.project-gallery .case-showcase-media::before {display:none;}
.project-gallery .case-showcase-media img {
  width:90%;
  height:86%;
  max-width:90%;
  object-fit:contain;
  transform:none;
  filter:none;
}
.project-gallery .case-showcase-media img.case-portrait {
  width:auto;
  max-width:80%;
  height:88%;
  transform:none;
}
.project-gallery .case-showcase-card:hover .case-showcase-media img,
.project-gallery .case-showcase-card:focus-visible .case-showcase-media img {
  transform:none;
  filter:none;
}
#case-dialog #case-content>.case-introduction {
  grid-column:1/-1;
  max-width:880px;
  padding:0 0 clamp(24px,3vw,40px);
  border-bottom:1px solid rgb(255 255 255 / .16);
}
#case-dialog .case-introduction .case-subtitle {margin:0 0 14px;}
#case-dialog .case-introduction p {
  margin:0;
  color:#e8ebf4;
  font-size:clamp(20px,2.25vw,32px);
  line-height:1.22;
  letter-spacing:-.035em;
}
#case-dialog #case-content>.case-hero-media {
  grid-column:1/-1;
  display:grid;
  place-items:center;
  width:100%;
  min-height:0;
  aspect-ratio:16/10;
  margin:0 0 clamp(14px,2vw,28px);
  overflow:hidden;
  border:1px solid rgb(255 255 255 / .13);
  border-radius:clamp(20px,2.4vw,38px);
  background:#111725;
}
#case-dialog #case-content>.case-hero-media>.case-image,
#case-dialog[data-project="art"] #case-content>.case-hero-media>.case-image,
#case-dialog[data-project="workshop"] #case-content>.case-hero-media>.case-image {
  display:block;
  width:100%;
  max-width:100%;
  height:100%;
  max-height:none;
  margin:0;
  padding:clamp(12px,2vw,28px);
  border:0;
  border-radius:0;
  background:none;
  object-fit:contain;
  box-sizing:border-box;
}
#case-dialog #case-content>.case-hero-media>.case-image[src*="codix"],
#case-dialog #case-content>.case-hero-media>.case-image[src*="workshop"] {
  padding:clamp(12px,1.5vw,20px);
}
#case-dialog .case-proof-grid {align-items:stretch;}
#case-dialog .case-proof {display:flex;flex-direction:column;}
#case-dialog .case-proof-media {
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  border:1px solid rgb(255 255 255 / .13);
  border-radius:clamp(16px,2vw,24px);
  background:#111725;
}
#case-dialog .case-proof-media img {
  display:block;
  width:100%;
  height:100%;
  padding:12px;
  border:0;
  border-radius:0;
  object-fit:contain;
  box-sizing:border-box;
}
#case-dialog .case-proof-media--natural {display:block;aspect-ratio:auto;cursor:zoom-in;}
#case-dialog .case-proof-media--natural img {height:auto;padding:0;}
#case-dialog .case-proof-media:focus-visible {outline:3px solid var(--studio-blue);outline-offset:4px;}
@media(max-width:767px) {
  .project-gallery .case-showcase-media,
  .project-gallery .case-showcase-card-featured .case-showcase-media {aspect-ratio:4/3;height:auto;}
  #case-dialog #case-content>.case-hero-media {aspect-ratio:4/3;}
  #case-dialog .case-proof-media {aspect-ratio:1/1;}
  #case-dialog .case-proof-media--natural {aspect-ratio:auto;}
  #case-dialog .case-introduction p {font-size:clamp(21px,6vw,27px);}
}