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

Space Vanta Theme 1.0

Module:
Featured Functions

File:
public/header/featured-functions/layout.css

Version:
FEATURED-FUNCTIONS-LAYOUT-B3-001

Responsibility:
- Desktop Featured Functions internal alignment
- Mobile Find / Vision internal alignment
- Find / Vision spacing

Does NOT control:
- Header Core
- Mobile Header height
- Mobile Header layer structure
- Mobile Menu
- Search
- Cart
- Navigation
- Find Cube geometry
- Find Cube material
- Find interaction logic
- Vision Aperture geometry
- Vision interaction logic
- Panel positioning
- Panel animation

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


/* =================================================
   DESKTOP
   ================================================= */

@media (min-width: 768px) {

    .sv-header__desktop .sv-featured-functions--desktop {

        display:
            flex;

        align-items:
            center;

        justify-content:
            flex-end;

        gap:
            18px;

        width:
            max-content;

        max-width:
            100%;

        justify-self:
            end;

    }


    /* ---------------------------------------------
       Desktop Function
       --------------------------------------------- */

    .sv-header__desktop .sv-featured-functions--desktop .sv-featured-function {

        flex:
            0 0 auto;

    }

}


/* =================================================
   MOBILE
   ================================================= */

@media (max-width: 767px) {

    .sv-featured-functions--mobile {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            34px;

        width:
            100%;

        max-width:
            100%;

        margin:
            0;

        padding:
            0;

    }


    /* ---------------------------------------------
       Mobile Function
       --------------------------------------------- */

    .sv-featured-functions--mobile .sv-featured-function {

        position:
            relative;

        flex:
            0 0 auto;

        min-width:
            0;

    }


    /* ---------------------------------------------
       Mobile Trigger
       --------------------------------------------- */

    .sv-featured-functions--mobile .sv-featured-trigger {

        min-height:
            34px;

        padding:
            0 4px;

    }


    /* ---------------------------------------------
       Mobile Label
       --------------------------------------------- */

    .sv-featured-functions--mobile .sv-featured-trigger__label {

        font-size:
            9px;

        line-height:
            1;

        letter-spacing:
            .08em;

    }

}


/* =================================================
   REDUCED MOTION
   ================================================= */

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

    .sv-featured-functions--mobile,
    .sv-featured-functions--desktop {

        transition:
            none;

    }

}