/* ==========================================================================
   Client ribbon (template-parts/home/client-ribbon.php)
   ========================================================================== */

/* ==========================================================================
   CLIENT RIBBON
   ========================================================================== */
.ribbon {
  position: relative;
  padding-block: var(--space-5) var(--space-6);
  border-block: var(--border-hair);
  background: var(--cm-black);
}
.ribbon__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-4); }
.ribbon__title {
  margin: 0; font-size: var(--text-label); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--cm-ink-300);
}
:lang(ar) .ribbon__title { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; }
.ribbon__toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-block-size: 36px; padding-inline: var(--space-4);
  border-radius: var(--radius-pill); border: 1px solid var(--color-line-strong); background: transparent;
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--cm-ink-200);
}
.ribbon__toggle:hover { border-color: var(--cm-white); color: var(--cm-white); }
.ribbon__toggle-icon { inline-size: 8px; block-size: 10px; border-inline: 2px solid currentColor; }
.ribbon__toggle[aria-pressed="true"] .ribbon__toggle-icon { border: 0; border-block: 5px solid transparent; border-inline-start: 8px solid currentColor; inline-size: 0; block-size: 0; }
[dir="rtl"] .ribbon__toggle[aria-pressed="true"] .ribbon__toggle-icon { border-inline-start: 8px solid currentColor; }

.ribbon__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ribbon__rail { display: flex; inline-size: max-content; }
.ribbon__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; flex: none; }
.ribbon__item { display: flex; align-items: center; flex: none; }
.ribbon__item::after {
  content: ""; flex: none; inline-size: 0.5em; block-size: 0.5em; margin-inline: 1.15em;
  font-size: clamp(1.25rem, 1.9vw, 1.9rem);
  background: url("../img/brand/mark-c-white.svg") center / contain no-repeat; opacity: 0.28;
}
.ribbon__name {
  display: inline-flex; align-items: center; padding-block: var(--space-2);
  font-size: clamp(1.25rem, 1.9vw, 1.9rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2;
  color: var(--cm-ink-200); white-space: nowrap; text-decoration: none;
  transition: color var(--dur-micro) var(--ease-standard);
}
:lang(ar) .ribbon__name { letter-spacing: 0; font-weight: 600; }
a.ribbon__name { color: var(--cm-ink-200); }   /* same colour as unlinked names: links reveal on hover/focus */
a.ribbon__name .ribbon__text { background-image: linear-gradient(var(--cm-orange), var(--cm-orange)); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; transition: background-size var(--dur-ui) var(--ease-out); }
[dir="rtl"] a.ribbon__name .ribbon__text { background-position: 100% 100%; }
a.ribbon__name:hover, a.ribbon__name:focus-visible { color: var(--cm-white); }
a.ribbon__name:hover .ribbon__text, a.ribbon__name:focus-visible .ribbon__text { background-size: 100% 1px; }
.ribbon__logo { block-size: 1.3em; inline-size: auto; filter: grayscale(1) brightness(1.6); opacity: 0.8; }

/* Animated mode (set by JS only on fine pointers without reduced motion) */
.ribbon.is-animated .ribbon__rail { animation: ribbon-marquee var(--ribbon-duration, 70s) linear infinite; }
.ribbon.is-animated .ribbon__viewport:hover .ribbon__rail,
.ribbon.is-animated .ribbon__viewport:focus-within .ribbon__rail,
.ribbon.is-paused .ribbon__rail { animation-play-state: paused; }
@keyframes ribbon-marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .ribbon.is-animated .ribbon__rail { animation-name: ribbon-marquee-rtl; }
@keyframes ribbon-marquee-rtl { to { transform: translateX(50%); } }

/* Swipe mode (touch, reduced motion, or no JS): a native horizontal scroller */
.ribbon:not(.is-animated) .ribbon__viewport {
  overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-inline: var(--page-gutter);
}
.ribbon:not(.is-animated) .ribbon__viewport::-webkit-scrollbar { display: none; }
.ribbon:not(.is-animated) .ribbon__item { scroll-snap-align: start; }
.ribbon:not(.is-animated) .ribbon__item:last-child::after { display: none; }