/*
==========================================
PM UI Framework
Cards
Version: 0.1.0
==========================================
*/

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

.pm-card{
    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--pm-white);
    border:1px solid var(--pm-border-color);
    border-radius:var(--pm-radius-lg);
    overflow:hidden;
    box-shadow:var(--pm-shadow-sm);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.pm-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--pm-shadow-lg);
    border-color:rgba(46,125,50,.20);
}

.pm-card:focus-within{
    outline:none;
    box-shadow:
        0 0 0 3px rgba(46,125,50,.15),
        var(--pm-shadow-lg);
}

/* ==========================================
   HEADER
========================================== */

.pm-card-header{
    padding:1.25rem 1.5rem;
    border-bottom:1px solid var(--pm-border-color);
    background:var(--pm-surface);
}

.pm-card-title{
    margin:0;
    font-size:1.25rem;
    font-weight:700;
    line-height:1.3;
    color:var(--pm-text-color);
}

.pm-card-subtitle{
    margin-top:.35rem;
    font-size:.95rem;
    color:var(--pm-text-light);
}

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

.pm-card-body{
    flex:1;
    padding:1.5rem;
}

.pm-card-body > *:first-child{
    margin-top:0;
}

.pm-card-body > *:last-child{
    margin-bottom:0;
}

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

.pm-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1.5rem;
    border-top:1px solid var(--pm-border-color);
    background:var(--pm-surface);
}

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

.pm-card-image{
    display:block;
    width:100%;
    overflow:hidden;
    background:#fff;
}

.pm-card-image img{
    display:block;
    width:100%;
    height:auto;
    transition:transform .45s ease;
}

.pm-card:hover .pm-card-image img{
    transform:scale(1.04);
}

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

.pm-card-image-top img{
    width:100%;
    display:block;
}

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

.pm-card-cover img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
}

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

.pm-card-contain{
    padding:2rem;
    text-align:center;
}

.pm-card-contain img{
    max-width:100%;
    max-height:240px;
    object-fit:contain;
}

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

.pm-card-link{
    color:inherit;
    text-decoration:none;
    display:block;
    height:100%;
}

.pm-card-link:hover{
    text-decoration:none;
}

/* ==========================================
   SHADOWS
========================================== */

.pm-card-shadow-none{
    box-shadow:none;
}

.pm-card-shadow-sm{
    box-shadow:var(--pm-shadow-sm);
}

.pm-card-shadow{
    box-shadow:var(--pm-shadow-md);
}

.pm-card-shadow-lg{
    box-shadow:var(--pm-shadow-lg);
}

.pm-card-shadow-xl{
    box-shadow:var(--pm-shadow-xl);
}

/* ==========================================
   BORDER RADIUS
========================================== */

.pm-card-rounded-none{
    border-radius:0;
}

.pm-card-rounded-sm{
    border-radius:var(--pm-radius-sm);
}

.pm-card-rounded{
    border-radius:var(--pm-radius-md);
}

.pm-card-rounded-lg{
    border-radius:var(--pm-radius-lg);
}

.pm-card-rounded-xl{
    border-radius:var(--pm-radius-xl);
}

/* ==========================================
   BORDER VARIANTS
========================================== */

.pm-card-border{
    border:1px solid var(--pm-border-color);
}

.pm-card-border-0{
    border:none;
}

.pm-card-outline-primary{
    border:2px solid var(--pm-primary);
}

.pm-card-outline-secondary{
    border:2px solid var(--pm-secondary);
}

.pm-card-outline-success{
    border:2px solid var(--pm-success);
}

.pm-card-outline-warning{
    border:2px solid var(--pm-warning);
}

.pm-card-outline-danger{
    border:2px solid var(--pm-danger);
}

/* ==========================================
   BACKGROUND VARIANTS
========================================== */

.pm-card-white{
    background:#fff;
}

.pm-card-light{
    background:var(--pm-surface);
}

.pm-card-primary{
    background:rgba(46,125,50,.05);
}

