/*******************************************************************************
  File Name: root/assets/css/blog-card.css
  Purpose:   Blog Cards / Category Cards
*******************************************************************************/

/* =====================================================
   BLOG / CATEGORY CARD
===================================================== */

.category-card {
    position: relative;
    display: block;

    width: 100%;
    height: 100%;
    min-height: 220px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e9ecef;

    color: #ffffff;

    text-decoration: none;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

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

.category-card .card-img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

}

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

.category-card .card-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .40s ease;

    will-change: transform;

}

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

.category-card .card-overlay {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    padding: 18px;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.90),

            rgba(0,0,0,.45),

            rgba(0,0,0,0)

        );

    transition: background .30s ease;

}

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

.category-card h6 {

    margin: 0 0 6px;

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.35;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;

}

/* =====================================================
   DESCRIPTION
===================================================== */

.category-card p {

    margin: 0;

    color: #e5e5e5;

    font-size: 12px;

    line-height: 1.40;

    opacity: .95;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;

}

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

.category-card:hover {

    transform: translateY(-6px);

    box-shadow:

        0 12px 30px rgba(0,0,0,.25),

        0 0 20px rgba(13,110,253,.15);

}

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

.category-card:hover .card-img img {

    transform: scale(1.08);

}

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

.category-card:hover .card-overlay {

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.95),

            rgba(0,0,0,.60),

            rgba(0,0,0,0)

        );

}

/* =====================================================
   FOCUS (Accessibility)
===================================================== */

.category-card:focus-visible {

    outline: 2px solid #0d6efd;

    outline-offset: 3px;

}

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

@media (max-width: 768px) {

    .category-card {

        min-height: 200px;

    }

    .category-card .card-overlay {

        padding: 14px;

    }

    .category-card h6 {

        font-size: 14px;

    }

    .category-card p {

        font-size: 11px;

    }

}

/* =====================================================
   LARGE SCREENS
===================================================== */

@media (min-width: 1400px) {

    .category-card {

        min-height: 250px;

    }

}