/* Program card with session timeline (webinar-landing/program-card.php). */

.rd-wl-program {
    grid-area: PROGRAM;
    overflow: hidden;
    background: var(--rd-font-light);
    color: var(--rd-wl-dark);
    border-radius: var(--rd-borderradius-border-xl);
    box-shadow: var(--rd-wl-shadow-ticket);
}

.rd-wl-program-heading,
.rd-wl-program-credit {
    padding: var(--rd-spacing-xx-big) var(--rd-spacing-xxx-big) var(--rd-spacing-x-big);
    background: var(--rd-wl-accent-soft);
}

.rd-wl-program-heading p {
    margin: 0 0 calc(var(--rd-spacing-x-sm) + var(--rd-spacing-xxx-sm));
    color: var(--rd-wl-accent-secondary);
    font-size: var(--rd-fontsize-3);
    font-weight: var(--rd-fontweights-open-sans-1);
    line-height: normal;
}

/* Date next to the eyebrow: mobile only, desktop shows .rd-wl-program-date instead. */
.rd-wl-program-heading p span {
    display: none;
}

.rd-wl .rd-wl-program-heading h2 {
    color: var(--rd-wl-dark);
    font-size: var(--rd-fontsize-8);
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
}

.rd-wl-program-body {
    padding: var(--rd-spacing-x-big) var(--rd-spacing-xxx-big);
}

.rd-wl-program-date,
.rd-wl-session-speaker {
    color: var(--rd-gray-500);
    font-size: var(--rd-fontsize-3);
    line-height: normal;
}

.rd-wl-program-date {
    margin: 0 0 var(--rd-spacing-sm);
    font-weight: var(--rd-fontweights-open-sans-0);
}

.rd-wl-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Figma: time (40px) · 16 · dot (14px) · 16 · text */
.rd-wl-timeline li {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: var(--rd-spacing-md);
    position: relative;
    padding-bottom: calc(var(--rd-spacing-sm) + var(--rd-spacing-xxx-sm));
    font-size: var(--rd-fontsize-3);
    line-height: 20px;
}

.rd-wl-timeline li:last-child {
    padding-bottom: 0;
}

/* Connector line from this dot's centre to the next one's (next dot centre = 9.5px below this item). */
.rd-wl-timeline li::before {
    content: '';
    position: absolute;
    top: 9.5px;
    bottom: -9.5px;
    left: 62px;
    border-left: 2px solid var(--rd-wl-accent);
}

.rd-wl-timeline li:last-child::before {
    display: none;
}

/* 14px dot with a 3px white ring that cuts the line */
.rd-wl-timeline li::after {
    content: '';
    position: absolute;
    top: 2.5px;
    left: 56px;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--uui-color-brand-600);
    /* #0F43BE */
    box-shadow: 0 0 0 3px var(--rd-font-light);
}

/* Without times (showSessionTimes = false): dot (14px) · 16 · text, the dot on the body's edge. */
.rd-wl-timeline--no-times li {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 30px;
}

.rd-wl-timeline--no-times li::before {
    left: 6px;
}

.rd-wl-timeline--no-times li::after {
    left: 0;
}

.rd-wl-timeline time {
    color: var(--rd-font-title-gray);
    font-weight: var(--rd-fontweights-open-sans-0);
    line-height: 19px;
}

.rd-wl-timeline strong,
.rd-wl-session-number,
.rd-wl-session-speaker {
    display: block;
}

.rd-wl-timeline strong {
    margin-block: var(--rd-spacing-xxx-sm);
    font-size: var(--rd-fontsize-4);
}

.rd-wl-session-number {
    color: var(--rd-wl-accent-secondary);
    font-size: var(--rd-fontsize-3);
    font-weight: var(--rd-fontweights-open-sans-1);
    line-height: normal;
}

.rd-wl-program-credit {
    display: flex;
    align-items: center;
    gap: calc(var(--rd-spacing-x-sm) + var(--rd-spacing-xxx-sm));
    padding-bottom: var(--rd-spacing-x-big);
    font-size: var(--rd-fontsize-5);
    font-weight: var(--rd-fontweights-open-sans-0);
}

.rd-wl-program-credit > span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--rd-wl-accent-strong);
    color: var(--rd-font-light);
    font-size: var(--rd-fontsize-10);
    font-weight: 800;
    line-height: 28px;
}

.rd-wl-program-credit > img {
    margin-left: auto;
}

@media (max-width: 760px) {
    .rd-wl-program-heading,
    .rd-wl-program-credit,
    .rd-wl-program-body {
        padding: var(--rd-spacing-md);
    }

    .rd-wl .rd-wl-program-heading h2 {
        font-size: var(--rd-fontsize-5);
    }

    .rd-wl-program-heading p span {
        display: inline;
    }

    .rd-wl-program-date,
    .rd-wl-session-number,
    .rd-wl-session-speaker {
        display: none;
    }

    .rd-wl-timeline li {
        grid-template-columns: 46px minmax(0, 1fr);
        padding-bottom: var(--rd-spacing-sm);
    }

    .rd-wl-timeline li::before {
        left: 48px;
    }

    .rd-wl-timeline li::after {
        left: 42px;
    }

    .rd-wl-timeline--no-times li {
        grid-template-columns: minmax(0, 1fr);
        padding-left: 22px;
    }

    .rd-wl-timeline--no-times li::before {
        left: 6px;
    }

    .rd-wl-timeline--no-times li::after {
        left: 0;
    }

    .rd-wl-timeline strong {
        margin-block: 0;
        font-weight: var(--rd-fontweights-open-sans-1);
    }

    .rd-wl-program-credit > img {
        display: none;
    }
    .rd-wl-program-credit > span {
        font-size: var(--rd-fontsize-6);
    }
}