.pm-card-secondary{
    background:rgba(25,118,210,.05);
}

.pm-card-success{
    background:rgba(46,125,50,.08);
}

.pm-card-warning{
    background:rgba(255,193,7,.12);
}

.pm-card-danger{
    background:rgba(220,53,69,.08);
}
/* ==========================================
   CARD VARIANTS
========================================== */

.pm-card-flat{
    box-shadow:none;
    border:1px solid var(--pm-border-color);
}

.pm-card-elevated{
    box-shadow:var(--pm-shadow-xl);
}

.pm-card-premium{
    border:2px solid var(--pm-accent);
    box-shadow:var(--pm-shadow-lg);
}

.pm-card-premium:hover{
    transform:translateY(-6px);
    box-shadow:var(--pm-shadow-xl);
}

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

.pm-product-card{
    display:flex;
    flex-direction:column;
    height:100%;
}

.pm-product-image{
    padding:2rem;
    background:#fff;
    text-align:center;
}

.pm-product-image img{
    max-width:100%;
    max-height:260px;
    object-fit:contain;
    transition:transform .35s ease;
}

.pm-product-card:hover .pm-product-image img{
    transform:scale(1.05);
}

.pm-product-body{
    flex:1;
    padding:1.5rem;
}

.pm-product-title{
    margin:0 0 .75rem;
    font-size:1.2rem;
    font-weight:700;
    color:var(--pm-text-color);
    line-height:1.4;
}

.pm-product-description{
    color:var(--pm-text-light);
    font-size:.95rem;
    line-height:1.7;
}

.pm-product-footer{
    padding:1.25rem 1.5rem;
    border-top:1px solid var(--pm-border-color);
}

/* ==========================================
   RATING
========================================== */

.pm-rating{
    display:flex;
    align-items:center;
    gap:.35rem;
    margin:.75rem 0;
}

.pm-rating-stars{
    color:#FFC107;
    font-size:1rem;
    line-height:1;
}

.pm-rating-score{
    font-weight:700;
    color:var(--pm-text-color);
}

/* ==========================================
   BADGES
========================================== */

.pm-card-badge{
    position:absolute;
    top:1rem;
    right:1rem;
    z-index:10;
}

.pm-badge-top{
    position:absolute;
    top:1rem;
    left:1rem;
}

.pm-badge-floating{
    position:absolute;
    bottom:1rem;
    right:1rem;
}

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

.pm-amazon-card{
    border:2px solid rgba(255,193,7,.35);
}

.pm-amazon-card:hover{
    border-color:var(--pm-accent);
}

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

.pm-article-card{
    display:flex;
    flex-direction:column;
}

.pm-article-image img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
}

.pm-article-meta{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:.75rem;
    font-size:.85rem;
    color:var(--pm-text-light);
}

.pm-article-title{
    margin:0;
    font-size:1.3rem;
    line-height:1.35;
}

.pm-article-excerpt{
    margin-top:1rem;
    color:var(--pm-text-light);
    line-height:1.7;
}

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

.pm-category-card{
    text-align:center;
}

.pm-category-icon{
    font-size:3rem;
    margin-bottom:1rem;
}

.pm-category-title{
    font-size:1.25rem;
    font-weight:700;
}

.pm-category-description{
    margin-top:.75rem;
    color:var(--pm-text-light);
}

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

.pm-card-horizontal{
    display:flex;
    flex-direction:row;
}

.pm-card-horizontal .pm-card-image{
    width:38%;
    flex-shrink:0;
}

.pm-card-horizontal .pm-card-image img{
    height:100%;
    object-fit:cover;
}

.pm-card-horizontal .pm-card-body{
    width:62%;
}

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

.pm-card-featured{
    border-left:6px solid var(--pm-primary);
}

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

.pm-comparison-card{
    padding:2rem;
    text-align:center;
}

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

.pm-review-card{
    position:relative;
}

