/*
 * Discover homepage
 * Page-specific refinements loaded after the legacy site styles.
 * Scoped to body.discoverHome so existing project pages are unaffected.
 */

/* Legacy template image panels are not used on the Discover homepage. */
body.discoverHome .introBg,
body.discoverHome .imgServices {
    display: none !important;
    background: none !important;
    background-image: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    position: static !important;
}

/* Keep the hero copy readable as the background passes through light areas. */
body.discoverHome .mainSlider .slides li {
    position: relative;
}

body.discoverHome .mainSlider .slides li::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.03) 0%,
        rgba(0, 0, 0, 0.08) 32%,
        rgba(0, 0, 0, 0.46) 47%,
        rgba(0, 0, 0, 0.48) 61%,
        rgba(0, 0, 0, 0.16) 82%,
        rgba(0, 0, 0, 0.08) 100%
    );
}

body.discoverHome .caption {
    z-index: 2;
    box-sizing: border-box;
    padding: 26px 20px 30px;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 6%,
        rgba(0, 0, 0, 0.16) 24%,
        rgba(0, 0, 0, 0.25) 50%,
        rgba(0, 0, 0, 0.16) 76%,
        rgba(0, 0, 0, 0) 94%
    );
}

body.discoverHome .caption h1 {
    line-height: 1.12;
}

body.discoverHome .caption h1,
body.discoverHome .caption p {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

/* The legacy reveal tab allowed only 170px, clipping the longer CTA. */
body.discoverHome .shortBtn .shortFolio span,
body.discoverHome .shortBtn .shortContact span {
    box-sizing: content-box;
    white-space: nowrap;
}

body.discoverHome .shortBtn .shortFolio:hover span {
    width: 92px;
}

body.discoverHome .shortBtn .shortContact:hover span {
    width: 258px;
}

body.discoverHome .shortBtn .shortContact span {
    font-size: 14px;
}

body.discoverHome .privateNote {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-style: italic;
}

body.discoverHome .currentWorkIntro {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

body.discoverHome .portfolio .item .desc {
    cursor: pointer;
}

/* Make the two calls to action explicit on touch devices, where hover does not exist. */
@media only screen and (max-width: 767px) {
    body.discoverHome .caption {
        padding: 20px 18px 24px;
    }

    body.discoverHome .shortBtn {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        margin: 0 0 34px;
    }

    body.discoverHome .shortBtn a {
        display: inline-flex;
        align-items: stretch;
        text-decoration: none;
    }

    body.discoverHome .shortBtn .shortFolio span,
    body.discoverHome .shortBtn .shortContact span,
    body.discoverHome .shortBtn .shortFolio:hover span,
    body.discoverHome .shortBtn .shortContact:hover span {
        position: static;
        display: block;
        width: auto;
        height: 45px;
        margin: 0;
        opacity: 1;
        overflow: visible;
        line-height: 45px;
    }

    body.discoverHome .shortBtn .shortFolio i,
    body.discoverHome .shortBtn .shortContact i {
        flex: 0 0 45px;
        width: 45px;
        margin: 0 0 0 2px;
    }
}

@media only screen and (max-width: 479px) {
    body.discoverHome .caption h1 {
        font-size: 27px;
        line-height: 33px;
    }

    body.discoverHome .caption p {
        font-size: 14px;
        line-height: 21px;
    }

    body.discoverHome .shortBtn {
        display: block;
    }

    body.discoverHome .shortBtn a {
        display: flex;
        width: 100%;
        margin-bottom: 8px;
    }

    body.discoverHome .shortBtn .shortFolio span,
    body.discoverHome .shortBtn .shortContact span {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* v5: stronger navigation contrast and a balanced Discover introduction. */
body.discoverHome header .mainHeader,
body.discoverHome header .mainHeader.switchedHeader {
    background: rgba(24, 24, 24, 0.92) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 3px 18px rgba(0, 0, 0, 0.18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

body.discoverHome header .logo h1,
body.discoverHome header .mainHeader.switchedHeader .logo h1,
body.discoverHome header nav#mainNav li a,
body.discoverHome header .mainHeader.switchedHeader nav#mainNav li a {
    color: #f2f2f1 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

body.discoverHome header .logo h1 span,
body.discoverHome header .mainHeader.switchedHeader .logo h1 span {
    color: #d0a068 !important;
}

body.discoverHome header nav#mainNav li a:hover,
body.discoverHome header .mainHeader.switchedHeader nav#mainNav li a:hover {
    color: #d0a068 !important;
}

body.discoverHome #discover .intro,
body.discoverHome #discover .features {
    padding-top: 76px;
    padding-bottom: 76px;
}

body.discoverHome #discover .innerIntro {
    margin-top: 0;
    max-width: 430px;
}

body.discoverHome #discover .innerIntro h1.mainTitle {
    color: #f2f2f1;
    font-size: 27px;
    line-height: 1.28;
    margin-bottom: 25px;
    max-width: 410px;
}

body.discoverHome #discover .innerIntro p {
    color: #aaa;
}

body.discoverHome #discover .features {
    padding-left: 58px;
}

body.discoverHome .discoverCta {
    display: inline-flex;
    align-items: stretch;
    margin-top: 23px;
    background: #d0a068;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'open_sansbold', Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.15px;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18);
    transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

body.discoverHome .discoverCta span {
    display: block;
    padding: 0 18px;
    line-height: 46px;
    white-space: nowrap;
}

body.discoverHome .discoverCta i {
    display: block;
    width: 46px;
    line-height: 46px;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 16px;
}

body.discoverHome .discoverCta:hover {
    background: #bd8b4a;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.24);
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    body.discoverHome #discover .innerIntro {
        max-width: 330px;
    }

    body.discoverHome #discover .innerIntro h1.mainTitle {
        font-size: 23px;
    }

    body.discoverHome #discover .features {
        padding-left: 40px;
    }

    body.discoverHome .discoverCta span {
        padding: 0 13px;
        font-size: 11px;
    }
}

@media only screen and (max-width: 767px) {
    body.discoverHome header .mainHeader,
    body.discoverHome header .mainHeader.switchedHeader {
        background: rgba(24, 24, 24, 0.97) !important;
    }

    body.discoverHome header .mobileBtn {
        background: #2d2d2d;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
    }

    body.discoverHome header nav#mainNav ul {
        padding-top: 4px;
    }

    body.discoverHome header nav#mainNav li a {
        color: #f2f2f1 !important;
        padding: 6px 0;
    }

    body.discoverHome #discover .intro,
    body.discoverHome #discover .features {
        padding-top: 55px;
        padding-bottom: 45px;
    }

    body.discoverHome #discover .innerIntro {
        max-width: none;
        margin-bottom: 0;
    }

    body.discoverHome #discover .innerIntro h1.mainTitle {
        font-size: 24px;
        max-width: none;
    }

    body.discoverHome #discover .features {
        padding-left: 35px;
        padding-top: 20px;
    }

    body.discoverHome .discoverCta {
        margin-top: 18px;
    }
}

@media only screen and (max-width: 479px) {
    body.discoverHome .discoverCta {
        display: flex;
        width: 100%;
    }

    body.discoverHome .discoverCta span {
        flex: 1 1 auto;
        padding: 0 10px;
        text-align: center;
        white-space: normal;
        line-height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 50px;
    }

    body.discoverHome .discoverCta i {
        flex: 0 0 50px;
        width: 50px;
        line-height: 50px;
    }
}