/* YouTube outlink card — standalone, no build step required.
   Not in style.scss: CodeKit recompiles style.css and would wipe it. Enqueued with
   filemtime() as the version. Theme variables do not exist here, so plain values. */

.yt-card-figure {
    margin: 0 0 1.5rem;
    padding: 0;
    max-width: 100%;
}

/* Beats .entry-content a (_article.scss:82) and .article a (_main.scss:20) on specificity. */
.yt-card-figure a.yt-card {
    position: relative;
    display: block;
    text-decoration: none;
    line-height: 0;
}

.yt-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: #1d1d1d;
}

/* --yt-logo is the height of the wordmark and drives the whole pill. Opaque red, so the
   still behind it cannot lower the contrast. */
.yt-card__pill {
    --yt-logo: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(100% - 20px);
    display: flex;
    align-items: center;
    padding: 13px 18px;
    border-radius: 100px;
    background-color: #cc0000;
    line-height: 0;
    transition: transform 0.15s ease-out, background-color 0.15s ease-out;
}

@media (max-width: 480px) {
    .yt-card__pill {
        --yt-logo: 15px;
        padding: 10px 14px;
    }
}

/* Background images on empty spans — the theme's convention (_icons.scss:53-67). */
.yt-card__icon {
    display: block;
    flex: 0 0 auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

/* The logotype is 72:16, so the width follows from the height. */
.yt-card__icon--youtube {
    width: calc(var(--yt-logo) * 4.5);
    height: var(--yt-logo);
    background-image: url(../images/icon-youtube-wordmark-white.svg);
}

.yt-card__icon--external {
    width: calc(var(--yt-logo) * 0.9);
    height: calc(var(--yt-logo) * 0.9);
    margin-left: calc(var(--yt-logo) * 0.6);
    background-image: url(../images/icon-external-white.svg);
}

.yt-card-figure a.yt-card:hover .yt-card__pill,
.yt-card-figure a.yt-card:focus .yt-card__pill {
    background-color: #e00000;
    /* translate repeated: a second transform replaces it, it does not add to it. */
    transform: translate(-50%, -50%) scale(1.06);
}

/* Two-tone: yellow reads on dark stills, the dark ring on light ones. Both outline and
   box-shadow, because *:focus-visible (_main.scss:15) already claims box-shadow. */
.yt-card-figure a.yt-card:focus-visible {
    outline: 3px solid #fff200;
    outline-offset: 2px;
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
    .yt-card__pill {
        transition: background-color 0.15s ease-out;
    }

    .yt-card-figure a.yt-card:hover .yt-card__pill,
    .yt-card-figure a.yt-card:focus .yt-card__pill {
        transform: translate(-50%, -50%);
    }
}

/* Background images drop out in Windows High Contrast; without a border the pill vanishes. */
@media (forced-colors: active) {
    .yt-card__pill {
        border: 1px solid CanvasText;
    }
}