/* ============================================================
Project : Compro Doodle
Module  : Page
File    : product-catalog.css
Version : 1.0.0
Author  : Doodle Engineering
============================================================ */


/* ============================================================
HERO
============================================================ */

.product-catalog-hero{

    padding-block:
        var(--section-space-sm);

    text-align:center;

    background:
        var(--color-surface-alt);

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

}

.product-catalog-hero h1{

    margin:0 0 var(--space-12);

    color:
        var(--color-text);

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

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

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

}

.product-catalog-hero p{

    max-width:
        var(--container-md);

    margin:0 auto;

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

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

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

}


/* ============================================================
LIST
============================================================ */

.product-catalog-list{

    padding-block:
        var(--section-space-md);

}


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

.product-info-card{

    display:flex;

    flex-direction:column;

    height:100%;

    overflow:hidden;

    background:
        var(--color-surface-alt);

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

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

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

    transition:
        transform var(--duration-normal) var(--ease-standard),
        box-shadow var(--duration-normal) var(--ease-standard);

}

.product-info-card:hover{

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

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

}


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

.product-info-card-image{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    aspect-ratio:1 / 1;

    overflow:hidden;

    background:
        var(--color-surface-alt);

    padding:
        var(--space-16);

}

.product-info-card-image img{

    display:block;

    width:100%;

    height:100%;

    max-width:100%;

    max-height:100%;

    object-fit:contain;

}


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

.product-info-card-body{

    display:flex;

    flex:1;

    flex-direction:column;

    gap:
        var(--space-12);

    padding:
        var(--space-16);

}

.product-info-card-title{

    margin:0;

    color:
        var(--color-text);

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

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

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

}


/* ============================================================
PRODUCT INFO VARIANTS
============================================================ */

.product-info-card-variants{

    display:flex;

    flex-wrap:wrap;

    gap:
        var(--space-8);

}

.product-info-card-variant-badge{

    display:inline-flex;

    align-items:center;

    min-height:
        var(--badge-height);

    padding-inline:
        var(--badge-padding-inline);

    border-radius:
        var(--badge-radius);

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

    color:
        var(--color-primary);

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

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

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

}


/* ============================================================
PRODUCT INFO DESCRIPTION
============================================================ */

.product-info-card-description{

    display:-webkit-box;

    margin:0;

    overflow:hidden;

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

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

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

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

    white-space:
        pre-line;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:4;

}

.product-info-card-description.is-expanded{

    display:block;

    overflow:visible;

    -webkit-line-clamp:unset;

}


/* ============================================================
PRODUCT INFO TOGGLE
============================================================ */

.product-info-card-toggle{

    align-self:flex-start;

    padding:0;

    border:none;

    background:transparent;

    color:
        var(--color-primary);

    font-family:
        var(--font-family-primary);

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

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

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

    cursor:pointer;

    transition:
        color var(--duration-fast) var(--ease-standard);

}

.product-info-card-toggle:hover{

    color:
        var(--color-primary-hover);

    text-decoration:underline;

}


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

@media (max-width:767px){

    .product-catalog-hero{

        padding-block:
            var(--section-space-xs);

    }

    .product-catalog-hero h1{

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

    }

    .product-catalog-list{

        padding-block:
            var(--section-space-sm);

    }

    .product-info-card-body{

        gap:
            var(--space-8);

        padding:
            var(--space-12);

    }

    .product-info-card-title{

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

    }

    .product-info-card-description{

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

    }

    .product-info-card-variant-badge{

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

    }

    .product-info-card-toggle{

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

    }

}