/* Shared gender/random thumbnail mode controls. */

.thumb-mode-wrap {
  --thumb-wrap-width: min(1180px, calc(100% - 36px));
  --thumb-related-margin-bottom: clamp(30px, 4vw, 52px);
  --thumb-default-margin-top: clamp(4px, 0.75vw, 10px);
  --thumb-default-margin-bottom: clamp(6px, 1vw, 14px);
  --thumb-strip-gap: clamp(14px, 2vw, 26px);
  --thumb-strip-padding: 4px 8px;
  --thumb-button-size: clamp(48px, 4.6vw, 62px);
  --thumb-button-padding: 7px;
  --thumb-button-opacity: 0.70;
  --thumb-button-active-opacity: 1;
  --thumb-button-active-transform: translateY(-2px);
  --thumb-button-icon-size: 92%;
  --thumb-button-icon-filter: brightness(0.86) saturate(0.82) drop-shadow(0 0 10px rgba(0,0,0,0.45));
  --thumb-button-icon-active-filter: brightness(1.08) saturate(0.95) drop-shadow(0 0 14px rgba(200,191,176,0.14));
  width: var(--thumb-wrap-width);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.thumb-mode-wrap--related {
  margin-top: 0;
  margin-bottom: var(--thumb-related-margin-bottom);
}

.thumb-mode-strip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--thumb-strip-gap);
  padding: var(--thumb-strip-padding);
}

.thumb-mode-btn {
  width: var(--thumb-button-size);
  height: var(--thumb-button-size);
  padding: var(--thumb-button-padding);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--control-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: var(--thumb-button-opacity);
  transition: opacity 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.thumb-mode-btn img {
  width: var(--thumb-button-icon-size);
  height: var(--thumb-button-icon-size);
  object-fit: contain;
  display: block;
  pointer-events: none;
  filter: var(--thumb-button-icon-filter);
}

.thumb-mode-btn:is(:hover, :focus-visible) {
  opacity: var(--thumb-button-active-opacity);
  transform: var(--thumb-button-active-transform);
  background: var(--control-surface-hover);
  border-color: var(--border-hover);
  box-shadow: var(--control-shadow-hover);
  outline: none;
}

.thumb-mode-btn.is-active {
  opacity: var(--thumb-button-active-opacity);
  transform: var(--thumb-button-active-transform);
  background: var(--control-surface-active);
  border-color: var(--control-border-active);
  box-shadow: var(--control-shadow-active);
  outline: none;
}

.thumb-mode-btn:is(:hover, :focus-visible) img,
.thumb-mode-btn.is-active img {
  filter: var(--thumb-button-icon-active-filter);
}

.thumb-mode-wrap:not(.thumb-mode-wrap--related) {
  margin-top: var(--thumb-default-margin-top);
  margin-bottom: var(--thumb-default-margin-bottom);
}

@media (max-width: 700px) {
  .thumb-mode-wrap {
    --thumb-wrap-width: calc(100% - 28px);
    --thumb-related-margin-bottom: 30px;
    --thumb-default-margin-top: 4px;
    --thumb-default-margin-bottom: 10px;
    --thumb-strip-gap: 12px;
    --thumb-button-size: 46px;
  }
}

.thumb-mode-strip .thumb-mode-btn[data-mode="male"] { order: 1; }
.thumb-mode-strip .thumb-mode-btn[data-mode="random"] { order: 2; }
.thumb-mode-strip .thumb-mode-btn[data-mode="female"] { order: 3; }