/* Additions for the new renderer (core/BlockRenderer.php); the base design is style.css and the component CSS */

img {
    height: auto;   /* width/height attributes reserve the space, the CSS keeps the aspect ratio */
}

div.image.image--full, article div.image.image--full {
    float: none;
    max-width: 100%;
    margin: 0 0 1rem 0;
}
div.image.image--half, article div.image.image--half {
    float: none;
    max-width: 50%;
    margin: 0 0 1rem 0;
}
div.image.image--natural, article div.image.image--natural {
    float: none;
    max-width: 100%;
    margin: 0 0 1rem 0;
}

/* first-page previews of documents: small, like on the old site */
div.image.image--document, article div.image.image--document {
    max-width: 220px;
}

/* gallery thumbnails: square crop of the 400px variant (the old site cropped 148x148 on the server) */
.gallery img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.callout--highlight {
    color: #fff;
    background-color: #e42230;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
}
.callout--highlight a {
    color: #fff;
    text-decoration: underline;
}
.callout--small {
    font-size: 75%;
}

.board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.board__role {
    padding: 1ch;
    border: 1px solid lightgrey;
}

.news__date, .event__date {
    color: #555;
    margin-bottom: 1ch;
}

.video {
    display: block;
    max-width: 100%;
    margin-bottom: 1rem;
}

/* footer banner: at most 1000 x 100 like before; the base CSS gives every div overflow: auto, which showed a scroll box */
.footer__banner {
    overflow: visible;
}
.footer__banner img {
    max-height: 100px;
    width: auto;
    margin: 0 auto;
}

/* linked headings (news, event reports) look like headings, the link shows on hover */
.pagecontent h1 a, .pagecontent h2 a, .pagecontent h3 a {
    color: inherit;
}
.pagecontent h1 a:hover, .pagecontent h2 a:hover, .pagecontent h3 a:hover {
    color: #e42230;
}