/* Layout */
.layout { padding: 25px 35px; }
.layout .top { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.layout article h2 { margin: 20px 0; text-transform: uppercase; font-size: 18px; }
@media (max-width: 480px) {
  .layout { padding: 10px; }
}

/* Header */
.header { user-select: none; }
.header h1 { font-size: 18pt; text-transform: uppercase; white-space: nowrap; }

/* Navigation */
.navigation { text-transform: uppercase; font-family: var(--header-font); font-size: 14pt; }
.navigation .hamburger { display: none; }
.navigation ul { display: flex; flex-direction: row; }
.navigation li { padding: 0 10px; height: 1em; line-height: 1em; position: relative; }
.navigation li::before { content: "I"; position: absolute; transform: scale(1, 1.4) translate(-2px, 0px); opacity: 0.5; left: 0; }
.navigation li:first-of-type::before { display: none; }
.navigation li:last-of-type { padding-right: 0; }
@media (max-width: 700px) {
  .navigation { position: absolute; top: 0; right: 0; z-index: 1000; }
  .navigation .hamburger { display: block; position: absolute; top: 10px; right: 5px; margin: 0; padding: 0; border: 0; z-index: 2; background: transparent; color: inherit; cursor: pointer; }
  .navigation .hamburger::before { width: 32px; height: 32px; content: "☰"; font-size: 24px; display: flex; justify-content: center; align-items: center; }
  .navigation ul { padding: 32px 10px 10px 10px; width: 200px; flex-direction: column; display: flex; position: absolute; top: 0; right: -220px; transition: 0.2s ease-in-out; background-color: var(--mobile-menu-bg); height: 100vh; box-shadow: 0px 0px 15px 0px rgba(78, 82, 85, 0.5); }
  .navigation ul.visible { right: 0; }
  .navigation li { font-size: 20px; display: flex; justify-content: left; align-items: center; padding: 15px; height: auto; }
  .navigation li::before { display: none; }
}

/* Breadcrumb */
.breadcrumb > *::before { content: "::"; margin: 0 5px; position: relative; top: -2px; }
.breadcrumb > *:first-child::before { display: none; }
@media (max-width: 480px) {
  .breadcrumb > *::before { content: none; }
  .breadcrumb > *:not(:last-child) { display: none; }
}

/* Content */
.content .title { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.content .title .toolbar { white-space: nowrap; }
.content .title .previous,
.content .title .next { font-size: 12pt; color: var(--link-color); display: inline-block; width: 25px; text-align: center; vertical-align: middle; }
.content .title .previous span,
.content .title .next span { display: none; }
.content .title .previous::before,
.content .title .next::before { content: "▷"; }
.content .title span.previous,
.content .title span.next { opacity: 0.5; }
.content .title .previous { transform: scaleX(-1); }
.content .top { display: flex; flex-direction: row; justify-content: space-between; }
.content .top .left { flex: 2 1; min-width: 300px; padding-right: 20px; }
.content .top .download { background: transparent; border: 0; position: absolute; top: 82px; right: 30px; color: var(--link-color); cursor: pointer; }
.content .top .download svg { width: 24px; height: 24px; vertical-align: middle; }
.content .top .photos { flex: 3 1; }
.content .top .sideGallery { flex: 2; }
@media (max-width: 480px) {
  .content .download { display: none; }
  .content .top { flex-direction: column; }
  .content .photos,
  .content .sideGallery { flex: auto; }
}

/* Photos */
.photos { display: flex; flex-direction: row; justify-content: flex-end; }
.photos .info { text-align: right; padding-right: 15px; white-space: nowrap; }
.photos .info .year { font-family: var(--header-font); font-size: 18pt; line-height: 16pt; margin-bottom: 5pt; }
.photos .info .thumbnail { margin-bottom: 15px; min-width: 60px; max-width: 60px; min-height: 60px; max-height: 60px; background-clip: content-box; background-position: center; cursor: pointer; margin-left: auto; }
.photos .mobilePhoto { display: none; }
.photos .details { display: block; padding-bottom: 20px; }
.photos .photo img { max-width: min(100%, 600px); max-height: 600px; width: auto; height: auto; cursor: pointer; }
.photos .photo picture { display: block; }
.photos .media { position: relative; }
.photos .video { position: absolute; top: 0; width: 100%; }
.photos .video > div { padding: 80% 0 0 0; position: relative; }
.photos .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.photos .media.has-video picture { opacity: 0; }
@media (max-width: 480px) {
  .photos { flex-direction: column-reverse; justify-content: flex-start; width: 100%; }
  .photos .thumbnail,
  .photos .photo { display: none; }
  .photos .mobilePhoto { display: block; padding-bottom: 10px; margin: 0; max-width: 100%; width: 100%; }
  .photos .info { text-align: left; padding: 0; }
}

/* Thumbnails: justified rows like react-photo-gallery, row height near 300px */
.gallery-grid { display: flex; flex-wrap: wrap; flex-direction: row; }
.gallery-grid::after { content: ""; flex-grow: 999999; }
.gallery-grid > .galleryItem { flex-basis: calc(var(--ratio) * 300px); flex-grow: var(--ratio); }
.galleryItem { position: relative; cursor: pointer; display: block; }
.galleryItem > span { display: block; }
.galleryItem img { display: block; width: calc(100% - 4px); height: auto; margin: 2px; }
.galleryItem > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 2px; padding: 10px; background-color: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 150ms ease-in; }
.galleryItem > div span { display: block; color: white; }
.galleryItem > div .title,
.galleryItem > div .gallery { text-transform: uppercase; font-size: 10pt; }
.galleryItem > div .year { position: absolute; right: 10px; bottom: 5px; font-size: 15pt; }
.galleryItem > div .material,
.galleryItem > div .size { font-size: 8pt; }
.galleryItem > div:hover { opacity: 1; }
.tinyGallery { display: flex; flex-direction: row; }
.tinyGallery .galleryItem img { height: 200px; width: auto; }
@media not all and (hover: hover) {
  body a.galleryItem > div { padding: 0; }
  body a.galleryItem .title { background-color: rgba(0, 0, 0, 0.5); padding: 5px; }
  body a.galleryItem .material,
  body a.galleryItem .size,
  body a.galleryItem .year,
  body a.galleryItem .gallery { display: none; }
  .galleryItem > div { opacity: 1; background-color: transparent; }
}
@media (max-width: 480px) {
  .gallery-grid,
  .tinyGallery { flex-direction: column; }
  .gallery-grid > .galleryItem { flex-basis: auto; }
  .galleryItem img,
  .tinyGallery .galleryItem img { width: 100%; height: auto; margin: 5px 0; }
  .galleryItem > div { margin: 5px 0; padding: 0; opacity: 1; background-color: transparent; }
  .galleryItem .title { background-color: rgba(0, 0, 0, 0.5); padding: 5px; }
  .galleryItem .material,
  .galleryItem .size,
  .galleryItem .year,
  .galleryItem .gallery { display: none; }
  .galleryItem { margin: 5px 0; }
}

/* Lightbox, after react-image-lightbox */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100vw; max-height: calc(100vh - 50px); object-fit: contain; }
.lightbox button { position: absolute; background: transparent; border: 0; color: rgba(255, 255, 255, 0.7); cursor: pointer; font-size: 32px; padding: 10px 20px; }
.lightbox button:hover { color: #fff; }
.lightbox .close { top: 0; right: 0; }
.lightbox .prev { left: 0; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 0; top: 50%; transform: translateY(-50%); }