/* =========================================
   KANO CATEGORIES
========================================= */

.kano-categories{
    position:relative;

    width:100vw;

    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);

    padding:60px 40px;

    overflow:hidden;
}


/* =========================================
   ATMOSPHERIC GLOW
========================================= */

.kano-categories::before{
    content:'';

    position:absolute;

    width:700px;
    height:700px;

    top:-320px;
    left:-260px;

    background:
    radial-gradient(
        circle,
        rgba(212,180,96,.08),
        transparent 70%
    );

    filter:blur(90px);

    pointer-events:none;
}

.kano-categories::after{
    content:'';

    position:absolute;

    width:600px;
    height:600px;

    bottom:-240px;
    right:-220px;

    background:
    radial-gradient(
        circle,
        rgba(166,140,96,.06),
        transparent 70%
    );

    filter:blur(100px);

    pointer-events:none;
}


/* =========================================
   GLOBAL HEADING FIX
========================================= */

.kano-categories .kano-section-heading{
    position:relative;
    z-index:2;
}


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

.kano-categories-grid{
    position:relative;
    z-index:2;

    max-width:1400px;
    margin:0 auto;

    display:grid;

    grid-template-columns:
    1.15fr
    1fr
    1fr
    1fr;

    grid-template-rows:
    280px
    240px;

    gap:22px;
}


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

.kano-category-card{
    position:relative;

    display:flex;
    align-items:flex-end;

    overflow:hidden;

    border-radius:28px;

    background:#f7f2e9;

    text-decoration:none;

    border:1px solid rgba(212,180,96,.10);

    transition:
    transform .5s ease,
    border-color .4s ease,
    box-shadow .5s ease;
}


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

.kano-category-card img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
    transform 1.2s ease,
    filter .8s ease;

    filter:
    brightness(.78)
    saturate(.95);
}


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

.kano-category-overlay{
    position:absolute;
    inset:0;

    z-index:1;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.02) 0%,
        rgba(0,0,0,.08) 45%,
        rgba(0,0,0,.42) 100%
    );
}


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

.kano-category-content{
    position:relative;
    z-index:2;

    width:100%;

    padding:34px;
}

.kano-category-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:52px;
    height:52px;

    margin-bottom:20px;

    border-radius:50%;

    border:1px solid rgba(212,180,96,.35);

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

    backdrop-filter:blur(8px);

    color:#d4b460;

    font-size:22px;
}

.kano-category-content h3{
    margin-bottom:10px;

    font-family:'Cormorant Garamond', serif;
    font-size:54px;
    font-weight:500;
    line-height:1;

    color:#ffffff;
}

.kano-category-content p{
    max-width:320px;

    font-size:16px;
    line-height:1.6;

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


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

.large{
    grid-row:span 2;
}

.oracle-card{
    grid-column:span 2;
}

.mak-card{
    grid-column:4;
}

.small-card{
    min-height:240px;
}


/* =========================================
   SMALL CARD TYPOGRAPHY
========================================= */

.small-card .kano-category-content{
    padding:28px;
}

.small-card .kano-category-content h3{
    margin-bottom:0;

    font-size:40px;
}

.small-card .kano-category-icon{
    width:46px;
    height:46px;

    margin-bottom:18px;

    font-size:18px;
}


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

.kano-category-card:hover{
    transform:translateY(-8px);

    border-color:rgba(212,180,96,.28);

    box-shadow:
    0 18px 40px rgba(0,0,0,.10),
    0 0 30px rgba(212,180,96,.10);
}

.kano-category-card:hover img{
    transform:scale(1.05);

    filter:
    brightness(.9)
    saturate(1.05);
}


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

.kano-categories-footer{
    text-align:center;

    margin-top:50px;
}

.kano-all-categories-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:320px;
    height:62px;

    padding:0 42px;

    border-radius:100px;

    border:1px solid rgba(212,180,96,.24);

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.55),
        rgba(255,255,255,.24)
    );

    color:#9d7b45;

    text-transform:uppercase;
    text-decoration:none;

    font-size:15px;
    letter-spacing:2px;

    transition:
    transform .35s ease,
    border-color .35s ease,
    background .35s ease;
}

.kano-all-categories-btn:hover{
    transform:translateY(-3px);

    border-color:rgba(212,180,96,.5);

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.75),
        rgba(255,255,255,.4)
    );
}


/* =========================================
   MOBILE GRID BUTTON
========================================= */

.kano-category-button-card{
    display:none;
}


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

@media(max-width:1200px){

    .kano-categories{
        padding:90px 28px;
    }

    .kano-categories-grid{
        grid-template-columns:
        1fr
        1fr;

        grid-template-rows:auto;

        gap:18px;
    }

    .large{
        grid-column:span 2;
        grid-row:auto;

        min-height:520px;
    }

    .oracle-card{
        grid-column:auto;
    }

    .mak-card{
        grid-column:auto;
    }

    .small-card{
        min-height:240px;
    }

}


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

@media(max-width:768px){

    .kano-categories{
        padding:80px 16px;
    }

    .kano-categories-grid{
        grid-template-columns:
        1fr
        1fr;

        gap:12px;
    }

    .kano-category-card{
        border-radius:20px;
    }

    .large{
        grid-column:span 2;

        min-height:240px;
    }

    .oracle-card,
    .mak-card{
        min-height:160px;
    }

    .small-card{
        min-height:150px;
    }

    .kano-category-content{
        padding:18px;
    }

    .kano-category-icon{
        width:36px;
        height:36px;

        margin-bottom:10px;

        font-size:14px;
    }

    .kano-category-content h3{
        margin-bottom:6px;

        font-size:30px;
    }

    .kano-category-content p{
        font-size:13px;
        line-height:1.4;
    }

    .large p,
    .oracle-card p,
    .mak-card p{
        display:none;
    }

    .small-card .kano-category-content{
        padding:16px;
    }

    .small-card .kano-category-content h3{
        font-size:24px;
    }

    .kano-categories-footer{
        display:none;
    }

    .kano-category-button-card{
        display:flex;
        align-items:center;
        justify-content:center;

        min-height:150px;

        border-radius:20px;

        border:1px solid rgba(212,180,96,.18);

        background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.6),
            rgba(255,255,255,.25)
        );

        color:#9d7b45;

        text-decoration:none;
        text-transform:uppercase;

        font-size:13px;
        letter-spacing:2px;

        transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;
    }

    .kano-category-button-card:hover{
        transform:translateY(-4px);

        border-color:rgba(212,180,96,.4);

        background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.8),
            rgba(255,255,255,.4)
        );
    }

}