/* ==========================================================================
   V06 — the four approved changes
   Loaded only by v06.html, so rz-base.css, rz-looks.css and rz.js are left
   exactly as they are for the other nine versions.

     1 · mobile goes horizontal — all ten on one swipe rail
     2 · the open card says so, with an arrow that turns to face its panel
     3 · the left edge colour comes off
     4 · the green tick on every logo comes off
   ========================================================================== */

/* ---- 4 · the tick on the logo ------------------------------------------
   `.mp-v` is the green check that sat on the bottom-right of every mark. It
   is decorative (aria-hidden), so hiding it removes it from the page and
   from the accessibility tree alike. The tick inside the open panel's
   "live site" badge is a different element and is left alone. */
.cc.rz6 .mp-v{ display: none !important; }

/* ---- 3 · the colour on the card's edge ---------------------------------
   V06 was "Left accent": a 3px bar of --rz-act down the left edge of the
   card, at .35 on hover and full on the selected one. The card keeps its
   pale ground and hairline for the active state; the bar itself is gone. */
.cc.rz6 .mp-i::after{ content: none !important; }
.cc.rz6 .mp-i{ overflow: visible; }

@media (max-width: 860px){

  /* ---- 1 · all ten clients, horizontally ------------------------------
     The row was a one-column grid, so the ten stacked and the section ran
     down the page. It is a swipe rail again: one fixed card width so the
     logo, name, trade and action stay on the same lines across every card,
     full-bleed out of the gutter with `scroll-padding-inline` putting it
     back, so the first card is not flush to the edge and the last is not
     cropped. */
  .cc.rz6 .mp-row{
    display: flex; flex-wrap: nowrap; align-items: stretch;
    gap: 8px; margin-top: 12px;
    overflow-x: auto; overflow-y: visible; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut);
    scroll-padding-inline: var(--gut);
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .cc.rz6 .mp-row::-webkit-scrollbar{ display: none; }
  .cc.rz6 .mp-i{
    /* 306 is measured, not chosen: "Kinam Heat Exchange" is 136px at this
       type size, beside a 40px mark, a 77px worded action, two 12px gaps and
       26px of padding. That is what this card costs once nothing is
       shortened and the action keeps its words. */
    flex: 0 0 var(--rz-cw, 306px); width: var(--rz-cw, 306px);
    scroll-snap-align: start;
  }
  @media (prefers-reduced-motion: reduce){ .cc.rz6 .mp-row{ scroll-behavior: auto; } }

  /* ---- 2 · which one is open ------------------------------------------
     Two signals, because the rail can scroll the card out of sight while its
     panel stays open. On the card, the action's arrow turns a quarter turn
     to face the panel underneath it. Under the rail, a notch sits over the
     panel's top edge at the selected card's own position, so the panel is
     visibly attached to the card that opened it. */
  /* rotate the arrow on the OPEN card so it faces the panel it opened.
     `transform` on an <svg> root is unreliable across engines and read back
     as the identity matrix here, so the independent `rotate` property is
     used with an explicit box and origin. */
  .cc.rz6 .mp-i.is-sel .cc-ar,
  .cc.rz6 .mp-i.is-sel:hover .cc-ar,
  .cc.rz6 .mp-i.is-sel:focus-visible .cc-ar{
    transform: none !important;
    transform-box: fill-box; transform-origin: 50% 50%;
    rotate: 90deg;
    transition: rotate .22s cubic-bezier(.32,.72,0,1);
  }

  .cc.rz6 .mp-panel{ position: relative; }
  .cc.rz6.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.rz6 .mp-in{ padding-top: 12px; }
}
@media (max-width: 374px){
  .cc.rz6 .mp-i{ --rz-cw: 276px; }
}