/* View page: "More from the gallery" — three pieces before and three after. */
.view-more { margin: 3rem 0 1rem; }
.view-more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.view-more-head .eyebrow { margin: 0; color: var(--accent, #ff2587); letter-spacing: .12em; }
.view-more-place { color: #a9aab4; font-size: .85rem; }
.view-more-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; }
.view-more-step {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #ffffff38; color: #fff; text-decoration: none; font-size: 1.2rem;
  transition: border-color .2s, background-color .2s;
}
.view-more-step:hover, .view-more-step:focus-visible { border-color: var(--accent, #ff2587); background: #ffffff10; }
.view-more-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; }
.view-more-tile { min-width: 0; }
.view-more-link { display: grid; gap: .4rem; color: #fff; text-decoration: none; }
.view-more-thumb { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: #050507; border: 1px solid #ffffff1f; }
.view-more-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease, opacity .2s; }
a.view-more-link:hover .view-more-thumb img, a.view-more-link:focus-visible .view-more-thumb img { transform: scale(1.05); }
a.view-more-link:focus-visible { outline: 2px solid var(--accent, #ff2587); outline-offset: 3px; border-radius: 10px; }
.view-more-thumb em, .view-more-thumb b {
  position: absolute; top: 6px; padding: 2px 7px; border-radius: 999px;
  font: 700 10px/1.4 Arial, sans-serif; font-style: normal; letter-spacing: .05em; text-transform: uppercase; color: #fff;
}
.view-more-thumb em { left: 6px; background: #000000b0; }
.view-more-thumb b { right: 6px; background: var(--accent-fill, #e0106c); }
.view-more-tile.is-current .view-more-thumb { border: 2px solid var(--accent, #ff2587); }
.view-more-tile:not(.is-current) .view-more-thumb img { opacity: .82; }
.view-more-tile:not(.is-current) a:hover .view-more-thumb img { opacity: 1; }
.view-more-name { font-size: .78rem; line-height: 1.3; color: #c9cad2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-more-tile.is-current .view-more-name { color: #fff; font-weight: 700; }

/* Phones and small tablets: one swipeable row, the current piece centred. */
@media (max-width: 760px) {
  .view-more-row { grid-template-columns: minmax(0, 1fr); }
  .view-more-step { display: none; }
  .view-more-strip {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .6rem;
    padding-bottom: .4rem; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .view-more-strip::-webkit-scrollbar { display: none; }
  .view-more-tile { flex: 0 0 27%; scroll-snap-align: center; } /* edges of the next tiles peek in, so it reads as swipeable */
}
@media (prefers-reduced-motion: reduce) { .view-more-thumb img { transition: none; } }

/* Usage note at the bottom of the view page. */
.view-usage-note { margin: 2.5rem 0 0; color: #8d8e97; font-size: .85rem; line-height: 1.5; }
.view-usage-note a { color: #b9bac2; text-decoration: underline; text-underline-offset: 2px; }
.view-usage-note a:hover, .view-usage-note a:focus-visible { color: #fff; }

/* "Commercial use" button: emails the studio with the piece's name and reference. */
.view-commercial-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; margin: 1rem 0 0; padding: .75rem 1.6rem; border-radius: 999px;
  border: 1px solid var(--accent, #ff2587); color: #fff; text-decoration: none;
  font-weight: 700; letter-spacing: .02em; background: transparent;
  transition: background-color .2s;
}
.view-commercial-button:hover, .view-commercial-button:focus-visible { background: var(--accent-fill, #e0106c); color: #fff; }
.view-commercial-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 560px) { .view-commercial-button { display: flex; width: 100%; } }

/* Created date and file size, very bottom of the view page. */
.view-file-details { margin: 1.6rem 0 0; color: #7d7e87; font-size: .78rem; letter-spacing: .02em; }