/*==================================================
            UZAYO COLLECTIONS.CSS
==================================================*/


/*======================================
        FEATURED COLLECTIONS
======================================*/

.featured-collections{

    padding:140px 0;

    background:var(--color-white);

    position:relative;

    overflow:hidden;

}

.featured-collections::before{

    content:"";

    position:absolute;

    top:-250px;

    left:-180px;

    width:550px;

    height:550px;

    border-radius:50%;

    background:rgba(184,155,94,.05);

    filter:blur(40px);

    z-index:0;

}



/*======================================
        SECTION CONTAINER
======================================*/

.featured-collections .container{

    width:min(92%,1400px);

    margin:auto;

    position:relative;

    z-index:2;

}



/*======================================
        SECTION HEADER
======================================*/

.collections-header{

    text-align:center;

    margin-bottom:90px;

}

.collections-subtitle{

    display:inline-flex;

    align-items:center;

    gap:14px;

    color:var(--color-gold);

    font-size:.85rem;

    letter-spacing:4px;

    text-transform:uppercase;

    font-weight:600;

    margin-bottom:20px;

}

.collections-subtitle::before,

.collections-subtitle::after{

    content:"";

    width:45px;

    height:2px;

    background:var(--color-gold);

}

.collections-title{

    font-family:var(--font-heading);

    font-size:clamp(2.8rem,5vw,4.4rem);

    color:var(--color-black);

    margin-bottom:22px;

    letter-spacing:-1px;

}

.collections-description{

    max-width:720px;

    margin:auto;

    color:var(--color-grey-600);

    font-size:1.05rem;

    line-height:1.9;

}



/*======================================
        COLLECTION GRID
======================================*/

.collections-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}



/*======================================
        COLLECTION CARD
======================================*/

.collection-card{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:28px;

    background:var(--color-grey-100);

    text-decoration:none;

    transition:.45s ease;

    box-shadow:var(--shadow-sm);

}

.collection-card:hover{

    transform:translateY(-12px);

    box-shadow:0 35px 80px rgba(0,0,0,.16);

}



/*======================================
        COLLECTION IMAGE
======================================*/

.collection-image{

    position:relative;

    aspect-ratio:4/5;

    overflow:hidden;

}

.collection-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .9s ease;

}

.collection-card:hover .collection-image img{

    transform:scale(1.08);

}



/*======================================
        IMAGE OVERLAY
======================================*/

.collection-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.75),

        rgba(0,0,0,.15),

        transparent

    );

}



/*======================================
        COLLECTION CONTENT
======================================*/

.collection-content{

    position:absolute;

    left:35px;

    right:35px;

    bottom:35px;

    color:white;

    z-index:3;

}

.collection-content h3{

    font-size:2rem;

    margin-bottom:12px;

}

.collection-content p{

    color:rgba(255,255,255,.82);

    line-height:1.7;

    margin-bottom:24px;

}



/*======================================
        COLLECTION BUTTON
======================================*/

.collection-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-weight:600;

    letter-spacing:1px;

    transition:.35s;

}

.collection-btn::after{

    content:"→";

    transition:.35s ease;

}

.collection-card:hover .collection-btn::after{

    transform:translateX(8px);

}

/*==================================================
            COLLECTIONS.CSS
                PART 2
==================================================*/


/*======================================
            COLLECTION BADGES
======================================*/

.collection-badge{

    position:absolute;

    top:25px;

    left:25px;

    padding:10px 20px;

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

    backdrop-filter:blur(10px);

    border-radius:999px;

    color:var(--color-black);

    font-size:.75rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    z-index:5;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}



/*======================================
            CARD SHINE
======================================*/

.collection-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.25),

        transparent

    );

    transform:skewX(-18deg);

    transition:.9s;

    z-index:4;

}

.collection-card:hover::before{

    left:170%;

}



/*======================================
            BORDER GLOW
======================================*/

.collection-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    border:1px solid transparent;

    transition:.35s ease;

    pointer-events:none;

}

.collection-card:hover::after{

    border-color:rgba(184,155,94,.30);

}



/*======================================
        CONTENT ANIMATION
======================================*/

.collection-content{

    transition:.45s ease;

}

.collection-card:hover .collection-content{

    transform:translateY(-10px);

}



/*======================================
        TITLE ANIMATION
======================================*/

.collection-content h3{

    transition:.35s;

}

