/* Public landing: Superuser Gallery — portrait / landscape / portrait (top→bottom) */

body:has(.superuser-gallery-page) {
  overflow-x: hidden;
}

.superuser-gallery-page.page {
  --gallery-head-h: 96px;
  --gallery-row-gap: 10px;
  --gallery-tile-gap: 10px;
  --gallery-tile-radius: 14px;
  /*
   * Equal tile area: area ≈ rowHeight² × (w/h).
   * H = sqrt(targetArea / refRatio); landscape ref 1.33, portrait ref 0.75 → Hp/Hl ≈ 1.33.
   * JS may override --gallery-tile-size-* after probe (applyEqualAreaRowHeights).
   */
  --gallery-tile-area: 16900;
  --gallery-ratio-landscape: 1.33;
  --gallery-ratio-portrait: 0.75;
  --gallery-row-height-scale: 1.1;
  --gallery-tile-size-landscape: 124px;
  --gallery-tile-size-portrait: 165px;
  --gallery-tile-max-width-landscape: min(calc(var(--gallery-tile-size-landscape) * 2.75), 52vw);
  --gallery-tile-max-width-portrait: min(calc(var(--gallery-tile-size-portrait) * 2.75), 52vw);
  --gallery-rows-block-h: calc(
    var(--gallery-tile-size-landscape) + var(--gallery-tile-size-portrait) * 2 + var(--gallery-row-gap) * 2
  );

  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  height: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.superuser-gallery__head {
  flex: 0 0 auto;
  padding: 20px 12px 14px;
  text-align: center;
}

.superuser-gallery__stats {
  flex: 0 0 auto;
  margin: 0;
  padding: 16px 12px 20px;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted, #a3a3a3);
}

.superuser-gallery__stat-line {
  margin: 0;
  white-space: nowrap;
}

.superuser-gallery__stat-line + .superuser-gallery__stat-line {
  margin-top: 4px;
}

.superuser-gallery__stats span {
  color: var(--fg, #f2f2f2);
  font-variant-numeric: tabular-nums;
}

.superuser-gallery__title {
  margin: 0;
  font-size: clamp(1.75rem, 4.5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.superuser-gallery__nav {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: clamp(0.875rem, 2.1vw, 1rem);
  line-height: 1.4;
}

.superuser-gallery__nav a {
  color: var(--muted, #b0b0b0);
  text-decoration: none;
}

.superuser-gallery__nav a:hover {
  color: var(--fg, #f2f2f2);
  text-decoration: underline;
}

@keyframes superuser-gallery-nav-hint {
  0%,
  100% {
    color: var(--muted, #b0b0b0);
    text-shadow: none;
  }
  50% {
    color: var(--fg, #f2f2f2);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
  }
}

.superuser-gallery__nav-link--hint {
  animation: superuser-gallery-nav-hint 0.5s ease-in-out 4;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (prefers-reduced-motion: reduce) {
  .superuser-gallery__nav-link--hint {
    animation: none;
    color: var(--fg, #f2f2f2);
    text-decoration: underline;
  }
}

.superuser-gallery__nav-sep {
  color: var(--muted, #6e6e6e);
  padding: 0 0.65em;
  user-select: none;
}

.superuser-gallery {
  --gallery-scroll-duration: 240s;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  width: 100%;
}

.superuser-gallery__viewport {
  flex: 0 0 auto;
  overflow: hidden;
  width: 100%;
}

.superuser-gallery__rows {
  display: flex;
  flex-direction: column;
  gap: var(--gallery-row-gap);
  height: auto;
  width: 100%;
}

.superuser-gallery[data-gallery-ready="1"] .superuser-gallery__rows,
.superuser-gallery[data-gallery-loading="1"] .superuser-gallery__rows {
  min-height: var(--gallery-rows-block-h);
}

.superuser-gallery__row {
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: stretch;
}

.superuser-gallery__row--landscape {
  flex: 0 0 var(--gallery-tile-size-landscape);
  height: var(--gallery-tile-size-landscape);
}

.superuser-gallery__row--portrait {
  flex: 0 0 var(--gallery-tile-size-portrait);
  height: var(--gallery-tile-size-portrait);
}

.superuser-gallery__track {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--gallery-tile-gap);
  width: max-content;
  height: 100%;
  padding: 0;
  /* Per-track --track-scroll-duration set in JS for equal tile crossing time */
  animation-duration: var(--track-scroll-duration, var(--gallery-scroll-duration));
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.superuser-gallery__track--ltr {
  animation-name: superuser-gallery-scroll-ltr;
}

.superuser-gallery__track--rtl {
  animation-name: superuser-gallery-scroll-rtl;
}

.superuser-gallery__track[data-row="0"] {
  animation-delay: 0s;
  padding-inline-start: 0;
}

.superuser-gallery__track[data-row="1"] {
  animation-delay: calc(var(--track-scroll-duration, var(--gallery-scroll-duration)) * -0.22);
  padding-inline-start: calc(var(--gallery-tile-size-landscape) * 0.28);
}

.superuser-gallery__track[data-row="2"] {
  animation-delay: calc(var(--track-scroll-duration, var(--gallery-scroll-duration)) * -0.44);
  padding-inline-start: calc(var(--gallery-tile-size-portrait) * 0.56);
}

@media (hover: hover) and (pointer: fine) {
  .superuser-gallery__viewport:hover .superuser-gallery__track {
    animation-play-state: paused;
  }
}

@keyframes superuser-gallery-scroll-ltr {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes superuser-gallery-scroll-rtl {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.superuser-gallery__item {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: auto;
  margin: 0;
  border-radius: var(--gallery-tile-radius);
  overflow: hidden;
  background: #111;
  border: 1px solid #3d3d3d;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 0;
  vertical-align: top;
}

.superuser-gallery__row--landscape .superuser-gallery__item {
  height: var(--gallery-tile-size-landscape);
  max-width: var(--gallery-tile-max-width-landscape);
}

.superuser-gallery__row--portrait .superuser-gallery__item {
  height: var(--gallery-tile-size-portrait);
  max-width: var(--gallery-tile-max-width-portrait);
}

.superuser-gallery__row--landscape .superuser-gallery__item--pending {
  flex: 0 0 var(--gallery-tile-size-landscape);
  width: var(--gallery-tile-size-landscape);
  height: var(--gallery-tile-size-landscape);
}

.superuser-gallery__row--portrait .superuser-gallery__item--pending {
  flex: 0 0 var(--gallery-tile-size-portrait);
  width: var(--gallery-tile-size-portrait);
  height: var(--gallery-tile-size-portrait);
}

/* Gray slots before real image URLs mount (row heights already fixed) */
.superuser-gallery__row--landscape .superuser-gallery__item--placeholder {
  height: var(--gallery-tile-size-landscape);
  max-width: var(--gallery-tile-max-width-landscape);
}

.superuser-gallery__row--portrait .superuser-gallery__item--placeholder {
  height: var(--gallery-tile-size-portrait);
  max-width: var(--gallery-tile-max-width-portrait);
}

.superuser-gallery__item--placeholder {
  display: inline-block;
  flex: 0 0 auto;
  box-sizing: border-box;
  cursor: default;
  pointer-events: none;
  background: linear-gradient(110deg, #3a3a3a 8%, #484848 18%, #3a3a3a 33%);
  background-size: 200% 100%;
  border: 1px solid #4a4a4a;
  animation: superuser-gallery-shimmer 1.2s ease-in-out infinite;
  overflow: hidden;
}

.superuser-gallery__placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

.superuser-gallery__item--pending {
  background: linear-gradient(110deg, #111 8%, #1c1c1c 18%, #111 33%);
  background-size: 200% 100%;
  animation: superuser-gallery-shimmer 1.2s ease-in-out infinite;
}

.superuser-gallery__item--pending .superuser-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes superuser-gallery-shimmer {
  to {
    background-position-x: -200%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .superuser-gallery__item--pending {
    animation: none;
  }

  .superuser-gallery__img {
    transition: none;
  }
}

.superuser-gallery__img {
  display: block;
  vertical-align: top;
  opacity: 0;
  transition: opacity 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

.superuser-gallery__item:not(.superuser-gallery__item--pending) .superuser-gallery__img--loaded {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.superuser-gallery__img--loaded {
  opacity: 1;
}

.superuser-gallery__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 16px 6px 6px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.superuser-gallery__caption {
  display: block;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (hover: hover) and (pointer: fine) {
  .superuser-gallery__item:hover .superuser-gallery__meta {
    opacity: 1;
  }
}

@media (hover: none), (pointer: coarse) {
  .superuser-gallery__item.is-active .superuser-gallery__meta {
    opacity: 1;
  }
}

.superuser-gallery-page .hint--status {
  flex: 0 0 auto;
  text-align: center;
  margin: 0;
  padding: 6px 6px 10px;
}

@media (max-width: 520px) {
  .superuser-gallery-page.page {
    --gallery-head-h: 108px;
    --gallery-tile-area: 12100;
    --gallery-tile-size-landscape: 105px;
    --gallery-tile-size-portrait: 140px;
  }
}

@supports (height: calc(sqrt(1) * 1px)) {
  .superuser-gallery-page.page {
    --gallery-tile-size-landscape: calc(
      sqrt(var(--gallery-tile-area) / var(--gallery-ratio-landscape)) * var(--gallery-row-height-scale) * 1px
    );
    --gallery-tile-size-portrait: calc(
      sqrt(var(--gallery-tile-area) / var(--gallery-ratio-portrait)) * var(--gallery-row-height-scale) * 1px
    );
  }

  @media (max-width: 520px) {
    .superuser-gallery-page.page {
      --gallery-tile-size-landscape: calc(
        sqrt(var(--gallery-tile-area) / var(--gallery-ratio-landscape)) * var(--gallery-row-height-scale) * 1px
      );
      --gallery-tile-size-portrait: calc(
        sqrt(var(--gallery-tile-area) / var(--gallery-ratio-portrait)) * var(--gallery-row-height-scale) * 1px
      );
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .superuser-gallery__track {
    animation-play-state: paused;
  }
}