/* Carousel Block Frontend Styles */

.fireweed-carousel-wrapper {
    position: relative;
}

.fireweed-carousel {
    display: flex;
    overflow: hidden;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.fireweed-carousel::-webkit-scrollbar {
    display: none;
}

.fireweed-carousel-track {
    display: flex;
    width: 100%;
    min-width: 100%;
    gap: var(--fireweed-carousel-gap, 1em);
    position: relative;
    left: 0;
}

/* For loop mode, ensure track can be transformed */
.fireweed-carousel-wrapper[data-scroll-direction="loop"] .fireweed-carousel-track {
    will-change: transform;
}

/* Vertical alignment for carousel items */
.fireweed-carousel-wrapper[data-vertical-align="top"] .fireweed-carousel-track {
    align-items: flex-start;
}

.fireweed-carousel-wrapper[data-vertical-align="center"] .fireweed-carousel-track {
    align-items: center;
}

.fireweed-carousel-wrapper[data-vertical-align="bottom"] .fireweed-carousel-track {
    align-items: flex-end;
}

/* Smooth scrolling - no overflow scrolling needed */
.fireweed-carousel-wrapper[data-scroll-type="smooth"] .fireweed-carousel {
    overflow: hidden;
}

.fireweed-carousel-wrapper[data-scroll-type="smooth"] .fireweed-carousel-track {
    will-change: transform;
}

/* Each child item in the carousel */
.fireweed-carousel-track > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
    margin: 0;
}

/* Offset: apply negative left margin to first item when enabled */
.fireweed-carousel-wrapper[data-offset="true"][data-columns="1"] .fireweed-carousel-track > *:first-child {
    margin-left: calc((100% - 0 * var(--fireweed-carousel-gap, 1em)) / 1 / 2 * -1);
}

.fireweed-carousel-wrapper[data-offset="true"][data-columns="2"] .fireweed-carousel-track > *:first-child {
    margin-left: calc((100% - 1 * var(--fireweed-carousel-gap, 1em)) / 2 / 2 * -1);
}

.fireweed-carousel-wrapper[data-offset="true"][data-columns="3"] .fireweed-carousel-track > *:first-child {
    margin-left: calc((100% - 2 * var(--fireweed-carousel-gap, 1em)) / 3 / 2 * -1);
}

.fireweed-carousel-wrapper[data-offset="true"][data-columns="4"] .fireweed-carousel-track > *:first-child {
    margin-left: calc((100% - 3 * var(--fireweed-carousel-gap, 1em)) / 4 / 2 * -1);
}

.fireweed-carousel-wrapper[data-offset="true"][data-columns="5"] .fireweed-carousel-track > *:first-child {
    margin-left: calc((100% - 4 * var(--fireweed-carousel-gap, 1em)) / 5 / 2 * -1);
}

.fireweed-carousel-wrapper[data-offset="true"][data-columns="6"] .fireweed-carousel-track > *:first-child {
    margin-left: calc((100% - 5 * var(--fireweed-carousel-gap, 1em)) / 6 / 2 * -1);
}

/* Calculate width based on column count */
/* Using calc with gap consideration */
.fireweed-carousel-wrapper[data-columns="1"] .fireweed-carousel-track > * {
    width: 100%;
}

.fireweed-carousel-wrapper[data-columns="2"] .fireweed-carousel-track > * {
    width: calc((100% - var(--fireweed-carousel-gap, 1em)) / 2);
}

.fireweed-carousel-wrapper[data-columns="3"] .fireweed-carousel-track > * {
    width: calc((100% - 2 * var(--fireweed-carousel-gap, 1em)) / 3);
}

.fireweed-carousel-wrapper[data-columns="4"] .fireweed-carousel-track > * {
    width: calc((100% - 3 * var(--fireweed-carousel-gap, 1em)) / 4);
}

.fireweed-carousel-wrapper[data-columns="5"] .fireweed-carousel-track > * {
    width: calc((100% - 4 * var(--fireweed-carousel-gap, 1em)) / 5);
}

.fireweed-carousel-wrapper[data-columns="6"] .fireweed-carousel-track > * {
    width: calc((100% - 5 * var(--fireweed-carousel-gap, 1em)) / 6);
}

