/*
 * Software by John Liddiard (aka JohntheFish)
 * www.c5magic.co.uk
 *
 * This package contains software copyright and proprietary to John Liddiard
 *
 */

/*
 * Fix grid for Elemental and bs3 themes.
 * No harm with Atomik or others
 */
.ccm-edit-mode .row [class*="col-"] .cm-magic.container,
.ccm-edit-mode .row [class*="col-"] .cm-magic .container,
.ccm-page .container .row [class*="col-"] .cm-magic.container,
.ccm-page .container .row [class*="col-"] .cm-magic .container{
    width:auto;
}

.ccm-page .cm-magic .cm-flex-wrap{
    display: flex;
    flex-wrap: wrap;
}
.ccm-page .cm-magic {
    clear:both;
}

/*
 * Software by John Liddiard (aka JohntheFish)
 * www.c5magic.co.uk
 *
 * This package contains software copyright and proprietary to John Liddiard
 *
 */

/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries */

:root {
    --simple-byline-min-element-width: 320px;
}
.ccm-page .simple-byline-list {
    display: grid;
    grid-template-columns: repeat( auto-fill,  minmax(var(--simple-byline-min-element-width), 1fr));
    gap: 10px;
    padding-left:5px;
    padding-right:5px;
}

.ccm-page .simple-byline-list-item {
    border-color: rgb(200, 200, 200);
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    background-color: rgb(245, 245, 245);
    position: relative;
    overflow: hidden;
    transition: all .1s ease-in-out;
    float: left;
    display: inline-block;
    height: auto;
    padding: 10px;
    padding-bottom: calc(10px + 3rem);
}

.ccm-page .simple-byline-list-item.not-visible-to-guest {
    border-color: var(--bs-danger);
}
.ccm-page .simple-byline-list-item.not-visible-to-guest:hover {
    border-color: var(--bs-accent);
}

.ccm-page .simple-byline-list-item:hover {
    transform: scale(1.015);
    border-color: var(--bs-primary);
    z-index: 1;
}

.ccm-page .simple-byline-list-item .simple-byline-list-item-image .simple-byline-list-item-image-size {
    position: relative;
    overflow: hidden;
    padding-top: 66%;
}

.ccm-page .simple-byline-list-item .simple-byline-list-item-image-size .simple-byline-image {
    object-fit: cover;
    object-position: 50% 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.ccm-page .simple-byline-list-item .simple-byline-content .simple-byline-description {
    margin-top: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em;
    max-height: calc(5 * 1.5em);
}

.ccm-page .simple-byline-list-item .simple-byline-content .simple-byline-button-wrapper {
    position: absolute;
    bottom: 10px;
    width: calc(100% - 10px - 10px);
}

.ccm-page .simple-byline-list-item .simple-byline-button-wrapper .simple-byline-button {
    float: right;
}

.ccm-page .simple-byline-list-item .simple-byline-tagline-item{
    margin-right:1.5em;
    display:inline-block;
}

.ccm-page .simple-byline-list-item .taglist-divider{
    opacity:70%;
    margin-left:0.2em;
    margin-right:0.2em;
}