.diagonal-gallery{position:relative;width:100%;height:auto;background:transparent;color:#111;font-family:'Helvetica Neue',sans-serif;overflow:hidden;user-select:none;border-radius:8px;touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent}
.diagonal-gallery:active{cursor:grabbing}
.diagonal-gallery .diagonal-stage{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:none;overflow:hidden}
.diagonal-gallery .diagonal-track{position:relative;width:150vw;height:100%;transform:rotate(-10deg);will-change:transform;pointer-events:auto;display:flex;align-items:center}
.diagonal-gallery .card{position:absolute;top:50%;left:0;transform:translateY(-50%);width:25vw;aspect-ratio:689/530;min-width:250px;border-radius:4px;overflow:hidden;-webkit-user-drag:none;will-change:transform}
.diagonal-gallery .card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.diagonal-gallery .story-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;z-index:20;background:#e8e6e1;cursor:auto;touch-action:none}
.diagonal-gallery .story-wrapper{touch-action:pan-y}
.diagonal-gallery .dg-indicator{
  position:absolute;
  top:10px;
  right:12px;
  display:flex;
  align-items:center;
  gap:8px;
  z-index:30;
}
.diagonal-gallery .dg-close{
  border:1px solid #e66a00;
  background:#fff;
  color:#e66a00;
  border-radius:16px;
  padding:4px 10px;
  font-size:12px;
  cursor:pointer;
}
.diagonal-gallery .dg-close:hover{
  background:#fff;
  color:#c85c00;
}
.diagonal-gallery .dg-hint{
  background:rgba(0,0,0,.6);
  color:#fff;
  padding:4px 10px;
  border-radius:12px;
  font-size:12px;
}
.diagonal-gallery .story-container{display:flex;height:100%;width:auto;will-change:transform}
.diagonal-gallery .panel{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0 5%;box-sizing:border-box}
.diagonal-gallery .hero-img-placeholder{width:80%;height:80%;border-radius:8px}
.diagonal-gallery .hero-img-placeholder img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.diagonal-gallery .panel-content{background:#f0f0f0;border-right:1px solid #ddd;display:flex;gap:20px;align-items:center;justify-content:center}
.diagonal-gallery .content-img{width:45%;height:70%;object-fit:cover;border-radius:4px}
.diagonal-gallery .content-img,
.diagonal-gallery .hero-img-placeholder img{
  -webkit-user-drag:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  pointer-events:none;
  touch-action:none;
}
.diagonal-gallery .content-text{width:45%;padding:20px;box-sizing:border-box}
.diagonal-gallery .content-text h2{font-size:2rem;margin-bottom:15px}
.diagonal-gallery .hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:100;background:rgba(0,0,0,.7);color:#fff;padding:8px 16px;border-radius:20px;pointer-events:none;font-size:.8rem;transition:opacity .3s;white-space:nowrap}
@media screen and (max-width:768px){
  .diagonal-gallery .panel{width:100%}
  .diagonal-gallery .panel-content{flex-direction:column;padding:12px;height:100%}
  .diagonal-gallery .panel-hero .hero-img-placeholder{width:100%;height:auto}
  .diagonal-gallery .panel-hero .hero-img-placeholder img{width:100%;height:auto;max-height:60vh;object-fit:contain}
  .diagonal-gallery .content-img{width:100%;height:52%;max-height:none;margin:0;object-fit:contain}
  .diagonal-gallery .content-text{width:100%;height:48%;padding:10px 0;overflow:hidden}
  .diagonal-gallery .content-text h2{font-size:clamp(1.1rem,5.5vw,1.5rem);line-height:1.2;margin-bottom:8px}
  .diagonal-gallery .content-text p{font-size:clamp(.85rem,3.8vw,1rem);line-height:1.4;margin:0}
  .diagonal-gallery .card{width:auto}
  .diagonal-gallery .story-wrapper{overflow:hidden}
}