/* =============================================================================
   Firebrand Partner Logo Carousel — fpc-style.css
   ============================================================================= */

/* Wrapper
   ============================================================================= */
.fpc-wrapper {
    width: 100%;
    box-sizing: border-box;
    --fpc-logo-height: 80px;
    --fpc-gap: 40px;
    --fpc-arrow-color: #333333;
}

/* Heading
   ============================================================================= */
.fpc-heading {
    text-align: center;
    margin-bottom: 40px;
}

/* Carousel layout
   ============================================================================= */
.fpc-carousel-container {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    position: relative;
}

.fpc-track-wrapper {
    flex: 1;
    overflow: hidden;
    /* Prevent layout shift during JS init */
    min-height: calc(var(--fpc-logo-height) + 20px);
}

.fpc-track {
    display: flex;
    align-items: center;
    /* transition set by JS during animation */
    will-change: transform;
    /* gap handled via slide margin so JS pixel math stays simple */
}

/* Slides
   ============================================================================= */
.fpc-slide {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--fpc-gap) / 2);
    box-sizing: border-box;
    /* width set dynamically by JS based on data-visible */
}

.fpc-slide a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* Logo images — grayscale by default, full colour on hover / focus */
.fpc-slide img {
    display: block;
    max-height: var(--fpc-logo-height);
    width: auto;
    max-width: 100%;
    object-fit: contain;

    filter: grayscale(100%);
    opacity: 0.65;
    transition: filter 0.35s ease, opacity 0.35s ease;
}

.fpc-slide:hover img,
.fpc-slide:focus-within img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Arrow buttons
   ============================================================================= */
.fpc-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: transparent;
    color: var(--fpc-arrow-color);
    cursor: pointer;

    font-size: 24px;
    line-height: 1;
    padding: 0;

    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.fpc-arrow:hover {
    background: var(--fpc-arrow-color);
    color: #ffffff;
}

.fpc-arrow:focus-visible {
    outline: 2px solid var(--fpc-arrow-color);
    outline-offset: 3px;
}

.fpc-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Responsive overrides
   Visible-count breakpoints are driven by JS + data attributes,
   but we can hide arrows on very small screens if needed.
   ============================================================================= */
@media ( max-width: 479px ) {
    .fpc-arrow {
        width: 32px;
        height: 32px;
        font-size: 20px;
    }
}