/* ==========================================================================
   Pine Research Instrumentation
   
   WORKSHOPS

   Author: Tim Paschkewitz
   ========================================================================== */

#pri-registration-workshop :not([data-type="group"]) label {
    font-size: 1.1em;
    color: var(--dark-pri-blue);
    font-weight: 700;
}

#media-release .second {
    margin: 0 1em;
    font-size: 0.95em;
    padding: 1em 1em 0 1em;
    border: 1px solid var(--mid-blue-1);
    background-color: var(--white);
    border-radius: 5px;
}

#media-release .acf-input {
    margin-left: 2em;
}

.double-padding {
    padding: 32px;
}

.dietary-repeater a.acf-button.acf-repeater-add-row.button.button-primary {
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 5px;
    background-color: var(--mid-blue-1);
    color: var(--white);
    border: 1px solid var(--mid-blue-1);
}

.dietary-repeater a.acf-button.acf-repeater-add-row.button.button-primary:hover {
    color: var(--mid-blue-1);
    background-color: var(--white);
    text-decoration: none;
}

#media-release input[type="checkbox"] {
    transform: scale(1.8);
    margin-right: 1em;
}

div.flex-columns {
    display: flex;
    flex-flow: column wrap;
    row-gap: 1em;
}

div.flex-row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    column-gap: 1em;
    justify-content: center;
    margin: 0.6em 0;
}

.section-block .row {
    padding-bottom: 1.6em;
}

.workshop {
    display: grid;
    /*grid-template-columns:0.3fr 0.8fr 0.8fr 0.6fr 1fr 0.6fr;*/
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1em;
    text-align: center;
    justify-content: center;
    padding: 10px 0;
    font-size: 0.9em;
    align-items: center;
}

.workshop.header {
    font-weight: 700;
    background-color: var(--mid-blue-2);
    align-items: center;
    color: var(--dark-pri-blue);
    border-bottom: 2px solid var(--dark-pri-blue);
    border-top: 2px solid var(--dark-pri-blue);
    padding: 10px 0;
    font-size: 1.1em;
}

.workshop .title {
    font-weight: 700;
}

.workshop:nth-of-type(odd):not(:first-child) {
    background-color: #eee;
    border-top: 1px solid var(--mid-blue-1);
    border-bottom: 1px solid var(--mid-blue-1);
}

.workshop .register {
    display: flex;
    height: fit-content;
    justify-content: center;
    align-self: center;
}

.workshop .location picture.pri-image img,
.workshop .location img.pri-image {
    max-width: 75px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.workshop .location picture.pri-image img:hover,
.workshop .location img.pri-image:hover {
    transform: scale(1.1);
    cursor: pointer;
    opacity: 0.7;
}

.workshop .location {
    display: flex;
    flex-flow: column nowrap;
    row-gap: 1em;
}

.workshop .host a:hover {
    opacity: 0.6;
    cursor: pointer;
}

.workshop .topics-list {
    display: flex;
    flex-flow: column nowrap;
    row-gap: 0.5em;
    align-items: center;
}

.workshop.header .hosts {
    display: flex;
    justify-content: center;
}

.workshop .hosts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em 0;
}

.hosts .staff-member {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    row-gap: 0.5em;
}

.hosts .staff-member .staff-image:hover {
    transform: scale(1.1);
    cursor: pointer;
    opacity: 0.7;
}

.hosts .staff-member .staff-image,
.hosts .staff-member .staff-image img {
    width: 40px;
    max-height: 40px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    object-fit: cover;
    transition: all 0.5s ease;
}

.workshop .register .actions {
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
    row-gap: 2em;
}

/* Single Workshop */

.single-workshop .workshop-title {
    font-size: 48px;
    text-align: center;
    font-weight: 700;
    color: var(--dark-pri-blue);
    font-family: 'Caveat';
}

section[data-select-only="workshop"] .heading {
    display: flex;
    flex-flow: row nowrap;
    color: var(--dark-pri-blue);
    font-size: 1.3em;
    align-items: center;
    padding: 0.5em;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 10%, rgba(179, 203, 211, 1) 100%);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    width: 100%;
}

section[data-select-only="workshop"] .heading .icon {
    flex-basis: 1.5em;
    flex-grow: 0;
    flex-shrink: 0;
}

section[data-select-only="workshop"] .heading .label {
    font-weight: 700;
    font-size: 20px;
    color: var(--dark-pri-blue);
}

.output-wrapper {
    padding-top: 0.8em;
    margin-left: 2.8em;
}

section.registration-section .section-output {
    margin-left: 2.8em;
}

section.registration-section .section-output-open {
    text-align: center;
    display: flex;
    flex-flow: column nowrap;
    row-gap: 0.5em;
    align-items: center;
    padding-top: 0.8em;
}

section.registration-section .register a.pri-button {
    display: flex;
}

section.host-section .output-wrapper {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    column-gap: 1em;
}

section.host-section picture.host-image-thumbnail img {
    max-width: 100px;
    height: auto;
}

section.host-section picture.host-image-thumbnail img:hover {
    opacity: 0.6;
    cursor: pointer;
}

