/* ==========================================================================
   t2u-carrousel.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. WRAPPER
   -------------------------------------------------------------------------- */

.t2u-carrousel {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. VIEWPORT
   -------------------------------------------------------------------------- */

.t2u-carrousel__viewport {
    width: 100%;
    overflow: hidden;
    /* height is set as an inline style from PHP so it is always present */
}

/* --------------------------------------------------------------------------
   3. TRACK
   -------------------------------------------------------------------------- */

.t2u-carrousel__track {
    display:         flex;
    flex-direction:  row;
    flex-wrap:       nowrap;
    align-items:     stretch;
    height:          100%;
    /* gap, transform and transition-duration are applied by JS inline */
}

.t2u-carrousel__track--no-transition {
    transition: none !important;
}

/* --------------------------------------------------------------------------
   4. SLIDES
   height, width and flex-shrink are applied inline by PHP + JS
   -------------------------------------------------------------------------- */

.t2u-carrousel__slide {
    flex-shrink: 0;    /* safety net in case inline style is delayed */
    overflow:    hidden;
    position:    relative;
    box-sizing:  border-box;
}

/* --------------------------------------------------------------------------
   5. IMAGES
   -------------------------------------------------------------------------- */

.t2u-carrousel__slide img {
    display:          block;
    width:            100%;
    height:           100%;
    object-fit:       cover;
    object-position:  center center;
    user-select:      none;
    pointer-events:   none;
}

/* --------------------------------------------------------------------------
   6. BREAKPOINTS (used by JS as single source of truth via CSS custom props)
   -------------------------------------------------------------------------- */

:root {
    --t2u-bp-tablet: 1024px;
    --t2u-bp-mobile:  600px;
}