/*
Author: Brigitte Bigi

This style is inspired from:
https://heydon.github.io/Inclusive-Components/cards-redundant-click-read-more/#card-link

This is a base class to create a cards panel with card items.
The style of each element inside a card will be subclassed as needed.

 */

.cards-panel {
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    grid-column-gap: 5rem;
    grid-row-gap: 5rem;

}

.full-cards-panel {
    grid-template-columns: none;
    /* if the cards are in a flexbox */
    flex-direction: row;
}

.card {
    position: relative;
    background-color: var(--bg-color);
    border: var(--focus-border-width) solid var(--bg-color1);
    border-radius: calc(4 * var(--focus-border-width));
    box-shadow: -0.2rem 0.2rem 0.6rem 0.2rem var(--shadow-color);
    /* Display elements inside a card: */
    display: flex;
    flex-direction: column;
}


.card + .card {
    margin-top: 0;
}

@media only screen and (max-width: 768px) {
    .card {
        max-width: 75%;
        max-height: 30rem;
    }
    .full-card {
        max-width: 100%;
        max-height: none;
    }
}

@media only screen and (min-width: 768px) {
    .card {
        max-width: 20rem;
    }
    .full-card {
        max-width: 100%;
    }
}

.card * {
    min-height: 2rem;
}

.card header {
    /*height: 10rem;*/
    min-height: 2rem;
    max-height: 16rem;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 1rem));
    background: var(--main-color1);
    color: var(--main-color-contrast1);
    border-top-right-radius: calc(2 * var(--focus-border-width));
    border-top-left-radius: calc(2 * var(--focus-border-width));
}

.card header img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-top-right-radius: calc(2 * var(--focus-border-width));
    border-top-left-radius: calc(2 * var(--focus-border-width));
}

.card main {
    padding: 1rem;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.card footer {
    text-align: center;
    margin: auto;
}

.card footer * {
    padding: 1rem;
}

.card footer > :last-child {
    margin-top: auto;
    margin-bottom: 0.75rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.card > * > a[role=button], .card > * > button {
    border: calc(var(--focus-border-width)/2) solid var(--fg-color-a);
}
.card > * > a[role=button]:hover, .card > * > button:enabled:hover {
    border: calc(var(--focus-border-width)/2) dashed var(--fg-color-a);
}