/*
|--------------------------------------------------------------------------
| Capability Catalogue
|--------------------------------------------------------------------------
*/

.capability-catalogue {
    background: #202020;

    color: #fff;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.capability-catalogue__header {
    padding:

        calc(

            var(--utility-height, 0px)

            + var(--nav-height, 90px)

            + 65px

        )

        0

        60px;

    background: #202020;
}


/*
|--------------------------------------------------------------------------
| Breadcrumb
|--------------------------------------------------------------------------
*/

.capability-breadcrumb {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 30px;

    font-size: 13px;
    font-weight: 400;

    line-height: 1.3;

    text-transform: uppercase;
}


.capability-breadcrumb a {
    color:
        var(--color-gold);

    text-decoration: none;

    transition:
        color .2s ease;
}


.capability-breadcrumb a:hover {
    color: #fff;
}


.capability-breadcrumb > span:last-child {
    color:
        rgba(255, 255, 255, .82);
}


.capability-breadcrumb__separator {
    color:
        var(--color-gold);

    font-size: 9px;
}


/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.capability-catalogue__title {
    margin: 0;

    color: #fff;

    font-family:
        var(--font-title);

    font-size: var(--font-size-h1);

    font-weight: 400;

    line-height: 1;
}


/*
|--------------------------------------------------------------------------
| Body
|--------------------------------------------------------------------------
*/

.capability-catalogue__body {
    padding:
        0
        0
        100px;

    background: #202020;
}


/*
|--------------------------------------------------------------------------
| Toolbar
|--------------------------------------------------------------------------
*/

.capability-catalogue__toolbar {
    min-height: 58px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 22px;
}


/*
|--------------------------------------------------------------------------
| Summary
|--------------------------------------------------------------------------
*/

.capability-catalogue__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 10px;
}


.capability-results-count {
    margin-right: 2px;

    color: #fff;

    font-size: var(--font-size-text-small);
}


/*
|--------------------------------------------------------------------------
| Active Filter Chip
|--------------------------------------------------------------------------
*/

.capability-filter-chip {
    min-height: 28px;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding:
        4px
        10px;

    border:
        1px solid
        rgba(185, 163, 130, .72);

    background:
        rgba(185, 163, 130, .12);

    color:
        var(--color-gold);

    font-family:
        var(--font-primary);

    font-size: var(--font-size-text-small);
    font-weight: 400;

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease;
}


.capability-filter-chip:hover {
    background:
        rgba(185, 163, 130, .22);

    color: #fff;
}


.capability-filter-chip__close {
    font-size: 17px;
    font-weight: 300;

    line-height: 1;
}


/*
|--------------------------------------------------------------------------
| Sort
|--------------------------------------------------------------------------
*/

.capability-sort {
    position: relative;
}


.capability-sort select {
    width: 100%;

    padding:
        12px
        46px
        12px
        16px;

    border:
        1px solid
        rgba(255, 255, 255, .18);

    background-color: transparent;

    color: #fff;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}


/*
|--------------------------------------------------------------------------
| Select Arrow
|--------------------------------------------------------------------------
*/

.capability-sort::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 16px;

    width: 7px;
    height: 7px;

    border-right:
        1px solid
        var(--color-gold);

    border-bottom:
        1px solid
        var(--color-gold);

    transform:
        translateY(-65%)
        rotate(45deg);

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Catalogue Layout
|--------------------------------------------------------------------------
*/

.capability-catalogue__layout {
    display: grid;

    grid-template-columns:
        370px
        minmax(0, 1fr);

        gap:
        clamp(
            45px,
            5vw,
            85px
        );

    align-items: start;
}


/*
|--------------------------------------------------------------------------
| Filters
|--------------------------------------------------------------------------
*/

.capability-filters {
    position: sticky;

    top: 30px;

    align-self: start;
}


.capability-filters__head {
    min-height: 48px;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .15);

    color:
        rgba(255, 255, 255, .85);

    font-size: var(--font-size-text-small);
}


