/* ==========================================================
   DOODLE UI COMPONENT
   Module  : Component
   File    : card.css
   Version : 2.1.0
   Author  : Doodle IT Development
========================================================== */

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

.card {
    display: flex;
    flex-direction: column;

    background: var(--color-surface);

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

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

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

    overflow: hidden;

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

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

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

.card-header {
    padding: var(--card-padding);

    border-bottom:
        var(--border-width)
        solid
        var(--color-divider);
}

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

.card-body {
    flex: 1;

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

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

.card-footer {
    padding: var(--card-padding);

    border-top:
        var(--border-width)
        solid
        var(--color-divider);
}

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

.card-image {
    width: 100%;
    overflow: hidden;
}

.card-image img {
    display: block;

    width: 100%;
    height: auto;

    transition:
        transform var(--transition);
}

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

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

.card-title {
    margin-bottom: var(--space-3);

    color: var(--color-text);

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

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

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

/* ==========================================================
   CARD SUBTITLE
========================================================== */

.card-subtitle {
    margin-bottom: var(--space-4);

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

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

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

.card-text {
    color: var(--color-text-secondary);

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

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

.card-badge {
    position: absolute;

    top: var(--space-4);
    left: var(--space-4);

    z-index: 2;
}

/* ==========================================================
   CARD VARIANT
========================================================== */

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

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

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

.card-glass {
    backdrop-filter: blur(var(--blur-md));

    background: rgba(255,255,255,.85);
}

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

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

.card-center .card-body {
    align-items: center;
}

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

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

.card-horizontal .card-image {
    width: 40%;
}

.card-horizontal .card-body {
    width: 60%;
}

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

@media (max-width:767px){

    .card-header,

    .card-body,

    .card-footer{

        padding:var(--space-5);

    }

    .card-horizontal{

        flex-direction:column;

    }

    .card-horizontal .card-image,

    .card-horizontal .card-body{

        width:100%;

    }

}