/* =================== Video tutorials: the cards and the watch pages =================== */

/* ---------- The video cards of the videos pages ---------- */

.video-card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.video-card:hover {
    transform: translateY(-.15rem);
    box-shadow: 0 .75rem 1.75rem rgba(33, 15, 82, .12) !important;
}

/* The frame of the thumbnail has the 16:9 shape of the video. */
.video-thumbnail {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: #210f52;
}

/* The "hqdefault" thumbnail of YouTube has the 4:3 shape. It shows the
   picture with a black bar above it and a black bar below it. The image
   covers the 16:9 frame, so the frame cuts off the two black bars. */
.video-thumbnail img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The play button is shown only when the pointer is over the card, or when
   the link in the card has the keyboard focus. Many thumbnails show text in
   the middle, and a button that is always visible covers that text. */
.video-play-icon {
    position: absolute;
    inset: 0;
    width: 3.5rem;
    height: 3.5rem;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #5b2be0;
    color: #ffffff;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
    opacity: 0;
    transform: scale(.85);
    transition: opacity .2s ease, transform .2s ease;
}

.video-card:hover .video-play-icon,
.video-card:focus-within .video-play-icon {
    opacity: 1;
    transform: scale(1);
}

.video-duration {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    padding: .15rem .45rem;
    border-radius: .3rem;
    background-color: rgba(0, 0, 0, .8);
    color: #ffffff;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.4;
}

.video-card-title a {
    color: #210f52;
}

.video-card-title a:hover {
    color: #5b2be0;
}

.video-card-watch {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #5b2be0;
    font-size: .9rem;
    font-weight: 500;
}

.video-card-watch svg {
    flex-shrink: 0;
    color: #ff0000;
}

/* =================== The watch page of one video =================== */

.video-back-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
    text-decoration: none;
}

.video-player {
    border-radius: .75rem;
    overflow: hidden;
    background-color: #210f52;
}

.video-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin: 1.25rem 0 1rem;
    color: #6b7280;
    font-size: .9375rem;
}

.video-side-card {
    padding: 1.25rem 1.5rem;
    border-radius: .75rem;
    background-color: #f8f5ff;
}

.video-side-card + .video-side-card {
    margin-top: 1.5rem;
}

.video-chapters,
.video-guides {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each chapter is one row: the start time, then the name of the chapter. */
.video-chapters a {
    display: flex;
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid rgba(91, 43, 224, .12);
    color: #210f52;
    text-decoration: none;
}

.video-chapters li:last-child a {
    border-bottom: 0;
}

.video-chapters a:hover,
.video-chapters a:focus-visible {
    color: #5b2be0;
}

/* The time reads from left to right also on the Arabic page. */
.video-chapter-time {
    flex-shrink: 0;
    min-width: 2.75rem;
    color: #5b2be0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

.video-guides li + li {
    margin-top: .5rem;
}

.video-guides a {
    font-weight: 500;
    text-decoration: none;
}

/* The "Watch on YouTube" button shows the red YouTube logo before the text. */
.video-youtube-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.video-youtube-button svg {
    flex-shrink: 0;
    color: #ff0000;
}

/* The heading of the other videos, with the link to all videos at the end of the row. */
.video-more-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    margin-bottom: 1.5rem;
}

.video-more-heading a {
    font-weight: 500;
    text-decoration: none;
}