/*
 * Reproduces the current carousel (Logo Carousel Pro id 8096): 5 logos from 1200px, 4 from 980px, 3 from 736px, 2 below,
 * 60px apart, scrolling from right to left. Unlike the current one, the row stops on hover and while the carousel has the
 * focus, so that the scrolling can be paused (WCAG 2.2.2).
 *
 * The space between logos is a padding inside each item, not a gap: with a gap the second copy of the list would have
 * one space less than the first one, and moving by -50% would jump at every loop.
 */
/* Shared by the slot, so that it keeps the same height as the carousel that replaces it. */
.jforma-loghi-slot,
.jforma-loghi {
    --jforma-loghi-height: 240px;
}

.jforma-loghi {
    --jforma-loghi-space: 60px;
    --jforma-loghi-per-row: 2;
    --jforma-loghi-arrow: 48px;

    /* The items are sized on the visible box, not on the track: the track is as wide as its content. */
    container-type: inline-size;
    position: relative;
    display: flex;
    /* The part of a full-width block that falls outside the visible area, measured by the script (0 without it). */
    margin-right: var(--jforma-loghi-inset-right, 0px);
    margin-left: var(--jforma-loghi-inset-left, 0px);
    overflow: hidden;
}

/* Keeps the space of the carousel until the script replaces the slot, so the page does not jump when the logos arrive. */
.jforma-loghi-slot {
    min-height: var(--jforma-loghi-height);
}

/* Without JavaScript there is no carousel, so the slot keeps no space either. */
@media (scripting: none) {
    .jforma-loghi-slot {
        display: none;
    }
}

.jforma-loghi__track {
    display: flex;
    flex: none;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    /* Keeps the track on its own layer, so that it moves without being redrawn at every frame. */
    will-change: transform;
    /*
     * The exact duration comes from the script in --jforma-loghi-duration. Until then: CSS cannot divide the width of
     * the track by the speed, so this one is exact for logos 300px wide, as at 1440px, and close at the other widths.
     * Without the speed the default one is used, since a missing variable would make the whole declaration invalid and
     * stop the row.
     */
    animation: jforma-loghi-scroll var(--jforma-loghi-duration, calc(var(--jforma-loghi-count) * 300s / var(--jforma-loghi-speed, 60))) linear infinite;
}

/* Paused, not stopped: the row stays where it is and starts again from the same point. */
.jforma-loghi:is(:hover, :focus-within) .jforma-loghi__track {
    animation-play-state: paused;
}

/* Inside the box: a theme container with overflow hidden would cut an outline drawn outside. */
.jforma-loghi:focus-visible {
    outline: 2px solid #555;
    outline-offset: -2px;
}

/* The padding of the last visible item falls past the edge, so exactly N logos are shown with N - 1 spaces. */
.jforma-loghi__item {
    box-sizing: border-box;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: calc((100cqw + var(--jforma-loghi-space)) / var(--jforma-loghi-per-row));
    height: var(--jforma-loghi-height);
    margin: 0;
    padding: 0 var(--jforma-loghi-space) 0 0;
    list-style: none;
}

/*
 * Fixed box: core does not return the size of the images, so the img tags have no width and height, and each logo
 * would otherwise move the layout when it loads. The logos are at most 320x240 and, as in the current carousel, they
 * shrink to fit but are never enlarged.
 */
.jforma-loghi__item img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    filter: grayscale(100%);
    opacity: .9;
    transition: filter .3s, opacity .3s;
}

.jforma-loghi__item img:hover {
    filter: none;
    opacity: 1;
}

/* Shown only with "reduce motion", in a space of their own at the sides of the row, so they do not cover the logos. */
.jforma-loghi__prev,
.jforma-loghi__next {
    position: absolute;
    top: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--jforma-loghi-arrow);
    height: var(--jforma-loghi-arrow);
    margin: 0;
    padding: 0;
    cursor: pointer;
    transform: translateY(-50%);
}

.jforma-loghi__prev svg,
.jforma-loghi__next svg {
    width: 100%;
    height: 100%;
}

.jforma-loghi__prev {
    left: 0;
}

.jforma-loghi__next {
    right: 0;
}

/*
 * The theme styles every button, also on hover and focus (GeneratePress: button:hover, button:focus), with selectors
 * stronger than one class: the container in front makes these rules win in every state. Only the properties the theme
 * changes: the layout stays in the rules above, or the arrows would no longer be shown with "reduce motion".
 */
.jforma-loghi .jforma-loghi__prev,
.jforma-loghi .jforma-loghi__next,
.jforma-loghi .jforma-loghi__prev:is(:hover, :focus, :active),
.jforma-loghi .jforma-loghi__next:is(:hover, :focus, :active) {
    border: 0;
    background: none;
    box-shadow: none;
    color: #555;
}

.jforma-loghi .jforma-loghi__prev:hover,
.jforma-loghi .jforma-loghi__next:hover {
    color: #000;
}

/* aria-disabled and not disabled: a disabled button would lose the focus when the row reaches its end. */
.jforma-loghi .jforma-loghi__prev[aria-disabled="true"],
.jforma-loghi .jforma-loghi__next[aria-disabled="true"] {
    color: #555;
    cursor: default;
}

/* On the icon only: on the button the opacity would fade the focus outline too. */
.jforma-loghi__prev[aria-disabled="true"] svg,
.jforma-loghi__next[aria-disabled="true"] svg {
    opacity: .3;
}

/* High contrast (forced colors): the system sets the colours but keeps the opacity, so the disabled arrow would be a
   faded icon instead of the system colour for disabled controls. */
@media (forced-colors: active) {
    .jforma-loghi__prev[aria-disabled="true"] svg,
    .jforma-loghi__next[aria-disabled="true"] svg {
        opacity: 1;
        color: GrayText;
    }
}

