/**
 * ==================================================
 * CARDS
 * Francesco Cugini Theme
 * Design System v1.0
 * ==================================================
 */


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

.card{

    display:flex;

    flex-direction:column;

    height:100%;

    overflow:hidden;

    background:var(--color-surface);

    border:1px solid var(--color-border);

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

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

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

}

.card:hover{

    transform:translateY(-6px);

    border-color:var(--color-gold);

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

}


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

.card-image{

    overflow:hidden;

}

.card-image img{

    display:block;

    width:100%;

    height:auto;

    transition:transform .8s ease;

}

.card:hover .card-image img{

    transform:scale(1.05);

}


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

.card-body{

    display:flex;

    flex:1;

    flex-direction:column;

    padding:var(--space-xl);

}


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

.card-title{

    margin-bottom:var(--space-md);

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

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

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

    color:var(--color-text);

}


/*==================================================
TEXT
==================================================*/

.card-text{

    flex:1;

    margin-bottom:var(--space-lg);

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

}


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

.card-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:var(--space-md);

    margin-top:auto;

}


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

.card-badge{

    display:inline-flex;

    align-items:center;

    padding:.35rem .8rem;

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

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

    color:var(--color-accent);

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

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

}


/*==================================================
META
==================================================*/

.card-meta{

    display:flex;

    gap:var(--space-md);

    margin-bottom:var(--space-md);

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

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

}


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

.card-horizontal{

    display:grid;

    grid-template-columns:320px 1fr;

}

.card-horizontal .card-image{

    height:100%;

}

.card-horizontal img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/*==================================================
BOOK CARD
==================================================*/

.card-book{

    text-align:center;

}

.card-book .card-image{

    padding:var(--space-xl);

}

.card-book img{

    max-width:260px;

    margin:auto;

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

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

}


/*==================================================
EVENT CARD
==================================================*/

.card-event{

    position:relative;

}

.card-date{

    position:absolute;

    top:var(--space-md);

    right:var(--space-md);

    padding:.5rem .8rem;

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

    background:var(--color-accent);

    color:#fff;

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

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

}


/*==================================================
ATLAS CARD
==================================================*/

.card-atlas{

    text-align:center;

}

.card-atlas img{

    aspect-ratio:1/1;

    object-fit:cover;

}


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

@media (max-width:768px){

    .card-horizontal{

        grid-template-columns:1fr;

    }

}