/*==================================================
CONTACT PAGE
Jessica Feldman
==================================================*/

/*==================================================
GENERAL
==================================================*/

.contact-section,
.begin-section{
    padding:90px 0;
}

.contact-ending{
    padding:30px 0;
}

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

.contact-hero{
    position:relative;
    height:500px;
    padding:0;
    overflow:hidden;
    background:var(--deep-teal);
}

.contact-hero img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.contact-hero .hero-panel{
    position:absolute;
    top:40px;
    left:40px;
    width:min(460px,88%);
    padding:30px 34px;
    border-radius:18px;
    background:rgba(248,248,238,.96);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    text-align:left;
    box-shadow:0 12px 40px rgba(0,0,0,.12);
}

.contact-hero .hero-panel h1,
.contact-hero .hero-panel h2{
    margin:0 0 12px;
    color:var(--deep-teal);
}

.contact-hero .hero-panel p{
    margin:0;
    color:var(--brown);
    line-height:1.8;
}

/*==================================================
WHERE SHALL WE BEGIN?
==================================================*/

.begin-section{
    background:
        linear-gradient(
            135deg,
            rgba(22,207,191,.07),
            rgba(162,34,130,.05)
        ),
        var(--cream);
}

.begin-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px;
    margin-top:60px;
}

.begin-card{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    box-shadow:var(--shadow);
}

.begin-card img{
    width:100%;
    height:380px;
    object-fit:cover;
}

.begin-overlay{
    position:absolute;
    left:20px;
    bottom:26px;
    width:72%;
    padding:16px 20px;
    border-top:5px solid var(--teal);
    border-radius:18px;
    background:rgba(248,248,238,.95);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.begin-card:nth-child(even) .begin-overlay{
    border-top-color:var(--magenta);
}

.begin-overlay h3{
    margin:0 0 8px;
    color:var(--deep-teal);
    line-height:1.2;
}

.begin-overlay p{
    margin:0;
    color:var(--brown);
    line-height:1.55;
}

.begin-overlay > span{
    display:block;
    margin-top:14px;
    color:var(--magenta);
    font-weight:600;
}

/*==================================================
TWO COLUMN LIST
==================================================*/

.two-column-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px 18px;
    margin:4px 0 0;
}

.two-column-list span{
    display:block;
    color:var(--brown);
    font-weight:400;
}

/*==================================================
PHOTO + CONTACT FORM
==================================================*/

.contact-section{
    background:var(--cream);
}

.contact-grid{
    display:grid;
    grid-template-columns:340px minmax(0,1fr);
    gap:80px;
    align-items:start;
}

/*==================================================
MEETING ROOM LINK
==================================================*/

.meeting-link{

    margin-top:28px;

    padding:22px 20px;

    background:rgba(22,207,191,.12);

    border-left:5px solid var(--teal);

    border-radius:12px;

}

.meeting-label{

    margin:0 0 7px;

    color:var(--brown);

    font-size:.9rem;

}

.meeting-room-link{

    color:var(--deep-teal);

    font-family:var(--heading-font);

    font-size:1.15rem;

    font-weight:500;

    text-decoration:none;

}

.meeting-room-link:hover{

    color:var(--magenta);

}

/*==================================================
PHOTO
==================================================*/

.contact-photo{
    padding:0;
    text-align:center;
}

.contact-photo img{
    width:100%;
    max-width:320px;
    margin:auto;
    border-radius:18px;
    box-shadow:var(--shadow);
}

.contact-details{
    margin-top:28px;
}

.contact-details p{
    margin:0 0 10px;
    color:var(--brown);
    line-height:1.8;
}

/*==================================================
FORM
==================================================*/

.contact-form-wrapper{
    display:flex;
    justify-content:center;
    align-items:flex-start;
}

.desk{
    width:100%;
    padding:50px;
    border-radius:18px;
    background:
        url("../images/contact/light-wood.jpg")
        center/cover no-repeat;
    box-shadow:var(--shadow);
}