.capability-filters__clear {
    color:
        var(--color-gold);

    text-decoration: none;

    font-size: 13px;

    transition:
        color .2s ease;
}


.capability-filters__clear:hover {
    color: #fff;
}


/*
|--------------------------------------------------------------------------
| Filter Group
|--------------------------------------------------------------------------
*/

.capability-filter-group {
    padding:
        10px
        0
        14px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .14);
}


.capability-filter-group__title {
    margin:
        0
        0
        10px;

    color: #fff;

    font-family:
        var(--font-title);

    font-size: var(--font-size-h4);
    font-weight: 400;

    line-height: 1.2;
}


/*
|--------------------------------------------------------------------------
| Sector Filter
|--------------------------------------------------------------------------
*/

.capability-filter-sector {
    min-height: 41px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 15px;

    align-items: center;

    cursor: pointer;

    color:
        rgba(255, 255, 255, .80);

    font-size: var(--font-size-text-large);

    transition:
        color .2s ease;
}


.capability-filter-sector input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.capability-filter-sector:hover {
    color: #fff;
}


.capability-filter-sector:has(input:checked) {
    color:
        var(--color-gold);
}


.capability-filter-sector__count {
    color:
        var(--color-gold);
}


/*
|--------------------------------------------------------------------------
| Checkbox Category
|--------------------------------------------------------------------------
*/

.capability-filter-checkbox {
    min-height: 41px;

    display: flex;
    align-items: center;

    gap: 12px;

    cursor: pointer;

    color:
        rgba(255, 255, 255, .46);

    font-size: var(--font-size-text-small);

    transition:
        color .2s ease;
}


.capability-filter-checkbox input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.capability-filter-checkbox__box {
    position: relative;

    flex:
        0
        0
        14px;

    width: 14px;
    height: 14px;

    border:
        1px solid
        rgba(255, 255, 255, .28);

    transition:
        background-color .2s ease,
        border-color .2s ease;
}


.capability-filter-checkbox
input:checked
+
.capability-filter-checkbox__box {
    background:
        var(--color-gold);

    border-color:
        var(--color-gold);
}


.capability-filter-checkbox
input:checked
+
.capability-filter-checkbox__box::after {
    content: "✓";

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #222;

    font-size: 9px;
    font-weight: 700;
}


.capability-filter-checkbox:has(input:checked) {
    color:
        var(--color-gold);
}


.capability-filter-checkbox:hover {
    color: #fff;
}


/*
|--------------------------------------------------------------------------
| Results
|--------------------------------------------------------------------------
*/

.capability-results {
    min-width: 0;
}


/*
|--------------------------------------------------------------------------
| Product Grid
|--------------------------------------------------------------------------
*/

.capability-products-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 26px;
}


/*
|--------------------------------------------------------------------------
| Product Card — Initial State
|--------------------------------------------------------------------------
*/

.capability-product-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    border:
        1px solid
        rgba(255, 255, 255, .14);

    background: #363636;

    color: #fff;

    text-decoration: none;

    overflow: hidden;

    transition:
        border-color .35s ease;
}


/*
|--------------------------------------------------------------------------
| Product Image
|--------------------------------------------------------------------------
*/

.capability-product-card__media {
    position: relative;

    width: 100%;

    /* aspect-ratio:
        1.18 / 1; */
        /* margin-bottom:16px; */

    overflow: hidden;

    background: #363636;

    transition:
        background-color .4s ease;
}


.capability-product-card__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    transform: scale(1);

    filter:
        brightness(.82);

    transition:
        filter .4s ease,
        transform .55s ease;
}


/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.capability-product-card__content {
    flex: 1;

    padding:
        0
        16px
        14px;

        padding-top:16px;

    background: #363636;

    transition:
        background-color .4s ease;
}


/*
|--------------------------------------------------------------------------
| Category Badge
|--------------------------------------------------------------------------
*/

.capability-product-card__category {
    display: inline-block;

    margin:
        0
        0
        12px;

    padding:
        4px
        9px;

    background:
        rgba(185, 163, 130, .18);

    color:
        var(--color-gold);

    font-size: var(--font-size-text-small);
    
    font-weight: 400;

    line-height: 1;

    text-transform: uppercase;

    transition:
        background-color .35s ease,
        color .35s ease;
}


