/*
 * ============================================================
 * FLBS CARD SECTION
 * Umbraco 17 / uSkinned 7
 * ============================================================
 */


/*
 * ============================================================
 * SECTION
 * ============================================================
 */

.flbs-card-section {
    position: relative;
}


/*
 * ============================================================
 * SECTION HEADER
 * ============================================================
 */

.flbs-card-section__header {
    max-width: 52rem;
    margin-bottom: 2rem;
}

.flbs-card-section__heading {
    margin-bottom: 0.75rem;
}

.flbs-card-section__intro {
    margin-bottom: 0;
}


/*
 * ============================================================
 * CARD COLUMN
 *
 * Apply the hover transform to the Bootstrap column rather
 * than the card itself. This avoids transform conflicts with
 * Bootstrap/uSkinned card styles.
 * ============================================================
 */

.flbs-card-section .row > [class*="col-"] {
    transition: transform 0.5s ease-in-out;
}

.flbs-card-section .row > [class*="col-"]:hover {
    position: relative;
    z-index: 5;

    transform: scale(1.02);
}

.flbs-card-section .row > [id] {
    scroll-margin-top: 8rem;
}

/*
 * ============================================================
 * CARD
 * ============================================================
 */

.flbs-card {
    --flbs-card-bg: #ffffff;
    --flbs-card-color: #333333;

    --bs-card-bg: var(--flbs-card-bg);
    --bs-card-color: var(--flbs-card-color);

    position: relative;
    width: 100%;
    min-height: 22rem;

    background-color: var(--flbs-card-bg);
    color: var(--flbs-card-color);

    transition: box-shadow 0.5s ease-in-out;
}


/*
 * Card shadow follows the column hover.
 */

.flbs-card-section .row > [class*="col-"]:hover .flbs-card {
    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.15);
}


/*
 * Ensure Bootstrap/uSkinned descendants inherit
 * the card foreground color.
 *
 * The banner is intentionally omitted because Bootstrap's
 * alert classes need to control their own foreground color.
 */

.flbs-card .card-body,
.flbs-card .card-title,
.flbs-card .card-text,
.flbs-card .flbs-card__title,
.flbs-card .flbs-card__text {
    color: inherit;
}


/*
 * ============================================================
 * IMAGE
 * ============================================================
 */

.flbs-card__image {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 9;

    object-fit: cover;
}


/*
 * ============================================================
 * BODY
 * ============================================================
 */

.flbs-card__body {
    min-width: 0;

    /*
     * Allows the flex-column body to make good use of the
     * available card height so mt-auto can keep actions near
     * the bottom of shorter cards.
     */
    min-height: 100%;
}


/*
 * ============================================================
 * BANNER
 * ============================================================
 */

.flbs-card__banner {
    display: flex;
    align-items: center;
    gap: 0.625rem;

    width: 100%;

    margin-bottom: 1rem;
    padding: 0.75rem 1rem;

    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
}

.flbs-card__banner-icon {
    flex: 0 0 auto;

    font-size: 1.1em;
}


/*
 * ============================================================
 * BADGE
 * ============================================================
 */

.flbs-card__badge {
    margin-bottom: 0.75rem;

    color: inherit;
    background-color: transparent;

    border: 1px solid currentColor;
}


/*
 * ============================================================
 * TITLE
 * ============================================================
 */

.flbs-card__title {
    display: flex;
    align-items: center;

    gap: 0.5rem;

    margin-bottom: 0.75rem;

    line-height: 1.25;
}


/*
 * Font Awesome icon before title.
 */

.flbs-card__title-icon {
    flex: 0 0 auto;
}


/*
 * ============================================================
 * BODY TEXT
 * ============================================================
 */

.flbs-card__text {
    margin-bottom: 1rem;

    white-space: pre-line;
}


/*
 * ============================================================
 * ACTION
 * ============================================================
 */

.flbs-card__action {
    width: 100%;

    padding-top: 1rem;
}

.flbs-card__action .btn {
    display: block;

    width: 100%;
}


/*
 * Text-link action.
 */

.flbs-card__text-link {
    display: inline-block;

    color: inherit;

    font-weight: 600;

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.flbs-card__text-link:hover {
    color: inherit;

    text-decoration-thickness: 2px;
}

/*
 * ============================================================
 * ANCHOR
 * ============================================================
 */

.flbs-card__anchor {
    display: block;
    position: relative;

    width: 0;
    height: 0;

    visibility: hidden;

    /*
     * Adjust if the site's sticky header height changes.
     */
    scroll-margin-top: 8rem;
}

.flbs-card-section .row > [id] {
    scroll-margin-top: 8rem;

/*
 * ============================================================
 * ACCESSIBILITY
 * ============================================================
 */

.flbs-card a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}


/*
 * Give keyboard users a similar visual emphasis when
 * interacting with controls inside the card.
 */

.flbs-card:focus-within {
    z-index: 2;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.15);
}


/*
 * ============================================================
 * REDUCED MOTION
 * ============================================================
 */

@media (prefers-reduced-motion: reduce) {

    .flbs-card-section .row > [class*="col-"] {
        transition: none;
    }

    .flbs-card-section .row > [class*="col-"]:hover {
        transform: none;
    }

    .flbs-card {
        transition: none;
    }
}