.onboard-asset-library {
    margin-block: 1.5rem;
}

.onboard-asset-library__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(var(--onboard-library-columns, 3), minmax(0, 1fr));
}

.onboard-asset-library--columns-2 { --onboard-library-columns: 2; }
.onboard-asset-library--columns-3 { --onboard-library-columns: 3; }
.onboard-asset-library--columns-4 { --onboard-library-columns: 4; }

.onboard-asset-library--collection-title-center .onboard-asset-library__title,
.onboard-asset-library--asset-title-center .onboard-asset-library__card-title,
.onboard-asset-library--video-title-center .onboard-asset-library__card-title { text-align: center; }

.onboard-asset-library--collection-title-right .onboard-asset-library__title,
.onboard-asset-library--asset-title-right .onboard-asset-library__card-title,
.onboard-asset-library--video-title-right .onboard-asset-library__card-title { text-align: right; }

.onboard-asset-library__card {
    border: 1px solid currentColor;
    background: #fff;
    overflow: hidden;
    padding: 0;
}

.onboard-asset-library__media {
    aspect-ratio: var(--onboard-asset-media-aspect, 16 / 9);
    background: #e7e7e7;
    display: grid;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.onboard-asset-library__media:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: -3px;
}

.onboard-asset-library__card-body {
    background: var(--onboard-asset-card-background, #fff);
    padding: var(--onboard-asset-padding, 1rem);
}

.onboard-asset-library__card-title:first-child,
.onboard-asset-library__card-body > :first-child { margin-top: 0; }
.onboard-asset-library__card-body > :last-child { margin-bottom: 0; }

.onboard-asset-library__media-fallback {
    align-items: center;
    aspect-ratio: var(--onboard-asset-media-aspect, 16 / 9);
    color: #686873;
    display: flex;
    justify-content: center;
}

.onboard-asset-library__media > .onboard-asset-library__play,
.onboard-asset-library__media > .onboard-asset-library__embed,
.onboard-asset-library__media > .onboard-asset-library__media-fallback {
    height: 100%;
    width: 100%;
}

.onboard-asset-library__embed {
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.onboard-asset-library__embed iframe,
.onboard-asset-library__embed video {
    border: 0;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.onboard-asset-library__play {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    position: relative;
    width: 100%;
}

.onboard-asset-library__thumbnail {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}


.onboard-asset-library__thumbnail--remote {
    aspect-ratio: 16 / 9;
    background-color: #eef1f4;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}

/* Standard video card: full-bleed centered cover in a stable 16:9 stage. Low specificity so an explicit editor
   Image treatment (e.g. Contain, set in onboard-content-delivery-asset-style.css) still wins. */
:where(.onboard-asset-library__card--video) .onboard-asset-library__media { aspect-ratio: 16 / 9; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
:where(.onboard-asset-library__card--video) .onboard-asset-library__media > .onboard-asset-library__play { min-height: 0; overflow: hidden; }
:where(.onboard-asset-library__card--video) .onboard-asset-library__play > .onboard-asset-library__thumbnail { height: 100%; inset: 0; position: absolute; width: 100%; }
:where(.onboard-asset-library__card--video) .onboard-asset-library__thumbnail { object-fit: cover; object-position: center; }
:where(.onboard-asset-library__card--video) .onboard-asset-library__thumbnail--remote { background-size: cover; }
.onboard-asset-style--image-treatment-contain .onboard-asset-library__thumbnail--remote { background-size: contain; }
.onboard-asset-library__play-icon {
    display: block;
    height: clamp(40px, 16%, 64px);
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(40px, 16%, 64px);
    z-index: 3;
}
.onboard-asset-library__play-icon svg { display: block; height: 100%; width: 100%; }

.onboard-asset-library__overlay {
    align-items: center;
    background: rgb(0 0 0 / 72%);
    color: #fff;
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 180ms ease;
    z-index: 2;
}

.onboard-asset-library__media:hover .onboard-asset-library__overlay,
.onboard-asset-library__media:focus .onboard-asset-library__overlay,
.onboard-asset-library__media:focus-within .onboard-asset-library__overlay { opacity: 1; }

.onboard-asset-library__overlay-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    justify-content: center;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 1rem;
    text-align: center;
}

.onboard-asset-library__file-icon {
    display: inline-grid;
    height: 6.5rem;
    place-items: center;
    position: relative;
    width: 5.5rem;
}

.onboard-asset-library__file-icon svg {
    fill: rgb(255 255 255 / 10%);
    height: 100%;
    inset: 0;
    position: absolute;
    stroke: currentColor;
    stroke-linejoin: round;
    stroke-width: 2.5;
    width: 100%;
}

.onboard-asset-library__file-icon > span {
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .035em;
    line-height: 1;
    margin-top: 1rem;
    max-width: 4.5rem;
    overflow-wrap: anywhere;
    position: relative;
}

.onboard-asset-library__overlay-size {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.onboard-asset-library__download { display: flex; }
.onboard-asset-library__download-shell { margin-inline: 0 !important; }
.onboard-asset-library--download-left .onboard-asset-library__download { justify-content: flex-start; }
.onboard-asset-library--download-center .onboard-asset-library__download { justify-content: center; }
.onboard-asset-library--download-right .onboard-asset-library__download { justify-content: flex-end; }
.onboard-asset-library--download-full .onboard-asset-library__download-shell { flex: 1 1 100%; width: 100%; }
.onboard-asset-library--download-full .onboard-asset-library__download-action { box-sizing: border-box; display: flex; justify-content: center; width: 100%; }

.onboard-asset-library__modal[hidden] { display: none; }

body.onboard-asset-library-modal-open {
    overflow: hidden;
}

.onboard-asset-library__modal {
    align-items: center;
    background: rgb(0 0 0 / 80%);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: clamp(.75rem, 2vw, 2rem);
    position: fixed;
    z-index: 100000;
}

.onboard-asset-library__modal-panel {
    background: transparent;
    color: #fff;
    max-width: 1600px;
    width: min(96vw, 1600px, calc((100vh - 6rem) * 16 / 9));
    position: relative;
}

.onboard-asset-library__close {
    align-items: center;
    background: rgb(0 0 0 / 85%);
    border: 1px solid rgb(255 255 255 / 75%);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 1.75rem;
    height: 2.75rem;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 0;
    top: -3.25rem;
    width: 2.75rem;
}

.onboard-asset-library__close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.onboard-asset-library__availability { margin-bottom: .5rem; }

.onboard-asset-library__meta {
    font-size: .875rem;
    opacity: .78;
}

@media (max-width: 900px) {
    .onboard-asset-library__grid { --onboard-library-columns: 2; }
}

@media (max-width: 600px) {
    .onboard-asset-library__grid { --onboard-library-columns: 1; }
    .onboard-asset-library__modal { padding: .5rem; }
    .onboard-asset-library__modal-panel { width: min(96vw, calc((100vh - 4.5rem) * 16 / 9)); }
    .onboard-asset-library__close { top: -3rem; }
}

@media (hover: none) {
    .onboard-asset-library__overlay {
        align-items: flex-end;
        background: linear-gradient(to bottom, transparent 35%, rgb(0 0 0 / 78%));
        opacity: 1;
        padding: .75rem;
    }

    .onboard-asset-library__overlay-content { gap: .25rem; }
    .onboard-asset-library__file-icon { height: 4.75rem; width: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .onboard-asset-library__overlay { transition: none; }
}


/* OnBoard overlay presentation R2: retain original icon and readable notice. */
.onboard-asset-library__overlay--access-message .onboard-asset-library__overlay-content {
    padding: .75rem;
    gap: .5rem;
}
.onboard-asset-library__overlay-availability {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.35;
    max-width: 22em;
    text-wrap: balance;
}

/* Optional author-entered image label and published title casing. */
.onboard-asset-library__card-title.onboard-asset-library__card-title--published { text-transform: none !important; }
.onboard-asset-library__image-label {
    box-sizing: border-box;
    position: absolute;
    inset-inline: .75rem;
    top: 50%;
    transform: translateY(-50%);
    padding: .4em .65em;
    border-radius: .2rem;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    overflow-wrap: anywhere;
    pointer-events: none;
    z-index: 1;
    transition: opacity 180ms ease;
}
/* Keep the video play control clear. */
.onboard-asset-library__card--video .onboard-asset-library__image-label { top: .75rem; transform: none; }
@media (hover: hover) {
    .onboard-asset-library__media--label-and-file:hover .onboard-asset-library__image-label { opacity: 0; }
}
.onboard-asset-library__media--label-and-file:focus .onboard-asset-library__image-label,
.onboard-asset-library__media--label-and-file:focus-within .onboard-asset-library__image-label { opacity: 0; }
@media (hover: none) {
    .onboard-asset-library__media--label-and-file .onboard-asset-library__image-label { top: .5rem; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .onboard-asset-library__image-label { transition: none; }
}
/* Label placement below the preview, outside image/play/file overlays. */
.onboard-asset-library__card .onboard-asset-library__image-label.onboard-asset-library__image-label--strip {
    display: block;
    position: static;
    inset: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    opacity: 1;
    z-index: auto;
    flex: 0 0 auto;
    white-space: normal;
    transition: none;
}