/* Proba — Logo wall */

/* ---------- Tokens ---------- */
/* module.html sets these per instance; these are only the fallbacks */
.plw-outer.plw-outer {
  --plw-font: 'Lexend', Arial, Helvetica, sans-serif;
  --plw-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --plw-bg: transparent;
  --plw-pad-y: 48px;
  --plw-pad-x: 24px;
  --plw-radius: 0px;
  --plw-art-h: 120px;
  --plw-art-opacity: 0.5;

  --plw-gap: 40px;
  --plw-logo-w: 140px;
  --plw-logo-h: 72px;
  --plw-logo-scale: 1.12;
  --plw-own-scale: 1;
  --plw-own-trim: 0px;

  --plw-pop-w: 280px;
  --plw-pop-offset: 12px;
  --plw-pop-shift: 0px;
  --plw-pop-pad: 18px;
  --plw-pop-radius: 14px;
  --plw-pop-bg: #1d624d;
  --plw-pop-name-color: #fff;
  --plw-pop-text-color: #d9ede5;
  --plw-pop-name-size: 16px;
  --plw-pop-text-size: 14px;

  --plw-focus-color: #101913;
  --plw-btn-bg: #fff;
  --plw-btn-color: #1d624d;
}

/* ---------- Reset ---------- */
.plw-outer.plw-outer,
.plw-outer.plw-outer *,
.plw-outer.plw-outer *::before,
.plw-outer.plw-outer *::after {
  box-sizing: border-box;
}

.plw-outer.plw-outer :where(div, ul, li, p, a, img, button, svg) {
  position: static;
  float: none;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  line-height: inherit;
  list-style: none;
  text-transform: none;
  background: none;
  box-shadow: none;
}

/* ---------- Shell ---------- */
/* The outer element is only the size container. A container can't query
   itself, so everything that responds to width lives on .plw-frame. */
.plw-outer.plw-outer {
  container: plw / inline-size;
  clear: both;
  width: 100%;
  font-family: var(--plw-font);
}

.plw-outer.plw-outer .plw-frame {
  --plw-fit: 1;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
  padding: calc(var(--plw-pad-y) * var(--plw-fit)) calc(var(--plw-pad-x) * var(--plw-fit));
  border-radius: var(--plw-radius) var(--plw-radius) 0 0;
  background: var(--plw-bg);
}

/* artwork sits behind the strip and adds no height */
.plw-outer.plw-outer.plw-has-art .plw-frame::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 0;
  height: calc(var(--plw-art-h) * var(--plw-fit));
  background: var(--plw-art) repeat-x left bottom / auto 100%;
  opacity: var(--plw-art-opacity);
  pointer-events: none;
}

/* ---------- Rail ---------- */
.plw-outer.plw-outer .plw-rail {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-block: 8px;
}

/* clip, unlike hidden, can't be scrolled by focus and lets hover growth spill vertically */
@supports (overflow: clip) {
  .plw-outer.plw-outer .plw-rail {
    overflow: visible;
    overflow-x: clip;
  }
}

.plw-outer.plw-outer .plw-track {
  display: flex;
  align-items: center;
  gap: calc(var(--plw-gap) * var(--plw-fit));
  width: max-content;
}

/* module.js drives the offset; there is no CSS animation to fall out of step */
.plw-outer.plw-outer.plw-is-live .plw-track {
  will-change: transform;
}

.plw-outer.plw-outer .plw-item {
  position: relative;
  flex: 0 0 auto;
  margin-inline: calc(var(--plw-own-trim) * -1);
}

/* ---------- Logo ---------- */
.plw-outer.plw-outer .plw-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.plw-outer.plw-outer .plw-logo {
  display: block;
  width: auto;
  height: calc(var(--plw-logo-h) * var(--plw-fit) * var(--plw-own-scale));
  max-width: calc(var(--plw-logo-w) * var(--plw-fit));
  object-fit: contain;
  transition: transform 0.25s ease;
}

/* ---------- Panel ---------- */
/* One panel per logo, shared by every copy of it. The layer spans the
   module, so no ancestor of the strip can clip a panel. */
.plw-outer.plw-outer .plw-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.plw-outer.plw-outer .plw-pop {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--plw-pop-w);
  max-width: min(var(--plw-pop-w), calc(100cqi - 16px));
  padding: var(--plw-pop-pad);
  border-radius: var(--plw-pop-radius);
  background: var(--plw-pop-bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, visibility 0.2s, transform 0.2s var(--plw-ease);
}

.plw-outer.plw-outer .plw-pop.plw-pop-up {
  transform: translateY(calc(-100% - 6px));
}

/* pointer-events matter: WCAG 1.4.13 needs the panel to be hoverable */
.plw-outer.plw-outer .plw-pop.plw-is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.plw-outer.plw-outer .plw-pop.plw-pop-up.plw-is-open {
  transform: translateY(-100%);
}

.plw-outer.plw-outer .plw-pop-name {
  margin-bottom: 6px;
  font-size: var(--plw-pop-name-size);
  font-weight: 600;
  line-height: 1.3;
  color: var(--plw-pop-name-color);
}

.plw-outer.plw-outer .plw-pop-text {
  font-size: var(--plw-pop-text-size);
  line-height: 1.5;
  color: var(--plw-pop-text-color);
  white-space: pre-line;
  overflow-wrap: break-word;
}

/* the pointer stays on the card even when the panel is nudged sideways */
.plw-outer.plw-outer .plw-pop::after {
  content: "";
  position: absolute;
  top: -5px;
  left: calc(50% + var(--plw-pop-shift));
  width: 12px;
  height: 12px;
  background: var(--plw-pop-bg);
  transform: translateX(-50%) rotate(45deg);
}

.plw-outer.plw-outer .plw-pop.plw-pop-up::after {
  top: auto;
  bottom: -5px;
}

/* ---------- Pause control ---------- */
/* hidden until module.js starts the motion it controls */
.plw-outer.plw-outer .plw-toggle {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 15;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--plw-btn-color);
  background: var(--plw-btn-bg);
  box-shadow: none;
  cursor: pointer;
}

.plw-outer.plw-outer.plw-is-live .plw-toggle {
  display: flex;
}

.plw-outer.plw-outer .plw-toggle svg {
  width: 18px;
  height: 18px;
}

.plw-outer.plw-outer .plw-icon-play,
.plw-outer.plw-outer.plw-is-paused .plw-icon-pause {
  display: none;
}

.plw-outer.plw-outer.plw-is-paused .plw-icon-play {
  display: block;
}

.plw-outer.plw-outer :is(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--plw-focus-color);
  outline-offset: 3px;
}

/* ---------- Hover (pointer devices only) ---------- */
@media (hover: hover) {
  .plw-outer.plw-outer .plw-card:hover .plw-logo {
    transform: scale(var(--plw-logo-scale));
  }

  .plw-outer.plw-outer :is(a.plw-card, .plw-has-pop .plw-card) {
    cursor: pointer;
  }
}

/* ---------- Narrow ---------- */
/* scales the editor's values down rather than replacing them */
@container plw (max-width: 700px) {
  .plw-outer.plw-outer .plw-frame {
    --plw-fit: 0.75;
  }
}

/* ---------- Reduced motion ---------- */
/* a still, wrapped row showing each logo once */
@media (prefers-reduced-motion: reduce) {
  .plw-outer.plw-outer * {
    transition-duration: 0.01ms !important;
  }

  .plw-outer.plw-outer .plw-track {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    transform: none !important;
  }

  .plw-outer.plw-outer [data-plw-clone] {
    display: none;
  }
}