/* 
    Created on : 30. 4. 2021, 14:52:30
    Author     : Jiří Frantál
*/

/* +++ About school +++ */

#body {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
}

/* -------------------- Info box -------------------- */

@media
(min-width: 1200px) {
    #body #aboutSchool .content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: minmax(min-content, max-content) auto;
    }
    
    #body #aboutSchool .content #table {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }
    
    #body #aboutSchool .content #photo {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }
    
    #body #aboutSchool .content #text {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    
    #body #aboutSchool .content #photo {
        width: calc(100% - 10px);
        
        margin: 5px;
        margin-bottom: 0px;
    }
}

@media
(max-width: 1200px) {
    #body #aboutSchool .content {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
    }
    
    #body #aboutSchool .content #photo {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }
    
    #body #aboutSchool .content #table {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    
    #body #aboutSchool .content #text {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 4;
    }
    
    #body #aboutSchool .floatingcontent .content #photo {
        width: calc(100% - 10px);
        
        margin: 5px;
    }
}

#body #aboutSchool .content {
    margin-bottom: 10px;
}

/* -------------------- Table -------------------- */

#body #aboutSchool #table .tit::after {
    content: ':';
}

#body #aboutSchool #table .tit {
    font-weight: bold;
}

@media only screen and (min-width: 500px) {
    #body #aboutSchool #table {
        display: grid;
        grid-template-columns: auto auto;
        
        column-gap: 10px;
    }
    
    #body #aboutSchool #table .tit {
        grid-column-start: 1;
        grid-column-end: 2;
        
        min-width: 130px;
    }
    
    #body #aboutSchool #table .con {
        grid-column-start: 2;
        grid-column-end: 3;
    }
    
    #body #aboutSchool #table {
        padding: 5px;
        padding-bottom: 10px;
    }
}

@media
(min-width: 500px) and (max-width: 1200px) {
    #body #aboutSchool #table {
        row-gap: 5px;
    }
}

@media
(max-width: 500px) {
    #body #aboutSchool #table {
        display: grid;
        grid-template-columns: auto;
    }
    
    #body #aboutSchool #table .tit {
        justify-self: left;
    }
    
    #body #aboutSchool #table .con {
        justify-self: right;
        text-align: right;
        
        margin-bottom: 5px;
    }
    
    #body #aboutSchool #table {
        padding: 5px;
    }
}

#body #aboutSchool #table {
    border-bottom: solid var(--color-minor-dark) 2px;
}

/* -------------------- Text -------------------- */

#body #aboutSchool #text {
    padding: 5px;
    margin-top: 5px;
}

#body #aboutSchool #text p+h3 {
    margin-top: 10px;
}

#body #aboutSchool #text p:not(.first) {
    text-indent: 30px;
}

#body #aboutSchool #text p.new {
    margin-top: 20px;
}

#body #aboutSchool #text a {
    text-decoration: none;
}

/* -------------------- Map -------------------- */

#body #map .floatingcontent {
    padding: 0px;
    overflow: hidden;
}

#body #map iframe {
    border: 0px;
    margin-bottom: -4px; /* dirty, but works */
    
    height: 500px;
    width: 100%;
}