   /* =========================================================
   星空无限传媒app PIANO STUDIES
   CONTACT & FACULTY PAGE 
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

#container_one {
    --purple: #663399;
    --purple-dark: #4f2678;
    --purple-hover: #800080;

    --gold: #B8860B;
    --yellow: #ffcc00;

    --border: #d8d9da;
    --soft-border: #ddd7e5;

    --light: #faf9fc;

    --text: #222222;
    --muted: #555555;

    width: 100%;
    margin: 0;
    padding: 0;

    background: #ffffff;
    color: var(--text);

    font-family:
        "Open Sans",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 1.1rem;
    line-height: 1.6;
}


/* =========================================================
   BOX SIZING
   ========================================================= */

#container_one,
#container_one *,
#container_one *::before,
#container_one *::after {
    box-sizing: border-box;
}


/* =========================================================
   IMAGES
   ========================================================= */

#container_one img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   LINKS
   ========================================================= */

#container_one a {
    color: var(--purple);
    font-weight: 700;
}

#container_one a:hover,
#container_one a:focus {
    color: var(--purple-hover);
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.contact-hero {
    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
}

.contact-hero img {
    display: block;

    width: 100%;
    max-width: none;

    height: auto;

    margin: 0;
    padding: 0;
}


/* =========================================================
   HERO TITLE
   ========================================================= */

.contact-hero-title {
    width: 100%;

    margin: 0;
    padding: 18px 20px 17px;

    background: #ffffff;

    border-bottom: 2px solid var(--gold);

    color: var(--purple);

    text-align: center;

    font-family:
        Lato,
        "Open Sans",
        Arial,
        Helvetica,
        sans-serif;

    font-size: clamp(1.8rem, 3.5vw, 2.8rem);

    font-weight: 300;

    line-height: 1.25;

    text-transform: uppercase;
}


/* =========================================================
   MAIN PAGE CONTENT
   ========================================================= */

.contact-page {
    width: 100%;
    max-width: 1450px;

    margin: 0 auto;

    padding: 40px 30px 60px;
}


/* =========================================================
   SECTION TITLES
   ========================================================= */

.section-title {
    margin: 0 0 25px;
    padding: 0 0 9px;

    border-bottom: 2px solid var(--gold);

    color: var(--purple);

    font-family:
        Lato,
        "Open Sans",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 1.5rem;
    font-weight: 800;

    line-height: 1.35;
}


/* =========================================================
   CONTACT SECTION
   ========================================================= */

.contact-section {
    width: 100%;

    margin: 0 0 50px;
}


/* =========================================================
   CONTACT INFORMATION CONTAINER
   Natalie LEFT
   Application / Audition RIGHT
   ========================================================= */

.contact-container {
    display: grid;

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

    gap: 0;

    width: 100%;

    border: 1px solid var(--border);

    background: #ffffff;
}


/* =========================================================
   NATALIE CONTACT INFORMATION
   ========================================================= */

.contact-person {
    min-width: 0;

    padding: 30px 32px;

    background: #ffffff;

    border-right: 1px solid var(--border);
}


/* Natalie name */

.contact-name {
    margin: 0 0 6px;

    color: var(--purple);

    font-family:
        Lato,
        "Open Sans",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 1.45rem;
    font-weight: 800;

    line-height: 1.3;
}


/* Natalie position */

.contact-position {
    margin: 0 0 18px;

    color: #333333;

    font-size: 1.1rem;
    font-weight: 700;

    line-height: 1.45;
}


/* Address */

.contact-address {
    margin: 0 0 22px;

    font-size: 1.1rem;

    line-height: 1.55;
}


/* Phone and email */

.contact-item {
    margin: 0 0 12px;

    font-size: 1.1rem;

    line-height: 1.5;
}

.contact-item:last-child {
    margin-bottom: 0;
}


/* Phone / Email labels */

.contact-label {
    display: inline-block;

    min-width: 65px;

    margin-right: 8px;

    color: var(--purple);

    font-size: 0.82rem;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}


/* =========================================================
   APPLICATION / AUDITION
   ========================================================= */

.audition-container {
    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding: 30px 32px;

    background: var(--light);
}


/* Audition title */

.subsection-title {
    margin: 0 0 9px;

    color: var(--purple);

    font-family:
        Lato,
        "Open Sans",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 1.3rem;

    font-weight: 800;

    line-height: 1.35;
}


/* Audition description */

.audition-container p {
    margin: 0 0 22px;

    font-size: 1.1rem;

    line-height: 1.55;
}


/* =========================================================
   AUDITION BUTTON
   ========================================================= */

.contact-button {
    display: inline-flex;

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

    align-self: flex-start;

    min-height: 48px;

    margin: 0;
    padding: 9px 19px;

    background: var(--purple);

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

    color: var(--yellow) !important;

    text-decoration: none !important;

    font-size: 1.2rem;

    font-weight: 800;

    line-height: 1.25;

    white-space: nowrap;
}

.contact-button:hover,
.contact-button:focus {
    background: var(--purple-dark);

    color: #ffffff !important;
}


/* =========================================================
   FACULTY SECTION
   ========================================================= */

.faculty-section {
    width: 100%;

    margin: 0;
}


/* =========================================================
   FACULTY GRID
   ========================================================= */

.faculty-grid {
    display: grid;

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

    gap: 25px;

    align-items: stretch;

    width: 100%;
}


/* =========================================================
   FACULTY CARD
   ========================================================= */

.faculty-card {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
    height: 100%;

    margin: 0;

    background: #ffffff;

    border: 1px solid var(--border);
}


/* =========================================================
   FACULTY PHOTO AREA
   ========================================================= */

.faculty-photo-area {
    display: flex;

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

    width: 100%;
    height: 225px;

    padding: 15px;

    background: var(--light);

    border-bottom: 1px solid var(--border);
}


