/* More courses in similar fields (course/parts/related.php) -- Figma 04.5. A wide page: the title and
   "all similar courses" on one line, the course cards (course-card/) in a row that scrolls, 320px
   each and 34px apart, with the arrows under its end. A phone: two list cards under the title
   (related.js turns the cards). */

.cil-course-related__inner {
    max-width: calc(var(--cd-width) + 2 * var(--cd-gutter));
    margin: 0 auto;
    padding: 117px var(--cd-gutter) 96px;   /* 213px under the topics' chips, as the design spaces them */
}
.cil-course-related__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cil-course .cil-course-related__all {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cil-blue-dark-1);
    text-decoration: none;
}
.cil-course .cil-course-related__all:hover span { text-decoration: underline; text-underline-offset: 3px; }
.cil-course-related__all .cil-course-staff__caret { width: 12px; height: 12px; }

/* The row: it scrolls, a card at a time, its scrollbar left out -- the arrows move it. The padding
   keeps the cards' shadows from being cut by the scrolling box; the margin takes it back, so the
   first card still lines up under the title. */
.cil-course .cil-course-related__track {
    display: flex;
    gap: 34px;
    margin: 18px -16px 0;
    padding: 24px 16px 28px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    list-style: none;
}
.cil-course-related__track::-webkit-scrollbar { display: none; }
.cil-course .cil-course-related__track > li { flex: 0 0 320px; margin: 0; padding: 0; scroll-snap-align: start; }
.cil-course .cil-course-related__track > li::before { content: none; }
.cil-course-related__track .cil-card { height: 100%; }

/* The arrows point where they move the row, so they sit left then right in every language -- under
   the row's end: the left in Hebrew and Arabic, the right in English and Russian. Round, as the
   testimonials' are (testimonials.css; Oren, 2026-10-01), greyed where the row can go no further. */
.cil-course-related__arrows { display: flex; justify-content: flex-end; gap: 8px; margin-top: -3px; direction: ltr; }
.cil-course-related[dir="rtl"] .cil-course-related__arrows { justify-content: flex-start; }
.cil-course-related__arrows[hidden] { display: none; }
.cil-course .cil-course-related__arrow {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--cil-black-light-4);
    border-radius: 50%;
    background: var(--cil-white);
    color: var(--cil-black);
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.cil-course .cil-course-related__arrow:hover:not(:disabled) { border-color: var(--cil-blue-regular-7); background: var(--cil-blue-light-1); color: var(--cil-blue-dark-1); }
.cil-course .cil-course-related__arrow:disabled { border-color: var(--cil-black-light-2); background: var(--cil-white); color: var(--cil-black-light-6); cursor: default; }
.cil-course .cil-course-related__arrow:focus-visible { outline: 2px solid var(--cil-blue-regular-7); outline-offset: 2px; }
.cil-course-related__arrow svg { width: 20px; height: 20px; }

/* ---- a phone (04.5 mobile): two list cards under the sections' title ---- */
@media (max-width: 767px) {
    .cil-course-related__inner { padding: 8px var(--cd-gutter) 32px; }
    .cil-course .cil-course-related__all { display: none; }
    .cil-course .cil-course-related__track { flex-direction: column; gap: 12px; margin: 16px 0 0; padding: 0; overflow: visible; scroll-snap-type: none; }
    .cil-course .cil-course-related__track > li { flex: none; }
    .cil-course .cil-course-related__track > li:nth-child(n + 3) { display: none; }
    .cil-course-related__arrows { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cil-course .cil-course-related__track { scroll-behavior: auto; }
    .cil-course .cil-course-related__arrow { transition: none; }
}