/* web/css/page_program_artists.css */

.grid-artists.grid-artists {
  display: grid;
  margin: 0 auto;
  max-width: var(--max-width);
  /* grid-auto-flow: dense; */
  grid-template-columns: 1fr;
  grid-column-gap: var(--grid-column-gap);
  grid-row-gap: var(--grid-row-gap);
  @media (min-width: 38em) {
    grid-template-columns: 1fr 1fr;
  }
  @media (min-width: 48em) {
    & {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 68em) {
    & {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}


.grid-artists.grid-artists.grid-artists > * {
  /* grid-column: span 1; */
  margin: 0;
  /* contain: layout; */
}

/* Favourite */
:has(>header>.favourite-artist-remove) {
  order: -1;
}

/* .grid-artists.grid-artists.grid-artists > .favorite {
  grid-column: span 2;
  grid-row: span 2;
  & > picture {
    transform: none !important;
    aspect-ratio: 1.14;
  }
} */

.grid-artists.grid-artists.grid-artists > * > picture {
  /* aspect-ratio: 1.4; */
  margin: 0 calc(-.2 * var(--grid-column-gap)) 0 calc(-.2 * var(--grid-column-gap));
}

:has(>header>.favourite-artist-remove) > picture {
  outline: 4px solid var(--color-brand)
}


/* .grid-artists.grid-artists.grid-artists > * > picture > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
} */

.grid-artists header {
  padding: var(--spacing) 0 0;
}
.grid-artists header > .bb-artist_name {
  margin: 0;
}

/* .grid-artists.grid-artists.grid-artists > *:nth-child(4n) > picture {
  transform: rotate(.6deg);
}

.grid-artists.grid-artists.grid-artists > *:nth-child(6n-3) > picture {
  transform: rotate(.8deg);
} */
/* favourite placeholder*/
[inert] {
  display: none;
}
[id^=favourite] {
  color: var(--color-base);
  padding: 2px;
  flex: 0;
  align-self: center;
  width: 30px;
  height: 30px;
  z-index: 2;
  border-radius: 2px;
  top: 0;
  right: calc(-.2 * var(--grid-column-gap));
  left: calc(-.2 * var(--grid-column-gap));
  background: none;
}
[id^=favourite]:hover,
[id^=favourite]:focus {
  background: var(--color-base);
}
[id^=favourite]:active {
  color: var(--color-mid);
}


/* .grid-artists > *, */

.grid-artists > [open] {
  /* grid-column: span 2; */
  grid-row: span 2;
}


/* image is link, but first triggers opening of <details> */
.grid-artists summary > a {
  display: block;
}
.grid-artists summary > a:hover,
.grid-artists summary > a:focus {
  outline: 1px solid var(--color-accent);
}

.grid-artists :not([open]) > summary > a {
  pointer-events: none;
}



/* artist image */
.grid-artists img {
  object-fit: cover;
  object-position: 0 30%;
  transition: max-height .218s;
  max-height: 50vh;
}

/* .grid-artists [open] img {
  max-height: 30vh;
} */


/* artist links */

.grid-artists footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.grid-artists footer > .alt-uppercase {
  margin-right: var(--spacing);
}











[role="listitem"] {
  /* aspect-ratio: 1;
  contain: layout; */
  /* perspective: 1001px;
  transform-style: preserve-3d; */
}

/* [class^='card-face'] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all .18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
} */

/* .card-face--front {
  backface-visibility: hidden;
} */

/* .card-face--back,
[open] > .card-face--front {
  transform: rotateY(180deg);
}

[open] > .card-face--front {
  opacity: .18;
}


.card-face--back {
  color: #fff;
  background: var(--color-darkest);
  padding: var(--spacing-large);
}

[open] > .card-face--back {
  transform: rotateY(0);
} */