/* Article Page Specific Styles */

/* Figure and image styles */
figure {
    margin: calc(var(--spacing) * 1.5) 0;
    text-align: center;
}

figure img,
figure video {
    max-width: 100%;
    max-height: 450px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    margin: 0 auto;
}

figcaption {
    margin-top: calc(var(--spacing) / 2);
    font-size: 0.9rem;
    opacity: 0.7;
    font-style: italic;
    text-align: center;
}

/* Smaller images on larger screens */
@media screen and (min-width: 600px) {
    figure img,
    figure video {
        max-height: 500px;
    }
}

/* Article header with date */
.article-date {
    margin-bottom: var(--spacing);
}

/* Back link */
.back-link {
    display: inline-block;
    margin-bottom: var(--spacing);
    opacity: 0.7;
    text-decoration: none;
}

.back-link:hover {
    opacity: 1;
}

/* Video element */
video {
    max-width: 100%;
    border-radius: 4px;
}