/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.capability-product-card__title {
    margin:
        0
        0
        7px;

    color: #fff;

    font-family:
        var(--font-title);

    font-size: var(--font-size-h5);
    font-weight: 400;

    line-height: 1.25;
}


/*
|--------------------------------------------------------------------------
| Description
|--------------------------------------------------------------------------
*/

.capability-product-card__description {
    color:
        rgba(255, 255, 255, .68);

    font-size: var(--font-size-text-small);
    font-weight: 300;

    line-height: 1.5;
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.capability-product-card__footer {
    min-height: 48px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding:
        10px
        16px;

    border-top:
        1px solid
        rgba(255, 255, 255, .14);

    background: #363636;

    transition:
        background-color .4s ease,
        border-color .35s ease;
}


.capability-product-card__reference {
    color: #fff;

    font-size: var(--font-size-text-xsmall);
    font-weight: 700;

    text-transform: uppercase;
}


.capability-product-card__arrow {
    color:
        var(--color-gold);

    font-size: 13px;

    transition:
        transform .3s ease;
}


/*
|--------------------------------------------------------------------------
| Hover State
|--------------------------------------------------------------------------
*/

.capability-product-card:hover {
    border-color:
        rgba(185, 163, 130, .35);
}


/*
 * Image area becomes almost black.
 */

.capability-product-card:hover
.capability-product-card__media {
    background:
        #171717;
}


.capability-product-card:hover
.capability-product-card__media img {
    filter:
        brightness(.72);

    /*
     * Screenshot does not show a strong zoom.
     */
    transform:
        scale(1.01);
}


/*
 * Lower half changes to the warm brown/gold tone.
 */

.capability-product-card:hover
.capability-product-card__content,
.capability-product-card:hover
.capability-product-card__footer {
    background:
        #38332b;
}


.capability-product-card:hover
.capability-product-card__footer {
    border-top-color:
        rgba(185, 163, 130, .22);
}


/*
 * Badge becomes slightly more visible.
 */

.capability-product-card:hover
.capability-product-card__category {
    background:
        rgba(185, 163, 130, .24);

    color:
        #c7af88;
}


/*
 * Small arrow movement only.
 */

.capability-product-card:hover
.capability-product-card__arrow {
    transform:
        translateX(4px);
}

/*
|--------------------------------------------------------------------------
| Empty
|--------------------------------------------------------------------------
*/

.capability-products-empty {
    padding:
        45px
        0;

    color:
        rgba(255, 255, 255, .55);
}


/*
|--------------------------------------------------------------------------
| <= 1399
|--------------------------------------------------------------------------
*/

@media (max-width: 1399.98px) {

    .capability-catalogue__layout {
        grid-template-columns:
            280px
            minmax(0, 1fr);
    }


    .capability-products-grid {
        gap: 18px;
    }

}


/*
|--------------------------------------------------------------------------
| <= 1199
|--------------------------------------------------------------------------
*/

@media (max-width: 1199.98px) {

    .capability-products-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/*
|--------------------------------------------------------------------------
| <= 991
|--------------------------------------------------------------------------
*/

@media (max-width: 991.98px) {

    .capability-catalogue__header {

        padding:

            calc(

                var(--nav-height, 90px)

                + 40px

            )

            0

            42px;

    }


    .capability-catalogue__layout {
        display: block;
    }


    .capability-filters {
        position: static;

        margin-bottom: 40px;
    }


    .capability-catalogue__toolbar {
        align-items: flex-start;
    }

}


/*
|--------------------------------------------------------------------------
| <= 767
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .capability-catalogue__header {
        padding:
            calc(
                var(--nav-height, 80px)
                + 30px
            )
            0
            35px;
    }


    .capability-breadcrumb {
        margin-bottom: 20px;

        font-size: 11px;
    }


    .capability-catalogue__title {
        font-size: 42px;
    }


    .capability-catalogue__toolbar {
        display: block;
    }


    .capability-catalogue__summary {
        margin-bottom: 20px;
    }


    .capability-sort select {
        width: 100%;
    }


    .capability-products-grid {
        grid-template-columns: 1fr;
    }


    .capability-filter-sector {
        font-size: 15px;
    }

}
/*
|--------------------------------------------------------------------------
| AJAX Loading
|--------------------------------------------------------------------------
*/

[data-capability-catalogue] {
    position: relative;
}


[data-capability-catalogue].is-loading
.capability-results {
    opacity: .35;

    pointer-events: none;
}


.capability-results {
    transition:
        opacity .25s ease;
}


[data-capability-catalogue].is-loading
.capability-filters {
    pointer-events: none;
}

/*
|--------------------------------------------------------------------------
| Clear All
|--------------------------------------------------------------------------
*/

.capability-filters__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color:
        var(--color-gold);

    font-family:
        var(--font-primary);

    font-size: 13px;
    font-weight: 400;

    line-height: 1.2;

    text-decoration: none;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition:
        color .2s ease;
}


.capability-filters__clear:hover {
    color: #fff;
}


.capability-filters__clear:focus-visible {
    outline:
        1px solid
        var(--color-gold);

    outline-offset: 4px;
}

/*
|--------------------------------------------------------------------------
| Category Cover Result
|--------------------------------------------------------------------------
*/

.capability-category-cover {
    width: 100%;
}


.capability-category-cover__content {
    /* max-width: 950px; */

    margin-bottom: 38px;
}


.capability-category-cover__title {
    margin:
        0
        0
        15px;

    color: #fff;

    font-family:
        var(--font-title);

    font-size:var(--font-size-h2);

    font-weight: 400;

    line-height: 1.08;
}


.capability-category-cover__description {
    /* max-width: 920px; */

    color:
        rgba(
            255,
            255,
            255,
            .68
        );

    font-size: var(--font-size-text-main);
    font-weight: 300;

    line-height: 1.65;
}


.capability-category-cover__description p {
    margin:
        0
        0
        14px;
}


.capability-category-cover__description p:last-child {
    margin-bottom: 0;
}


/*
|--------------------------------------------------------------------------
| Cover Image
|--------------------------------------------------------------------------
*/

.capability-category-cover__media {
    position: relative;

    width: 100%;

    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    background: #292929;

    transition:
        border-color .35s ease,
        background-color .35s ease;
}


.capability-category-cover__media img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;

    transform:
        scale(1);

    transition:
        transform
        .7s
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        ),
        filter
        .4s
        ease;
}