.collection-card:hover h3{

    letter-spacing:.5px;

}



/*======================================
        BUTTON ANIMATION
======================================*/

.collection-btn{

    position:relative;

}

.collection-btn::before{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:white;

    transition:.35s;

}

.collection-card:hover .collection-btn::before{

    width:100%;

}



/*======================================
        IMAGE PERFORMANCE
======================================*/

.collection-image img{

    display:block;

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

}



/*======================================
        FOCUS STATES
======================================*/

.collection-card:focus-visible{

    outline:3px solid var(--color-gold);

    outline-offset:6px;

}



/*======================================
        TABLET
======================================*/

@media(max-width:1100px){

.collections-grid{

grid-template-columns:repeat(2,1fr);

gap:28px;

}

}



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

@media(max-width:768px){

.featured-collections{

padding:90px 0;

}

.collections-header{

margin-bottom:60px;

}

.collections-grid{

grid-template-columns:1fr;

}

.collections-content{

padding:0 10px;

}

.collections-title{

font-size:2.5rem;

}

.collections-description{

font-size:1rem;

}

.collection-content{

left:24px;

right:24px;

bottom:24px;

}

.collection-content h3{

font-size:1.6rem;

}

.collection-badge{

top:18px;

left:18px;

padding:8px 16px;

}

}



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

@media(max-width:480px){

.collections-title{

font-size:2rem;

}

.collection-card{

border-radius:20px;

}

.collection-content{

left:20px;

right:20px;

bottom:20px;

}

.collection-content h3{

font-size:1.4rem;

}

.collection-content p{

font-size:.9rem;

}

}



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

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

.collection-card,

.collection-image img,

.collection-content,

.collection-btn{

animation:none;

transition:none;

}

}



/*======================================
            PRINT
======================================*/

@media print{

.collection-badge{

display:none;

}

.collection-card{

box-shadow:none;

border:1px solid #ddd;

transform:none;

}

}



/*======================================
        FINAL POLISH
======================================*/

.collection-card{

isolation:isolate;

}

.collection-image{

position:relative;

z-index:1;

}

.collection-content{

position:absolute;

z-index:5;

}

.collection-card:hover{

cursor:pointer;

}

/*==================================================
        COLLECTIONS — FINAL SECTIONS
==================================================*/


/*======================================
        COLLECTION PHILOSOPHY
======================================*/

.collection-philosophy{

    padding:140px 0;

    background:var(--color-white);

    text-align:center;

}


.collection-philosophy .collections-header{

    max-width:850px;

    margin:0 auto;

}


.collection-philosophy .collections-title{

    margin-bottom:25px;

}


.collection-philosophy .collections-description{

    max-width:650px;

    margin:0 auto;

}


/*======================================
        FINAL COLLECTION CTA
======================================*/

.collections-cta{

    position:relative;

    min-height:600px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}


.collections-cta-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}


.collections-cta-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


.collections-cta::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.48);

}


.collections-cta-overlay{

    position:relative;

    z-index:5;

    text-align:center;

    color:#fff;

    padding:40px;

}


.collections-cta-overlay span{

    display:block;

    margin-bottom:20px;

    font-size:.75rem;

    letter-spacing:4px;

    text-transform:uppercase;

    font-weight:600;

}


.collections-cta-overlay h2{

    margin:0 0 35px;

    font-family:var(--font-heading);

    font-size:clamp(3rem,6vw,5.5rem);

    line-height:1;

}


/*======================================
        CTA BUTTON
======================================*/

.collections-cta-overlay .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:190px;

    padding:17px 32px;

    border-radius:999px;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.72rem;

    font-weight:700;

    transition:.35s ease;

}


.collections-cta-overlay .btn-light{

    background:#fff;

    color:#111;

}


.collections-cta-overlay .btn-light:hover{

    background:var(--color-gold);

    color:#fff;

    transform:translateY(-3px);

}


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

@media(max-width:768px){

    .collection-philosophy{

        padding:90px 20px;

    }


    .collections-cta{

        min-height:500px;

    }


    .collections-cta-overlay{

        padding:30px 20px;

    }


    .collections-cta-overlay h2{

        font-size:3rem;

    }

}


@media(max-width:480px){

    .collections-cta{

        min-height:450px;

    }


    .collections-cta-overlay h2{

        font-size:2.5rem;

    }

}