/*
 * ICS logo strip (partner / sponsor marquee) - P33.
 * Scope: #jn-logo-slider only (dong-hanh page 128 and EN join page 2900).
 * Pure-CSS marquee: track duplicated (second half aria-hidden), animated -50%.
 * Selectors use body + 3 ids so they beat the legacy 3-id rules in the element's
 * own _cssCustom without !important. No focusable elements are added.
 * Kept from legacy: edge fade mask, pause on hover/focus, reduced-motion rule.
 */
:root {
  --ics-logo-gap: 64px;    /* gap between logos at >=1200px */
  --ics-logo-h: 52px;      /* logo height */
  --ics-logo-maxw: 200px;  /* caps wide wordmarks (PETROSETCO, COTECCO) */
}
@media (max-width: 1199px) {
  :root { --ics-logo-gap: 48px; }
}
@media (max-width: 599px) {
  :root { --ics-logo-gap: 40px; --ics-logo-h: 40px; --ics-logo-maxw: 150px; }
}
body #jn-logo-slider#jn-logo-slider#jn-logo-slider .splide__slide {
  padding-inline: calc(var(--ics-logo-gap) / 2);
}
body #jn-logo-slider#jn-logo-slider#jn-logo-slider .splide__slide img {
  height: var(--ics-logo-h);
  max-height: var(--ics-logo-h);
  max-width: var(--ics-logo-maxw);
  width: auto;
  object-fit: contain;
}
body #jn-logo-slider#jn-logo-slider#jn-logo-slider .splide__list {
  animation-duration: 36s;
}

/* H12 boxed slider (2026-11-05): logo marquee clipped to the 87.5% page container (#brxe-p90c07, max --container-max) instead of full-bleed 100vw. Overrides the element _cssCustom (width 100vw, margin-left calc(50% - 50vw)); keyframes and speed unchanged. */
body #jn-logo-slider#jn-logo-slider#jn-logo-slider {
  box-sizing: border-box;
  width: min(87.5vw, var(--container-max, 1440px));
  max-width: none;
  margin-left: calc(50% - min(87.5vw, var(--container-max, 1440px)) / 2);
  margin-right: auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  body #jn-logo-slider#jn-logo-slider#jn-logo-slider {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body #jn-logo-slider#jn-logo-slider#jn-logo-slider .splide__list {
    animation: none;
    transform: none;
  }
}

/* H16 slider gap (2026-11-05): owner asked to double the gap between the intro paragraph (#jn-partners-p) and the logo slider. Measured before, 1194 and 390: 24px = flex gap of #jn-partners-in (p and slider margin 0, padding 0). This adds 24px above the slider, so the visible gap is 48px at all widths (incl. <=599). */
html body #jn-partners #jn-logo-slider#jn-logo-slider {
  margin-top: 24px;
}