/* Logo Bar block */

.block-logo-bar {
    --logo-bar-gap: 30px;
    --logo-bar-box-gap: 12px;
    --logo-bar-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.block-logo-bar__inner {
    display: flex;
    flex-direction: column;
    gap: var(--logo-bar-gap);
}

/* Header — a centred title and paragraph, like the Hero Carousel intro */

.block-logo-bar__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.block-logo-bar__title {
    margin: 0;
    text-wrap: balance;
}

/* The same measure as the Hero Carousel intro */
.block-logo-bar__text {
    max-width: 60ch;
    margin: 0;
    text-wrap: pretty;
}

/* Grid — two across on a phone, five on desktop */

.block-logo-bar__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--logo-bar-box-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.block-logo-bar__item {
    min-width: 0;
}

/* A landscape white box with the logo centred in it. Percentage padding is
   measured from the width, so the top and bottom take less to leave the logo
   room in the shorter box. */
.block-logo-bar__box {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    padding: 12% 18%;
    border-radius: var(--radius-06);
    background-color: var(--wp--preset--color--white);
}

a.block-logo-bar__box {
    transition: opacity var(--logo-bar-transition);
}

a.block-logo-bar__box:hover,
a.block-logo-bar__box:focus-visible {
    opacity: 0.6;
}

/* Fits inside the padding whatever its shape, without being stretched */
.block-logo-bar__logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Tablet */

@media (min-width: 600px) {
    .block-logo-bar__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Desktop */

@media (min-width: 782px) {
    .block-logo-bar {
        --logo-bar-gap: 50px;
        --logo-bar-box-gap: 20px;
    }

    .block-logo-bar__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}