/**
 * Component: Primary Cards
 * 
 * Styles for the Primary Cards component.
 *
 * @package SCDA-2025
 */

/* Basic component styling */
.primary-cards {
    &.bg-texture {
        position: relative;
        z-index: 2;
        background-image: url('../../../assets/images/patterns/white-cloth.jpg');
        background-repeat: repeat;
        margin: 39px 0;

        @media screen and (max-width: 768px) {
            margin: 30px 0;
        }
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: -39px;
            left: 0;
            width: 100%;
            height: 39px;
            background-image: url('../../../assets/images/patterns/white-cloth-top-edge.png');
            background-repeat: repeat-x;
            z-index: 1;
        }
        &:after {
            content: '';
            display: block;
            position: absolute;
            bottom: -39px;
            left: 0;
            width: 100%;
            height: 39px;
            background-image: url('../../../assets/images/patterns/white-cloth-bottom-edge.png');
            background-repeat: repeat-x;
            z-index: 1;
        }
        .section-heading {
            margin-top: 0;
        }
    }
    .section-heading {
        margin-top: 40px;
        margin-bottom: 0;

        @media screen and (max-width: 991px) {
            margin-top: 30px;
        }
    }
    .section-text {
        margin-top: 0;

        > * {
            &:last-of-type {
                margin-bottom: 0;
            }
        }
    }
    .card {
        background-image: url('../../../assets/images/patterns/cloth.jpg');
        background-repeat: repeat;
        height: 100%;
        padding: 30px;
        border-radius: var(--border-radius);
        overflow: hidden;
        position: relative;

        &.color-blue {
            &:after {
                background-color: var(--color-scda-blue);
            }
        }
        &.color-brown {
            &:after {
                background-color: var(--color-scda-brown);
            }
        }
        &.color-gray {
            &:after {
                background-color: var(--color-scda-black);
            }
        }
        &.color-green {
            &:after {
                background-color: var(--color-scda-moss);
            }
        }
        &.color-orange {
            &:after {
                background-color: var(--color-scda-tan);
            }
        }
        &:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            mix-blend-mode: multiply;
            z-index: 1;
        }
        .card-image {
            position: relative;
            z-index: 2;
            margin-bottom: 20px;
            border-radius: .25rem;
            overflow: hidden;

            img {
                width: 100%;
                height: auto;
                max-height: 200px;
                object-fit: cover;
                display: block;
            }
        }
        .card-content {
            position: relative;
            z-index: 2;
            color: var(--color-white);

            h3 {
                margin-top: 0;
                margin-bottom: 10px;
                color: var(--color-white);

                &.h4 {
                    @media screen and (max-width: 768px) {
                        font-size: 2rem; /* 32px */
                        line-height: 2.625rem; /* 42px */
                    }
                }
            }
            p {
                margin: 0 0 .7rem;
                color: var(--color-white);
            }
            a:not(.btn) {
                color: var(--color-white);

                &:hover, &:focus-visible {
                    text-decoration: none;
                }
            }
            /* Preserve button colors */
            .btn {
                &.btn-solid-white {
                    color: var(--color-scda-blue);
                    
                    &:hover, &:focus-visible {
                        background-color: var(--color-scda-midnight);
                        color: var(--color-white);
                    }
                }
                &.btn-solid-blue {
                    color: var(--color-white);
                    
                    &:hover, &:focus-visible {
                        background-color: var(--color-scda-midnight);
                    }
                }
                &.btn-outline-blue {
                    color: var(--color-scda-blue);
                    
                    &:hover, &:focus-visible {
                        background-color: var(--color-white);
                        border: 2px solid var(--color-white);
                        box-shadow: 0 0 4px 0 rgba(81, 83, 74, 0.25);
                    }
                }
                &.btn-outline-white {
                    color: var(--color-white);
                    
                    &:hover, &:focus-visible {
                        background-color: var(--color-white);
                        color: var(--color-scda-blue);
                    }
                }
            }
            .button-group {
                margin-top: 20px;
            }
        }
    }
}