/**
 * Logo Wall Block Styles
 */

.logo-wall-section {
    padding: 80px 0;
    background-color: #fff;
}

/* --- Shared --- */
.logo-wall-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    flex-shrink: 0;
}

.logo-wall-image {
    display: block;
    width: auto;
    height: auto;
    margin: 0 !important;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.logo-wall-item:hover .logo-wall-image {
    filter: grayscale(0%);
    opacity: 1;
}

/* --- Grid Mode --- */
.logo-wall-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* --- Marquee Mode --- */
.logo-wall-marquee {
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
}

.logo-wall-marquee-track {
    display: flex;
    align-items: center;
    gap: 20px;
    width: max-content;
    animation: logo-marquee-scroll 60s linear infinite;
}

.logo-wall-marquee:hover .logo-wall-marquee-track {
    animation-play-state: paused;
}

@keyframes logo-marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Disable links and scroll in editor */
.block-editor-block-list__block .logo-wall-marquee {
    overflow: hidden;
}

.block-editor-block-list__block .logo-wall-marquee-track {
    animation: none;
}

/* Responsive: height comes from inline style, no override needed */