/* YouTube shorts of the channel: block at the top of the main page and the video page (Module\Youtube\Shorts) */

.yt-block {
    --yt-red: #ff0033;
    --yt-text: #050505;
    --yt-muted: #65676b;
    --yt-gap: 8px;

    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    margin-bottom: 12px;
    padding: 10px 12px 12px;
    color: var(--yt-text);
}

.yt-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.yt-block__title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.yt-block__title a,
.yt-block__channel {
    color: inherit;
    text-decoration: none;
}

.yt-block__title .fa-youtube {
    color: var(--yt-red);
    margin-right: 4px;
}

.yt-block__channel {
    color: var(--yt-muted);
    font-size: 13px;
    white-space: nowrap;
}

.yt-block__title a:hover,
.yt-block__channel:hover {
    text-decoration: underline;
}

/* Strip: 5 shorts in a row, the rest - horizontal scroll by arrows (or swipe) */
.yt-strip {
    position: relative;
}

.yt-strip__track {
    display: flex;
    gap: var(--yt-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* room for the frame of the popular / current video; scroll-padding keeps snapping inside it */
    padding: 3px;
    margin: -3px;
    scroll-padding: 0 3px;
}

.yt-strip__track::-webkit-scrollbar {
    display: none;
}

.yt-short {
    position: relative;
    flex: 0 0 calc((100% - 4 * var(--yt-gap)) / 5);
    min-width: 0;
    scroll-snap-align: start;
    color: var(--yt-text);
    text-decoration: none;
}

.yt-short:hover,
.yt-short:focus {
    color: var(--yt-text);
    text-decoration: none;
}

.yt-short__thumb {
    position: relative;
    display: block;
    aspect-ratio: 9 / 16;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

/* hqdefault of a short is 4:3 with the vertical frame in the middle - cover crops exactly the frame */
.yt-short__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}

.yt-short:hover .yt-short__thumb img {
    transform: scale(1.04);
}

.yt-short__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 8px 8px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8));
    color: #fff;
}

.yt-short__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.yt-short__views {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    opacity: .85;
}

.yt-short__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: 0;
    transition: opacity .2s ease;
}

.yt-short:hover .yt-short__play,
.yt-short:focus-visible .yt-short__play {
    opacity: 1;
}

/* The first one - the random video of the day */
.yt-short--popular .yt-short__thumb {
    box-shadow: 0 0 0 3px var(--yt-red);
}

.yt-short__badge {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--yt-red);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

/* The video opened on the video page */
.yt-short--current .yt-short__thumb {
    box-shadow: 0 0 0 3px #1877f2;
}

.yt-strip__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    color: var(--yt-text);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yt-strip__arrow[hidden] {
    display: none;
}

.yt-strip__arrow:hover {
    background: #f2f2f2;
}

.yt-strip__arrow--prev {
    left: -8px;
}

.yt-strip__arrow--next {
    right: -8px;
}

@media (max-width: 767px) {
    .yt-short {
        flex-basis: calc((100% - 2 * var(--yt-gap)) / 2.6);
    }
}

@media (max-width: 575px) {
    .yt-block {
        padding: 8px;
    }

    .yt-strip__arrow--prev {
        left: 0;
    }

    .yt-strip__arrow--next {
        right: 0;
    }
}

/* Video page */
.yt-video {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.yt-video__player {
    flex: 0 0 auto;
    width: min(360px, 100%);
    aspect-ratio: 9 / 16;
    max-height: 80vh;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.yt-video__player iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.yt-video__info {
    flex: 1 1 auto;
    min-width: 0;
}

.yt-video__title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.yt-video__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-bottom: 12px;
    color: var(--yt-muted);
    font-size: 14px;
}

.yt-video__description {
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.yt-video__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.yt-video__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 18px;
    background: #f2f2f2;
    color: var(--yt-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.yt-video__button:hover {
    background: #e4e6eb;
    color: var(--yt-text);
    text-decoration: none;
}

.yt-video__button .fa-youtube {
    color: var(--yt-red);
}

.yt-block__subtitle {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .yt-video {
        flex-direction: column;
        align-items: stretch;
    }

    .yt-video__player {
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yt-strip__track {
        scroll-behavior: auto;
    }

    .yt-short__thumb img,
    .yt-short__play {
        transition: none;
    }
}