/*
 * Reusable content components.
 *
 * These selectors are intentionally loaded after page modules. Edit a card
 * here when the same UI must change on Topic, Knowledge, Viewpoint, Resource
 * and Event detail pages. Page CSS should only handle section positioning.
 */

/*
 * Generic heading used by both Home and About.
 * Add the --line modifier where the red accent is required.
 */
.vta-section-heading.vta-section-heading {
    color: #000;
    font: 400 30px/1.5 var(--vta-font-display);
}

.vta-section-heading--line.vta-section-heading--line::before {
    display: block;
    width: 55px;
    height: 4px;
    margin-bottom: 12px;
    background: var(--vta-color-red);
    content: "";
}

/* Text action shared by Home introduction and About content blocks. */
.vta-text-link.vta-text-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--vta-color-red);
    font-family: var(--vta-font-body);
    font-size:12px;
    font-weight: 500;
    text-transform: uppercase;
}

.vta-text-link.vta-text-link:hover {
    color: var(--vta-color-blue);
}

/* Related-section blue title bar. */
.vta-event-related > .vta-event-single__container,
.vta-viewpoint-related .vta-resource-single__container,
.vta-knowledge-related > .vta-knowledge-container,
.vta-knowledge-events > .vta-knowledge-container,
.vta-knowledge-resources > .vta-knowledge-container,
.vta-resource-topics > .vta-resource-single__container,
.vta-resource-knowledge > .vta-resource-single__container,
.vta-resource-events > .vta-resource-single__container,
.vta-viewpoint-resources > .vta-resource-single__container {
    width: min(100% - var(--vta-container-gutter), var(--vta-container-max));
    margin-inline: auto;
}

.vta-resource-topics > .vta-resource-single__container > h2,
.vta-resource-knowledge > .vta-resource-single__container > h2,
.vta-resource-events > .vta-resource-single__container > h2,
.vta-event-related > .vta-event-single__container > h2,
.vta-knowledge-related > .vta-knowledge-container > h2,
.vta-knowledge-events > .vta-knowledge-container > h2,
.vta-knowledge-resources > .vta-knowledge-container > h2,
.vta-viewpoint-resources > .vta-resource-single__container > h2 {
    position: relative;
    z-index: 2;
    width: min(100%, 460px);
    margin: -16px auto 38px;
    padding: 9px 20px;
    border: 0;
    border-radius: var(--vta-radius-md);
    background: var(--vta-color-blue);
    color: var(--vta-color-white);
    font-family: var(--vta-font-body);
    font-size:14px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

/* Shared Topic card. */
.vta-resource-topic-card,
.vta-event-topic-card {
    display: flex;
    height: 100%;
    min-width: 0;
    flex-direction: column;
}

.vta-resource-topic-card__image,
.vta-event-topic-card .image {
    position: relative;
    display: block;
    aspect-ratio: 1.58;
    border-radius: var(--vta-radius-md) var(--vta-radius-md) 0 0;
    background: var(--vta-color-blue-dark);
    overflow: hidden;
}

.vta-resource-topic-card__image img,
.vta-resource-topic-card__image > span,
.vta-event-topic-card .image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vta-resource-topic-card__body,
.vta-event-topic-card .body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 13px;
    border: 1px solid var(--vta-color-line);
    border-top: 0;
    border-radius: 0 0 var(--vta-radius-md) var(--vta-radius-md);
    background: var(--vta-color-white);
}

.vta-resource-topic-card__category,
.vta-event-topic-card .category {
    margin-bottom: 9px;
    color: var(--vta-color-red);
    font-size:12px;
    text-transform: uppercase;
}

.vta-resource-topic-card h3,
.vta-event-topic-card h3 {
    margin: 0 0 9px;
    color: var(--vta-color-blue);
    font: 400 20px/1.5 var(--vta-font-display);
}

.vta-resource-topic-card h3 a,
.vta-event-topic-card h3 a { color: inherit; }

.vta-resource-topic-card time,
.vta-event-topic-card time {
    margin-bottom: 11px;
    padding: 5px 8px;
    background: var(--vta-color-blue);
    color: var(--vta-color-white);
    font-size:12px;
    font-weight: 700;
}

.vta-resource-topic-card p,
.vta-event-topic-card p {
    margin: 0 0 9px;
    color: #000;
    font-size:14px;
    line-height: 1.5;
}

.vta-resource-topic-card__more,
.vta-event-topic-card .more {
    align-self: flex-end;
    margin-top: auto;
    color: var(--vta-color-red);
    font-size:12px;
}

