/*==========================================================
TintLane Featured Creators
PART 1
Layout + Cards + Image + Typography
==========================================================*/

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

#featuredCreators{
    width:100%;
    padding:52px 0;
    position:relative;
    overflow:hidden;
}

#featuredCreators h2{
    text-align:center;
    margin-bottom:14px;
}

#featuredCreators p{
    text-align:center;
}

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

#featuredCreatorsGrid{

    width:min(1380px,95%);
    margin:34px auto 0;

    display:grid;

    grid-template-columns:
    repeat(4,minmax(0,1fr));

    gap:34px;

    align-items:start;

}

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

.featured-creator-card{

    --creatorTint1:#d4af37;
    --creatorTint2:#6a0f20;

    position:relative;

    display:flex;

    flex-direction:column;

    background:#ffffff;

    border-radius:24px;

    overflow:hidden;

    cursor:pointer;

    isolation:isolate;

    transform-style:preserve-3d;

    min-height:465px;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:

    0 18px 42px rgba(0,0,0,.09);

    transition:

    transform .45s cubic-bezier(.22,.61,.36,1),

    box-shadow .45s,

    border-color .45s;

}

/*=========================
SOFT OUTER GLOW
=========================*/

.featured-creator-card::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:26px;

    background:

    linear-gradient(
    135deg,
    var(--creatorTint1),
    var(--creatorTint2));

    opacity:0;

    filter:blur(28px);

    transition:.45s;

    z-index:-2;

}

/*=========================
IMAGE AREA
=========================*/

.featured-cover{

    position:relative;

    width:100%;

    height:205px;

    overflow:hidden;

    flex-shrink:0;

    background:#ececec;

}

.featured-cover-image{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:

    transform .65s ease;

}

/*=========================
PLACEHOLDER
=========================*/

.featured-cover-placeholder{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:76px;

    font-weight:700;

    letter-spacing:2px;

    color:white;

    background:

    linear-gradient(

    135deg,

    var(--creatorTint1),

    var(--creatorTint2)

    );

}

/*=========================
BOTTOM IMAGE SHADOW
=========================*/

.featured-gradient{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:90px;

    background:

    linear-gradient(

    transparent,

    rgba(0,0,0,.42)

    );

    pointer-events:none;

}

/*=========================
CATEGORY CHIP
=========================*/

.featured-chip{

    position:absolute;

    left:20px;

    bottom:18px;

    z-index:5;

    padding:

    10px 18px;

    border-radius:999px;

    color:#ffffff;

    font-size:14px;

    font-weight:600;

    backdrop-filter:blur(10px);

    background:

    rgba(255,255,255,.18);

    border:

    1px solid rgba(255,255,255,.30);

}

/*=========================
BODY
=========================*/

.featured-body{

    position:relative;

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:22px;

    background:#ffffff;

    overflow:hidden;

    z-index:2;

}

/* Tint layer
(hover animation comes in Part 2) */

.featured-body::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:0%;

    background:

    linear-gradient(

    135deg,

    var(--creatorTint1),

    var(--creatorTint2)

    );

transition:
height .55s cubic-bezier(.22,.61,.36,1);

    z-index:-1;

}

/*=========================
SHOP NAME
=========================*/

.featured-shop-name{

margin:0;

font-family:"Poppins",sans-serif;

font-size:22px;

font-weight:700;

line-height:1.3;

color:#65172b;

text-align:center;

display:-webkit-box;

-webkit-line-clamp:1;

-webkit-box-orient:vertical;

overflow:hidden;

min-height:30px;

}

/*=========================
TAGLINE
=========================*/

.featured-tagline{

margin:12px 0 16px;

text-align:center;

font-size:17px;

line-height:1.55;

color:#555;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

overflow:hidden;

height:54px;

}

/*=========================
DIVIDER
=========================*/

.featured-divider{

    width:60px;

    height:3px;

    margin:auto;

    border-radius:10px;

    background:

    linear-gradient(

    90deg,

    var(--creatorTint1),

    var(--creatorTint2)

    );

}