/* =========================================================
   FACULTY PHOTO
   ALL THREE ARE EXACTLY 150 x 190
   ========================================================= */

.faculty-photo {
    display: block;

    width: 150px !important;
    height: 190px !important;

    min-width: 150px;
    min-height: 190px;

    max-width: 150px !important;
    max-height: 190px !important;

    margin: 0;
    padding: 0;

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

    border: 1px solid #cccccc;
}


/* =========================================================
   FACULTY CONTENT
   ========================================================= */

.faculty-content {
    display: flex;
    flex-direction: column;

    flex: 1;

    width: 100%;
    min-width: 0;

    padding: 22px 22px 24px;
}


/* =========================================================
   FACULTY NAME
   ========================================================= */

.faculty-name {
    margin: 0 0 8px;

    color: var(--purple);

    font-family:
        Lato,
        "Open Sans",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 1.3rem;

    font-weight: 800;

    line-height: 1.35;
}


/* =========================================================
   FACULTY POSITION
   ========================================================= */

.faculty-position {
    min-height: 58px;

    margin: 0 0 20px;

    color: #333333;

    font-size: 1.1rem;

    font-weight: 700;

    line-height: 1.45;
}


/* =========================================================
   FACULTY DETAILS
   ========================================================= */

.faculty-details {
    width: 100%;

    margin: 0;

    padding: 17px 0 0;

    border-top: 1px solid var(--border);
}


/* Individual information item */

.faculty-detail {
    margin: 0 0 18px;

    font-size: 1.1rem;

    line-height: 1.5;

    overflow-wrap: anywhere;
}

.faculty-detail:last-child {
    margin-bottom: 0;
}


/* =========================================================
   EMAIL / OFFICE LABEL
   1.3rem AS REQUESTED
   ========================================================= */

.faculty-detail span {
    display: block;

    margin: 0 0 4px;

    color: var(--purple);

    font-size: 1.3rem;

    font-weight: 800;

    line-height: 1.25;

    text-transform: uppercase;

    letter-spacing: 0.02em;
}


/* Email links */

.faculty-detail a {
    font-size: 1.1rem;

    overflow-wrap: anywhere;
}


/* =========================================================
   FACULTY PROFILE BUTTON
   ========================================================= */

.faculty-profile {
    display: inline-flex;

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

    align-self: flex-start;

    min-height: 50px;

    /*
       Extra space between the
       faculty information and button.
    */
    margin-top: 28px;

    padding: 9px 18px;

    background: var(--purple);

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

    color: var(--yellow) !important;

    text-decoration: none !important;

    font-size: 1.2rem;

    font-weight: 800;

    line-height: 1.25;

    white-space: nowrap;
}


.faculty-profile:hover,
.faculty-profile:focus {
    background: var(--purple-dark);

    color: #ffffff !important;
}


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

@media (max-width: 1100px) {

    .contact-page {
        padding-left: 25px;
        padding-right: 25px;
    }


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


    .faculty-card:last-child {
        grid-column: 1 / -1;

        width: calc(50% - 12.5px);

        justify-self: center;
    }
}


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

@media (max-width: 850px) {

    .contact-container {
        grid-template-columns: 1fr;
    }


    .contact-person {
        border-right: none;

        border-bottom: 1px solid var(--border);
    }


    .audition-container {
        padding-top: 27px;
        padding-bottom: 27px;
    }
}


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

@media (max-width: 650px) {

    #container_one {
        font-size: 1.05rem;
    }


    .contact-page {
        padding: 30px 15px 45px;
    }


    /* Hero title */

    .contact-hero-title {
        padding: 15px;

        font-size: 1.75rem;
    }


    /* Section title */

    .section-title {
        font-size: 1.35rem;
    }


    /* Contact container */

    .contact-person,
    .audition-container {
        padding: 22px;
    }


    .contact-name {
        font-size: 1.3rem;
    }


    .contact-position,
    .contact-address,
    .contact-item {
        font-size: 1.05rem;
    }


    /* Audition */

    .audition-container p {
        font-size: 1.05rem;
    }


    .contact-button {
        width: 100%;

        min-height: 50px;

        font-size: 1.2rem;
    }


    /* Faculty */

    .faculty-grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    .faculty-card:last-child {
        grid-column: auto;

        width: 100%;
    }


    /* Faculty photo */

    .faculty-photo-area {
        height: 215px;

        padding: 12px;
    }


    .faculty-photo {
        width: 140px !important;
        height: 180px !important;

        min-width: 140px;
        min-height: 180px;

        max-width: 140px !important;
        max-height: 180px !important;
    }


    /* Faculty content */

    .faculty-content {
        padding: 20px;
    }


    .faculty-name {
        font-size: 1.25rem;
    }


    .faculty-position {
        min-height: auto;

        font-size: 1.05rem;
    }


    /* Email / Office */

    .faculty-detail span {
        font-size: 1.2rem;
    }


    .faculty-detail,
    .faculty-detail a {
        font-size: 1.05rem;
    }


    /* Faculty button */

    .faculty-profile {
        width: 100%;

        min-height: 50px;

        margin-top: 28px;

        font-size: 1.2rem;
    }
}


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

@media (max-width: 400px) {

    .contact-page {
        padding-left: 12px;
        padding-right: 12px;
    }


    .contact-hero-title {
        font-size: 1.55rem;
    }


    .faculty-photo {
        width: 130px !important;
        height: 170px !important;

        min-width: 130px;
        min-height: 170px;

        max-width: 130px !important;
        max-height: 170px !important;
    }


    .faculty-detail span {
        font-size: 1.15rem;
    }


    .faculty-profile {
        font-size: 1.15rem;
    }
}