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

Space Vanta Theme 1.0

Feature:
Featured Functions / Find

Module:
Discovery Material System

File:
discovery/material.css

Version:
FIND-BRAND-MATERIAL-001

Purpose:
Product Object material variation

Responsibilities:
- Mineral Silver
- Neutral Silver
- Cool Silver
- Blue Silver
- Product material atmosphere

Does NOT handle:
- Product layout
- Product data
- Discovery logic
- Ranking
- Panel layout
- Typography
- Cube
- Transition

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


/* =========================================================
   01. DEFAULT
   ========================================================= */

.sv-find-product-card__media {

    --sv-find-object-light:
        rgba(255, 255, 255, 0.88);

    --sv-find-object-mid:
        rgba(220, 225, 225, 0.78);

    --sv-find-object-deep:
        rgba(188, 197, 199, 0.54);

    --sv-find-object-edge:
        rgba(77, 94, 101, 0.24);
}


/* =========================================================
   02. MINERAL SILVER
   ========================================================= */

.sv-find-product-card:nth-child(3n + 1) .sv-find-product-card__media {

    --sv-find-object-light:
        rgba(255, 255, 253, 0.94);

    --sv-find-object-mid:
        rgba(224, 226, 223, 0.82);

    --sv-find-object-deep:
        rgba(194, 198, 195, 0.58);

    --sv-find-object-edge:
        rgba(87, 91, 87, 0.22);

    background:
        linear-gradient(145deg,
            #FAFAF7 0%,
            #E3E5E2 46%,
            #C9CECA 100%);
}


/* =========================================================
   03. NEUTRAL SILVER
   ========================================================= */

.sv-find-product-card:nth-child(3n + 2) .sv-find-product-card__media {

    --sv-find-object-light:
        rgba(255, 255, 255, 0.90);

    --sv-find-object-mid:
        rgba(218, 223, 223, 0.80);

    --sv-find-object-deep:
        rgba(184, 193, 195, 0.56);

    --sv-find-object-edge:
        rgba(77, 94, 101, 0.24);

    background:
        linear-gradient(145deg,
            #F7F8F6 0%,
            #DEE2E1 48%,
            #C1C9CA 100%);
}


/* =========================================================
   04. COOL BLUE SILVER
   ========================================================= */

.sv-find-product-card:nth-child(3n + 3) .sv-find-product-card__media {

    --sv-find-object-light:
        rgba(248, 250, 250, 0.90);

    --sv-find-object-mid:
        rgba(211, 222, 225, 0.80);

    --sv-find-object-deep:
        rgba(170, 187, 194, 0.56);

    --sv-find-object-edge:
        rgba(67, 91, 102, 0.28);

    background:
        linear-gradient(145deg,
            #F3F6F5 0%,
            #D6E0E2 47%,
            #AEBFC5 100%);
}


/* =========================================================
   05. REFLECTION
   ========================================================= */

.sv-find-product-card__media::before {

    background:

        linear-gradient(116deg,
            var(--sv-find-object-light) 0%,
            rgba(255, 255, 255, 0.16) 17%,
            rgba(255, 255, 255, 0) 38%),

        linear-gradient(304deg,
            var(--sv-find-object-deep),
            rgba(255, 255, 255, 0) 42%);
}


/* =========================================================
   06. EDGE
   ========================================================= */

.sv-find-product-card__media {

    border-color:
        var(--sv-find-object-edge);
}


/* =========================================================
   07. HOVER MATERIAL SHIFT
   ========================================================= */

.sv-find-product-card__link:hover .sv-find-product-card__media {

    border-color:
        color-mix(in srgb,
            var(--sv-find-object-edge) 55%,
            rgba(61, 87, 99, 0.42));
}


/* =========================================================
   08. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .sv-find-product-card:nth-child(3n + 1) .sv-find-product-card__media {

        background:
            linear-gradient(145deg,
                #FAFAF7 0%,
                #E4E6E3 48%,
                #CDD1CE 100%);
    }


    .sv-find-product-card:nth-child(3n + 2) .sv-find-product-card__media {

        background:
            linear-gradient(145deg,
                #F7F8F6 0%,
                #DFE3E2 48%,
                #C5CCCD 100%);
    }


    .sv-find-product-card:nth-child(3n + 3) .sv-find-product-card__media {

        background:
            linear-gradient(145deg,
                #F3F6F5 0%,
                #D8E1E3 48%,
                #B4C3C8 100%);
    }

}