/* Shared Knowledge card. */
.vta-resource-knowledge-card,
.vta-event-knowledge-card {
    display: flex;
    height: 100%;
    min-width: 0;
    flex-direction: column;
}

.vta-resource-knowledge-card__image,
.vta-event-knowledge-card .image {
    position: relative;
    display: block;
    aspect-ratio: 1.58;
    border-radius: var(--vta-radius-md) var(--vta-radius-md) 0 0;
    background: var(--vta-color-blue-dark);
    overflow: hidden;
}

.vta-resource-knowledge-card__image img,
.vta-resource-knowledge-card__image > span,
.vta-event-knowledge-card .image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vta-resource-knowledge-card__image b,
.vta-event-knowledge-card .image b {
    position: absolute;
    bottom: 14px;
    left: 10px;
    padding: 6px 10px;
    background: var(--vta-color-white);
    font-size:14px;
    text-transform: uppercase;
}

.vta-resource-knowledge-card__body,
.vta-event-knowledge-card .body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 13px;
    border: 1px solid var(--vta-color-line);
    border-top: 0;
    border-radius: 0 0 var(--vta-radius-md) var(--vta-radius-md);
    background: var(--vta-color-white);
}

.vta-resource-knowledge-card h3,
.vta-event-knowledge-card h3 {
    margin: 0 0 9px;
    color: var(--vta-color-blue);
    font: 400 17px/1.2 var(--vta-font-display);
}

.vta-resource-knowledge-card h3 a,
.vta-event-knowledge-card h3 a { color: inherit; }

.vta-resource-knowledge-card p,
.vta-event-knowledge-card p {
    margin: 0 0 9px;
    color: #555;
    font-size: 14px;
    line-height: 1.4;
}

.vta-resource-knowledge-card__audience strong,
.vta-resource-knowledge-card__objective-label,
.vta-event-knowledge-card .body > strong,
.vta-event-knowledge-card p strong {
    color: var(--vta-color-blue);
    font-size:12px;
}

.vta-resource-knowledge-card__more,
.vta-event-knowledge-card .more {
    align-self: flex-end;
    margin-top: auto;
    color: var(--vta-color-red);
    font-size:12px;
}

/* Shared Event/Webinar card. */
.vta-resource-event-card {
    position: relative;
    border: 1px solid var(--vta-color-line);
    border-radius: var(--vta-radius-md);
    background: var(--vta-color-white);
    overflow: hidden;
}

.vta-resource-event-card__image {
    display: block;
    aspect-ratio: 1.75;
    background: #eee;
}

