/* =============================================================
   VEEDAY CONSULTANTS — m-clients.css  (round 11: clients page on phones)
   Loaded after mobile.css. Every rule sits inside the phone query; outside it the
   phone-only pieces are already hidden by mobile.css (.m-only, .m-dots).
   - Russian partners become a swipeable rail of "passes" (shell .m-rail + dots).
   - The global logo wall becomes a paged deck of cards (built by js/m-clients.js),
     with a Swipe / Grid segmented control. Without JS the wall stays the plain grid.
   - The licence line becomes a small credential card.
   ============================================================= */

@media (max-width: 700px), (hover: none) and (pointer: coarse) and (max-height: 500px) {

  /* ═════════ Russian partners: a rail of passes ═════════ */
  .cl-trio.m-rail {
    --m-rail-w: 84%; --m-rail-gap: 14px;
    max-width: none; gap: var(--m-rail-gap);
    padding-top: 6px; padding-bottom: 36px; /* room for the card shadow */
    margin-bottom: -22px;
  }
  /* only the first pass animates in; the rest are already in place when swiped to */
  html.m-phone .cl-trio > li + li[data-reveal] { opacity: 1; transform: none; transition: none; }

  .cl-trio .cl-partner {
    position: relative; height: 100%;
    display: flex; flex-direction: column;
    background: #fff; border-radius: 16px;
    box-shadow: 0 1px 0 rgba(18, 16, 15, .05), 0 22px 40px -28px rgba(58, 15, 12, .5);
    perspective: none;
  }
  .cl-pass__tag {
    display: flex !important; align-items: center; gap: 10px;
    padding: 18px 20px 0;
    font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  }
  .cl-pass__tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }
  .cl-pass__tag::after { content: ''; flex: 1; height: 1px; background: rgba(17, 17, 17, .1); }

  .cl-trio .cl-partner__plate {
    aspect-ratio: auto; height: 136px; padding: 22px 34px 18px; margin: 4px 0 0;
    background: transparent; box-shadow: none; border-radius: 0;
    transform: none; transition: none; will-change: auto;
  }
  .cl-trio .cl-partner__plate::before { display: none; }
  .cl-trio .cl-partner__plate img { transform: none; min-height: 0; }
  .cl-trio .cl-partner__plate i { display: none; }

  /* the tear line: dashed hairline with two notches cut from the card edge */
  .cl-trio .cl-partner figcaption {
    position: relative; margin: auto 0 0; padding: 16px 20px 20px; gap: 5px;
    border-top: 0;
    background: linear-gradient(90deg, rgba(17, 17, 17, .2) 50%, transparent 0) 18px 0 / 8px 1px repeat-x;
  }
  .cl-trio .cl-partner figcaption::before,
  .cl-trio .cl-partner figcaption::after {
    content: ''; position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--sand);
  }
  .cl-trio .cl-partner figcaption::before { left: -9px; }
  .cl-trio .cl-partner figcaption::after { right: -9px; }
  .cl-trio .cl-partner figcaption b { font-size: 23px; }
  .cl-trio .cl-partner figcaption span { font-size: 13px; letter-spacing: .12em; white-space: normal; }

  .cl-trio + .m-dots { margin-top: 10px; }

  /* ═════════ Global partners: Swipe / Grid control ═════════ */
  .cl-view {
    --m-display: grid;
    position: relative; grid-template-columns: 1fr 1fr;
    margin: -6px 0 18px; padding: 3px;
    border-radius: 999px; background: rgba(17, 17, 17, .06);
    isolation: isolate;
  }
  .cl-view__btn {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; border-radius: 999px;
    font-family: var(--sans); font-size: 14px; font-weight: 500; color: rgba(17, 17, 17, .6);
    transition: color .3s;
  }
  .cl-view__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .cl-view__btn[aria-pressed="true"] { color: var(--ink); }
  .cl-view__btn:focus-visible { outline-offset: -4px; }
  .cl-view__thumb {
    position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
    border-radius: 999px; background: #fff;
    box-shadow: 0 1px 2px rgba(18, 16, 15, .1), 0 4px 12px -6px rgba(18, 16, 15, .25);
    transition: transform .45s var(--ease);
  }
  .cl-view.is-grid .cl-view__thumb { transform: translateX(100%); }

  /* ═════════ the deck (built by js/m-clients.js) ═════════ */
  .cl-wall.cl-wall--off { display: none; }
  .cl-deck[hidden] { display: none; }
  .cl-deck__rail {
    --m-rail-w: 86%; --m-rail-gap: 12px;
    padding-top: 2px; padding-bottom: 34px; margin-bottom: -20px;
  }
  .cl-deck__page {
    display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 1px;
    align-content: start;
    background: rgba(17, 17, 17, .09);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(17, 17, 17, .08), 0 22px 40px -30px rgba(18, 16, 15, .45);
  }
  .cl-deck__page > li { aspect-ratio: 2 / 1; display: flex; align-items: center; justify-content: center; padding: 12px 16px; background: #fff; }
  .cl-deck__page > li img { width: 100%; height: 100%; object-fit: contain; }
  /* a short last page keeps its full height: the empty cells read as blank paper */
  .cl-deck__page > li.is-blank { background: #fff; }
  .cl-deck .m-dots { margin-top: 10px; }
  /* the deck arrives as one piece */
  .cl-deck { animation: cl-deck-in .7s var(--ease) both; }
  @keyframes cl-deck-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* grid mode (plain wall) on phones: cells arrive together, not row by row */
  html.m-phone .cl-wall li { --d: 0s; }
  html.m-phone .cl-wall { border-radius: 16px; overflow: hidden; }

  /* ═════════ Licence: a small credential card ═════════ */
  .cl-licence {
    position: relative; margin-top: 26px; padding: 18px 18px 18px 66px;
    background: #fff; border: 0; border-radius: 14px;
    box-shadow: 0 1px 0 rgba(18, 16, 15, .05), 0 18px 34px -26px rgba(58, 15, 12, .45);
  }
  .cl-licence::before {
    content: ''; position: absolute; left: 18px; top: 18px; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(200, 32, 26, .35);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8201A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 5.5 6v5.2c0 4 2.8 7.4 6.5 8.8 3.7-1.4 6.5-4.8 6.5-8.8V6z'/%3E%3Cpath d='m9 12 2.2 2.2L15.2 10'/%3E%3C/svg%3E") center / 18px no-repeat;
  }
  .cl-licence dt { font-size: 13px; line-height: 1.5; }
  .cl-licence dd { font-size: 17px; }

  /* ═════════ Landscape phones ═════════ */
  @media (max-height: 500px) {
    .cl-trio.m-rail { --m-rail-w: min(46%, 360px); }
    .cl-deck__rail { --m-rail-w: min(80%, 600px); }
    .cl-deck__page { grid-template-columns: repeat(4, 1fr); }
    .cl-trio .cl-partner__plate { height: 112px; padding-top: 16px; padding-bottom: 12px; }
    .cl-view { max-width: 360px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cl-view__thumb, .cl-view__btn { transition: none; }
    .cl-deck { animation: none; }
  }
}