.contact-form{
    width:100%;
    max-width:520px;
    margin:auto;
    padding:32px;
    border:1px solid rgba(19,96,94,.08);
    border-radius:10px;
    background:var(--cream);
    box-shadow:
        0 15px 30px rgba(0,0,0,.08),
        0 30px 60px rgba(0,0,0,.12);
    transform:rotate(-1.2deg);
}

.contact-form h2{
    margin-bottom:12px;
    color:var(--deep-teal);
    text-align:left;
}

.contact-form > p{
    margin-bottom:38px;
    color:var(--brown);
    line-height:1.75;
}

.contact-form form{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:14px 0;
    border:none;
    border-bottom:1px solid rgba(19,96,94,.22);
    border-radius:0;
    background:transparent;
    color:var(--brown);
    font-family:inherit;
    font-size:1rem;
    box-shadow:none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:rgba(77,59,52,.55);
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    border-bottom-color:var(--magenta);
    box-shadow:none;
}

.contact-form textarea{
    min-height:140px;
    resize:vertical;
}

.contact-form .button{
    align-self:flex-start;
    margin-top:10px;
}

/*==================================================
CONNECTION CALL
==================================================*/

.connection-call{
    margin-top:40px;
    padding-top:28px;
    border-top:3px solid rgba(22,207,191,.55);
}

.connection-call h3{
    margin-bottom:10px;
    color:var(--magenta);
}

.connection-call p{
    margin-bottom:12px;
    color:var(--brown);
    line-height:1.7;
}

.connection-call a{
    color:var(--deep-teal);
    font-weight:600;
    text-decoration:none;
    transition:var(--transition);
}

.connection-call a:hover{
    color:var(--magenta);
}

/*==================================================
ENDING
==================================================*/

.contact-ending{
    text-align:center;
    background:rgba(22,207,191,.08);
    border-top:1px solid rgba(19,96,94,.08);
}

.contact-ending p{
    margin:0;
    color:var(--deep-teal);
    font-family:var(--heading-font);
    font-size:1.3rem;
}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:900px){
    .begin-grid{
        grid-template-columns:1fr;
    }

    .contact-grid{
        grid-template-columns:1fr;
        gap:60px;
    }

    .contact-photo{
        max-width:320px;
        margin:auto;
    }

    .desk{
        width:min(700px,100%);
        margin:auto;
    }
}

@media(max-width:700px){
    .begin-section,
    .contact-section{
        padding:65px 0;
    }

    .contact-hero{
        height:auto;
        overflow:visible;
        background:var(--cream);
    }

    .contact-hero img{
        height:420px;
        object-fit:cover;
    }

    .contact-hero .hero-panel{
        position:relative;
        top:auto;
        left:auto;
        width:auto;
        margin:0;
        padding:24px 22px;
        border-radius:0;
        background:var(--cream);
        box-shadow:none;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }

    .begin-grid{
        gap:40px;
        margin-top:40px;
    }

    .begin-card{
        overflow:visible;
        background:var(--cream);
    }

    .begin-card img{
        height:250px;
        border-radius:22px 22px 0 0;
    }

    .begin-overlay{
        position:relative;
        left:auto;
        bottom:auto;
        width:auto;
        margin:0;
        padding:20px;
        border-radius:0 0 22px 22px;
        background:var(--cream);
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        box-shadow:none;
    }

    .two-column-list{
        grid-template-columns:1fr 1fr;
        gap:8px 16px;
    }

    .desk{
        padding:20px;
    }

    .contact-form{
        padding:24px 20px;
        transform:none;
    }

    .contact-ending{
        padding:45px 0 25px;
    }
}

@media(max-width:450px){
    .two-column-list{
        grid-template-columns:1fr;
    }

    .contact-hero img{
        height:350px;
    }

    .desk{
        padding:12px;
    }

    .contact-form{
        padding:22px 16px;
    }
}