/* Responsive: on mobile, show fewer columns */
@media (max-width: 768px) {
    .fireweed-carousel-wrapper[data-columns] .fireweed-carousel-track > * {
        width: calc((100% - var(--fireweed-carousel-gap, 1em)) / 2);
    }
    
    .fireweed-carousel-wrapper[data-columns="1"] .fireweed-carousel-track > * {
        width: 100%;
    }
    
    /* Offset for mobile: 2 columns */
    .fireweed-carousel-wrapper[data-offset="true"][data-columns] .fireweed-carousel-track > *:first-child {
        margin-left: calc((100% - 1 * var(--fireweed-carousel-gap, 1em)) / 2 / 2 * -1);
    }
    
    .fireweed-carousel-wrapper[data-offset="true"][data-columns="1"] .fireweed-carousel-track > *:first-child {
        margin-left: calc((100% - 0 * var(--fireweed-carousel-gap, 1em)) / 1 / 2 * -1);
    }
}

/* Ensure grid children work properly in carousel */
.fireweed-carousel .wp-block-group__inner-container {
    display: flex;
    width: max-content;
}

/* Smooth transitions for programmatic scrolling */
.fireweed-carousel {
    transition: transform 0.3s ease;
}

/* Navigation arrows (hidden by default, shown when enabled) */
.fireweed-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 10;
    width: var(--nav-size-desktop, 48px);
    height: var(--nav-size-desktop, 48px);
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
    /* Background only applied when navShowBackground is true via inline style */
    background: transparent;
}

.fireweed-carousel-nav svg {
    display: block;
    width: calc(var(--nav-size-desktop, 48px) * 0.5);
    height: calc(var(--nav-size-desktop, 48px) * 0.5);
}

.fireweed-carousel-wrapper[data-show-nav="true"] .fireweed-carousel-nav {
    display: flex; /* Show when enabled */
}

.fireweed-carousel-nav:hover {
    opacity: 0.8;
}

/* Navigation Shape - Round (default) */
.nav-shape-round .fireweed-carousel-nav {
    border-radius: 50%;
}

/* Navigation Shape - Square */
.nav-shape-square .fireweed-carousel-nav {
    border-radius: 4px;
}

/* No Background - ensure no background is applied */
.nav-no-background .fireweed-carousel-nav {
    background: transparent !important;
    padding: 8px;
}

.nav-no-background .fireweed-carousel-nav:hover {
    opacity: 0.7;
}

/* Arrow position: sides (inset - default) */
.nav-position-inset .fireweed-carousel-nav.sides.prev,
.fireweed-carousel-nav.sides.prev {
    left: 1rem;
}

.nav-position-inset .fireweed-carousel-nav.sides.next,
.fireweed-carousel-nav.sides.next {
    right: 1rem;
}

/* Arrow position: outside */
.nav-position-outside .fireweed-carousel-nav.outside.prev,
.fireweed-carousel-nav.outside.prev {
    right: 100%;
    margin-right: 1rem;
}

.nav-position-outside .fireweed-carousel-nav.outside.next,
.fireweed-carousel-nav.outside.next {
    left: 100%;
    margin-left: 1rem;
}

/* Arrow position: below - container for centered buttons */
.fireweed-carousel-nav-below {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 0.5rem 0;
}

/* Arrow position: below - remove absolute positioning */
.fireweed-carousel-nav.below {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .fireweed-carousel-nav {
        width: var(--nav-size-mobile, 40px);
        height: var(--nav-size-mobile, 40px);
    }
    
    .fireweed-carousel-nav svg {
        width: calc(var(--nav-size-mobile, 40px) * 0.5);
        height: calc(var(--nav-size-mobile, 40px) * 0.5);
    }
    
    .fireweed-carousel-nav.sides.prev {
        left: 0.5rem;
    }
    
    .fireweed-carousel-nav.sides.next {
        right: 0.5rem;
    }
    
    .fireweed-carousel-nav.outside.prev {
        margin-right: 0.5rem;
    }
    
    .fireweed-carousel-nav.outside.next {
        margin-left: 0.5rem;
    }
}