/*=========================
FOOTER
=========================*/

.featured-footer{

    margin-top:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

}

.featured-business{

    font-size:15px;

    font-weight:600;

    color:#5f5f5f;

    line-height:1.45;

    flex:1;

}

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

.featured-visit-btn{

    border:none;

    outline:none;

    cursor:pointer;

    padding:

    13px 26px;

    border-radius:999px;

    background:

    linear-gradient(

    135deg,

    #d8a82e,

    #6a0f20

    );

    color:#ffffff;

    text-shadow:0 1px 2px rgba(0,0,0,.20);

    font-weight:700;

    font-size:15px;

    transition:

background .35s,

color .35s,

transform .35s,

box-shadow .35s;

    box-shadow:

    inset 0 1px 1px rgba(255,255,255,.45),
    inset 0 -3px 5px rgba(0,0,0,.15),
    0 12px 25px

    rgba(216,168,46,.25);

}
/*==========================================================
TintLane Featured Creators
PART 2
Premium Hover + Tint + Glow + Animations
==========================================================*/


/*=========================
CARD HOVER
=========================*/

.featured-creator-card:hover{

    transform:
        translateY(-14px)
        scale(1.02);

    border-color:
        rgba(212,175,55,.35);

    box-shadow:
        0 38px 75px rgba(0,0,0,.18);

    filter:
        drop-shadow(0 18px 30px rgba(0,0,0,.12));

}

/*=========================
IMAGE ZOOM
=========================*/

.featured-creator-card:hover
.featured-cover-image{

    transform:
        scale(1.06);

}


/*=========================
ONLY BODY GETS THE TINT
=========================*/

.featured-creator-card:hover
.featured-body::before{

    height:100%;

}


/*=========================
TEXT COLOR CHANGE
=========================*/

.featured-shop-name,
.featured-tagline,
.featured-business,
.featured-divider,
.featured-visit-btn{

    transition:
        .35s ease;

}

.featured-creator-card:hover
.featured-shop-name{

    color:#fff;

    text-shadow:
        0 2px 10px rgba(0,0,0,.35),
        0 1px 2px rgba(0,0,0,.45);

}

.featured-creator-card:hover
.featured-tagline{

    color:#fff;

    text-shadow:
        0 2px 8px rgba(0,0,0,.35);

}

.featured-creator-card:hover
.featured-business{

    color:#fff;

    text-shadow:
        0 2px 8px rgba(0,0,0,.35);

}
.featured-creator-card:hover
.featured-chip{

    color:#fff;

    text-shadow:
        0 2px 8px rgba(0,0,0,.35);

}


/*=========================
DIVIDER
=========================*/

.featured-creator-card:hover
.featured-divider{

    background:
        rgba(255,255,255,.95);
        transition:
background .35s ease;

}


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

.featured-creator-card:hover
.featured-visit-btn{

    background:#ffffff;

    color:#65172b;

    text-shadow:none;

    transform:
        translateY(-2px)
        scale(1.04);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.6),
        inset 0 -2px 4px rgba(0,0,0,.06),
        0 18px 34px rgba(0,0,0,.20);

}


/*=========================
BUTTON ACTIVE
=========================*/

.featured-visit-btn:active{

    transform:
        scale(.96);

    box-shadow:
        inset 0 3px 6px rgba(0,0,0,.20);

}


/*=========================
SHINE EFFECT
=========================*/

.featured-creator-card::after{

    content:"";

    position:absolute;

    top:-60%;

    left:-120%;

    width:60%;

    height:220%;

    background:

        linear-gradient(

        110deg,

        transparent 0%,

        rgba(255,255,255,.15) 40%,

        rgba(255,255,255,.65) 50%,

        rgba(255,255,255,.15) 60%,

        transparent 100%

        );

    transform:

        rotate(25deg);

    pointer-events:none;

    opacity:0;

}

.featured-creator-card:hover::before{

    opacity:.55;

}

