/* The older pages' carousels (design-system/carousel.php, item 522): an institution's and a local authority's
   testimonials, featured courses and lecturers, and the CPT popup's pages. They were the Slick plugin's and keep the
   look its theme gave them -- a row of so many items a view (one on a phone), the theme's arrow pictures either side
   at the row's middle, round dots under it -- on the site's carousel (carousel.js): the row is the browser's own
   scrolling box, snapping to each item. A box says how many it shows in its style: --cil-carousel-wide (990px and
   up, as Slick's breakpoint was) and --cil-carousel-narrow, one by default. */

.cil-carousel {
    --per-view: var(--cil-carousel-wide, 1);
    --cil-carousel-gap: 12px;
    position: relative;
}
@media (max-width: 989px) {
    .cil-carousel { --per-view: var(--cil-carousel-narrow, 1); }
}

.cil-carousel__track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--cil-carousel-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    /* Whatever the items stack among themselves stays under the arrows. */
    isolation: isolate;
}
.cil-carousel__track::-webkit-scrollbar { display: none; }
.cil-carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.cil-carousel__track > * {
    flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--cil-carousel-gap)) / var(--per-view));
    min-width: 0;
    scroll-snap-align: start;
}
/* A row that takes the height of what is in view (data-ctl-fit-height: the popup's pages) grows and shrinks to it. */
.cil-carousel[data-ctl-fit-height] .cil-carousel__track { align-items: flex-start; transition: height 0.3s ease; }
@media (prefers-reduced-motion: reduce) {
    .cil-carousel[data-ctl-fit-height] .cil-carousel__track, .cil-carousel .cil-carousel__arrow { transition: none; }
}

/* The arrows: the theme's pictures, at the row's middle, at its start and its end. Gone where they have nowhere to go.
   Scoped under the box, as the dots and the pause button are, to outrank the theme's green hover on every button
   (styles-*.css: button:hover), which would paint over the picture. */
.cil-carousel .cil-carousel__arrow {
    position: absolute;
    z-index: 40;
    top: 50%;
    display: block;
    width: 20px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent no-repeat center center;
    cursor: pointer;
    scale: 1.4;
    transform: translateY(-50%);
    transition: all 0.4s ease 0s;
}
.cil-carousel__arrow:hover { opacity: 0.9; }
.cil-carousel__arrow:focus-visible { outline: 2px solid var(--cil-blue); outline-offset: 2px; }
.cil-carousel__arrow:disabled { display: none; }
.cil-carousel .cil-carousel__arrow--prev { inset-inline-start: 0; background-image: url(../../images/arrow-left.svg); }
.cil-carousel .cil-carousel__arrow--next { inset-inline-end: 0; background-image: url(../../images/arrow-right.svg); }
.cil-carousel__arrow--prev:is(:lang(he), :lang(ar)) { background-image: url(../../images/arrow-right.svg); }
.cil-carousel__arrow--next:is(:lang(he), :lang(ar)) { background-image: url(../../images/arrow-left.svg); }

/* The dots, a view each, under the row. */
.cil-carousel:has(> .cil-carousel__dots:not([hidden])) { margin-bottom: 30px; }
.cil-carousel__dots {
    position: absolute;
    bottom: -40px;
    inset-inline: 0;
    display: flex;
    justify-content: center;
}
.cil-carousel__dots[hidden], .cil-carousel__counter[hidden] { display: none; }
/* A 10px dot, as Slick drew it, in a 24px button a finger can hit (WCAG 2.5.8): the fill keeps to the content box. */
.cil-carousel .cil-carousel__dot {
    width: 24px;
    height: 24px;
    padding: 7px;
    border: 0;
    border-radius: 50%;
    background: var(--cil-yellow) content-box;
    opacity: 0.4;
    cursor: pointer;
}
.cil-carousel__dot[aria-current="true"] { opacity: 1; }
.cil-carousel__dot:focus-visible { opacity: 1; outline: 2px solid var(--cil-blue); outline-offset: 2px; }

/* The pause button of a carousel that turns by itself, at the top of its far end. */
.cil-carousel .cil-carousel__turn {
    position: absolute;
    z-index: 41;
    inset-block-start: 0;
    inset-inline-end: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
}
.cil-carousel__turn[hidden], .cil-carousel__turn .cil-ctl-turn__mark[hidden] { display: none; }
.cil-carousel__turn .cil-ctl-turn__mark { display: grid; place-items: center; }
.cil-carousel__turn:focus-visible { outline: 2px solid var(--cil-blue); outline-offset: 2px; }

/* ---- each page's own ------------------------------------------------------------------------------------------- */

/* Featured courses, on the institution's colour: white dots and arrows, the arrows at the row's own edges inside the
   20px the page keeps either side of it (styles-*.css). */
.institutionCoursesFeaturing .cil-carousel__arrow--prev { inset-inline-start: 20px; }
.institutionCoursesFeaturing .cil-carousel__arrow--next { inset-inline-end: 20px; }
.institutionCoursesFeaturing .cil-carousel__dot { background-color: var(--cil-white); }
.institutionCoursesFeaturing .cil-carousel__arrow--prev { background-image: url(../../images/arrow-left-white.svg); }
.institutionCoursesFeaturing .cil-carousel__arrow--next { background-image: url(../../images/arrow-right-white.svg); }
.institutionCoursesFeaturing .cil-carousel__arrow--prev:is(:lang(he), :lang(ar)) { background-image: url(../../images/arrow-right-white.svg); }
.institutionCoursesFeaturing .cil-carousel__arrow--next:is(:lang(he), :lang(ar)) { background-image: url(../../images/arrow-left-white.svg); }
@media (max-width: 989px) {
    .institutionCoursesFeaturing .cil-carousel__arrow { display: none; }
}

/* The lecturers turn only on a phone (under 990px, as Slick's mobile-first breakpoint had it), their arrows level
   with the cards' middle under the photo. Wider, the page's own grid lays the cards out (styles-*.css). */
@media (max-width: 989px) {
    .institutionLecturers .cil-carousel__arrow { top: calc(50% + 40px); }
    /* Each card keeps the page's 10px either side, inside the row's width; the row stops at that edge. */
    .institutionLecturers .cil-carousel__track > * { flex-basis: calc(100% - 20px); scroll-margin-inline: 10px; }
}
@media (min-width: 990px) {
    .institutionLecturers .cil-carousel__track {
        flex-wrap: wrap;
        gap: 0;
        overflow: visible;
        scroll-snap-type: none;
        cursor: auto;
        user-select: auto;
    }
    .institutionLecturers .cil-carousel__track > * { flex: none; }
    .institutionLecturers .cil-carousel__arrow { display: none; }
}
@media (min-width: 990px) and (max-width: 1079px) {
    /* The tablet width keeps one lecturer a line, as the page's tablet rules lay them out. */
    .institutionLecturers .cil-carousel__track > * { flex: 1 1 100%; }
}