/* 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%;
}
/* the quiet hint (e.g. "Übungsleitung gesucht"): a light tint with a red line, visible without shouting */
.callout--note {
    margin-bottom: 1rem;
    padding: .8rem 1rem;
    border-left: 4px solid #e42230;
    background-color: #fdf0f1;
}
.callout--note strong {
    color: #c01a27;
}
.callout--note p:last-child {
    margin-bottom: 0;
}

.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;
}

/* a past event without report */
.event__over {
    padding: 1ch;
    border: 1px solid lightgrey;
}

.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;
}

/* links to the legal pages (Impressum, Datenschutz) above the copyright; "Stand" below a legal text */
.footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.25rem;
}
.footer__legal a {
    display: inline;
    color: #555;
}
.footer__legal a:hover {
    color: #e42230;
}
.legal__date {
    margin-top: 2rem;
    color: #555;
}

/* legal pages: no side menu, a readable text column */
.is-legal .pagecontent {
    max-width: 48rem;
    margin: 0 auto;
}

/* groups: the age group is in the table already (the classic look has no label); the contact button below it */
.group__audience {
    display: none;
}
.group__contact {
    text-align: center;
    margin: 0 0 2rem;
}
/* dates as calendar sheets (dates page, "Zuletzt"), by month on the dates page; a link with an arrow when there is more */
.dates {
    list-style: none;
    margin: 0 0 1.5em;
    padding: 0;
}
.dates__item {
    display: flex;
    gap: 1em;
    align-items: center;
    padding: .45em 0;
    border-bottom: 1px solid #ddd;
    color: inherit;
}
a.dates__item:hover strong {
    text-decoration: underline;
}
.dates .date {
    display: grid;
    place-items: center;
    flex: none;
    width: 3.2em;
    padding: .2em 0;
    border: 1px solid #e42230;
    border-radius: 4px;
    color: #e42230;
    font-size: .8em;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.15;
}
.dates .date b {
    font-size: 1.5em;
}
.dates__text {
    flex: 1;
}
.dates__text strong, .dates__text small {
    display: block;
}
.dates__text small {
    color: #666;
}
.dates__note {
    display: block;
    margin-top: .15em;
}
.dates__go {
    flex: none;
    width: .5em;
    height: .5em;
    margin-right: .3em;
    border: solid #e42230;
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
}

/* weekly training times (block "Trainingszeiten"): one list per weekday */
.timetable__day ul {
    list-style: none;
    margin: 0 0 1.5em;
    padding: 0;
}
.timetable__day li a {
    display: flex;
    gap: 1em;
    padding: .45em 0;
    border-bottom: 1px solid #ddd;
    color: inherit;
    text-decoration: none;
}
.timetable__day li a:hover strong {
    text-decoration: underline;
}
.timetable__time {
    flex: none;
    width: 8.5em;
    white-space: nowrap;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}
.timetable__what small {
    display: block;
    color: #666;
}
.timetable__icon {
    flex: none;
    width: 1.75em;
    height: 1.75em;
    object-fit: contain;
}

/* filter of a list (timetable with all sections, news overview): section buttons, a choice of place (views/js/filter.js) */
.filter-bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75em;
    margin: 0 0 1.5em;
}
.filter-bar__choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5em 1.5em;
}
.filter-bar[hidden], .filter-empty[hidden], [data-filter-group][hidden], [data-item][hidden] {
    display: none;
}
.filter-bar__sections {
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
}
.filter-bar__sections button {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .3em .8em;
    border: 1px solid #ccc;
    border-radius: 99px;
    background: #fff;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.filter-bar__sections button img {
    width: 1.2em;
    height: 1.2em;
}
.filter-bar__sections button[aria-pressed="true"] {
    border-color: #e42230;
    background: #e42230;
    color: #fff;
}
.filter-bar__sections button[aria-pressed="true"] img {
    filter: invert(1);
}
.filter-bar__place select {
    margin-left: .4em;
    font: inherit;
}

