/*
Description: Custom Styles for Plitsch-Platsch Kurse Plugin
*/

aside { 
    background: var(--basic);
    font-size: var(--fontsize-s);
    padding: var(--fontsize-s);
    margin: 0;
    margin-top: var(--fontsize-xl);
    border-radius: var(--borderradius);
}

aside > * { color: var(--light);font-size: calc(var(--fontsize-xs) * 0.85) !important;}
aside p.titletxt { font-size: var(--fontsize-s) !important;font-weight: 700;margin-bottom: var(--fontsize-xxs);}
aside a.button { display: inline-block;background: var(--light);color: var(--basic);margin-top: var(--fontsize-m);}
aside a.wp-block-button__link { font-size: calc(var(--fontsize-xs) *0.85) !important;padding: 0.5em 1em;transform: translateY(0%) !important;
}

.single-kurs aside .wp-block-post-image img { border-radius: none;margin: var(--fontsize-m) auto;margin-top: calc(var(--fontsize-m) * 0.5)}
.tag aside .wp-block-post-image img { border-radius: 50%;margin: var(--fontsize-m) auto;margin-top: calc(var(--fontsize-m) * 0.5)}


.hidden { display: none !important; }

#filter-list { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -ms-flex-wrap: wrap; 
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    padding: 0;
}

#filter-list li { 
    -webkit-box-flex: 0; 
        -ms-flex: 0 1 auto; 
            flex: 0 1 auto;
    list-style-type: none;
    background: var(--basic); 
    color: var(--light);
    font-size: var(--fontsize-xxs);
    font-weight: 600;
    text-align: center;
    border-radius: var(--borderradius-small);
    padding: 0.5em 1em;
    margin: var(--fontsize-xxs);
    cursor: pointer;
}

#filter-list li:hover { background: var(--secondary);}
#filter-list li::marker { content: '';}

#filter-list li a,
#filter-list li a:hover { color: var(--light); text-decoration: none;}

.kurse { position: relative;}

.kurse .kurs { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
    background: var(--light); 
    border-radius: var(--borderradius); 
    box-shadow: var(--shadow);
    margin-bottom: var(--fontsize-xxl);
 }

.kurse .kurs .kurs-content {
    background: var(--medium);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
            align-items: flex-start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding-bottom: var(--fontsize-l);
    margin-bottom: var(--fontsize-m);
    border-radius: var(--borderradius) var(--borderradius) 0 0;
}

.kurse .kurs .post-title { 
    background: var(--basic);
    font-size: var(--fontsize-s);
    color: var(--light);
    text-align: center;
    padding: var(--fontsize-xs) var(--fontsize-xxs);
    border-radius: var(--borderradius) var(--borderradius) 0 0;
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
}

.kurse .kurs .info {  
    display: block;
    color: var(--light);
    font-size: var(--fontsize-xs);
    font-weight: 600;
}

.kurse .kurs .post-title a { color: var(--light);text-decoration: none;}
.kurse .kurs .post-title a:hover { color: var(--secondary);} 

.kurse .kurs .kurs-txt { padding: var(--fontsize-s); }
.kurse .kurs .kurs-txt p {  
    overflow-wrap: break-word; 
    -webkit-hyphens: auto; 
    -ms-hyphens: auto; 
    hyphens: auto;
 }

.kurse .kurs a.button { height: auto;margin: auto var(--fontsize-s);margin-bottom: var(--fontsize-l);cursor: pointer;}

.single-kurs .wp-block-heading,
.tag .wp-block-heading { text-align: left;padding-top: 0;}
.single-kurs h2 { color: var(--basic); }

.single-kurs p.infoage { 
    font-size: var(--fontsize-s);
    color: var(--basic);
    font-weight: 700;
    margin-top: var(--fontsize-xs);
}

.tags { position: relative;}

.tags .tag { 
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: var(--light); 
    border-radius: var(--borderradius); 
    margin-bottom: var(--fontsize-xxl);
 }

.tags .tag .post-title { 
    background: var(--basic);
    font-size: var(--fontsize-s);
    color: var(--light);
    text-align: center;
    padding: var(--fontsize-xs) var(--fontsize-xxs);
    border-radius: var(--borderradius) var(--borderradius) 0 0;
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
}

.tags .tag .post-title a { color: var(--light);text-decoration: none;}
.tags .tag .post-title a:hover { color: var(--secondary);} 

.tags .tag figure { margin-bottom: -2px;}
.tags .tag img { width: 100%; height: auto;overflow: hidden;border-radius: 0 0 var(--borderradius) var(--borderradius) }

