/* =============================================================================
   WEBINARS — GRID CARD (OUTER GRID/CARD SHELL COMES FROM
   vc-addons/css/linux-foundation-components.css: .lf-grid, .lf-card,
   .lf-card__image, .lf-card__body, .lf-card__title, .lf-pagination, .lf-none)
   ============================================================================= */

.webinars-card__pills {
    margin: 15px 0;
}

.webinars-card__pill {
    display: inline-block;
    font-size: 15px;
    text-transform: uppercase;
    text-decoration: none;
    /* COLOR SET INLINE VIA SALIENT BODY COLOR */
}

.webinars-card .lf-card__title {
    font-size: 24px;
    font-weight: 300;
    margin: 15px 0 !important;
}

.webinars-card__date {
    font-size: 18px;
    font-weight: 900;
    margin: 15px 0 !important;
    /* COLOR SET INLINE VIA SALIENT BODY COLOR */
}

/* =============================================================================
   WEBINARS — LIST ITEM (OUTER LIST SHELL COMES FROM
   vc-addons/css/linux-foundation-components.css: .lf-list, .lf-list__item,
   .lf-list__image, .lf-list__content, .lf-list__title, .lf-list__excerpt)
   COLORS SET INLINE VIA SALIENT ACCENT/BODY COLOR; FONTS INHERIT FROM SALIENT
   ============================================================================= */

/* 50/50 SPLIT — OVERRIDES THE SHARED 1fr 2fr */
.webinars-list__item {
    grid-template-columns: 1fr 1fr;
}

.webinars-list__item.lf-list__item--no-image {
    grid-template-columns: 1fr;
}

/* ON DEMAND VIDEO (LEFT COLUMN) */
.webinars-list__media--video iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
}

.webinars-list__media--video .webinars-video__fallback img {
    width: 100%;
    height: auto;
}

.webinars-list__date {
    font-weight: 900;
    margin: 0 !important;
    padding: 0 !important;
    /* COLOR SET INLINE VIA SALIENT BODY COLOR */
}

/* CTA PINNED TO THE BOTTOM OF THE CONTENT COLUMN — LOOK COMES FROM SALIENT .nectar-button */
.webinars-list__cta.nectar-button {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    align-self: flex-start;
}

/* =============================================================================
   WEBINARS — SINGLE PAGE HEADER
   ============================================================================= */

.webinars-single-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 20px 0;
}

.webinars-single-eyebrow {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: 10px !important;
}

.webinars-single-title {
    margin: 0 0 15px !important;
}

.webinars-single-date {
    text-align: center;
    opacity: 0.8;
    margin: 0 0 30px !important;
}

/* =============================================================================
   WEBINARS — FEATURED IMAGE (UPCOMING SINGLE PAGE ONLY; ON DEMAND SHOWS VIDEO INSTEAD)
   ============================================================================= */

.webinars-featured-image {
    max-width: 900px;
    margin: 0 auto 30px;
}

.webinars-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 0 !important;
}

/* =============================================================================
   WEBINARS — CTA BUTTON (LOOK COMES FROM SALIENT .nectar-button.accent-color)
   ============================================================================= */

.webinars-cta {
    text-align: center;
    margin: 10px 0 40px;
}

/* =============================================================================
   WEBINARS — VIDEO EMBED (ON DEMAND)
   ============================================================================= */

.webinars-video {
    max-width: 900px;
    margin: 0 auto 40px;
}

.webinars-video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

.webinars-video .webinars-video__fallback img {
    width: 100%;
    height: auto;
}

/* =============================================================================
   WEBINARS — DESCRIPTION
   ============================================================================= */

.webinars-description {
    max-width: 900px;
    margin: 0 auto 40px;
}

/* =============================================================================
   WEBINARS — MODERATORS/SPEAKERS (CIRCULAR IMAGE, NAME, TITLE)
   COLUMN COUNT REUSES THE SHARED .lf-grid--3 / --4 / --5 CLASSES
   ============================================================================= */

.webinars-speakers {
    max-width: 1100px;
    margin: 0 auto 40px;
}

.webinars-speaker {
    text-align: center;
}

.webinars-speaker__image {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 15px !important;
    display: block;
}

.webinars-speaker__name {
    font-weight: 700;
    margin: 0 !important;
}

.webinars-speaker__title {
    opacity: 0.8;
    margin: 0 !important;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media only screen and (max-width: 1000px) {

    /* KEEP THE 50/50 SPLIT ON TABLET (SHARED RULE DROPS TO 1fr 1.5fr) */
    .webinars-list__item {
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (max-width: 690px) {

    /* STACK MEDIA ABOVE CONTENT ON MOBILE */
    .webinars-list__item {
        grid-template-columns: 1fr;
    }

    .webinars-single-header {
        padding-top: 40px;
    }

    .webinars-speaker__image {
        width: 110px;
        height: 110px;
    }
}