/* The course page's dialogs (the learning tracks, 03.3; a lecturer, 04.3): one shell -- the design's
   rounded card over a dimmed page, 16px from a phone's edges -- and one close button, the CPT popup's.
   A dialog sets its own width with --cd-dialog-w. */
.cil-course-dialog {
    /* 100% is the window without its scroll bar (a modal dialog's box is the viewport); 100vw would
       count the bar in and leave the dialog off centre. The browser's own ceiling is lifted, or it
       would hold the dialog 19px in from each side instead of the design's 16. */
    width: min(var(--cd-dialog-w, 720px), calc(100% - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    padding: 40px 44px 32px;
    border: 0;
    border-radius: 16px;
    background: var(--cil-white);
    color: var(--cil-black-dark-4);
    text-align: center;
}
.cil-course-dialog::backdrop { background: color-mix(in srgb, var(--cil-black-dark-4) 60%, transparent); }
/* The close button is the CPT popup's (popup/assets/frontend-modal.css): a white disc whose
   cross turns white inside a black iris opening from its centre on hover, and which drops in from
   above the dialog's top edge -- where the dialog's own rounded clip hides it -- with a light spin. */
.cil-course .cil-course-dialog__close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cil-white);
    color: var(--cil-black);
    overflow: hidden;
    isolation: isolate;
    /* Keeps the rounded clip smoothly antialiased while the button rotates. */
    -webkit-mask-image: radial-gradient(circle, #fff 100%, #000 100%);
            mask-image: radial-gradient(circle, #fff 100%, #000 100%);
    /* Quick on the way back, so the cross is dark before the closing iris uncovers the white. */
    transition: color 0.1s ease;
}
.cil-course .cil-course-dialog__close svg { width: 20px; height: 20px; }
.cil-course .cil-course-dialog__close:hover { background: var(--cil-white); color: var(--cil-white); transition-delay: 0.08s; }
.cil-course-dialog__iris {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: var(--cil-black);
    pointer-events: none;
    transform: scale(0);
    transition: transform 0.35s cubic-bezier(0.55, 0, 0.8, 0.2);
    will-change: transform;
}
.cil-course-dialog__close:hover .cil-course-dialog__iris { transform: scale(1); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.cil-course .cil-course-dialog__close:focus-visible { outline: 3px solid var(--cil-yellow); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
    /* Re-runs on every opening: a closed dialog is not drawn at all. */
    .cil-course-dialog[open] .cil-course-dialog__close {
        animation: cil-course-dialog-close-drop 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: 0.15s;   /* let the dialog settle first */
    }
}
@media (prefers-reduced-motion: reduce) {
    .cil-course-dialog__iris { transition: none; }
}
@keyframes cil-course-dialog-close-drop {
    from { transform: translateY(-72px) rotate(-120deg); }
    to   { transform: translateY(0)     rotate(0deg); }
}

@media (max-width: 767px) {
    .cil-course-dialog { width: calc(100% - 32px); padding: 24px 20px 20px; }
}