/*
 * Brand strip block (rackethouse/brand-strip).
 *
 * Loaded on the front end and in the block editor - registered as both 'style' and
 * 'editor_style' on the block - so the ServerSideRender preview matches the real thing.
 *
 * Kept out of the theme's style.css so the editor loads the block's styles and nothing else.
 *
 * Logos come from several shops and arrive at wildly different intrinsic sizes and aspect
 * ratios, so the cell fixes the box and the image is constrained inside it.
 */

.rh-brandstrip {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.5rem 0;
}

/*
 * Width override, done by redefining the variable rather than by setting max-width.
 *
 * The parent theme's styles.css constrains every top-level block with
 *
 *   .wp-blocks > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)
 *               :not(.wp-block-separator):not(.woocommerce) { max-width: var(--container-width) }
 *
 * Each :not() counts as a class, so that selector is specificity (0,7,0) - a plain max-width
 * here loses to it no matter how many block classes are chained on. Setting the custom property
 * instead feeds the parent's own declaration, so there is no specificity fight and no
 * !important, and this stays correct if the parent ever changes that selector.
 */
.rh-brandstrip.wp-block-rackethouse-brand-strip {
    --container-width: 1400px;
}

.rh-brandstrip__list {
    display: flex;
    flex: 1 1 32rem;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rh-brandstrip__item {
    flex: 1 1 0;
    min-width: 7.5rem;
    display: flex;
    border-right: 1px solid #e5e5e5;
}

.rh-brandstrip__item:last-child {
    border-right: 0;
}

.rh-brandstrip__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1.5rem;
}

.rh-brandstrip__logo {
    max-width: 125px;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.rh-brandstrip__all {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    align-self: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border: 1px solid #e5e5e5;
    font-weight: 700;
    font-size: 0.9375rem;
    white-space: nowrap;
}

/*
 * The "see all brands" button, on mobile.
 *
 * The logo list is flex: 1 1 32rem, so below about 512px it claims the whole row and the button
 * wraps onto a line of its own. A flex item alone on its line sits at flex-start, which left it
 * hard against the edge.
 *
 * margin-inline: auto centres it on that line without touching the logo row above - putting
 * justify-content on the strip would also have to be undone once the two sit side by side again.
 * align-self: center above is vertical centring and does nothing here.
 */
@media (max-width: 767px) {
    .rh-brandstrip__all {
        margin-inline: auto;
    }
}