/*
============================================================
CONTACT PAGE STYLES
============================================================

File:
    contact.css

Purpose:
    Contains styles used specifically by the Contact page.

Shared styles such as the header, navigation menu, container,
footer, design variables, and accessibility rules remain in
global.css.
*/


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

Controls the primary spacing around the Contact page.
*/

.contact-section {
    padding: 2rem 0 4rem;
}


/*
============================================================
CONTACT HEADING
============================================================

Controls the introductory content displayed above the contact
cards.
*/

.contact-heading {
    max-width: 760px;

    margin-bottom: 2rem;
}


/*
============================================================
CONTACT TITLE
============================================================
*/

.contact-heading h2 {
    margin-bottom: 1rem;

    font-size: clamp(2rem, 5vw, 3.5rem);

    line-height: 1.08;
    letter-spacing: -0.04em;

    color: var(--text-primary);
}


/*
============================================================
CONTACT INTRODUCTION
============================================================

Provides a short description of the types of opportunities
currently being considered.
*/

.contact-introduction {
    max-width: 700px;

    color: var(--text-secondary);

    font-size: 1.05rem;
    line-height: 1.75;
}


/*
============================================================
CONTACT GRID
============================================================

Displays contact information in two columns on larger
screens.

The responsive rules below convert the layout to one column
on smaller displays.
*/

.contact-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1.25rem;
}


/*
============================================================
CONTACT CARD
============================================================

Shared appearance for all contact information cards.
*/

.contact-card {
    min-height: 190px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 1.75rem;

    background-color: var(--surface-color);

    border: 1px solid var(--border-color);
    border-top: 5px solid var(--contact-color);

    border-radius: var(--border-radius);

    box-shadow:
        0 4px 15px rgba(23, 32, 51, 0.05);
}


/*
============================================================
CLICKABLE CONTACT CARDS
============================================================

Only cards that navigate somewhere receive hover effects.

The Location & Availability card remains stationary because
it is informational rather than interactive.
*/

.contact-card-link {
    cursor: pointer;

    transition:
        transform var(--transition-speed) ease,
        border-color var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}


/*
Raise clickable cards slightly when hovered.
*/

.contact-card-link:hover {
    transform: translateY(-5px);

    border-color: var(--contact-color);

    box-shadow:
        0 14px 30px rgba(23, 32, 51, 0.11);
}


/*
============================================================
CONTACT CARD LABEL
============================================================

Small uppercase label identifying the type of contact
information contained in each card.
*/

.contact-card-label {
    margin-bottom: 0.6rem;

    color: var(--contact-color);

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

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


/*
============================================================
CONTACT CARD HEADING
============================================================
*/

.contact-card h3 {
    margin-bottom: 0.75rem;

    color: var(--text-primary);

    font-size: 1.3rem;
    line-height: 1.3;

    overflow-wrap: anywhere;
}


/*
============================================================
CONTACT CARD DESCRIPTION
============================================================
*/

.contact-card-description {
    max-width: 400px;

    color: var(--text-secondary);

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


/*
============================================================
CONTACT ARROW
============================================================

Provides a visual indication that a contact card is
clickable.
*/

.contact-arrow {
    align-self: flex-end;

    margin-top: 1rem;

    color: var(--contact-color);

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

    transition:
        transform var(--transition-speed) ease;
}


/*
Move the arrow slightly toward the right when its card is
hovered.
*/

.contact-card-link:hover .contact-arrow {
    transform: translateX(6px);
}


/*
============================================================
RESPONSIVE DESIGN - MOBILE
============================================================

Converts the contact grid to one column and reduces spacing
on smaller displays.
*/

@media (max-width: 700px) {

    /*
    Reduce overall page spacing.
    */

    .contact-section {
        padding: 1.5rem 0 3rem;
    }


    /*
    Reduce spacing underneath the introduction.
    */

    .contact-heading {
        margin-bottom: 1.5rem;
    }


    /*
    Slightly reduce introductory text size.
    */

    .contact-introduction {
        font-size: 1rem;
        line-height: 1.65;
    }


    /*
    Convert the contact grid to one column.
    */

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

        gap: 1rem;
    }


    /*
    Reduce card dimensions on smaller displays.
    */

    .contact-card {
        min-height: 170px;

        padding: 1.4rem;
    }

}


/*
============================================================
REDUCED MOTION ACCESSIBILITY
============================================================

Disables Contact-specific movement for visitors who request
reduced motion through their operating system.
*/

@media (prefers-reduced-motion: reduce) {

    .contact-card-link,
    .contact-arrow {
        transition: none;
    }


    .contact-card-link:hover {
        transform: none;
    }


    .contact-card-link:hover .contact-arrow {
        transform: none;
    }

}