/* Course boxes with a featured image instead of the icon */
.feature-box-icon-image {
    flex: 0 0 96px;
    margin-right: 15px;
}

.feature-box-icon-image img {
    width: 96px;
    height: 72px;
    object-fit: cover;
}

/* Course cards: production images are square (1000x1000); crop any other upload the same way */
.course-card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Rich text written with the admin editor (Summernote, Fase 9.9g) */
.rich-text img {
    max-width: 100%;
    height: auto;
}

.rich-text img[style*="float: left"] {
    margin: 0 1.5rem 1rem 0;
}

.rich-text img[style*="float: right"] {
    margin: 0 0 1rem 1.5rem;
}

.rich-text iframe {
    max-width: 100%;
}

.rich-text::after {
    content: "";
    display: table;
    clear: both;
}

/* Legal pages (privacy, legal notice, cookies) */
.legal-text h4 {
    margin-top: 2rem;
}

.legal-text table {
    font-size: 0.9em;
}

/* Images with a fixed format (Fase 14): the aspect-ratio comes from
   Shared\Domain\ValueObjects\ImageFormat in the markup; whatever was uploaded,
   the box keeps its proportion and the picture is cropped to fill it. */
.img-format {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Video chapters under the video (Fase 11.4) */
.video-chapters li {
    padding: 0.15rem 0;
}

.video-chapters-time {
    display: inline-block;
    min-width: 3.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* YouTube facade (2026-10-16): our thumbnail and a play button until the visitor clicks */
.video-facade {
    background-color: #212529;
}

.video-facade-play {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.video-facade-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-facade-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 54px;
    border-radius: 14px;
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 1.5rem;
    transform: translate(-50%, -50%);
    transition: background-color 0.2s;
}

.video-facade-play:hover .video-facade-icon,
.video-facade-play:focus-visible .video-facade-icon {
    background-color: #0060de;
}

.video-facade-note {
    color: #777;
}