/* Artists page — Locomotive Work inspired */

.page-artists {
  --ap-ink: #0a0a0a;
  --ap-paper: var(--color-bg);
  --ap-muted: rgba(10, 10, 10, 0.5);
  --ap-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ap-ribbon-card-width: clamp(300px, 31vw, 460px);
  background: var(--ap-paper);
  color: var(--ap-ink);
  min-height: 100vh;
}

.page-artists .floating-header--minimal:not(.is-solid) {
  background: transparent;
  border-bottom: none;
}

.ap-main {
  padding: var(--internal-page-top) clamp(1.25rem, 4vw, 4rem) 0;
}

/* Program header — shared via `.page-intro-grid` in styles.css */

/* Shared section layout */
.ap-section {
  max-width: 1320px;
  margin: 0 auto;
}

.ap-section + .ap-section {
  margin-top: clamp(2.6rem, 6vh, 4rem);
}

/* Installation ribbon */
.ap-installation-ribbon {
  max-width: 1320px;
  margin: 0 auto clamp(2.6rem, 7vh, 4.2rem);
}

.ap-installation-ribbon__head {
  margin-bottom: 0.9rem;
}

.ap-installation-ribbon__label {
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  line-height: 1.35;
  opacity: 0.72;
}

.ap-installation-ribbon__viewport {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.ap-installation-ribbon__track {
  display: flex;
  gap: clamp(0.75rem, 1.5vw, 1.15rem);
  width: max-content;
  will-change: transform;
}

.ap-ribbon-card {
  flex: 0 0 var(--ap-ribbon-card-width);
  width: var(--ap-ribbon-card-width);
  aspect-ratio: 3 / 2;
  height: calc(var(--ap-ribbon-card-width) * 2 / 3);
  min-height: 0;
  overflow: hidden;
  background: #eceae4;
  transform: translateY(0);
  transition: transform 0.7s var(--ap-ease), filter 0.7s var(--ap-ease), opacity 0.5s var(--ap-ease);
}

.ap-ribbon-card.is-offset {
  transform: translateY(10px);
}

.ap-ribbon-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--object-position, 50% 48%);
  display: block;
  filter: saturate(0.96) contrast(0.98);
}

.ap-installation-ribbon__viewport:hover .ap-ribbon-card {
  transform: translateY(0);
  opacity: 0.9;
}

.ap-installation-ribbon__viewport:hover .ap-ribbon-card:hover {
  opacity: 1;
}

.ap-section__title {
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  line-height: 1.35;
  margin-bottom: 0.9rem;
  opacity: 0.72;
}

/* Artist list */
.ap-list {
  margin: 0;
  list-style: none;
}

.ap-item {
  position: relative;
  border-top: 1px solid rgba(10, 10, 10, 0.12);
}

.ap-item:last-child {
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
}

.ap-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(0.9rem, 2.2vh, 1.4rem) 0;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.ap-link--static {
  cursor: default;
}

.ap-link--static::after {
  display: none;
}

.ap-link--static:hover .ap-name,
.ap-item.is-active .ap-link--static .ap-name {
  transform: none;
}

.ap-link--static .ap-info {
  opacity: 1;
}

.ap-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--ap-ink);
  transition: width 0.55s var(--ap-ease);
}

.ap-item.is-active .ap-link::after,
.ap-link:hover::after,
.ap-link:focus-visible::after {
  width: 100%;
}

.ap-link:hover,
.ap-link:focus-visible {
  opacity: 1;
}

.ap-name {
  font-size: var(--type-lg);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: var(--leading-tight);
  transition: transform 0.5s var(--ap-ease);
}

.ap-link:hover .ap-name,
.ap-item.is-active .ap-name {
  transform: translateX(6px);
}

.ap-info {
  font-size: 0.55rem;
  letter-spacing: 0.085em;
  color: var(--ap-muted);
  text-align: right;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s var(--ap-ease), transform 0.4s var(--ap-ease);
}

.ap-item.is-active .ap-info,
.ap-link:hover .ap-info,
.ap-link:focus-visible .ap-info {
  opacity: 1;
  transform: translateY(0);
}

.ap-exhibited {
  margin-top: 0;
  padding-bottom: calc(var(--base-space) * 10);
}

.ap-main--exhibitions {
  padding-bottom: 0;
}

.page-exhibitions .exhibitions-offsite.home-offsite {
  margin-top: clamp(3rem, 8vh, 5.5rem);
  padding-bottom: calc(var(--base-space) * 10);
}

/* Image hover previews removed for a text-led Artists page. */
.ap-preview,
.ap-mobile-preview {
  display: none !important;
}

@media (max-width: 900px) {
  .ap-section + .ap-section {
    margin-top: 2.4rem;
  }

  .ap-installation-ribbon {
    margin-bottom: 2.2rem;
  }

  .ap-installation-ribbon__viewport {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .ap-installation-ribbon__track {
    padding-bottom: 0.25rem;
  }

  .ap-ribbon-card {
    flex-basis: min(78vw, 420px);
    width: min(78vw, 420px);
    scroll-snap-align: center;
  }

  .ap-info {
    opacity: 1;
    transform: none;
    font-size: 0.52rem;
  }

  .ap-name {
    font-size: clamp(1.35rem, 8vw, 2.4rem);
  }

  .ap-exhibited {
    padding-bottom: calc(var(--base-space) * 8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-link::after,
  .ap-name,
  .ap-info,
  .ap-link:hover .ap-name,
  .ap-item.is-active .ap-name {
    transition: none !important;
    transform: none !important;
  }
}