/* ==========================================================================
   DESKTOP SLIDING — five ways
   On a wide screen the row is a grid, so eighteen businesses become four
   stacked rows and the section grows very tall. Each version below turns
   that grid into a single sliding row instead, and answers "how do I get to
   the rest" a different way.

   The phone is untouched: every rule here is inside `min-width: 861px`, so
   the approved mobile rail stays exactly as it is.
   ========================================================================== */

@media (min-width: 861px){

  /* ---- the shared desktop rail ---------------------------------------- */
  .cc.dk .mp-wrap{ position: relative; }
  .cc.dk .mp-row{
    display: flex; flex-wrap: nowrap; align-items: stretch;
    grid-template-columns: none;              /* undo the grid */
    gap: 10px; overflow-x: auto; overflow-y: visible;
    scroll-behavior: smooth; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    padding-block: 2px;
  }
  .cc.dk .mp-row::-webkit-scrollbar{ display: none; }
  .cc.dk .mp-i{
    flex: 0 0 var(--dk-cw, 252px); width: var(--dk-cw, 252px);
    scroll-snap-align: start;
  }
  @media (prefers-reduced-motion: reduce){ .cc.dk .mp-row{ scroll-behavior: auto; } }

  /* NO turned arrow on desktop. On the phone the rail is one row, so an arrow
     that swings downward points straight at the panel it opened. Here the row
     is two deep: a card in the top row would be pointing at the card beneath
     it, not at the panel. The notch below keeps doing that job properly, so
     the arrow stays pointing right — the direction it opens toward. */
  .cc.dk .mp-i.is-sel .cc-ar{ rotate: none; }
  .cc.dk .mp-panel{ position: relative; }
  .cc.dk.is-open .mp-panel::before{
    content: ""; position: absolute; z-index: 2; top: 6px;
    left: var(--rz-notch, 50%); transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px; background: #F7FAFF;
    border-left: 1px solid #D3E2FA; border-top: 1px solid #D3E2FA; border-radius: 2px;
  }
  .cc.dk .mp-in{ padding-top: 12px; }

  /* ---- shared controls ------------------------------------------------- */
  .dk-btn{
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid #DDE5F1; background: #fff; color: var(--rz-act); cursor: pointer;
    padding: 0; box-shadow: 0 1px 2px rgba(15,27,61,.05), 0 8px 20px -12px rgba(15,27,61,.5);
    transition: border-color .18s ease, background .18s ease, opacity .2s ease, box-shadow .18s ease;
  }
  .dk-btn svg{ width: 17px; height: 17px; fill: none; stroke: currentColor;
    stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
  .dk-btn:hover{ border-color: #BBD2F5; background: #F7FAFF; }
  .dk-btn[disabled]{ opacity: 0; pointer-events: none; }

/* ==== D1 · SIDE ARROWS ===================================================
   The classic, and the one nobody has to learn: a round control sitting over
   each edge of the row, vertically centred, fading out at the ends. */
  .cc.d1 .dk-side{
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  }
  .cc.d1 .dk-prev{ left: -14px; }
  .cc.d1 .dk-next{ right: -14px; }
  .cc.d1 .mp-row{ scroll-snap-type: x proximity; }

/* ==== D2 · HEADER CONTROLS ===============================================
   The controls leave the artwork alone and sit up in the heading line, where
   a section's own controls belong. A hairline under the row doubles as the
   position, so nothing has to be counted. */
  .cc.d2 .mp-head{ display: flex; align-items: center; gap: 16px; }
  .cc.d2 .mp-t{ margin-right: auto; }
  .cc.d2 .dk-head{ display: flex; gap: 8px; }
  .cc.d2 .dk-btn{ width: 34px; height: 34px; box-shadow: none; }
  .cc.d2 .dk-btn[disabled]{ opacity: .3; }
  .cc.d2 .dk-line{
    position: relative; height: 3px; border-radius: 99px; background: #EDF1F7; margin-top: 14px;
  }
  .cc.d2 .dk-line i{
    position: absolute; top: 0; height: 3px; border-radius: 99px; background: var(--rz-act);
    transition: left .18s ease, width .18s ease;
  }

/* ==== D3 · PAGED =========================================================
   A whole screen of businesses at a time, and a row of pages you can jump
   between — the only one of the five where the list has a countable shape. */
  .cc.d3 .mp-row{ scroll-snap-type: x mandatory; }
  .cc.d3 .dk-pages{
    display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px;
  }
  .cc.d3 .dk-dots{ display: flex; gap: 6px; }
  .cc.d3 .dk-dots button{
    width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
    background: #D8E0EC; cursor: pointer; transition: width .2s ease, background .2s ease;
  }
  .cc.d3 .dk-dots button.on{ width: 22px; border-radius: 99px; background: var(--rz-act); }
  .cc.d3 .dk-of{ font-size: 12px; color: var(--ink-4); }
  .cc.d3 .dk-of b{ color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; }
  .cc.d3 .dk-btn{ width: 34px; height: 34px; box-shadow: none; }
  .cc.d3 .dk-btn[disabled]{ opacity: .3; }

/* ==== D4 · DRAG ==========================================================
   No control at all: the row is grabbed and thrown, the way a map is. The
   cursor says it; the 40px white edge fades that used to say it as well were
   removed on 2026-09-09 with every other edge fade on the site — a card is
   meant to stop on its own edge, not dissolve into the ground. */
  .cc.d4 .mp-row{ cursor: grab; }
  .cc.d4 .mp-row.is-drag{ cursor: grabbing; scroll-behavior: auto; }
  .cc.d4 .mp-row.is-drag .mp-i{ pointer-events: none; }

/* ==== D5 · TWO ROWS ======================================================
   Ten businesses on screen instead of five, on two rows that slide together
   — half as much travel, and the section is still one band rather than four
   stacked rows. */
  .cc.d5 .mp-row{
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
    grid-auto-columns: max-content; align-items: stretch; gap: 10px;
    scroll-snap-type: x proximity;
  }
  .cc.d5 .dk-side{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; }
  .cc.d5 .dk-prev{ left: -14px; }
  .cc.d5 .dk-next{ right: -14px; }
}

/* nothing above exists on a phone */
@media (max-width: 860px){
  .dk-side, .dk-head, .dk-line, .dk-pages{ display: none !important; }
}