section.host-section .host-details {
    display: flex;
    flex-flow: column wrap;
}

section.date-section .output-wrapper {
    text-align: center;
    font-size: 1.3em;
    font-weight: 700;
    margin-left: 0;
}

section.topics-section ul.pri-list li:first-child {
    margin-top: 0;
}

.google-map {
    min-height: 300px;
    width: 100%;
}

.staff-member-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4em 1.4em;
    margin-top: 1em;
    margin-left: 2.8em;
}

.staff-member-wrapper {
    display: flex;
    flex-flow: column nowrap;
    padding: 0.8em;
    border-radius: 5px;
}

.staff-member-wrapper .profile {
    display: flex;
    flex-flow: row nowrap;
    column-gap: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--mid-blue-1);
}

.staff-member-wrapper .profile .avatar picture.staff-image-object img {
    max-height: 100px;
    max-width: 100px;
    box-shadow: 0 12px 18px -6px rgb(0 0 0 / .3);
    border-radius: 50%;
}

.staff-member-wrapper .profile .avatar picture.staff-image-object img:hover {
    opacity: 0.6;
    cursor: pointer;
}

.staff-member-wrapper .roles {
    display: flex;
    flex-flow: column nowrap;
}

section.team-section .roles {
    margin-top: 0.5em;
}

section.team-section .roles .list {
    font-size: 0.9em;
    padding-top: 0.2em;
    line-height: 1.3em;
    text-align: center;
}

section.team-section .profile .details {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}

section.team-section .profile .details .name {
    font-weight: 700;
    color: var(--dark-pri-blue);
    margin-bottom: 0.5em;
}

section.team-section .profile .details .title {
    font-style: italic;
    color: var(--light-gray);
    margin-bottom: 0.3em;
}

section.team-section .profile .details .institution {
    color: var(--mid-blue-1);
}

section.team-section .profile .details .title,
section.team-section .profile .details .institution {
    line-height: 1.1em;
    font-size: 0.9em;
}

section.schedule-section .events {
    display: grid;
    grid-template-columns: 0.3fr 0.3fr 0.6fr 1fr 0.6fr;
    gap: 1em;
    padding: 10px;
    text-align: center;
    justify-content: center;
    font-size: .9em;
}

section.schedule-section .events.header {
    font-weight: 700;
    background-color: var(--mid-blue-2);
    align-items: center;
    color: var(--dark-pri-blue);
    border-bottom: 2px solid var(--dark-pri-blue);
    border-top: 2px solid var(--dark-pri-blue);
    padding: 10px;
    font-size: 1.1em;
}

section.schedule-section .output-wrapper {
    display: flex;
    flex-flow: column nowrap;
    row-gap: 2em;
}

section.schedule-section fieldset.event-day {
    border: 2px solid var(--mid-blue-1);
    border-radius: 5px;
    padding: 1em;
}

section.schedule-section fieldset.event-day legend {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--dark-pri-blue);
    padding-inline: 0.4em;
    margin-left: 0.6em;
}

section.schedule-section .events .time {
    font-weight: 700;
}

F section.schedule-section .event-date {
    color: var(--dark-pri-blue);
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 1em;
}

section.schedule-section .events:nth-of-type(odd):not(:first-child) {
    background-color: #eee;
    border-top: 1px solid var(--mid-blue-1);
    border-bottom: 1px solid var(--mid-blue-1);
}

section.gallery-section .output-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1em;
}

section.gallery-section .output-wrapper .gallery-item {
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    justify-items: center;
}

section.gallery-section .output-wrapper .gallery-item:hover {
    transform: scale(1.2);
    cursor: pointer;
    opacity: 0.6;
}

section.gallery-section .output-wrapper .gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    box-shadow: 0 12px 18px -6px rgb(0 0 0 / .3);
}

/* Manual Pretty Notice */
.pretty-notice .wrapper .header .icon {
    font-size: 1.8em;
}

.pretty-notice .wrapper .header .title {
    font-size: 1em;
}

.pretty-notice .wrapper .body-text {
    font-size: 0.9em;
}

/* Workshop Staff */
#staff-image-section .staff-image {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#staff-image-section .staff-image:hover {
    transform: scale(1.2);
    cursor: pointer;
    opacity: 0.6;
}

#staff-image-section .staff-image .image img {
    border-radius: 50%;
    width: 400px;
    height: auto;
    box-shadow: 0 12px 18px -6px rgb(0 0 0 / .3);
}

.history-grid .location {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    row-gap: 0.5em;
}

