
/* ------------------------------------------------------------------------------ */
/* Pre-Header Section */
/* ------------------------------------------------------------------------------ */

@media (max-width: 1023px) {
    #pre-header .quick-contacts .item .text.ph-lrg {
        display: none;
    }
}

@media (min-width: 1024px) {
    #pre-header .quick-contacts .item .text.ph-sml {
        display: none;
    }
}

/* ------------------------------------------------------------------------------ */
/* Home Hero Section */
/* ------------------------------------------------------------------------------ */

#home-hero.hero-block {
    height: clamp(450px, 46vw, 650px);
}

    @media (max-width: 1023px) {
        #home-hero.hero-block::after {
            background-color: rgba(33, 54, 108, 0.65);
        }
    }

    #home-hero.hero-block .item-txt .item-title .main {
        font-size: clamp(2.4rem, calc(1.4375rem + 3.1667vw), 4.4rem);
    }

    #home-hero.hero-block .item-txt {
        width: auto;
        text-align: left;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    @media (min-width: 1024px) {

        #home-hero.hero-block .item-txt {
            left: clamp(250px, 25vw, 475px);
        }
    }

#home-hero.hero-block img {
    object-position: 12%;
}


/* ------------------------------------------------------------------------------ */
/* Two Column Block */
/* ------------------------------------------------------------------------------ */

@media (min-width: 1024px) {
    .block.two-column-block > .container {
        max-width: var(--block-container-max-width-xl);
    }
}

.block.two-column-block > .container {
    margin-left: auto;
    margin-right: auto;
}

.block.two-column-block .two-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 5rem);
}

@media(min-width: 1024px) {
    .block.two-column-block .two-columns {
        grid-template-columns: 1fr 1fr;
    }
}

/* ------------------------------------------------------------------------------ */
/* Two Column Block - Contact Form + Location Map */
/* ------------------------------------------------------------------------------ */

#form-and-map-widget.block.two-column-block {
    padding: 0;
    margin: 0;
}

#form-and-map-widget.block.two-column-block .two-columns {
    gap: 0;
}

@media (min-width: 1024px) {

    #form-and-map-widget.block.two-column-block .two-columns {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1200px) {

    #form-and-map-widget.block.two-column-block > .container {
        max-width: 100%;
    }

    #form-and-map-widget.block.two-column-block .two-columns {
        grid-template-columns: 1fr 1fr;
    }

    #form-and-map-widget.block.two-column-block .two-columns .column-one {
        container-type: inline-size;
    }

    #form-and-map-widget.block.two-column-block .two-columns .block {
        margin: clamp(3rem, 8.5cqi, 5rem);
    }

    #form-and-map-widget.block.two-column-block .two-columns .block:is(.block-clr-1, .block-clr-2, .block-clr-3, .block-clr-4, .block-clr-5, .block-clr-6) {
        margin: 0;
        padding: clamp(3rem, 8.5cqi, 5rem);
    }
 
        
    /* If the left column is taller, then make the location map the same height. */
    /*#form-and-map-widget.block.two-column-block .two-columns .column-two,
    #form-and-map-widget.block.two-column-block .two-columns .column-two .map-block,
    #form-and-map-widget.block.two-column-block .two-columns .column-two .map-block > .container {
        display: flex;
        flex-direction: column;
    }

    #form-and-map-widget.block.two-column-block .two-columns .column-two .map-block,
    #form-and-map-widget.block.two-column-block .two-columns .column-two .map-block > .container,
    #form-and-map-widget.block.two-column-block .two-columns .column-two .map-block .location-map {
        flex-grow: 1;
    }*/

    #form-and-map-widget.block.two-column-block .two-columns .column-two {

        &, & .map-block, & .map-block > .container {
            display: flex;
            flex-direction: column;
        }

        & .map-block, & .map-block > .container, & .location-map {
            flex-grow: 1;
        }
    }
}

/* ------------------------------------------------------------------------------ */
/* This is for the form in the #contact-cards block but probably works wherever the form ends up. */
/* ------------------------------------------------------------------------------ */

.form-block .form-wrapper {
    container-type: inline-size;
}

    .form-block .form-wrapper .ctrl-wrapper label {
        font-size: clamp(0.8em, 5cqi, 1em);
        padding: clamp(1rem, 3.5cqi, 1.4rem) 0;
    }

/* ------------------------------------------------------------------------------ */
/* Embedded Current Studies Block */
/* ------------------------------------------------------------------------------ */

#current-studies.embed-block .embed-wrapper h1 {
    font-size: 2rem;
}

#current-studies.embed-block .embed-wrapper h2 {
    font-size: 1.6rem;
}

#current-studies.embed-block input {
    width: 100%;
}