.capability-category-cover__media:hover {
    border-color:
        rgba(
            185,
            163,
            130,
            .45
        );

    background:
        #3d3931;
}


.capability-category-cover__media:hover img {
    transform:
        scale(1.015);

    filter:
        brightness(1.03);
}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.capability-category-cover__actions {
    margin-top: 35px;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 991.98px) {

    .capability-category-cover__content {
        margin-bottom: 30px;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .capability-category-cover__title {
        font-size: 34px;
    }


    .capability-category-cover__description {
        font-size: 15px;
    }


    .capability-category-cover__actions {
        margin-top: 25px;
    }

}

/*
|--------------------------------------------------------------------------
| Category Cover List
|--------------------------------------------------------------------------
*/

.capability-category-cover-list {
    display: flex;
    flex-direction: column;

    gap: 80px;
}


.capability-category-cover-list
.capability-category-cover {
    padding-bottom: 10px;
}


@media (max-width: 991.98px) {

    .capability-category-cover-list {
        gap: 60px;
    }

}


@media (max-width: 767.98px) {

    .capability-category-cover-list {
        gap: 45px;
    }

}

/*
|--------------------------------------------------------------------------
| Catalogue Category Grid
|--------------------------------------------------------------------------
*/

.catalogue-category-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 20px;
}


/*
|--------------------------------------------------------------------------
| Catalogue Category Card
|--------------------------------------------------------------------------
*/

