/* A row's controls (row-controls.php): the prev / next arrows at its far end -- the left on a Hebrew page -- as the
   catalogue's design draws them, on the catalogue page's rows, its partners and the home page's "my courses"
   (item 205); and the pause button of a row that turns by itself (item 187). Moved here from lobby.css so every
   row draws them from one place. */
.cil-ctl-carousel__arrows { display: flex; justify-content: flex-end; gap: 15px; }
.cil-ctl-arrow { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cil-black); cursor: pointer; }
.cil-ctl-arrow:hover { background: var(--cil-black-light-2); }
.cil-ctl-arrow:disabled { color: var(--cil-black-light-5); cursor: default; background: none; }

/* The pause button's mark, one of the two shown; the arrows' look would show it while hidden. */
.cil-ctl-turn[hidden], .cil-ctl-turn__mark[hidden] { display: none; }
.cil-ctl-turn__mark { display: grid; place-items: center; }

/* A phone swipes the row: the arrows go, the pause button stays. A tablet keeps them: its rows show four whole cards
   and nothing of the next, so the arrows are what says there is more (item 530). */
@media (max-width: 767px) {
    .cil-ctl-carousel__arrows .cil-ctl-arrow:not(.cil-ctl-turn) { display: none; }
}