/* STUDIO Logo-Reihen (partials/components/logo-wall.hbs), auf der Startseite und auf /christos-stavrou/.
   Wechseln gruppenweise wie bei mobbin.com. Gruppen und Takt kommen aus js/logo-wall.js.
   Ohne JavaScript oder mit "Bewegung reduzieren" stehen alle Logos ruhig nebeneinander. */

.about-logos {
    --about-max: 1200px;
    --about-gutter: max(26px, 1.8vw);
    --about-block-gap: max(88px, calc(7vw * var(--scale)));
    --about-logo-w: max(92px, calc(8vw * var(--scale)));
    --about-logo-h: 28px;
    --about-logo-gap: 48px;
    display: flex;
    flex-direction: column;
    row-gap: var(--about-block-gap);
    max-width: calc(var(--about-max) + 2 * var(--about-gutter));
    margin: var(--about-block-gap) auto 0;
    padding-inline: var(--about-gutter);
}

/* Titel wie "Empfehlungen": Schrift kommt von .subtitle */
.about-logos-title {
    display: block;
    margin-bottom: max(24px, calc(1.8vw * var(--scale)));
    text-align: center;
}

.about-logo-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px var(--about-logo-gap);
}

/* Ruhige Reihe ohne Wechsel: enger, damit alle Logos am Computer in eine Zeile passen */
@media screen and (min-width: 768px) {
    .about-logo-cycle:not(.is-cycling) .about-logo-list {
        column-gap: 32px;
    }
}

/* Jedes Logo bekommt dieselbe Box und füllt sie, ohne verzerrt zu werden.
   Breite Logos stoßen links und rechts an, kompakte oben und unten. */
.about-logo {
    flex-shrink: 0;
    width: var(--about-logo-w);
    height: var(--about-logo-h);
}

.about-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Alle Gruppen liegen übereinander. Die aktive kommt von unten aus der Unschärfe,
   die alte geht nach oben weg. Logo für Logo, von links nach rechts. */
.about-logo-cycle.is-cycling {
    display: grid;
    place-items: center;
}

.about-logo-cycle.is-cycling .about-logo-list {
    grid-area: 1 / 1;
    flex-wrap: nowrap;
}

.about-logo-cycle.is-cycling .about-logo {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(20px);
    transition-property: opacity, filter, transform;
    transition-duration: .6s;
    transition-timing-function: cubic-bezier(0, 0, .58, 1);
    transition-delay: calc(var(--i) * 70ms);
}

.about-logo-cycle.is-cycling .is-active .about-logo {
    opacity: 1;
    filter: blur(0);
    transform: none;
}

.about-logo-cycle.is-cycling .is-leaving .about-logo {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(-20px);
}

/* Handy: drei Logos pro Gruppe passen auch auf schmale Handys */

@media screen and (max-width: 767px) {
    .about-logos {
        --about-logo-w: min(92px, calc((100vw - 2 * var(--about-gutter) - 2 * var(--about-logo-gap)) / 3));
        --about-logo-h: 24px;
        --about-logo-gap: 24px;
    }
}