/* "News aus dem Bereich": the newest news of a department, sub-department or group */
.area-news ul {
    list-style: none;
    margin: 0 0 .5em;
    padding: 0;
}
.area-news li a {
    display: flex;
    gap: .9em;
    align-items: center;
    padding: .5em 0;
    border-bottom: 1px solid #ddd;
    color: inherit;
    text-decoration: none;
}
.area-news li a:hover strong {
    text-decoration: underline;
}
.area-news__image {
    flex: none;
    width: 4.5em;
    height: 4.5em;
    overflow: hidden;
    border-radius: 4px;
    background: #eee;
}
.area-news__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.area-news__text small {
    display: block;
    color: #666;
}
.area-news__all {
    margin: .5em 0 2em;
}

/* older event reports: a list by year below the recent ones */
.event-archive__date {
    color: #666;
}

/* group page: target groups as tags, a second kind of button (outline) next to the main one */
.group__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35em;
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
}
.group__tags li {
    padding: .1em .6em;
    border: 1px solid #ccc;
    border-radius: 99px;
    font-size: .9em;
}
a.button.button--secondary {
    background: #fff;
    color: #e42230;
    border: 1px solid #e42230;
}
.group__contact a.button {
    margin: .2em;
}
/* coming dates of an area, the trainers by department */
.area-events__all {
    margin: 0 0 2em;
}
.trainers__list {
    list-style: none;
    margin: 0 0 1.5em;
    padding: 0;
}
.trainers__list li {
    padding: .45em 0;
    border-bottom: 1px solid #ddd;
}
.trainers__list strong, .trainers__list small, .trainers__contact {
    display: block;
}
.trainers__list small {
    color: #666;
}

/* ---------- spacing in the content: a heading sits closer to what it introduces than to what came before it,
   the boxes (Termine, News aus dem Bereich) keep the same distance to the next block as a paragraph ---------- */
.pagecontent h2 {
    margin-top: 1.1rem;
    margin-bottom: .5rem;
}
.pagecontent h3 {
    margin-top: .85rem;
    margin-bottom: .35rem;
}
.pagecontent > :first-child,
.pagecontent article > :is(h2, h3):first-child,
.pagecontent h2 + h3,
.pagecontent h2 + div > h3:first-child,
.pagecontent :is(h1, h2, h3) + :is(p, ul, ol, table) {
    margin-top: 0;
}
.pagecontent > section {
    margin-bottom: 1.25rem;
}
.pagecontent article {
    margin-bottom: 2rem;
}

/* "Neu": a news that counts at the bell, after its date; like a small stamp */
.news-new {
    display: inline-block;
    margin-left: .4em;
    padding: 0 .35em;
    border: 1px solid #c01a27;
    border-radius: 3px;
    color: #c01a27;
    font-size: .75em;
    font-weight: bold;
    letter-spacing: .05em;
    line-height: 1.4;
    text-transform: uppercase;
    vertical-align: .1em;
}

/* block "Unterseiten": a tile per sub page; groups with target groups and times */
.subpages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.subpages__tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: .5rem;
    box-shadow: 2px 2px 6px 1px #00000011;
    color: inherit;
    text-decoration: none;
}
.subpages__tile:hover {
    box-shadow: 2px 2px 10px 2px #00000022;
    text-decoration: none;
}
.subpages__image {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f4f4f4;
}
.subpages__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.subpages__image--icon {
    display: grid;
    place-items: center;
}
.subpages__image--icon img {
    width: 30%;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.subpages__body {
    display: grid;
    gap: .3rem;
    padding: .6rem .75rem .8rem;
}
.subpages__tags span {
    margin-right: .4em;
    color: #555;
    font-size: .85em;
}
.subpages__times {
    color: #c01a27;
    font-size: .9em;
}
.subpages__below {
    color: #555;
    font-size: .9em;
}
@media (max-width: 560px) {
    .subpages {
        grid-template-columns: 1fr;
        gap: .6rem;
    }
    .subpages__tile {
        flex-direction: row;
    }
    .subpages__image {
        flex: none;
        width: 6.5rem;
        aspect-ratio: 1;
    }
    .subpages__body {
        align-content: center;
    }
}