/**
 * DWN staff grid component styles
 * Based on css-tricks.com/expandable-sections-within-a-css-grid
 */

/* Use <dl> list */
.link-grid {
  position: relative;

  --grid-column-count: 4; /* Maximum number columns */
  --grid-gap: clamp(1.5rem, 3.6vw, 2.25rem);
  --grid-item-min-width: 140px;

  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-gap));
  --grid-item-max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-auto-flow: dense; /* Fills in holes earlier in the grid to expand bios */
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item-min-width), var(--grid-item-max-width)), 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
  margin: 0 0 3rem;
  padding: 0;
  list-style: none;
}

.link-grid > * {
  background: none;
  margin: 0;
  padding: 0;
}


/* Photos (dt) */
.link-grid dt {
  --staff-shadow-opacity: 0.1;

  position: relative;
  transition: box-shadow 300ms ease-in-out; /* Darken shadow on hover/focus */
  box-shadow: 0 2px 7px rgb(0 0 0 / var(--staff-shadow-opacity));
  text-transform: initial;
}
.link-grid dt[tabindex] {
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  .link-grid dt {
    box-shadow: 0 0 3px rgb(255 255 255 / var(--staff-shadow-opacity));
  }
}


/* Hover */
.link-grid dt[tabindex]:is(:hover, :focus-within, [aria-expanded="true"]) {
  --staff-shadow-opacity: 0.25;
}
.link-grid dt[tabindex] img {
  transition: filter 300ms ease-in-out;
}
.link-grid dt[tabindex]:is(:hover, :focus-within, [aria-expanded="true"]) img {
  filter: var(--image-hover-filter);
}


/* Open/selected photo */
.link-grid dt[aria-expanded="true"] {
  /* Close gap to bio */
  margin-block-end: calc(-1 * var(--grid-gap));
  background-color: var(--color-alt-background);
}

/* Cover box shadow overlap */
.link-grid dt[aria-expanded="true"]::after {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: -0.5rem;
  left: 0;
  width: 100%;
  height: 1rem;
  background-color: var(--color-alt-background);
}


/* Photo */
.link-grid dt figure {
  margin: 0;
  padding: 0;
}
.link-grid dt img {
  display: block;
  object-fit: cover;
  aspect-ratio: 1;
}

/* Name and title */
.link-grid dt figcaption {
  margin: 0;
  padding-block: 1.5rem;
  padding-inline: 0.5rem;
  text-align: center;
  color: var(--color-text);
  font-size: initial;
}
.link-grid dt[aria-expanded="true"] figcaption {
  /* Open/selected */
  background-color: var(--color-alt-background);
}

/* Title */
.link-grid dt figcaption h3 {
  display: block;
  margin-block: 0;
  font-size: clamp(24px, 3.4vw, 28px);
  color: var(--color-primary);
}

@media (prefers-color-scheme: dark) {
  .link-grid dt figcaption h3 {
    color: var(--color-primary-light);
  }
}


/* Position and species */
.link-grid dt figcaption .staff-title {
  display: block;
  margin-block-start: 1rem;
  font-size: clamp(var(--font-size-minus-1), 2.2vw, var(--font-size-plus-1));
}
.link-grid dt figcaption .species-name {
  display: block;
  margin-block-start: 0.75rem;
  font-size: clamp(var(--font-size-minus-1), 2vw, var(--font-size-base));
  font-weight: var(--font-weight-medium);
}
.link-grid dt figcaption .species-name-latin {
  display: block;
  margin-block-start: 0.25rem;
  font-size: clamp(var(--font-size-minus-3), 1.4vw, var(--font-size-minus-1));
  font-weight: var(--font-weight-medium);
  font-style: italic;
}


/* Biography (dd) */
.link-grid dd {
  --staff-shadow-opacity: 0.25;

  position: relative;
  margin-trim: block;
  grid-column: 1 / -1; /* Full grid width */
  padding: 2rem;
  background-color: var(--color-alt-background);
  box-shadow: 0 2px 7px rgb(0 0 0 / var(--staff-shadow-opacity));
}
.link-grid dd[hidden] {
  display: none;
}

.link-grid dd > *:last-child {
  margin-block-end: 0; /* Trim bottom margin */
}