/*----------------------------
    Two column layout stuff
    https://github.com/mattbierner/markdown-two-column-documentation-example/tree/master
  ---------------------------*/
/* Main Section Headings and sub headings */
article .begin-people ~ h2,
article .begin-people ~ h2 + p {
    width: 100%;
    clear: both;
}

/* Columns */
article .begin-people ~ h5,
article .begin-people ~ p,
article .begin-people ~ .highlight,
article .begin-people ~ pre {
    width: 50%;
}

/* Left Column */
article .begin-people ~ h5,
article .begin-people ~ p {
    float: left;
    box-sizing: border-box;
    padding-right: 1rem;
    clear: both;
}

article .begin-people ~ p:not(:has(img)) {
    font-size: 90%;
}

/* Right Column */
article .begin-people ~ .highlight,
article .begin-people ~ pre,
article .begin-people ~ p:has(img) {
    float: right;
    clear: right;
    margin-bottom: 1rem;
}

/* Reset */
article .end-people ~ p,
article .end-people ~ h5,
article .end-people ~ .highlight,
article .end-people ~ pre {
    width: auto;
    float: none;
    clear: none;
}

.end-people {
    clear: both;
}

@media print, screen and (max-width: 580px) {

/*----------------------------
    Two column layout media
  ---------------------------*/
article .begin-people ~ h5,
article .begin-people ~ p,
article .begin-people ~ .highlight,
article .begin-people ~ pre {
    width: 100%;
    float: none;
    clear: none;
}

}

/* profile pic */
img[alt=profile-photo] {
    width: 60%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
}

/* lab photo - all photos follow inline and start new line when full */
.lab-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

figure.lab-photo {
    text-align: center;
    margin: 1rem 0;
}

figure.lab-photo img {
    height: 250px;
}

figure.lab-photo figcaption {
    font-size: 90%;
    margin-top: 0.5rem;
}

/* affiliation */
img[alt=affiliation] {
    display: inline;
    margin: 0 1rem;
    height: 100px;
}

p:has(img[alt=affiliation]) {
    text-align: center;
}

/* prevent automatic word hyphenation in body text */
p {
    hyphens: none;
    overflow-wrap: break-word;
}

@media (hover: none) {
    .blog-title.pulsing {
        animation: subtle-pulse 4s ease-in-out infinite;
    }
}
@keyframes subtle-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}