/* =========================================================
   WBU VISIT LANDING
   ========================================================= */


/* ---------------------------------------------------------
   Remove the intentionally empty standard content shell.
   The Visit Landing Configuration leaves all three content
   regions empty.
   --------------------------------------------------------- */

#content {
    display: none;
}


/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.wbu-visit-hero {
    position: relative;

    width: 100%;
    height: calc(100vh - 176px);
    min-height: 650px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background-color: #00275a;
}


/* ---------------------------------------------------------
   Responsive Picture / Photograph
   --------------------------------------------------------- */

.wbu-visit-hero__picture {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
}


.wbu-visit-hero__image {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;
    object-position: center center;
}


/* =========================================================
   VISIT OPTIONS
   ========================================================= */

.wbu-visit-options {
    position: absolute;
    z-index: 2;

    left: 4%;
    bottom: 9%;

    width: 46%;
    max-width: 660px;

    padding: 28px 30px 24px;

    background-color: rgba(255, 255, 255, 0.96);

    border-radius: 4px;

    box-shadow: 0 18px 50px rgba(0, 39, 90, 0.18);
}


/* ---------------------------------------------------------
   Intro
   --------------------------------------------------------- */

.wbu-visit-options__intro {
    position: relative;

    margin-bottom: 18px;
    padding-bottom: 18px;

    border-bottom: 1px solid #c3ccd7;
}


.wbu-visit-options__eyebrow {
    display: block;

    margin-bottom: 5px;

    color: #084a8e;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.wbu-visit-options__heading {
    color: #00275a;

    font-family: "serifa", Georgia, serif;
    font-size: 3.8rem;
    font-weight: 700;
    line-height: 1.05;
}


/* Gold detail */

.wbu-visit-options__intro:before {
    content: "";

    position: absolute;

    top: 0;
    left: -30px;

    width: 5px;
    height: 100%;

    background-color: #eec301;
}


/* ---------------------------------------------------------
   Links
   --------------------------------------------------------- */

.wbu-visit-options__list {
    margin: 0;
    padding: 0;

    list-style: none;
}


.wbu-visit-options__list li {
    margin: 0;
    padding: 0;
}


.wbu-visit-options__list li + li {
    border-top: 1px solid #c3ccd7;
}


.wbu-visit-options__list a,
.wbu-visit-options__list a:visited {
    display: flex;
    align-items: center;

    min-height: 64px;

    padding: 11px 4px;

    color: #00275a;

    text-decoration: none;

    transition:
        color 0.2s ease,
        padding-left 0.2s ease;
}


.wbu-visit-options__number {
    flex: 0 0 42px;

    color: #797d81;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.3rem;
    font-weight: 700;

    letter-spacing: 0.05em;
}


.wbu-visit-options__label {
    flex: 1;

    padding-right: 20px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
}


.wbu-visit-options__arrow {
    flex: 0 0 auto;

    color: #084a8e;

    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1;

    transition:
        transform 0.2s ease,
        color 0.2s ease;
}


/* ---------------------------------------------------------
   Hover / Focus
   --------------------------------------------------------- */

.wbu-visit-options__list a:hover,
.wbu-visit-options__list a:focus {
    padding-left: 10px;

    color: #084a8e;
}


.wbu-visit-options__list a:hover .wbu-visit-options__number,
.wbu-visit-options__list a:focus .wbu-visit-options__number {
    color: #084a8e;
}


.wbu-visit-options__list a:hover .wbu-visit-options__arrow,
.wbu-visit-options__list a:focus .wbu-visit-options__arrow {
    color: #eec301;

    transform: translateX(5px);
}


.wbu-visit-options__list a:focus-visible {
    outline: 3px solid #eec301;
    outline-offset: 4px;
}


/* =========================================================
   TABLET
   ========================================================= */

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

    .wbu-visit-hero {
        height: calc(100vh - 132px);
        min-height: 620px;
    }


    .wbu-visit-options {
        left: 30px;
        bottom: 35px;

        width: 58%;
        max-width: 590px;

        padding: 24px 26px 20px;
    }


    .wbu-visit-options__intro:before {
        left: -26px;
    }


    .wbu-visit-options__heading {
        font-size: 3.2rem;
    }


    .wbu-visit-options__label {
        font-size: 1.8rem;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

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

    .wbu-visit-hero {
        height: calc(100vh - 132px);
        min-height: 700px;

        background-color: #00275a;
    }


    /*
     * Mobile receives the portrait-specific image through the
     * <picture> element in the Visit Hero Format.
     *
     * Because the artwork was composed specifically for mobile,
     * we can return to object-fit: cover without cutting off
     * the VISIT US treatment.
     */
    .wbu-visit-hero__picture {
        width: 100%;
        height: 100%;
    }


    .wbu-visit-hero__image {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: 53% center;
    }


    .wbu-visit-options {
        left: 18px;
        right: 18px;
        bottom: 20px;

        width: auto;
        max-width: none;

        padding: 21px 20px 16px;
    }


    .wbu-visit-options__intro {
        margin-bottom: 10px;
        padding-bottom: 14px;
    }


    .wbu-visit-options__intro:before {
        left: -20px;
    }


    .wbu-visit-options__eyebrow {
        font-size: 1.2rem;
    }


    .wbu-visit-options__heading {
        font-size: 2.7rem;
    }


    .wbu-visit-options__list a,
    .wbu-visit-options__list a:visited {
        min-height: 55px;

        padding-top: 9px;
        padding-bottom: 9px;
    }


    .wbu-visit-options__number {
        flex-basis: 34px;

        font-size: 1.1rem;
    }


    .wbu-visit-options__label {
        padding-right: 10px;

        font-size: 1.6rem;
    }


    .wbu-visit-options__arrow {
        font-size: 2rem;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

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

    .wbu-visit-options {
        left: 14px;
        right: 14px;
        bottom: 16px;

        padding: 18px 17px 14px;
    }


    .wbu-visit-options__intro:before {
        left: -17px;
    }


    .wbu-visit-options__heading {
        font-size: 2.5rem;
    }


    .wbu-visit-options__label {
        font-size: 1.5rem;
    }


    .wbu-visit-options__number {
        flex-basis: 31px;
    }
}