/**
 * AWS Training Videos gallery — click-to-play facade styling.
 * Keeps each tile a 16:9 box (matching the original iframe), letterboxes the AWS logo on a
 * dark background, and centers a play button. See aws-video-facade.js.
 */
.aws-video-facade {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #111;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
}

.aws-video-facade__poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* letterbox the logo — do not crop/stretch the brand mark */
    background: #111;
}

.aws-video-facade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 68px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    transition: background 0.15s ease;
    pointer-events: none;
}

.aws-video-facade__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
}

.aws-video-facade:hover .aws-video-facade__play,
.aws-video-facade:focus .aws-video-facade__play {
    background: rgba(0, 0, 0, 0.8);
}

/* Keyboard focus must stay visible even if the theme resets a:focus outlines. */
.aws-video-facade:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Once activated, the injected iframe fills the same 16:9 box. */
.aws-video-facade[data-activated="1"] {
    cursor: default;
}
.aws-video-facade[data-activated="1"] iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}