/*
 * 	BNE Blocks: Card
 *
 * 	@author		Kerry Kline
 * 	@copyright	Copyright (c) Kerry Kline
 * 	@link		http://www.bnecreative.com
 *
 * 	@updated:	January 12, 2023
 *
*/


/* == Legacy version == */
.bne-card {
    position: relative;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
    
    
    /* WP .card overrides */
    padding: 0;
    box-shadow: none;
    min-width: 100%;
    max-width: 100%;
}

.bne-card .card-img-top {
    width: 100%;
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
}

.bne-card .card-img-bottom {
    width: 100%;
    border-bottom-left-radius: calc(.25rem - 1px);
    border-bottom-right-radius: calc(.25rem - 1px);
}

.bne-card .card-body {
    padding: 1.25rem;
}

.bne-card.no-background {
    background: none;
}

.wp-block-bne-card.bne-card.no-border,
.wp-block-bne-card.bne-card.is-style-border-0 {
    border: none;
}


/* == Grid == */
.wp-block-bne-card.bne-card-grid {
    display: grid;
    grid-template-rows: auto;
    grid-template-areas: "body";
    margin-bottom: 2rem;
}

/* Template */
.wp-block-bne-card.bne-card-grid .card-img {
    position: relative;
    grid-area: image;
}

.wp-block-bne-card.bne-card-grid .card-body {
    position: relative;
    grid-area: body;
}

.wp-block-bne-card.bne-card-grid.no-margin {
    magin: 0;
}

/* Top */
.wp-block-bne-card.card-img-top {
    grid-template-areas: 
        "image image"
        "body body"
    ;
}

/* Bottom */
.wp-block-bne-card.bne-card-grid.card-img-bottom {
    grid-template-areas: 
        "body body"
        "image image"
    ;
}

/* Left */
.wp-block-bne-card.bne-card-grid.card-img-left {
    grid-template-columns: var(--mediaSize) 1fr;
    grid-template-areas: 
        "image body"
    ;
}

/* Right*/
.wp-block-bne-card.bne-card-grid.card-img-right {
    grid-template-columns: 1fr var(--mediaSize);
    grid-template-areas: 
        "body image"
    ;
}

/* Half cards */
.wp-block-bne-card.bne-card-grid.card-img-left.card-half,
.wp-block-bne-card.bne-card-grid.card-img-right.card-half {
    grid-template-columns: 1fr 1fr;
}

/* Stack on Mobile */
@media (max-width: 768px) {
    .wp-block-bne-card:not(.is-not-stacked-on-mobile).bne-card-grid.card-img-left {
        grid-template-areas: 
            "image image"
            "body body"
        ;
    }
    .wp-block-bne-card:not(.is-not-stacked-on-mobile).bne-card-grid.card-img-right {
        grid-template-areas: 
            "body body"
            "image image"
        ;
    }    
}

/* Image */
.wp-block-bne-card.bne-card-grid .card-img {
    line-height: 0; /* WP Editor */
}
.wp-block-bne-card.bne-card-grid .card-img img {
    width: 100%;
}

.wp-block-bne-card.bne-card-grid.card-img-left .card-img img,
.wp-block-bne-card.bne-card-grid.card-img-right .card-img img,
.wp-block-bne-card.bne-card-grid.card-img-cover .card-img img  {
    width: 100%;
    height: 100%;
    object-fit: cover;   
}

.wp-block-bne-card.bne-card-grid.card-img-left:not(.is-style-border-0) .card-img img { border-radius: .25rem 0 0 .25rem; }
.wp-block-bne-card.bne-card-grid.card-img-right:not(.is-style-border-0) .card-img img { border-radius: 0 .25rem .25rem 0; }
.wp-block-bne-card.bne-card-grid.card-img-top:not(.is-style-border-0) .card-img img { border-radius: .25rem .25rem 0 0; }
.wp-block-bne-card.bne-card-grid.card-img-bottom:not(.is-style-border-0) .card-img img { border-radius: 0 0 .25rem .25rem; }

/* Hover Effect */
.wp-block-bne-card.is-style-flat-hover {
    border: 0;
    transition: all 0.3s ease-in-out;
}

.wp-block-bne-card.is-style-flat-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0px 10px 30px rgba(29, 58, 83, 0.15);
}