/**
 * FTB Mobile Card Slider
 * Styles for the JS-created slider DOM (wrapper, viewport, nav, buttons, dots).
 * The JS handles all layout logic inline; this file handles purely visual styling.
 */

/* ---- Wrapper & Viewport ---- */
.ftb-slider-wrapper {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.ftb-slider-viewport {
    overflow: hidden;
    width: 100%;
}

/* ---- Navigation bar (arrows + dots) ---- */
.ftb-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 0 1rem;
}

/* ---- Arrow buttons ---- */
.ftb-slider-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid var(--wp--preset--color--primary, #2a7381);
    background: white;
    color: var(--wp--preset--color--primary, #2a7381);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.ftb-slider-btn:hover:not(:disabled) {
    background: var(--wp--preset--color--primary, #2a7381);
    color: white;
    transform: scale(1.08);
}

.ftb-slider-btn:disabled {
    opacity: 0.3;
    cursor: default;
    transform: none;
}

.ftb-slider-btn svg {
    display: block;
    pointer-events: none;
}



/* ---- On desktop: undo JS and show normal columns ---- */
@media (min-width: 782px) {
    /* If JS ran on a narrow viewport and user resizes up, restore layout */
    .ftb-slider-wrapper .wp-block-columns {
        transform: none !important;
    }
    .ftb-slider-nav {
        display: none !important;
    }
}