/*
 * FIDJ Perspectives
 * Home component replacing the legacy desktop/mobile shortcodes.
 */

.fidj-perspectives {
}

.fidj-perspectives-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 0 0px;
}


/* ---------------------------------------------------------
   Heading
--------------------------------------------------------- */

.fidj-perspectives-title {
    display: block;
    width: 100%;
    margin: 0 0 25px !important;

    color: #035B6D !important;

    font-family: 'Heebo', sans-serif;
    font-size: 54px;
    line-height: 1.1 !important;
    font-weight: 600;

    text-align: center !important;
}


/* ---------------------------------------------------------
   Desktop
--------------------------------------------------------- */

.fidj-perspectives .fidj-perspectives-copy--mobile,
.fidj-perspectives-view-all--mobile {
    display: none;
}

.fidj-perspectives .fidj-perspectives-filters {
    margin-top: 0;
}

.fidj-perspectives .fidj-perspectives-track {
    display: grid;

    grid-template-columns: 30% 30% 30%;
    column-gap: 5%;
    row-gap: 40px;

    margin-top: 20px;

    text-align: center;
}

.fidj-perspectives .fidj-perspectives-track > .sliderblock:nth-child(n+4) {
    display: none;
}

.fidj-perspectives .fidj-perspectives-track > .sliderblock > .article {
    margin: 0;
}


/* Desktop View All */

.fidj-perspectives-view-all--desktop {
    margin-top: 55px;
    text-align: center;
}


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

@media only screen and (max-width: 767px) {

    .fidj-perspectives {
    }

    .fidj-perspectives-inner {
        width: 100%;
        max-width: none;

        margin: 0 auto;
        padding: 38px 15px 34px;

        box-sizing: border-box;
    }


    /* Heading — match the original mobile section */

    .fidj-perspectives-title {
        display: block;

        width: 100%;

        margin: 0 0 26px !important;

        color: #035B6D !important;

        font-family: 'Heebo', sans-serif;
        font-size: 48px;
        line-height: 1.05;
        font-weight: 600;
        letter-spacing: -1px;
    }


    /* Hide desktop-only UI */

    .fidj-perspectives .fidj-perspectives-filters,
    .fidj-perspectives .fidj-perspectives-copy--desktop,
    .fidj-perspectives-view-all--desktop {
        display: none !important;
    }


    /* Show mobile content */

    .fidj-perspectives .fidj-perspectives-copy--mobile,
    .fidj-perspectives-view-all--mobile {
        display: block;
    }


    /* Slider */

    .fidj-perspectives .fidj-perspectives-track {
        display: block;
        width: 100%;
        margin-top: 0;
        text-align: center;
    }

    .fidj-perspectives .fidj-perspectives-track > .sliderblock,
    .fidj-perspectives .fidj-perspectives-track > .sliderblock > .article {
        width: 100%;
        box-sizing: border-box;
    }

    .fidj-perspectives .fidj-perspectives-track > .sliderblock:nth-child(n+4) {
        display: block;
    }


    /* -----------------------------------------------------
       Card typography
    ----------------------------------------------------- */

    .fidj-perspectives .fidj-perspectives-track h4 {
        margin-top: 10px;

        color: #1c1c1c;

        font-family: 'Heebo', sans-serif;
        font-size: 24px;
        line-height: 32px;
        letter-spacing: -1.2px;
        font-weight: 600;
    }

    .fidj-perspectives .fidj-perspectives-track h4:hover {
        color: #027368 !important;
        text-decoration: underline;
    }

    .fidj-perspectives .fidj-perspectives-track h5 {
        color: #1c1c1c;

        font-family: 'Heebo', sans-serif;
        font-size: 18px;
        line-height: 32px;
        letter-spacing: .9px;
        font-weight: 600;
    }

    .fidj-perspectives .fidj-perspectives-track h5:hover {
        color: #027368 !important;
    }

    .fidj-perspectives .fidj-perspectives-track p {
        color: #1c1c1c;

        font-family: 'Heebo', sans-serif;
        font-size: 18px;
        line-height: 24px;
        letter-spacing: -.8px;
        font-weight: 200;
    }

    .fidj-perspectives .fidj-perspectives-track .perspective-link {
        font-weight: bold;
    }

    /* -----------------------------------------------------
       Slick arrows
    ----------------------------------------------------- */

    .fidj-perspectives .slick-prev {
        width: 60px !important;
        height: 60px !important;

        left: 30% !important;
        top: 115% !important;

        z-index: 500;
    }

    .fidj-perspectives .slick-next {
        width: 60px !important;
        height: 60px !important;

        right: 30% !important;
        top: 115% !important;

        z-index: 500;
    }


    /* -----------------------------------------------------
       Mobile View All

       More separation from the arrows and from the bottom
       edge, matching the old component.
    ----------------------------------------------------- */

    .fidj-perspectives-view-all--mobile {
        margin-top: 160px;
        margin-bottom: 20px;
        text-align: center;
    }

    .fidj-perspectives-view-all--mobile .avia-button {
        display: inline-block;
        width: 70%;
        max-width: 280px;
        min-width: 0;
        box-sizing: border-box;

        padding: 14px 20px;

        background-color: #80bdb8;
        border-color: #80bdb8;
        border-radius: 10px;

        color: #fff;

        font-family: 'Heebo', sans-serif;
        font-size: 22px;
        font-weight: 400;
    }

    /* Match legacy Perspectives mobile image */

    .fidj-perspectives .fidj-perspectives-track .article .thumbnail {
        display: block;
        width: calc(100% - 20px);
        max-width: none;
        height: auto;
        overflow: hidden;

        margin: 10px auto 0;

        border-radius: 20px;
        box-shadow: none;
    }

    .fidj-perspectives .fidj-perspectives-track .article .thumbnail img {
        display: block;
        width: 100% !important;
        height: auto !important;
        max-width: none;

        border-radius: 20px;
        object-fit: contain;
    }
}


/* ---------------------------------------------------------
   Small mobile
--------------------------------------------------------- */

@media only screen and (max-width: 479px) {

    .fidj-perspectives-inner {
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: 0px;
    }

    .fidj-perspectives-title {
        font-size: 42px;
    }
}