/* GROUP ORGANISMS / (NOT PART OF FRAMEWORK) / LOGO FLEX
=================================================== */
/* Modifiers...

    - .c-logo-flex--neat-logos <-- Used to hide a logo to form a perfect row. Don't carpet bomb this because we don't want it for /about

*/
.c-logo-flex {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, 6.5em);
    grid-gap: var(--spacing-l-1) var(--spacing-l-2);
    width: 100%;
}

.c-logo-flex > * {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 7rem;
    min-height: 5em;
}

.c-logo-flex div {
    /* Needed to make SVGs appear */
    width: 100%;
}

.c-logo-flex img {
    /* For tweaks to positioning */
    position: relative;
    max-height: 8rem;
    max-width: 9rem;
}

.c-logo-flex-img-large {
    --width: 150%;
    width: var(--width);
    left: calc(0% - (var(--width) - 100%) / 2);
}

.c-logo-flex img:not(.c-logo-flex-img-large) {
    /* e.g. Jamco jpg */
    max-width: 100%;
}

/* Custom */
@media (min-width: 500px) {
    .c-logo-flex {
        /* e.g. >> home -> clients */
        grid-template-columns: repeat(auto-fit, 7em);
        /* grid-gap: var(--spacing-l-1) var(--spacing-l-4); */
        /* Custom so that logos fit all the way across */
        gap: var(--spacing-l) 7.3em;
    }
}

/* Custom to --mq-before-logo-flex-layout-change-1 */
@media (min-width: 650px) and (max-width: 1199px){
    /* Control the logo flow, so the plus button doesn't overflow as an orphan. */
    .c-logo-flex--neat-logos {
        grid-template-columns: repeat(3, 7.3em);
    }

    .c-logo-flex--neat-logos .c-logo-flex__item:nth-last-child(2) {
        /* START SCREEN READER TEXT
        --------------------------- */
        clip: rect(1px, 1px, 1px, 1px);

        position: absolute!important;
        overflow: hidden;
        width: 1px;
        height: 1px;
        /* END SCREEN READER TEXT
        ------------------------- */
    }
}

/* --mq-after-logo-flex-layout-change-1 */
@media (min-width: 1200px) {
    .c-logo-flex {
        /* Causes issues on firefox, 320px */
        max-width: var(--max-width-1);
    }
}

/* --mq-text-bump-4-after */
@media (min-width: 2200px) {
    .c-logo-flex {
        /* Causes issues on firefox, 320px */
        max-width: 78rem;
    }
}

/* Position tweaks */
#c-logo-flex__client-po-cruises {
    top: -1em;
    --width: 125%;
    width: var(--width);
    max-width: none;
    left: calc(0% - (var(--width) - 100%) / 2);
}

#c-logo-flex__client-air-canada {
    --width: 125%;
    width: var(--width);
    max-width: none;
    left: calc(0% - (var(--width) - 100%) / 2);
}

#c-logo-flex__client-amersham {
    top: -0.3em;
    --width: 121%;
    width: var(--width);
    max-width: none;
    left: calc(0% - (var(--width) - 100%) / 2);
}

#c-logo-flex__client-adient {
    top: -0.3em;
    --width: 110%;
    width: var(--width);
    max-width: none;
    left: calc(0% - (var(--width) - 100%) / 2);
}

#c-logo-flex__client-sunseeker {
    --width: 140%;
    width: var(--width);
    max-width: none;
    left: calc(0% - (var(--width) - 100%) / 2);
}

#c-logo-flex__client-jamco,
#c-logo-flex__client-cathay-pacific,
#c-logo-flex__client-china-southern,
#c-logo-flex__client-gner,
#c-logo-flex__client-acro,
#c-logo-flex__client-adient {
    /* Increase opacity */
    filter: grayscale(100%) opacity(60%);
}

#c-logo-flex__client-st-engineering {
    /* Increase opacity */
    filter: grayscale(100%) opacity(70%);
}

/* GROUP ORGANISMS / (NOT PART OF FRAMEWORK) / LOGO FLEX / RHYTHM
=================================================== */
.c-logo-flex {
    padding-top: var(--spacing-m-2);
}

.c-logo-flex__item img {
    filter: grayscale(100%) opacity(50%);
    transition: all 0.1s ease-in 0s;
}

.c-logo-flex + .c-hero-block {
    /* e.g. >> /about, ajax'd content */
    padding-top: var(--spacing-l);
}

/* e.g. >> /about */
p + .c-logo-flex {
    padding-top: var(--spacing-l);
}