/*
================================================

Space Vanta Theme 1.0

Module:
Hero Carousel

File:
public/hero/hero-carousel.css

Version:
1.1

Purpose:
Horizontal carousel structure

Responsibilities:
- Horizontal track
- Slide width
- Slide alignment
- Arrow navigation structure
- Touch interaction foundation

Motion:
Handled by hero-motion.css

Navigation visual styling:
Reserved for future navigation CSS

================================================
*/


/*
---------------------------------
01. Track
---------------------------------
*/

.sv-hero__track {

    display: flex;

    flex-direction: row;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    transform:
        translate3d(0,
            0,
            0);

    will-change: transform;

}


/*
---------------------------------
02. Slide
---------------------------------
*/

.sv-hero__track>.sv-hero__slide {

    position: relative;

    flex:
        0 0 100%;

    width: 100%;

    min-width: 100%;

    max-width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


/*
---------------------------------
03. User Interaction
---------------------------------
*/

.sv-hero__track {

    touch-action: pan-y;

    cursor: grab;

}


.sv-hero__track.is-dragging {

    cursor: grabbing;

}


/*
---------------------------------
04. Navigation Structure
---------------------------------

Visual styling is intentionally
kept minimal here.

Future visual treatment should
be placed in a dedicated file.
---------------------------------
*/

.sv-hero__arrow {

    position: absolute;

    top: 50%;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    margin: 0;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255,
            255,
            255,
            .9);

    color: #111;

    transform:
        translateY(-50%);

    cursor: pointer;

}


/*
---------------------------------
05. Previous
---------------------------------
*/

.sv-hero__arrow--prev {

    left: 20px;

}


/*
---------------------------------
06. Next
---------------------------------
*/

.sv-hero__arrow--next {

    right: 20px;

}


/*
---------------------------------
07. Mobile
---------------------------------
*/

@media (max-width: 767px) {


    .sv-hero__arrow {

        display: none;

    }


    .sv-hero__track {

        touch-action: pan-y;

    }


}


/*
---------------------------------
08. Reduced Motion
---------------------------------
*/

@media (prefers-reduced-motion: reduce) {


    .sv-hero__track {

        transition: none;

    }


}