/* header layout: menu centered, language switcher pinned to the right */
.nav-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5em;
}
.nav-bar .menu { grid-column: 2; text-align: center; }
.nav-bar .lang-switch { grid-column: 3; justify-self: end; }

.lang-switch select {
  font: inherit;
  font-size: 0.85em;
  background: #eee;
  color: inherit;
  border: none;
  border-radius: 5px;
  padding: 5px 20px 5px 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #888 50%), linear-gradient(135deg, #888 50%, transparent 50%);
  background-position: right 9px center, right 5px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.lang-switch select:hover { background-color: #e0e0e0; }

/* left-align tables instead of the theme's default centered block/header text */
table { margin: 0; }
th { text-align: left; }

/* sample gallery: masonry columns, keeps each frame's own aspect ratio */
.gallery {
  columns: 2 260px;
  column-gap: 12px;
  margin: 1.5em 0;
}
.gallery figure {
  break-inside: avoid;
  margin: 0 0 12px;
}
.gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  transition: opacity .2s;
}
.gallery a:hover img { opacity: .85; }
.gallery figcaption {
  font-size: .8em;
  color: #888;
  padding: 4px 2px 0;
}

/* lightbox */
.lightbox {
  border: none;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 10, 10, .94);
  color: #ddd;
}
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox::backdrop { background: rgba(0, 0, 0, .6); }
.lightbox figure { margin: 0; text-align: center; }
.lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
}
.lightbox figcaption { font-size: .85em; color: #aaa; margin-top: .6em; }
.lightbox button {
  position: absolute;
  background: none;
  border: none;
  color: #ccc;
  font-size: 2.4em;
  line-height: 1;
  padding: .3em .5em;
  cursor: pointer;
}
.lightbox button:hover { color: #fff; }
.lb-close { top: 0; right: 0; }
.lb-prev { left: 0; top: 50%; transform: translateY(-50%); }
.lb-next { right: 0; top: 50%; transform: translateY(-50%); }