.vta-resource-event-card__image img,
.vta-resource-event-card__image > span {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vta-resource-event-card__body { padding: 18px 18px 10px; }
.vta-resource-event-card__body > span {
    color: var(--vta-color-red);
    font-size: 12px;
    font-weight: 700;
}

.vta-resource-event-card h3 {
    margin: 11px 0 22px;
    color: var(--vta-color-blue);
    font: 400 20px/1.5 var(--vta-font-display);
}

.vta-resource-event-card h3 a { color: inherit; }
.vta-resource-event-card__more { color: var(--vta-color-red); font-size: 12px; }
.vta-resource-event-card dl {
    margin: 0;
    padding: 13px 145px 13px 18px;
    border-top: 1px solid var(--vta-color-line);
    font-size:14px;
    line-height: 1.5;
}
.vta-resource-event-card dl div {
    display: grid;
    grid-template-columns: 88px 1fr;
    margin: 3px 0;
}
.vta-resource-event-card dt { color: var(--vta-color-blue); font-weight: 700; }
.vta-resource-event-card dd { margin: 0; color: #222; font-weight: 600; }
.vta-resource-event-card__register {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 9px 18px;
    border-radius: var(--vta-radius-md);
    background: var(--vta-color-red);
    color: var(--vta-color-white);
    font-size: 12px;
    font-weight: 700;
}

/* Knowledge detail reuses the same Event/Webinar card component. Reset the
 * legacy knowledge layout so its absolute footer cannot overlap the title. */
.vta-knowledge-events .vta-resource-event-card {
    height: 100%;
    padding-bottom: 0;
}

.vta-knowledge-events .vta-resource-event-card__body {
    padding: 18px 18px 10px;
}

.vta-knowledge-events .vta-resource-event-card dl {
    position: static;
    width: auto;
    margin: 0;
    padding: 13px 145px 13px 18px;
    font-size:14px;
    line-height: 1.5;
}

.vta-knowledge-events .vta-resource-event-card dl div {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    margin: 3px 0;
}

/* The Knowledge detail page inherits the reusable Event/Webinar card without
 * retaining its former absolute-height layout. */
.vta-knowledge-events__slider {
    margin-inline: -12px;
}

.vta-knowledge-events__slider .slick-slide {
    padding-inline: 12px;
}

.vta-knowledge-events__slider .vta-resource-event-card {
    margin: 0 0 1px;
}

.vta-knowledge-events__slider .vta-resource-event-card__image {
    aspect-ratio: 1.75;
}

/* Shared Slick pagination for every reusable content slider. */
.vta-resource-topics__slider .slick-dots,
.vta-resource-knowledge__slider .slick-dots,
.vta-resource-events__slider .slick-dots,
.vta-event-related .slick-dots,
.vta-viewpoint-resources__slider .slick-dots,
.vta-knowledge-slider .slick-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin: 38px 0 0;
    padding: 0;
    list-style: none;
}

.vta-resource-topics__slider .slick-dots li,
.vta-resource-knowledge__slider .slick-dots li,
.vta-resource-events__slider .slick-dots li,
.vta-event-related .slick-dots li,
.vta-viewpoint-resources__slider .slick-dots li,
.vta-knowledge-slider .slick-dots li { width: auto; height: auto; margin: 0; }

.vta-resource-topics__slider .slick-dots button,
.vta-resource-knowledge__slider .slick-dots button,
.vta-resource-events__slider .slick-dots button,
.vta-event-related .slick-dots button,
.vta-viewpoint-resources__slider .slick-dots button,
.vta-knowledge-slider .slick-dots button {
    width: 12px;
    height: 3px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: #d5d5d5;
    box-shadow: none;
    font-size: 0;
}

.vta-resource-topics__slider .slick-dots .slick-active button,
.vta-resource-knowledge__slider .slick-dots .slick-active button,
.vta-resource-events__slider .slick-dots .slick-active button,
.vta-event-related .slick-dots .slick-active button,
.vta-viewpoint-resources__slider .slick-dots .slick-active button,
.vta-knowledge-slider .slick-dots .slick-active button {
    width: 30px;
    background: #898989;
}

@media (max-width: 549px) {
    .vta-resource-topics > .vta-resource-single__container > h2,
    .vta-resource-knowledge > .vta-resource-single__container > h2,
    .vta-resource-events > .vta-resource-single__container > h2,
    .vta-event-related > .vta-event-single__container > h2,
    .vta-knowledge-related > .vta-knowledge-container > h2,
    .vta-knowledge-events > .vta-knowledge-container > h2,
    .vta-knowledge-resources > .vta-knowledge-container > h2,
    .vta-viewpoint-resources > .vta-resource-single__container > h2 {
        width: calc(100% - 30px);
        margin-bottom: 28px;
    }

    .vta-resource-event-card dl { padding-right: 18px; }
    .vta-knowledge-events .vta-resource-event-card dl { padding-right: 18px; }
    .vta-resource-event-card__register {
        position: static;
        display: block;
        margin: 0 18px 14px;
        text-align: center;
    }
}

/* Shared viewpoint thumbnails use the uploaded artwork as-is. */
.vta-home .vta-home-viewpoint-feature > a,
.vta-knowledge-single .vta-knowledge-viewpoints .portrait,
.vta-topic-single .vta-multiview-feature__portrait,
.vta-resource-single .vta-resource-viewpoints__portrait {
    position: relative;
    display: block;
    border-radius: 10px;
    background: none;
    overflow: hidden;
}

.vta-knowledge-single .vta-knowledge-viewpoints .portrait {
    height: 190px;
    align-self: end;
}

.vta-home .vta-home-viewpoint-feature > a::before,
.vta-home .vta-home-viewpoint-feature > a::after,
.vta-knowledge-single .vta-knowledge-viewpoints .portrait::before,
.vta-knowledge-single .vta-knowledge-viewpoints .portrait::after,
.vta-topic-single .vta-multiview-feature__portrait::before,
.vta-topic-single .vta-multiview-feature__portrait::after,
.vta-resource-single .vta-resource-viewpoints__portrait::before,
.vta-resource-single .vta-resource-viewpoints__portrait::after {
    display: none;
    content: none;
}

.vta-home .vta-home-viewpoint-feature > a img,
.vta-knowledge-single .vta-knowledge-viewpoints .portrait img,
.vta-topic-single .vta-multiview-feature__portrait img,
.vta-resource-single .vta-resource-viewpoints__portrait img {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

/* Keep contextual related-content wrappers on the shared site container. */
.vta-viewpoint-related .vta-resource-single__container {
    width: min(100% - var(--vta-container-gutter), var(--vta-container-max));
    margin-inline: auto;
}