/* ==========================================================================
   Marquee — auto-scrolling logo strip.

   Shared by the public landing page (landing/widgets/brands) and the reseller
   dashboard (agent/partials/dashboard-marquee), both through the
   <x-marquee-rows> component. It lives on its own so the dashboard can load
   the strip WITHOUT pulling in the whole marketing sheet.

   The base rules below were moved here verbatim from landing.css — the landing
   page renders exactly what it rendered before. Everything under "Opt-in
   modifiers" is new and inert unless the component is asked for it, so the
   landing marquee is untouched by any of it.

   Tokens carry fallbacks: --lp-base / --lp-ease exist in landing.css but not
   in the portal's design-system.css, so the strip must not depend on them.
   ========================================================================== */

.lp-marquee { overflow: hidden; padding-block: 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.lp-marquee__track {
  display: flex; gap: 28px; width: max-content;
  animation: lp-marquee var(--lp-marquee-duration, 60s) linear infinite;
  /* Negative per row (MarqueeRows::build), so stacked rows start
     half a logo apart instead of lining up into columns. */
  animation-delay: var(--lp-marquee-delay, 0s);
}
.lp-marquee:hover .lp-marquee__track { animation-play-state: paused; }
/* Several rows share one edge fade, and hovering any of them pauses all.
   The gap is a variable so the reseller dashboard can set it per section; with
   nothing set it stays 14px, which is what the landing page has always used. */
.lp-marquee--rows { display: flex; flex-direction: column; gap: var(--lp-marquee-gap, 14px); }
@keyframes lp-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
/* Fixed box per item: `width: auto` let each logo claim a different amount of
   track (Anker is 2000x872, Samsung 400x150), so the strip never looked evenly
   spaced. Every brand now occupies exactly the same cell, contained. */
.lp-marquee__item {
  display: grid; place-items: center;
  flex: 0 0 150px; width: 150px; height: 64px;
}
.lp-marquee__item img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  transition: transform var(--lp-base, .28s) var(--lp-ease, cubic-bezier(.4,0,.2,1));
}
.lp-marquee__item:hover img { transform: translateY(-3px) scale(1.05); }

/* A strip that scrolls itself is motion the visitor did not ask for, so it
   stops outright rather than merely slowing down. */
@media (prefers-reduced-motion: reduce) {
  .lp-marquee__track { animation: none !important; }
}

/* ---------- Opt-in modifiers (never set by the landing page) -------------- */

/* Rows scrolling the other way, for `direction: reverse | alternate`. The
   keyframes stay one set; only the playback direction flips. */
.lp-marquee__row--reverse .lp-marquee__track { animation-direction: reverse; }

/* pauseOnHover=false. Stated as an override rather than by moving the pause
   behind a class, so the default markup needs no extra class at all. */
.lp-marquee--nopause:hover .lp-marquee__track { animation-play-state: running; }

/*
 * Pressing anywhere on the strip stops it, whatever the hover setting says and
 * whether or not the device has hover at all.
 *
 * A `click` only fires when the press and the release land on the SAME element.
 * On a strip that is still moving between the two, the tile slides out from
 * under the pointer and the click is simply never dispatched -- the tap looks
 * ignored. Hovering already pauses it on a mouse, but not when an admin has
 * turned pause-on-hover off, and never on a touch screen, which has no hover to
 * pause on.
 */
.lp-marquee:active .lp-marquee__track,
.lp-marquee--nopause:active .lp-marquee__track { animation-play-state: paused; }

/* A tile whose record has no image still has to hold the cell open, or the
   track's rhythm breaks where the picture is missing. */
.lp-marquee__empty {
  display: block; width: 72px; height: 40px; border-radius: 8px;
  background: var(--surface-sunken, rgba(0,0,0,.05));
}

/* Captioned entries (categories). Taller cell, image above the name.
   No card behind the tile: the strip sits directly on the page, so a white
   panel per entry only boxed the artwork in. */
.lp-marquee--labelled .lp-marquee__item {
  grid-template-rows: 1fr auto; gap: 8px;
  flex-basis: 132px; width: 132px; height: 112px;
  padding: 10px 8px;
  background: none; border: 0;
  text-decoration: none;
}
.lp-marquee--labelled .lp-marquee__item img { border-radius: 8px; object-fit: cover; }
.lp-marquee__label {
  font: 600 12px/1.3 var(--font-sans, inherit);
  color: var(--text, inherit);
  text-align: center;
  /* Category names run long; two lines then ellipsis keeps every cell the
     same height, which is what the track's rhythm depends on. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Locked brands. The badge only marks the state — the request itself is made
   on /brands, where there is room for a real button. */
.lp-marquee__item.is-locked { position: relative; }
.lp-marquee__item.is-locked img { filter: grayscale(1); opacity: .55; }
.lp-marquee__item.is-locked:hover img { filter: grayscale(.4); opacity: .8; }
.lp-marquee__lock {
  position: absolute; inset-block-start: 0; inset-inline-end: 0;
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,.1));
  color: var(--text-muted, #6b7280);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.lp-marquee__lock svg { width: 11px; height: 11px; }

/* ---------- Touch and small screens -------------------------------------- */

/* Fewer, smaller cells in view on a phone, and a narrower edge fade so the
   first and last logo are not mostly faded out on a 360px screen. */
@media (max-width: 600px) {
  .lp-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
  .lp-marquee__track { gap: 18px; }
  .lp-marquee--rows { gap: 10px; }
  .lp-marquee__item { flex-basis: 108px; width: 108px; height: 52px; }
  .lp-marquee--labelled .lp-marquee__item { flex-basis: 104px; width: 104px; height: 96px; }
  .lp-marquee__label { font-size: 11px; }
}

/* Hover cannot pause a strip on a touch screen, so the entries have to be
   large enough to hit while they move. */
@media (hover: none) {
  .lp-marquee__item { min-height: 44px; }
}