/* Portraits fill two rows; landscapes fill three. Every image stays intact. */
.gallery-hero {
  --gallery-background: var(--opening-background);
  --profile-arrival-background: #faf8f3;
  background: color-mix(in srgb, var(--gallery-background), var(--profile-arrival-background) calc(var(--departure, 0) * 100%));
  --gallery-gap: 10px;
  --gallery-header-height: 76px;
  --gallery-footer-height: 64px;
  --gallery-viewport-height: 100svh;
  --gallery-top-inset: env(safe-area-inset-top, 0px);
  --gallery-bottom-inset: env(safe-area-inset-bottom, 0px);
  --gallery-left-inset: env(safe-area-inset-left, 0px);
  --gallery-right-inset: env(safe-area-inset-right, 0px);
  --gallery-bar-height: calc(var(--gallery-header-height) + var(--gallery-footer-height) + var(--gallery-top-inset) + var(--gallery-bottom-inset));
  --gallery-wall-height: max(120px, min(calc(var(--gallery-viewport-height) - var(--gallery-bar-height)), calc(200vw - 2 * var(--gallery-left-inset) - 2 * var(--gallery-right-inset))));
  min-height: calc(var(--gallery-wall-height) + var(--gallery-bar-height));
}

:root[data-theme="dark"] .gallery-hero { --profile-arrival-background: #151914; }
.gallery-status { background: var(--gallery-background); }
.gallery-header .theme-toggle:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.gallery-footer { color: #fff; }
:root:not([data-theme="dark"]) .gallery-hero.profile-entering .gallery-footer { color: #000; }
.gallery-footer .control-row button,
.gallery-footer .scroll-cue { color: inherit; }
.gallery-palette-hint { font-size: 14px; line-height: 1.5; color: inherit; opacity: .6; margin-left: -10px; }

@media (prefers-reduced-motion: no-preference) {
  .gallery-hero.is-departing .gallery-wall {
    transform: translateY(calc(var(--departure, 0) * 36px)) scale(calc(1 - var(--departure, 0) * .02));
    filter: blur(calc(var(--departure, 0) * var(--gallery-scroll-blur, 5px)));
    opacity: calc(1 - var(--departure, 0) * .32);
  }
}

/* A stable viewport avoids reflow/restarting columns as mobile browser bars move. */

.gallery-header {
  height: calc(var(--gallery-header-height) + var(--gallery-top-inset));
  padding-top: var(--gallery-top-inset);
  padding-left: max(32px, var(--gallery-left-inset));
  padding-right: max(32px, var(--gallery-right-inset));
}

.gallery-footer {
  height: calc(var(--gallery-footer-height) + var(--gallery-bottom-inset));
  padding-bottom: var(--gallery-bottom-inset);
  padding-left: max(32px, var(--gallery-left-inset));
  padding-right: max(32px, var(--gallery-right-inset));
}

.gallery-wall {
  transform: none;
  filter: none;
  opacity: 1;
  height: var(--gallery-wall-height);
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--gallery-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--gallery-left-inset);
  scroll-padding-right: var(--gallery-right-inset);
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y pinch-zoom;
  padding-inline: var(--gallery-left-inset) var(--gallery-right-inset);
  margin: 0;
}

.gallery-wall:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.gallery-wall .gallery-column {
  width: var(--column-width);
  flex: 0 0 var(--column-width);
  height: 100%;
  min-width: 0;
  overflow: hidden;
  contain: layout paint;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.gallery-column .gallery-track {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: gallery-rise var(--duration, 60s) linear infinite;
  will-change: transform;
}

.gallery-column[data-direction="down"] .gallery-track {
  animation-direction: reverse;
}

.gallery-column[data-direction="up"] .gallery-track {
  animation-direction: normal;
}

.gallery-column .gallery-sequence {
  width: 100%;
  height: auto;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--gallery-gap);
  padding: 0 0 var(--gallery-gap);
}

.gallery-column .gallery-photo {
  display: block;
  width: 100%;
  height: var(--photo-height);
  flex: none;
  padding: 0;
  overflow: hidden;
  border-radius: 2px;
}

.gallery-column .gallery-photo img {
  opacity: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

.gallery-column .gallery-photo img.is-loaded { opacity: 1; }

.gallery-wall.is-paused .gallery-track,
.gallery-wall:focus-within .gallery-track {
  animation-play-state: paused;
}

@keyframes gallery-rise {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@media (max-width: 620px) {
  .gallery-hero {
    --gallery-gap: 8px;
    --gallery-header-height: 72px;
    --gallery-footer-height: 84px;
  }
  .gallery-footer .control-row { flex-wrap: wrap; column-gap: 24px; row-gap: 0; max-width: calc(100% - 48px); }
  .gallery-palette-hint { flex-basis: 100%; margin-left: 0; font-size: 13px; }
  .gallery-header,
  .gallery-footer {
    padding-left: max(18px, var(--gallery-left-inset));
    padding-right: max(18px, var(--gallery-right-inset));
  }
}

@media (max-width: 1024px), (pointer: coarse) {
  .gallery-hero { --gallery-scroll-blur: 2px; }
  .gallery-wall { scroll-snap-type: x mandatory; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .gallery-hero {
    --gallery-header-height: 52px;
    --gallery-footer-height: 48px;
    --gallery-gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-wall { overflow-x: auto; }
  .gallery-wall .gallery-column {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .gallery-column .gallery-track {
    animation: none !important;
    will-change: auto;
  }
  .gallery-column .gallery-sequence[aria-hidden="true"] { display: none; }
}

.gallery-wall::-webkit-scrollbar { display: none; }