/* ==========================================================
Project : Compro Doodle
Module  : Component
File    : product-card.css
Version : 2.2.0
Author  : Doodle IT Development
========================================================== */

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

.product-card{

    display:flex;

    flex-direction:column;

    height:100%;

    overflow:hidden;

    background:var(--color-surface);

    border:
        var(--border-width-thin)
        solid
        var(--color-border);

    border-radius:var(--product-card-radius);

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

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);

}


/* ==========================================================
PRODUCT CARD LINK
========================================================== */

.product-card-link{

    display:flex;

    flex-direction:column;

    height:100%;

    color:inherit;

    text-decoration:none;

}


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

.product-card:hover{

    transform:
        translateY(
            calc(var(--space-4) * -1)
        );

    border-color:
        var(--color-primary-light);

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

}


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

.product-card-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:1 / 1;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--color-primary-light);

    padding:var(--space-8);

}


/* ==========================================================
PRODUCT IMAGE ELEMENT
========================================================== */

.product-card-image img{

    display:block;

    width:100%;

    height:100%;

    max-width:100%;

    max-height:100%;

    object-fit:contain;

    transition:
        transform var(--transition-normal);

}


/* ==========================================================
PRODUCT IMAGE HOVER
========================================================== */

/*
    product-card-image-scale sebelumnya tidak memiliki
    definition di variables.css.

    Efek scale tidak dijalankan sampai design token
    resmi tersedia.
*/


/* ==========================================================
PRODUCT BADGE
========================================================== */

.product-card-badge{

    position:absolute;

    top:var(--space-4);

    left:var(--space-4);

    z-index:2;

}


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

.product-card-body{

    display:flex;

    flex:1;

    flex-direction:column;

    gap:var(--space-4);

    padding:var(--product-card-padding);

}


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

.product-card-category{

    color:var(--color-text-muted);

    font-size:var(--font-sm);

}


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

.product-card-title{

    color:var(--color-text);

    font-size:var(--font-lg);

    font-weight:var(--font-bold);

    line-height:var(--line-tight);

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

    min-height:3rem;

}


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

.product-card-description{

    color:var(--color-text-secondary);

    font-size:var(--font-sm);

    line-height:var(--line-relaxed);

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}


/* ==========================================================
PRICE
========================================================== */

.product-card-price{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:var(--space-4);

    flex-wrap:wrap;

}


.product-price{

    color:var(--color-primary);

    font-size:var(--font-xl);

    font-weight:var(--font-bold);

}


.product-price-old{

    color:var(--color-text-muted);

    font-size:var(--font-sm);

    text-decoration:line-through;

}


/* ==========================================================
ACTION
========================================================== */

.product-card-action{

    display:flex;

    gap:var(--space-4);

    margin-top:auto;

    align-items:stretch;

}


.product-card-action .btn{

    flex:1;

}


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

.product-card-button{

    width:100%;

    justify-content:center;

    display:flex;

    align-items:center;

}


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

.product-card-footer{

    display:flex;

    flex-direction:column;

    gap:var(--space-4);

    margin-top:auto;

}


/* ==========================================================
RESPONSIVE
========================================================== */

@media (max-width:767px){

    .product-card-title{

        font-size:var(--font-md);

        min-height:auto;

    }


    .product-price{

        font-size:var(--font-lg);

    }

}