.featured-creator-card:hover::after{

    opacity:1;

    animation:

        featuredShine

        1.1s ease;

}


@keyframes featuredShine{

    from{

        left:-120%;

    }

    to{

        left:170%;

    }

}

/*=========================
CATEGORY CHIP
=========================*/

.featured-chip{

    transition:
        .35s ease;

}

.featured-creator-card:hover
.featured-chip{

    background:

        rgba(255,255,255,.30);

    border-color:

        rgba(255,255,255,.55);

    backdrop-filter:

        blur(18px);

}


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

.featured-creator-card:focus-visible{

    outline:none;

    box-shadow:

        0 0 0 4px rgba(212,175,55,.45),

        0 24px 50px rgba(0,0,0,.18);

}
/*==========================================================
TintLane Featured Creators
PART 3
Responsive + Loading + Empty States
==========================================================*/


/*=========================
SKELETON LOADER
=========================*/

.featured-creator-card.loading{

    pointer-events:none;

    overflow:hidden;

}

.featured-cover.shimmer{

    height:240px;

    border-radius:0;

}

.featured-line{

    border-radius:999px;

}

.shimmer{

    background:
        linear-gradient(
            90deg,
            #ececec 0%,
            #f8f8f8 50%,
            #ececec 100%
        );

    background-size:
        220% 100%;

    animation:
        shimmerMove 1.3s linear infinite;

}

@keyframes shimmerMove{

    from{

        background-position:
            200% 0;

    }

    to{

        background-position:
            -200% 0;

    }

}


/*=========================
EMPTY STATE
=========================*/

.featured-empty-state{

    grid-column:
        1/-1;

    text-align:center;

    padding:
        80px 20px;

    margin-bottom:
        30px;

    background:#fff;

    border-radius:26px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.08);

}

.featured-empty-state h2{

    font-size:32px;

    color:#65172b;

    margin-bottom:14px;

}

.featured-empty-state p{

    font-size:17px;

    color:#777;

    max-width:520px;

    margin:auto;

    line-height:1.7;

}


/*=========================
GRID
4 CARDS PERFECTLY
=========================*/

#featuredCreatorsGrid{

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:34px;

    align-items:stretch;

}


/*=========================
LAPTOP
=========================*/

@media (max-width:1400px){

#featuredCreatorsGrid{

    gap:26px;

}

.featured-cover{

    height:220px;

}

}


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

@media (max-width:1100px){

#featuredCreatorsGrid{

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

}

}


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

@media (max-width:700px){

#featuredCreatorsGrid{

    grid-template-columns:
        1fr;

    gap:22px;

}

.featured-cover{

    height:220px;

}

.featured-shop-name{

    font-size:28px;

}

.featured-tagline{

    font-size:15px;

}

.featured-body{

    padding:26px;

}

}


/*=========================
REDUCE MOTION
=========================*/

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

.featured-creator-card,
.featured-cover-image,
.featured-body::before,
.featured-visit-btn,
.featured-chip{

    transition:none;

}

.featured-creator-card:hover{

    transform:none;

}

}


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

.featured-creator-card{

    will-change:
        transform;

}

.featured-cover-image{

    display:block;

}

.featured-body>*{

    position:relative;

    z-index:2;

}

.featured-body{

    isolation:isolate;

}

.featured-visit-btn{

    cursor:pointer;

}

.featured-chip{

    user-select:none;

}

.featured-shop-name{

    word-break:break-word;

}

.featured-tagline{

    word-break:break-word;

}

.featured-business{

    font-weight:600;

}

.featured-divider{

    opacity:.9;

}

.featured-cover-placeholder{

    user-select:none;

}

.featured-visit-btn{

    pointer-events:auto;

}
.featured-creator-card{

    transform-style:preserve-3d;

    backface-visibility:hidden;

    transform-origin:center center;

}
.featured-body{

    transform:translateZ(25px);

}

.featured-cover{

    transform:translateZ(18px);

}

.featured-chip{

    transform:translateZ(40px);

}

.featured-visit-btn{

    transform:translateZ(50px);

}