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

/*
 * Base for the background, shows as a grey if there is no image, or gets masked by the image
 * Image is applied as a style in the view over this
 */
.ccm-block-page-title.dtp-banner{
    position: relative;
    min-height: 30vh;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(27, 47, 69, 0.6);
}
.dtp-banner-60 .ccm-block-page-title.dtp-banner.dtp-has-image,
.dtp-banner-60.ccm-block-page-title.dtp-banner.dtp-has-image{
    min-height: 60vh;
}
.dtp-banner-75 .ccm-block-page-title.dtp-banner.dtp-has-image,
.dtp-banner-75.ccm-block-page-title.dtp-banner.dtp-has-image{
    min-height: 75vh;
}
.dtp-banner-100 .ccm-block-page-title.dtp-banner.dtp-has-image,
.dtp-banner-100.ccm-block-page-title.dtp-banner.dtp-has-image{
    min-height: 100vh;
}

/*
 * A mask color only applied over the optional image
 */
.ccm-block-page-title .dtp-banner-mask{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0.6;
    background-color: rgba(27, 47, 69);
}

/*
 * We have templates for 02 and 04 mask opacity.
 * Alternate means of adjusting the mask opacity
 * Default is 06
 */
.dtp-banner-mask-02 .ccm-block-page-title .dtp-banner-mask{
    opacity: 0.2;
}
.dtp-banner-mask-04 .ccm-block-page-title .dtp-banner-mask{
    opacity: 0.4;
}


/*
 * Used within the size maker to force the container to have a size that is big enough for the title
 * The title here is transparent. Gets overridden by the below to add colour in the next layer.
 */
.ccm-block-page-title.dtp-banner .dtp-page-title{
    color: rgba(0, 0, 0, 0);
    padding: 100px 2em 100px 2em;
    margin: 0;
    width:100%;
}

/*
 * Container for the text overlay
 */
.ccm-block-page-title .dtp-banner-text-position{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}


.ccm-block-page-title.dtp-banner .dtp-banner-text-position .dtp-page-title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--bs-gray-100);
}

.ccm-block-page-title.dtp-banner .dtp-title-size{
    font-weight: 200;
    font-family: var(--bs-body-font-family);
    font-size:200%;
}

/*
 * 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-cards-min-element-width: 320px;
}
.ccm-page .simple-cards-list {
    display: grid;
    grid-template-columns: repeat( auto-fill,  minmax(var(--simple-cards-min-element-width), 1fr));
    gap: 10px;
    padding-left:5px;
    padding-right:5px;
}

.ccm-page .simple-cards-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-cards-list-item.not-visible-to-guest {
    border-color: var(--bs-danger);
}
.ccm-page .simple-cards-list-item.not-visible-to-guest:hover {
    border-color: var(--bs-accent);
}

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

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

.ccm-page .simple-cards-list-item .simple-cards-list-item-image-size .simple-cards-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-cards-list-item .simple-cards-content .simple-cards-description {
    margin-top: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em;
    max-height: calc(5 * 1.5em);
}

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

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

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

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