:root {
  --callout-color: var(--dk-mode-light-blue);
  --lt-callout-color: var(--lt-mode-light-blue);
}

@media screen and (width < 640px) {
  h1,h2,h3,.block-caption {
    hyphens: auto;
  }
}

article.photo-bg {
  background-image: none;
}

blockquote {
  padding-inline-start: 5.25rem;
}

blockquote::before {
  content: "„";
  bottom: 0.25rem;
}

.block-caption span {
  display: inline-block;
  font-size: inherit;
}

@media screen and (min-width: 640px) {
  article#gallery {
    grid-template-rows: min-content 1fr min-content min-content;
    row-gap: 2rem;
  }
}

/* Swap gallery images on hover */

#gallery .gallery-caption {
  /* color: var(--abbott-purple); */
  background-color: rgba(0,0,0,0.4);
  font-size: clamp(1rem, calc(0.909rem + 0.27vw), 1.125rem); /* min: 16px, max: 18px */
  margin-block-end: 0;
  padding-inline: 0;
  padding-block: 1rem;
  text-align: center;
}

#gallery .nav-cta .gallery-caption {
  background-color: rgba(255,255,255,0.2);
  text-decoration: none;
  padding-inline: 1rem;

  &:hover {
    background-color: rgba(0,0,0,0.4);
    color: var(--callout-color)
  }
}


#gallery figure {

  * {
    grid-area: gallery-image;
    transform: none;
  }

  a {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "img";
    
  }

}

figure:has(> img.hover) {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "img";

  img {
    object-fit: contain;
    width: 100%;
    height: auto;
    aspect-ratio: 960 / 1150;
  }

  img.hover {
    grid-area: img;
    opacity: 0;
    transition: opacity 0.6s;
  }

  img.main {
    grid-area: img;
    display: block;
    opacity: 1;
    transition: opacity 0.6s;
  }
}

figure:has(> img.hover):hover {
  & .main {
    display: none;
    opacity: 0;
  }

  & .hover {
    opacity: 1;
  }
}

/* headshot */
figure.headshot {
  float: left;
  max-width: 160px;
  padding-block-end: 1em;
  padding-inline-end: 1em;
  
  p {
    --flow-space: .5rem;
    font-size: 12px;
    font-style: italic;
  }
  
  @media screen and (width < 640px) {
    & {
      float: none;
      max-width: 280px;

      p {
        font-size: 16px;
      }
    }
  }
}

.carousel img {
  max-width: 384px;
}

/* YouTube video iframe */
.video-embed iframe {
  width: 100%;
  max-width: 960px;
  height: auto;
  aspect-ratio: 16 / 9;
}