/* Minimal white gallery + TRUE fullscreen viewer */
:root{
  --bg:#ffffff;
  --line: rgba(0,0,0,.10);
  --shadow: rgba(0,0,0,.10);
  --backdrop: rgba(0,0,0,.90);
  --titleBlue: #0b4dff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
}

.wrap{
  width:min(1200px, 94vw);
  margin:0 auto 40px auto;
}

/* section titles: full-width blue background */
.sectionTitle{
  margin: 0;
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 16px 0;
  background: var(--titleBlue);
  color:#fff;
  text-align:center;
  font: 700 18px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* extra space before the second section */
.sectionTitle--spaced{
  margin-top: 54px;
}

.grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:14px;
  margin:18px 0 22px 0;
}
@media (max-width: 1200px){ .grid{ grid-template-columns: repeat(4, 1fr);} }
@media (max-width: 980px){ .grid{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 720px){ .grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 420px){ .grid{ grid-template-columns: repeat(1, 1fr);} }

.tile{
  all:unset;
  cursor:pointer;
  display:block;
  border-radius:14px;
  border:1px solid var(--line);
  overflow:hidden;
  background:#fff;
  box-shadow: 0 10px 28px var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.14);
}
.tile img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}
@media (max-width: 720px){ .tile img{ height:200px; } }
@media (max-width: 420px){ .tile img{ height:240px; } }

/* Fullscreen Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.lightbox.is-open{ display:block; }

.lightbox__backdrop{
  position:absolute;
  inset:0;
  background: var(--backdrop);
}

/* panel fills the screen */
.lightbox__panel{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(10px, 2.2vw, 26px);
}

/* Zoom stage */
.zoomStage{
  max-width: calc(100vw - 2 * clamp(10px, 2.2vw, 26px));
  max-height: calc(100vh - 2 * clamp(10px, 2.2vw, 26px));
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  touch-action: none;
}

.zoomStage img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:10px;
  background:#fff;
  transform-origin: 50% 50%;
  will-change: transform;
  cursor: zoom-in;
  user-select:none;
  -webkit-user-drag:none;
}

/* Buttons */
.iconbtn{
  position:absolute;
  top:14px;
  right:14px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(8px);
  z-index:2;
}
.iconbtn:hover{ background: rgba(255,255,255,.16); }

.navbtn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:52px;
  height:52px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  line-height:1;
  user-select:none;
  backdrop-filter: blur(8px);
  z-index:2;
}
.navbtn:hover{ background: rgba(255,255,255,.16); }
.navbtn.prev{ left:14px; }
.navbtn.next{ right:14px; }

@media (max-width: 560px){
  .navbtn{ width:46px; height:46px; font-size:28px; }
  .iconbtn{ width:42px; height:42px; }
}