/* Inside the button: the carousel has overflow hidden and would cut an outline drawn outside. */
.jforma-loghi .jforma-loghi__prev:focus-visible,
.jforma-loghi .jforma-loghi__next:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

/*
 * With "reduce motion" the row is a stop of its own. Its outline would be drawn under the logos, and a logo with an
 * opaque background at the edge would cover it, so the frame is drawn above the row, on the carousel, in the space
 * between the two arrows.
 */
.jforma-loghi__track:focus-visible {
    outline: none;
}

.jforma-loghi:has(> .jforma-loghi__track:focus-visible)::after {
    position: absolute;
    inset: 0 var(--jforma-loghi-arrow);
    border: 2px solid #555;
    content: "";
    pointer-events: none;
}

@keyframes jforma-loghi-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Without automatic scrolling the row is scrolled by hand, with touch, trackpad and the two arrow buttons. */
@media (prefers-reduced-motion: reduce) {
    .jforma-loghi {
        padding-inline: var(--jforma-loghi-arrow);
    }

    .jforma-loghi__track {
        flex: auto;
        width: auto;
        min-width: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        animation: none;
    }

    .jforma-loghi__track::-webkit-scrollbar {
        display: none;
    }

    .jforma-loghi__item {
        scroll-snap-align: start;
    }

    .jforma-loghi__item--clone {
        display: none;
    }

    /* Without its space the last logo ends the row exactly: the end is a whole number of logos and none is cut. */
    .jforma-loghi__item:is(:has(+ .jforma-loghi__item--clone), :last-child) {
        width: calc((100cqw + var(--jforma-loghi-space)) / var(--jforma-loghi-per-row) - var(--jforma-loghi-space));
        padding-inline-end: 0;
    }

    .jforma-loghi__prev,
    .jforma-loghi__next {
        display: flex;
    }
}

@media (width >= 736px) {
    .jforma-loghi {
        --jforma-loghi-per-row: 3;
    }
}

@media (width >= 980px) {
    .jforma-loghi {
        --jforma-loghi-per-row: 4;
    }
}

@media (width >= 1200px) {
    .jforma-loghi {
        --jforma-loghi-per-row: 5;
    }
}

/*
 * Where all the logos fit in a row there is nothing to scroll: the row stands still and centred, without the copy and
 * without arrows. The last logo has no space after it, so that the space is not part of the centring.
 */
@media (width < 736px) {
    .jforma-loghi--fits-2 {
        justify-content: center;
        padding-inline: 0;
    }

    .jforma-loghi--fits-2 .jforma-loghi__track {
        flex: none;
        width: max-content;
        overflow: visible;
        animation: none;
    }

    .jforma-loghi--fits-2 .jforma-loghi__item:is(:has(+ .jforma-loghi__item--clone), :last-child) {
        width: calc((100cqw + var(--jforma-loghi-space)) / var(--jforma-loghi-per-row) - var(--jforma-loghi-space));
        padding-inline-end: 0;
    }

    .jforma-loghi--fits-2 .jforma-loghi__item--clone,
    .jforma-loghi--fits-2 .jforma-loghi__prev,
    .jforma-loghi--fits-2 .jforma-loghi__next {
        display: none;
    }
}

@media (736px <= width < 980px) {
    .jforma-loghi--fits-3 {
        justify-content: center;
        padding-inline: 0;
    }

    .jforma-loghi--fits-3 .jforma-loghi__track {
        flex: none;
        width: max-content;
        overflow: visible;
        animation: none;
    }

    .jforma-loghi--fits-3 .jforma-loghi__item:is(:has(+ .jforma-loghi__item--clone), :last-child) {
        width: calc((100cqw + var(--jforma-loghi-space)) / var(--jforma-loghi-per-row) - var(--jforma-loghi-space));
        padding-inline-end: 0;
    }

    .jforma-loghi--fits-3 .jforma-loghi__item--clone,
    .jforma-loghi--fits-3 .jforma-loghi__prev,
    .jforma-loghi--fits-3 .jforma-loghi__next {
        display: none;
    }
}

@media (980px <= width < 1200px) {
    .jforma-loghi--fits-4 {
        justify-content: center;
        padding-inline: 0;
    }

    .jforma-loghi--fits-4 .jforma-loghi__track {
        flex: none;
        width: max-content;
        overflow: visible;
        animation: none;
    }

    .jforma-loghi--fits-4 .jforma-loghi__item:is(:has(+ .jforma-loghi__item--clone), :last-child) {
        width: calc((100cqw + var(--jforma-loghi-space)) / var(--jforma-loghi-per-row) - var(--jforma-loghi-space));
        padding-inline-end: 0;
    }

    .jforma-loghi--fits-4 .jforma-loghi__item--clone,
    .jforma-loghi--fits-4 .jforma-loghi__prev,
    .jforma-loghi--fits-4 .jforma-loghi__next {
        display: none;
    }
}

@media (width >= 1200px) {
    .jforma-loghi--fits-5 {
        justify-content: center;
        padding-inline: 0;
    }

    .jforma-loghi--fits-5 .jforma-loghi__track {
        flex: none;
        width: max-content;
        overflow: visible;
        animation: none;
    }

    .jforma-loghi--fits-5 .jforma-loghi__item:is(:has(+ .jforma-loghi__item--clone), :last-child) {
        width: calc((100cqw + var(--jforma-loghi-space)) / var(--jforma-loghi-per-row) - var(--jforma-loghi-space));
        padding-inline-end: 0;
    }

    .jforma-loghi--fits-5 .jforma-loghi__item--clone,
    .jforma-loghi--fits-5 .jforma-loghi__prev,
    .jforma-loghi--fits-5 .jforma-loghi__next {
        display: none;
    }
}