/* Archive */
body.post-type-archive main#main {
    padding-left: 0;
    padding-right: 0;

    > .fusion-row {
        max-width: none;
        display: block;
    }
}

.archive-webinar__upcoming {
    --h1_typography-color: #fff;
    --h1_typography-font-size: 55px;
    background-color: #005e5c;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #00856c 100%);
    padding: 60px 30px;

    .archive-webinar__upcoming__inner {
        max-width: var(--site_width);
        margin: 0 auto;

        > h1 {
            text-align: center;
            margin-top: 0;
        }
    
        > hr {
            max-width: 60%;
            margin-bottom: 2rem;
        }
    }
}

.archive-webinar__ondemand {
    padding: 60px 30px;

    .archive-webinar__ondemand__inner {
        max-width: var(--site_width);
        margin: 0 auto;
    }
}

.webinars-grid {
    --columns: 3;
    --spacing: 1rem;
    gap: var(--spacing);
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    grid-auto-rows: 1fr;

    @media (width < 768px) {
        --columns: 1;
    }

    &.has-two-columns {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        .webinar-card {
            flex-basis: calc(100% / var(--columns) - (var(--spacing) * (var(--columns) - 1) / var(--columns)));
        }

        @media (width >= 768px) {
            --columns: 2;
            --spacing: 2.5rem;

            .webinar-card .webinar-card__content h3 {
                font-size: 1.5rem !important;
            }
        }
    }
}

/* Single */
body.single-webinar main#main {
    padding-left: 0;
    padding-right: 0;

    > .fusion-row {
        max-width: none;
    }
}

.single-webinar__banner {
    background-color: #005e5c;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #00856c 100%);
    padding: 60px 30px;

    .single-webinar__banner__inner {
        margin: 0 auto;
        max-width: var(--site_width);
    }

    h1 {
        text-align: center;
        color: #FFF;
        font-size: 42px;
        margin-top: 0;
        margin-bottom: 4rem;
        text-wrap: pretty;
    }

    .single-webinar__banner__content {
        --columns: 1;
        --gap: 60px;
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);

        @media (width >= 1024px) {
            --columns: 2;
        }

        > div {
            flex-grow: 0;
            flex-shrink: 0;
            flex-basis: calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));
        }
    }

    .single-webinar__banner__details .webinar-card__inner {
        min-height: 260px;
    }

    .single-webinar__banner__hero-content {
        color: #fff;

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
    
            li {
                position: relative;
                padding-left: 36px; /* icon width (24px) + gap (12px) */
                margin-bottom: 10px;

                &::before {
                    position: absolute;
                    top: 0;
                    left: 0;
                    font-family: "Font Awesome 5 Free";
                    font-weight: 900;
                    font-size: 24px;
                    line-height: 1;
                    content: "\f058";
                }
            }
        }
    }

    .single-webinar__when {
        display: flex;
        gap: 5px 10px;
        flex-wrap: wrap;
        color: #fff;
        margin: 1rem 0;
    }

    .single-webinar__banner__form {
        background-color: #fff;
        border-radius: 8px;
        padding: 30px;

        h3 {
            text-align: center;
            margin-top: 0;
            margin-bottom: 20px;
        }
    }
}

.single-webinar__content-wrapper {
    margin: 0 auto;
    max-width: var(--site_width);
    padding: 60px 30px;

    h2,
    h3 {
        text-align: center;
    }
}

.single-webinar__speakers {
    margin-top: 4rem;

    .single-webinar__speakers__grid {
        --columns: 1;
        --gap: 30px;
        flex-wrap: wrap;
        justify-content: space-around;
        display: flex;
        gap: var(--gap);

        @media (width >= 768px) {
            --columns: 2;
        }

        @media (width >= 1024px) {
            --columns: 4;
        }
    }

    .single-webinar__speaker {
        text-align: center;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));

        > picture {
            
            img {
                border-radius: 8px;
                aspect-ratio: 1 / 1;
                width: 200px;
                height: auto;
                object-fit: cover;
                object-position: center top;
            }
        }

        h4 {
            font-size: 20px;
            font-weight: bold;
            margin-top: 1rem;
            margin-bottom: 0;
        }

        p {
            margin-top: .25rem;
            margin-bottom: 0;
        }
    }
}

/* Card */
.webinar-card {
    background-color: #00363d;
    background-image:
        url(../img/home-hero-graphic.svg),
        radial-gradient(circle at top left, #006E71 0%, #005E56 45%, #004359 100%);
    background-position: calc(100% + 320px) -230px, center;
    background-repeat: no-repeat;
    border-radius: 8px;
    padding: var(--spacing, 2.5rem);
    container-type: inline-size;
    container-name: webinar-card;
    position: relative;

    /* Stretch the button's link over the whole card */
    .webinar-card__link {
        position: static;

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
        }
    }

    .webinar-card__inner {
        --columns: 2;
        display: grid;
        gap: var(--spacing, 2.5rem);
        grid-template-columns: repeat(var(--columns), 1fr);
        height: 100%;

        @container webinar-card (width < 350px) {
            --columns: 1;

            .webinar-card__content {
                justify-content: flex-start;

                .webinar-card__logo {
                    margin-bottom: 0;
                }
            }
        }
    }

    .webinar-card__content {
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        .webinar-card__logo {
            margin-top: 0;
            margin-bottom: auto;
        }

        h3 {
            color: currentColor;
            font-size: 1.2rem !important;
            margin: 15px 0 0;
            
            &:not(:last-child) {
                margin-bottom: 15px;
                padding-bottom: 15px;
                border-bottom: 2px solid #478784;
            }
        }

        p {
            margin: 0;
        }
    }

    .webinar-card__when {
        font-size: 12px;
        display: flex;
        gap: 0 10px;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }

    .webinar-card__speakers {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: calc(var(--spacing, 2.5rem) / 2);
        align-self: center;

        &:has(.webinar-card__speaker-card:nth-child(2)) .webinar-card__speaker-card {
            flex-basis: calc(50% - (var(--spacing, 2.5rem) / 2));
        }
    }

    .webinar-card__speaker-card {
        border: 1px solid #f6b800;
        background-color: #fff;
        text-align: center;
        width: 100%;

        > picture {
            display: block;

            img {
                width: 100%;
                aspect-ratio: 1 / 1;
                object-fit: cover;
                object-position: top;
            }
        }

        .webinar-card__speaker-content {
            padding: .5rem;
            font-size: .5rem;
        }

        h4 {
            font-size: 1em;
            font-weight: 700;
            margin: 0;
        }

        p {
            margin: 0;
        }
    }
}