/* Where the hero picture is (course/parts/media.php): the picture, the interactive piece and the switch
 * between them, and what the course adds to the site's player the trailer plays in (video-player/).
 */

.cil-course-hero__media {
    grid-area: media;
    position: relative;
    aspect-ratio: 800 / 488;
    border-radius: 14px;
    overflow: hidden;
    background: var(--cil-black-regular-9);
}
/* Filling: around the editor's point, enlarged around it by --hero-zoom (course-record/picture-place.php). */
.cil-course-hero__picture { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 50% 50%);
    scale: var(--hero-zoom, 1); transform-origin: var(--hero-pos, 50% 50%); }
/* A picture much wider than the frame -- the old page's 1440x400 banners -- shown whole and centred,
   over a blurred, darkened copy of itself that fills the frame (course-record/picture-place.php). */
.cil-course-hero__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(28px) brightness(0.7) saturate(1.15);
    transform: scale(1.2);   /* the blur's soft edge kept outside the frame */
}
.cil-course-hero__picture.is-whole { position: relative; object-fit: contain; }
/* The trailer plays here in the site's player (video-player/assets/video-player.css). Playing, the box
   takes the video's own proportions plus the bar (video-player.js sets its height, fit), so the picture
   fills it edge to edge; in full screen, where the box is the screen, the picture covers it. */
.cil-course-hero__media.has-bar { aspect-ratio: auto; }
/* While paused or starting, the course's picture placed as the editor placed it (picture-place.php). */
.cil-course-hero__media .cil-vplayer__cover img { object-position: var(--hero-pos, 50% 50%); scale: var(--hero-zoom, 1); transform-origin: var(--hero-pos, 50% 50%); }

/* ---- the interactive piece, and the switch that shows it ---- */
/* The piece fills the box edge to edge; what it draws is its own. */
.cil-course-inter { position: absolute; inset: 0; background: var(--cil-white); }
.cil-course-inter__frame { display: block; width: 100%; height: 100%; border: 0; }

.cil-course-views {
    position: absolute;
    top: 24px;
    inset-inline-end: 24px;
    z-index: 2;
    display: flex;
    gap: 2px;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--cil-white) 20%, transparent);
    border-radius: 18px;
    background: var(--cil-black-dark-4);
}
.cil-course .cil-course-views__option {
    position: relative; z-index: 1;
    display: inline-grid; align-content: center; justify-items: center; height: 28px; min-height: 0; padding: 0 12px; border-radius: 14px;
    font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--cil-white);
    transition: color 0.35s var(--cd-view-ease);
}
/* The white pill under the pressed option; media.js sets its width and place, and it slides between them. */
.cil-course-views__pill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    border-radius: 14px;
    background: var(--cil-white);
}
.cil-course-views__pill.is-ready { transition: transform 0.35s var(--cd-view-ease), width 0.35s var(--cd-view-ease); }
/* The label's bold width, held by an invisible copy in the same cell. */
.cil-course-views__option > span,
.cil-course-views__option::after { grid-area: 1 / 1; }
.cil-course-views__option::after { content: attr(data-label); font-weight: 700; visibility: hidden; }
.cil-course .cil-course-views__option:hover { background: color-mix(in srgb, var(--cil-white) 12%, transparent); }
.cil-course .cil-course-views__option:focus-visible { outline: 2px solid var(--cil-blue); outline-offset: 2px; }
.cil-course .cil-course-views__option[aria-pressed="true"],
.cil-course .cil-course-views__option[aria-pressed="true"]:hover { background: transparent; color: var(--cil-black); font-weight: 700; }
/* Over the picture, a shade along the top so the switch reads on any photograph (01.28). */
.cil-course-hero__media.has-views::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 1;
    height: 120px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--cil-black-dark-4) 55%, transparent), transparent);
    pointer-events: none;
    transition: opacity 0.35s var(--cd-view-ease);
}
.cil-course-hero__media.has-views.is-interactive::after { opacity: 0; }
/* Switching views: the piece fades over the picture, its words rising a little into place. */
.cil-course-hero__media { --cd-view-ease: cubic-bezier(0.22, 1, 0.36, 1); }
.has-views .cil-course-inter { opacity: 0; visibility: hidden; transition: opacity 0.35s var(--cd-view-ease), visibility 0s linear 0.35s; }
.has-views.is-interactive .cil-course-inter { opacity: 1; visibility: visible; transition: opacity 0.35s var(--cd-view-ease), visibility 0s; }
@media (prefers-reduced-motion: reduce) {
    .cil-course-views__pill.is-ready, .cil-course-hero__media::after, .has-views .cil-course-inter,
    .cil-course .cil-course-views__option { transition: none; }
}
.cil-course-hero[data-playing] .cil-course-views,
.cil-course-hero[data-playing] .cil-course-hero__media::after { display: none; }

@media (max-width: 767px) {
    .cil-course-hero__media { margin-top: 16px; aspect-ratio: 358 / 201; border-radius: 12px; }
    /* On a phone the badges sit over the media's edge; over the piece they would cover what it draws. */
    .cil-course-badges { transition: opacity 0.35s ease, visibility 0s linear 0s; }
    .cil-course-hero:has(.cil-course-hero__media.is-interactive) .cil-course-badges { opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
    .cil-course-views { top: 12px; inset-inline-end: 12px; }
    /* The phone's own point in the picture, the desktop's until the editor moves it (picture-place.php). */
    .cil-course-hero__picture, .cil-course-hero__media .cil-vplayer__cover img { object-position: var(--hero-pos-phone, var(--hero-pos, 50% 50%));
        scale: var(--hero-zoom-phone, var(--hero-zoom, 1)); transform-origin: var(--hero-pos-phone, var(--hero-pos, 50% 50%)); }
}