.history-grid:not(.header) .image {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.history-grid:not(.header) .image:hover {
    transform: scale(1.2);
    cursor: pointer;
    opacity: 0.6;
}

.history-grid .image picture.host-image-thumbnail img,
.history-grid .image img.host-image-thumbnail {
    width: 100px;
    height: auto;
}

.history-grid {
    display: grid;
    grid-template-columns: 0.5fr 1fr 0.8fr 0.6fr;
    gap: 1em;
    text-align: center;
    justify-content: center;
    padding: 10px;
    font-size: 0.9em;
    align-items: center;
}

.history-grid.header {
    font-weight: 700;
    background-color: var(--mid-blue-2);
    align-items: center;
    color: var(--dark-pri-blue);
    border-bottom: 2px solid var(--dark-pri-blue);
    border-top: 2px solid var(--dark-pri-blue);
    padding: 10px;
    font-size: 1.1em;
}

.history-grid:nth-of-type(odd):not(:first-child) {
    background-color: #eee;
    border-top: 1px solid var(--mid-blue-1);
    border-bottom: 1px solid var(--mid-blue-1);
}

.staff-container .flex-column {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

#staff-section .staff-container .name {
    font-size: 42px;
    color: var(--dark-pri-blue);
    text-align: center;
    line-height: 2em;
    font-weight: 700;
    font-family: 'Caveat';
}

#staff-section .staff-container .title,
.workshop-staff-container .workshop-staff:not(.workshops) .title {
    font-style: italic;
    color: var(--light-gray);
}

#staff-section .institution,
.workshop-staff-container .workshop-staff .institution {
    color: var(--mid-blue-1);
    font-weight: 700;
}

#staff-section .biography {
    line-height: 1.5em;
    margin-bottom: 3em;
    padding: 1em 0;
    border-top: 1px solid var(--mid-blue-2);
    border-bottom: 1px solid var(--mid-blue-2);
}

#staff-section .inner-flex-column {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    text-align: center;
    row-gap: 0.2em;
    margin-bottom: 1em;
}

#staff-section .staff-container.staff-personal {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2em;
}

#staff-section .staff-container.staff-personal .socials {
    display: flex;
    flex-flow: row nowrap;
    column-gap: 1em;
    align-items: center;
    font-size: 1.8em;
}

/* Workshop Staff List */
.workshop-staff-container .workshop-staff {
    display: grid;
    grid-template-columns: 0.5fr 0.5fr 1fr;
    gap: 1em;
    text-align: center;
    justify-content: center;
    padding: 10px;
    align-items: center;
    font-size: 1em;
}

.workshop-staff-container .workshop-staff:not(.workshops):nth-of-type(odd):not(:first-child) {
    background-color: #eee;
    border-top: 1px solid var(--mid-blue-1);
    border-bottom: 1px solid var(--mid-blue-1);
}

.workshop-staff-container .workshop-staff.header {
    font-weight: 700;
    background-color: var(--mid-blue-2);
    align-items: center;
    color: var(--dark-pri-blue);
    border-bottom: 2px solid var(--dark-pri-blue);
    border-top: 2px solid var(--dark-pri-blue);
    padding: 10px;
    font-size: 1.1em;
}

.workshop-staff-container .workshop-staff .staff img {
    width: 150px;
    height: auto;
    border-radius: 50%;
    box-shadow: var(--box-shadow-default)
}

.workshop-staff-container .workshop-staff .staff a {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.workshop-staff-container .workshop-staff .staff a:hover {
    transform: scale(1.2);
    cursor: pointer;
    opacity: 0.6;
}

.workshop-staff-container .workshop-staff:not(.header) .name {
    color: var(--dark-pri-blue);
    text-align: center;
    font-weight: 700;
}

.workshop-staff-container .workshop-staff .staff {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    text-align: center;
}

.workshop-staff-container .workshop-staff .details {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    text-align: center;
    row-gap: 0.8em;
}

@media screen and (max-width:576px) {
    .workshop {
        display: flex !important;
        flex-flow: column nowrap !important;
        row-gap: 1.5em !important;
        font-size: 1em !important;
    }

    .workshop-list-container>div:not(.header) {
        background-color: var(--lightest-gray) !important;
        border-top: 5px solid var(--mid-blue-1) !important;
        border-bottom: 5px solid var(--mid-blue-1) !important;
    }

    .workshop:not(.header):not(.future) div.hosts {
        border-bottom: unset !important;
    }

    .workshop.header {
        font-size: 1em !important;
        row-gap: 0.5em !important;
    }

    .workshop:not(.header)>div:not(.register) {
        border-bottom: 1px solid var(--mid-blue-2);
        padding-bottom: 1em;
    }

    .workshop div.register {
        margin-bottom: 1em;
    }

    .workshop-list-container {
        display: flex;
        flex-flow: column nowrap;
        row-gap: 2em;
    }

    .single-workshop .workshop-title {
        font-size: 36px;
    }

    .staff-member-container {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)) !important;
    }

    .events.header {
        font-size: 1em !important;
    }

    .events {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)) !important;
    }

    .events:not(.header) .time {
        font-size: 1.1em;
        font-weight: 700;
    }

    .history-grid .image picture.host-image-thumbnail img,
    .history-grid .image img.host-image-thumbnail {
        width: 50px;
    }

    .history-grid,
    .workshop-staff-container .workshop-staff {
        grid-template-columns: var(--grid-tc-minmax-100-pct);
    }

    .top-blurb-custom {
        max-width: 100% !important;
    }

    .section-block .et_pb_row {
        background-image: none;
    }

    .flex-row {
        flex-flow: column nowrap !important;
        row-gap: 2em;
    }

    .section-block.second .et_pb_row,
    .section-block.fourth .et_pb_row {
        background-color: var(--mid-blue-1);
    }
}