/* Album sizing */
.tpa-album{position:relative;width:100%;height:100dvh;margin:0;overflow:hidden;background:#000;}
@supports (height: 100svh){ .tpa-album{ height:100svh; } }
.tpa-book{position:relative;width:100%;height:100%;perspective:1600px;}

/* Pages */
.tpa-page{display:none;position:relative;width:100%;height:100%;background:#111;color:#fff;overflow:hidden;transition:transform .8s ease, box-shadow .4s ease;}
.tpa-book .tpa-page:first-child{display:block;}
.tpa-page.is-flipping{transform:rotateY(-8deg);}

/* Overlay arrows & counter */
.tpa-overlay{position:absolute;inset:0;pointer-events:none;z-index:10;}
.tpa-arrow{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:#fff;border:none;cursor:pointer;font:700 20px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;transition:background .2s ease, transform .1s ease;user-select:none;}
.tpa-arrow:hover{background:rgba(0,0,0,.7);}
.tpa-arrow:active{transform:translateY(-50%) scale(.98);}
.tpa-prev{left:16px;}
.tpa-next{right:16px;}
.tpa-counter{position:absolute;right:16px;bottom:14px;background:rgba(0,0,0,.45);color:#fff;padding:6px 10px;border-radius:999px;font:600 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;}

/* Layouts */
.tpa-single{position:absolute;inset:0;display:grid;place-items:center;}
.tpa-single img{max-width:100%;max-height:100%;object-fit:contain;background:#000;display:block;}

.tpa-album .tpa-single img{
  width:100% !important;
  height:100% !important;
  object-fit:contain;
  display:block;
  background:#000;
}


.tpa-three{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:4px;box-sizing:border-box;}
.tpa-three .half{grid-row:1 / span 2;}
.tpa-three img{width:100%;height:100%;object-fit:cover;display:block;}

.tpa-gallery{position:absolute;inset:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-auto-rows:180px;gap:8px;padding:10px;box-sizing:border-box;overflow:auto;}
.tpa-gallery img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block;cursor:zoom-in;}

@media (max-width:768px){
  .tpa-three{grid-template-columns:1fr;grid-auto-rows:auto;}
  .tpa-three .half{grid-row:auto;}
  .tpa-arrow{width:46px;height:46px;}
}

/* Lightbox */
body.tpa-no-scroll{overflow:hidden;}
.tpa-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:9999;}
.tpa-lightbox.is-open{display:flex;}
.tpa-lb-img{max-width:95vw;max-height:90vh;object-fit:contain;display:block;box-shadow:0 20px 60px rgba(0,0,0,.6);}
.tpa-lb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-weight:700;font-size:26px;cursor:pointer;}
.tpa-lb-prev{left:18px;}
.tpa-lb-next{right:18px;}
.tpa-lb-close{position:absolute;top:14px;right:16px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:22px;cursor:pointer;}
.tpa-lb-arrow:hover,.tpa-lb-close:hover{background:rgba(255,255,255,.3);}

/* Ensure the single-image container fills the page area */
.tpa-single{
  position:absolute; inset:0;
  display:grid; place-items:center;
}

/* Force the image to scale inside the page without cropping (portrait + landscape) */
.tpa-album .tpa-page .tpa-single img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  display:block;
  background:#000;
}

.tpa-album{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* Single page: center image and scale without cropping (portrait or landscape) */
.tpa-album .tpa-page .tpa-single{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}

/* Keep aspect ratio, fill as much as possible; defeats theme img rules */
.tpa-album .tpa-page .tpa-single img{
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  display:block;
  background:#000;
}