.pm-review-card::before{
    content:"★★★★★";
    display:block;
    color:#FFC107;
    font-size:1rem;
    margin-bottom:1rem;
}

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

.pm-icon-card{
    text-align:center;
}

.pm-icon-card-icon{
    width:70px;
    height:70px;
    margin:auto auto 1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(46,125,50,.08);
    font-size:2rem;
    color:var(--pm-primary);
}
/* ==========================================
   CARD GRID
========================================== */

.pm-card-grid{
    display:grid;
    gap:1.5rem;
}

.pm-card-grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.pm-card-grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.pm-card-grid-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.pm-card-grid-auto{
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

/* ==========================================
   ALIGNMENT
========================================== */

.pm-card-center{
    text-align:center;
}

.pm-card-left{
    text-align:left;
}

.pm-card-right{
    text-align:right;
}

/* ==========================================
   FLEX HELPERS
========================================== */

.pm-card-stretch{
    height:100%;
}

.pm-card-grow{
    flex:1;
}

.pm-card-body-grow{
    flex:1;
    display:flex;
    flex-direction:column;
}

.pm-card-footer-bottom{
    margin-top:auto;
}

/* ==========================================
   SPACING HELPERS
========================================== */

.pm-card-no-padding .pm-card-body{
    padding:0;
}

.pm-card-sm .pm-card-body{
    padding:1rem;
}

.pm-card-lg .pm-card-body{
    padding:2rem;
}

.pm-card-xl .pm-card-body{
    padding:2.5rem;
}

/* ==========================================
   DIVIDERS
========================================== */

.pm-card-divider{
    height:1px;
    background:var(--pm-border-color);
    margin:1.25rem 0;
}

/* ==========================================
   LISTS
========================================== */

.pm-card-list{
    margin:0;
    padding:0;
    list-style:none;
}

.pm-card-list li{
    padding:.65rem 0;
    border-bottom:1px solid var(--pm-border-color);
}

.pm-card-list li:last-child{
    border-bottom:none;
}

/* ==========================================
   LOADING STATE
========================================== */

.pm-card-loading{
    pointer-events:none;
    opacity:.7;
}

.pm-card-loading::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );
    animation:pm-card-loading 1.4s infinite;
}

@keyframes pm-card-loading{

    0%{
        transform:translateX(-100%);
    }

    100%{
        transform:translateX(100%);
    }

}

/* ==========================================
   DISABLED
========================================== */

.pm-card-disabled{
    opacity:.55;
    pointer-events:none;
    filter:grayscale(.2);
}

/* ==========================================
   ANIMATIONS
========================================== */

.pm-card-fade{
    animation:pm-card-fade .35s ease;
}

@keyframes pm-card-fade{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.pm-card-scale{
    animation:pm-card-scale .3s ease;
}

@keyframes pm-card-scale{

    from{
        opacity:0;
        transform:scale(.97);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

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

@media (max-width:992px){

    .pm-card-grid-4{
        grid-template-columns:repeat(2,1fr);
    }

    .pm-card-grid-3{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:768px){

    .pm-card-horizontal{
        flex-direction:column;
    }

    .pm-card-horizontal .pm-card-image,
    .pm-card-horizontal .pm-card-body{
        width:100%;
    }

    .pm-card-grid-2,
    .pm-card-grid-3,
    .pm-card-grid-4{
        grid-template-columns:1fr;
    }

    .pm-card-header,
    .pm-card-body,
    .pm-card-footer{
        padding:1.25rem;
    }

}

@media (max-width:480px){

    .pm-product-image{
        padding:1.5rem;
    }

    .pm-product-title{
        font-size:1.05rem;
    }

    .pm-article-title{
        font-size:1.15rem;
    }

}

/* ==========================================
   FUTURE DARK MODE READY
========================================== */

.pm-dark .pm-card{
    background:var(--pm-surface);
}

.pm-dark .pm-card-header,
.pm-dark .pm-card-footer{
    background:transparent;
}

/* ==========================================
   END OF FILE
========================================== */