/* ==========================================================================
   The rows of cards at the foot of the home page

   Only the arrows and the scrolling. The cards themselves keep the styling
   they already had.
   ========================================================================== */

/* The wrapper the script puts around each row. It stays put while the row
   scrolls inside it, which is what the arrows are pinned to. */
.feat-shell { position: relative; }

/* style.min.css already gives every #feat-container- row overflow-x:scroll, so
   the row itself is what scrolls.

   The cards were Bootstrap col-2, which is a percentage of the parent, and the
   parent was pinned at 2000px to make that percentage come out at a sensible
   333. Which meant the row was 2000px wide whatever was in it: nine restaurant
   cards need 2250, so the last of them were laid out past the end of the box
   with no way to reach them. Take the 2000px away and col-2 has nothing to be a
   percentage of -- the cards came out 493px each.

   So the cards get a width instead of a fraction, and the row is then as wide as
   its cards, however many there are. The pictures inside are 250px, which is
   where the number comes from. */
.slider-content { width: max-content; }

.feat-row .d-flex { width: max-content; }

.feat-row .d-flex > * {
  flex: 0 0 250px;
  max-width: 250px;
  margin-right: 14px;
}
.feat-row .d-flex > *:last-child { margin-right: 0; }

/* The scrollbar under every row was the only hint they moved. The arrows say it
   better, and a permanent grey bar under eight rows of photographs is a lot of
   grey bar. */
.feat-row { scrollbar-width: none; }
.feat-row::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------- the arrows -- */

.feat-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-top: -34px;            /* the captions sit low; this centres on the picture */
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  color: #2b2530;
  box-shadow: 0 2px 12px rgba(43, 37, 48, .28);
  cursor: pointer;
  transition: background-color .16s ease, opacity .16s ease;
}

/* Drawn only when there is something to scroll to. A row of two cards on a
   wide screen has nothing behind its arrows, and an arrow that does nothing is
   worse than no arrow. */
.feat-shell.has-overflow .feat-arrow { display: flex; }

.feat-arrow--prev { left: 8px; }
.feat-arrow--next { right: 8px; }

.feat-arrow svg { width: 20px; height: 20px; }

.feat-arrow:hover { background: #fff; }
.feat-arrow:focus-visible { outline: 2px solid #7f3f98; outline-offset: 2px; }

/* At either end the arrow stays put rather than disappearing -- a control that
   comes and goes makes the row feel unsteady under the hand. */
.feat-arrow:disabled { opacity: .32; cursor: default; box-shadow: none; }

@media (max-width: 560px) {
  .feat-arrow { width: 36px; height: 36px; }
  .feat-arrow svg { width: 17px; height: 17px; }
  .feat-arrow--prev { left: 4px; }
  .feat-arrow--next { right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .feat-arrow { transition: none; }
}