.catalogue-category-card {
    position: relative;

    display: block;

    aspect-ratio:
        1.3 / 1;

    overflow: hidden;

    background: #292929;

    color: #fff;

    text-decoration: none;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    transition:
        border-color .35s ease;
}


/*
|--------------------------------------------------------------------------
| Image
|--------------------------------------------------------------------------
*/

.catalogue-category-card__media {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;
}


.catalogue-category-card__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(.58);

    transform:
        scale(1);

    transition:
        filter .45s ease,
        transform .65s
        cubic-bezier(.22, .61, .36, 1);
}


/*
|--------------------------------------------------------------------------
| Overlay
|--------------------------------------------------------------------------
*/

.catalogue-category-card__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 20%,
            rgba(0,0,0,.08) 55%,
            rgba(0,0,0,.45) 100%
        );

    pointer-events: none;

    transition:
        background .4s ease;
}


/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.catalogue-category-card__content {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 18px;

    z-index: 2;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    transition:
        transform
        .42s
        cubic-bezier(.22, .61, .36, 1);
}


.catalogue-category-card__title {
    margin: 0;

    max-width:
        calc(100% - 45px);

    color: #fff;

    font-family:
        var(--font-title);

    font-size: 20px;
    font-weight: 400;

    line-height: 1.15;
}


.catalogue-category-card__arrow {
    flex: 0 0 auto;

    color: #fff;

    font-size: 20px;

    transition:
        transform .3s ease;
}


/*
|--------------------------------------------------------------------------
| Gold Bottom Line
|--------------------------------------------------------------------------
*/

.catalogue-category-card__line {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 12px;

    z-index: 3;

    height: 4px;

    background:
        var(--color-gold);

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform
        .48s
        cubic-bezier(.22, .61, .36, 1);
}


/*
|--------------------------------------------------------------------------
| Hover
|--------------------------------------------------------------------------
*/

.catalogue-category-card:hover {
    border-color:
        rgba(185,163,130,.40);
}


.catalogue-category-card:hover
.catalogue-category-card__media img {
    filter:
        brightness(1);

    transform:
        scale(1.015);
}


.catalogue-category-card:hover
.catalogue-category-card__overlay {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 20%,
            rgba(0,0,0,.03) 55%,
            rgba(0,0,0,.28) 100%
        );
}


.catalogue-category-card:hover
.catalogue-category-card__content {
    transform:
        translateY(-15px);
}


.catalogue-category-card:hover
.catalogue-category-card__arrow {
    transform:
        translateX(4px);
}


.catalogue-category-card:hover
.catalogue-category-card__line {
    transform:
        scaleX(1);
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 1199.98px) {

    .catalogue-category-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 767.98px) {

    .catalogue-category-grid {
        grid-template-columns: 1fr;
    }


    .catalogue-category-card {
        aspect-ratio:
            16 / 10;
    }

}

/*
|--------------------------------------------------------------------------
| Category Card Variant
|--------------------------------------------------------------------------
*/

.capability-product-card--category
.capability-product-card__media img {
    object-fit: cover;
}


/*
 * Product images may use contain,
 * but category imagery should fill the card.
 */

.capability-product-card--category:hover
.capability-product-card__media img {
    transform:
        scale(1.02);
}
/*
|--------------------------------------------------------------------------
| Category Product Card Variant
|--------------------------------------------------------------------------
*/

.capability-product-card--category
.capability-product-card__media img {
    object-fit: cover;
}


/*
|--------------------------------------------------------------------------
| Category Title Row
|--------------------------------------------------------------------------
*/

.capability-product-card--category
.capability-product-card__content {
    padding-bottom: 15px;
}


.capability-product-card__title-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.capability-product-card--category
.capability-product-card__title {
    margin: 0;

    flex: 1 1 auto;
    padding-top:15px;
}


.capability-product-card--category
.capability-product-card__arrow {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding-top:10px;

    transition:
        transform .3s ease;
}


.capability-product-card--category:hover
.capability-product-card__arrow {
    transform:
        translateX(4px);
}