.kurse .kurs .tag-txt { padding: var(--fontsize-xs); }
.kurse .kurs .tag-txt p {  
    overflow-wrap: break-word; 
    -webkit-hyphens: auto; 
    -ms-hyphens: auto; 
    hyphens: auto;
 }

.tags .tag .post-title a { text-decoration: none;}

.tags .tag .tag-txt { padding: var(--fontsize-xs); }
.tags .tag .tag-txt p {  
    overflow-wrap: break-word; 
    -webkit-hyphens: auto; 
    -ms-hyphens: auto; 
    hyphens: auto;
 }
 
.tags .tag a.button { position: absolute; left: 50%;bottom: 0; -webkit-transform: translateX(-50%) translateY(50%); -ms-transform: translateX(-50%) translateY(50%); transform: translateX(-50%) translateY(50%);}

.taxonomy_content {
    width: auto;
    max-width: 100%;;
    border-radius: var(--borderradius);
    padding: 0;
    margin: var(--fontsize-xxl) var(--fontsize-xs) !important;
    background: var(--light);
}

.taxonomy_content h2, 
.taxonomy_content h3,
.taxonomy_content h4 { 
    font-size: var(--fontsize-m);
    color: var(--basic);
    -ms-grid-column-span: 2;
    grid-column: span 2;
}

.taxonomy_content h2 { font-size: var(--fontsize-m); }
.taxonomy_content h3,
.taxonomy_content h4 { font-size: var(--fontsize-s);margin: var(--fontsize-xxl) 0 var(--fontsize-xs) 0; }

.taxonomy_content .description .wp-block-group { background: var(--light-transparent); color: var(--txt);padding: var(--fontsize-m);margin: var(--fontsize-m) 0; border-radius: var(--borderradius-small);}

.tag .taxonomy_content .description strong { display: block;}
.tag h2 { color: var(--basic); }
.tag .kurse { display: none;} /* Course tiles, see tag.php, 67 - 114 */

#booking iframe { 
    background: var(--light);
    border-radius: var(--borderradius-small);
    padding: var(--fontsize-m);
    margin: var(--fontsize-m) calc(var(--fontsize-xxs) * -1);
}

.bookinginfo { text-align: left;font-size: var(--fontsize-xxs);}
.bookinginfo br { display: block; margin-bottom: calc(var(--fontsize-xxs) * 0.5);}


/*** Media Queries ***/

@media screen and ( min-width: 600px ) {

    #filter-list li { font-size: var(--fontsize-xs); }

    .kurse { 
        display: -ms-grid; 
        display: grid;
        -ms-grid-columns: auto 2rem auto;
        grid-template-columns: repeat(2, auto);
        grid-auto-rows: 1fr;
        grid-gap: var(--fontsize-m);
    }

    .kurse .kurs .post-title { min-height:var(--fontsize-xxl);}

    .tags { 
        display: -ms-grid; 
        display: grid;
        grid-template-columns: repeat(2, auto);
        grid-gap: var(--fontsize-m);
    }


}
@media screen and ( min-width: 782px ) {

    .taxonomy_content { 
        display: -ms-grid; 
        display: grid;
        -ms-grid-columns: 1fr var(--fontsize-xxl) 1fr var(--fontsize-xxl) 1fr;
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-rows: 1fr;
        grid-gap: var(--fontsize-xxl);
        width: auto !important;
    }
 
    .taxonomy_content .description { -ms-grid-column-span: 2; grid-column: span 2;}
    .taxonomy_content aside { -ms-grid-column: 3; -ms-grid-column-span: 1; grid-column: 3 / span 1;border-radius: var(--borderradius-small);margin: 0;}

    .tag .taxonomy_content .description p { display: -webkit-box; display: -ms-flexbox; display: flex;}
    .tag .taxonomy_content .description strong { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%}

    /* .kurs .taxonomy_content { display: block; } */
    .kurs .taxonomy_content h2 {font-size: var(--fontsize-s);}
    .kurs .taxonomy_content p { max-width: 80ch;padding: 0;margin: 0;margin-top: var(--fontsize-m);}
    
}

@media screen and (min-width: 1088px) {

    .taxonomy_content { margin: 4rem calc(50% - 33rem) !important; }
    .tag .taxonomy_content .description strong { -webkit-box-flex: 0; -ms-flex: 0 0 30%; flex: 0 0 30%}

}

@media screen and (min-width: 1281px) {
    .taxonomy_content { margin: var(--fontsize-xxl) calc(50% - 34rem) !important; }
}

@media screen and (min-width: 1320px) {}