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


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

.zi-contact-hero {
    padding-block: var(--zi-space-12);
    background: var(--zi-color-primary);
    color: var(--zi-color-white);
}

.zi-contact-hero-content {
    max-width: var(--zi-content-width-medium);
}

.zi-contact-hero .zi-section-label {
    color: var(--zi-color-secondary);
}

.zi-contact-hero h1 {
    margin: 0 0 var(--zi-space-5);
    color: var(--zi-color-white);
    font-family: var(--zi-font-heading);
    font-size: var(--zi-font-3xl);
    line-height: var(--zi-line-height-tight);
}

    .zi-contact-hero h1 span {
        display: block;
        color: var(--zi-color-secondary);
    }

.zi-contact-hero p {
    max-width: 680px;
    margin: 0;
    color: var(--zi-white-muted);
    font-size: var(--zi-font-md);
    line-height: var(--zi-line-height-relaxed);
}


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

.zi-contact-info {
    background: var(--zi-color-cream);
}

.zi-contact-heading {
    max-width: var(--zi-content-width-medium);
    margin-bottom: var(--zi-space-10);
}

    .zi-contact-heading h2 {
        margin: 0 0 var(--zi-space-5);
        color: var(--zi-color-primary-dark);
        font-family: var(--zi-font-heading);
        font-size: var(--zi-font-3xl);
        line-height: var(--zi-line-height-tight);
    }

        .zi-contact-heading h2 span {
            display: block;
            color: var(--zi-color-primary);
        }

    .zi-contact-heading p {
        margin: 0;
        color: var(--zi-color-text-light);
        line-height: var(--zi-line-height-relaxed);
    }


/* =========================================================
   CONTACT INFORMATION CARDS
========================================================= */

.zi-contact-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--zi-space-4);
}

.zi-contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: var(--zi-space-4);
    padding: var(--zi-space-5);
    background: var(--zi-color-white);
    border: var(--zi-border-thin) solid var(--zi-color-border);
    border-radius: var(--zi-radius-medium);
    box-shadow: var(--zi-shadow-sm);
    transition: transform var(--zi-transition-normal), box-shadow var(--zi-transition-normal);
}

    .zi-contact-info-card:hover {
        transform: var(--zi-hover-lift);
        box-shadow: var(--zi-shadow-md);
    }

.zi-contact-info-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--zi-icon-button-size);
    height: var(--zi-icon-button-size);
    border-radius: var(--zi-radius-round);
    background: var(--zi-color-primary);
    color: var(--zi-color-secondary);
}

    .zi-contact-info-icon i {
        font-size: var(--zi-font-md);
    }

.zi-contact-info-content {
    display: flex;
    flex-direction: column;
}

    .zi-contact-info-content h3 {
        margin: 0 0 var(--zi-space-2);
        color: var(--zi-color-primary-dark);
        font-size: var(--zi-font-md);
    }

    .zi-contact-info-content p {
        margin: 0;
        color: var(--zi-color-text);
        font-size: var(--zi-font-sm);
        line-height: var(--zi-line-height-normal);
    }

        .zi-contact-info-content p a {
            color: var(--zi-color-primary);
            text-decoration: none;
        }

            .zi-contact-info-content p a:hover {
                color: var(--zi-color-primary-dark);
                text-decoration: underline;
            }

    .zi-contact-info-content span {
        margin-top: var(--zi-space-2);
        color: var(--zi-color-text-light);
        font-size: var(--zi-font-xs);
    }


/* =========================================================
   CONTACT MAIN
========================================================= */

.zi-contact-main {
    padding-block: var(--zi-space-16);
    background: var(--zi-color-white);
}

.zi-contact-main-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--zi-space-12);
}


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

.zi-contact-form-column {
    width: 100%;
}

    .zi-contact-form-column h2 {
        margin: 0 0 var(--zi-space-4);
        color: var(--zi-color-primary-dark);
        font-family: var(--zi-font-heading);
        font-size: var(--zi-font-3xl);
        line-height: var(--zi-line-height-tight);
    }

        .zi-contact-form-column h2 span {
            display: block;
            color: var(--zi-color-primary);
        }

.zi-contact-form-intro {
    max-width: 600px;
    margin: 0 0 var(--zi-space-8);
    color: var(--zi-color-text-light);
    line-height: var(--zi-line-height-relaxed);
}


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

.zi-contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--zi-space-5);
}

.zi-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--zi-space-2);
}

    .zi-form-group label {
        color: var(--zi-color-primary-dark);
        font-size: var(--zi-font-sm);
        font-weight: 600;
    }

        .zi-form-group label span {
            color: var(--zi-color-secondary-dark);
        }

    .zi-form-group input,
    .zi-form-group select,
    .zi-form-group textarea {
        width: 100%;
        padding: 0.9rem 1rem;
        border: var(--zi-border-thin) solid var(--zi-color-border);
        border-radius: var(--zi-radius-sm);
        background: var(--zi-color-white);
        color: var(--zi-color-text);
        font-family: var(--zi-font-primary);
        font-size: var(--zi-font-sm);
        line-height: var(--zi-line-height-normal);
        outline: none;
        transition: border-color var(--zi-transition-fast), box-shadow var(--zi-transition-fast);
    }

    .zi-form-group input,
    .zi-form-group select {
        min-height: 48px;
    }

    .zi-form-group textarea {
        min-height: 150px;
        resize: vertical;
    }

        .zi-form-group input::placeholder,
        .zi-form-group textarea::placeholder {
            color: var(--zi-color-text-light);
            opacity: 0.75;
        }

        .zi-form-group input:focus,
        .zi-form-group select:focus,
        .zi-form-group textarea:focus {
            border-color: var(--zi-color-primary);
            box-shadow: 0 0 0 3px rgba(7, 88, 63, 0.12);
        }

.zi-contact-submit {
    align-self: flex-start;
    margin-top: var(--zi-space-2);
}


/* =========================================================
   MAP COLUMN
========================================================= */

.zi-contact-map-column {
    width: 100%;
}

.zi-contact-map-card {
    overflow: hidden;
    border: var(--zi-border-thin) solid var(--zi-color-border);
    border-radius: var(--zi-radius-large);
    background: var(--zi-color-cream);
    box-shadow: var(--zi-shadow-sm);
}

.zi-contact-map-header {
    padding: var(--zi-space-8);
}

    .zi-contact-map-header h2 {
        margin: 0 0 var(--zi-space-4);
        color: var(--zi-color-primary-dark);
        font-family: var(--zi-font-heading);
        font-size: var(--zi-font-2xl);
        line-height: var(--zi-line-height-tight);
    }

        .zi-contact-map-header h2 span {
            display: block;
            color: var(--zi-color-primary);
        }

    .zi-contact-map-header p {
        margin: 0;
        color: var(--zi-color-text-light);
        font-size: var(--zi-font-sm);
        line-height: var(--zi-line-height-relaxed);
    }


/* =========================================================
   MAP PLACEHOLDER
========================================================= */

.zi-map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: var(--zi-space-8);
    background: var(--zi-color-cream-dark);
    text-align: center;
}

.zi-map-placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--zi-space-4);
    border-radius: var(--zi-radius-round);
    background: var(--zi-color-primary);
    color: var(--zi-color-secondary);
}

    .zi-map-placeholder-icon i {
        font-size: var(--zi-font-xl);
    }

.zi-map-placeholder h3 {
    margin: 0 0 var(--zi-space-3);
    color: var(--zi-color-primary-dark);
    font-size: var(--zi-font-lg);
}

.zi-map-placeholder p {
    margin: 0 0 var(--zi-space-5);
    color: var(--zi-color-text-light);
    font-size: var(--zi-font-sm);
    line-height: var(--zi-line-height-relaxed);
}

.zi-map-link {
    display: inline-flex;
    align-items: center;
    gap: var(--zi-space-2);
    color: var(--zi-color-primary);
    font-size: var(--zi-font-sm);
    font-weight: 600;
    text-decoration: none;
}

    .zi-map-link:hover {
        color: var(--zi-color-primary-dark);
    }

    .zi-map-link i {
        font-size: var(--zi-font-xs);
    }


/* =========================================================
   LOCATION NOTE
========================================================= */

.zi-contact-location-note {
    display: flex;
    align-items: flex-start;
    gap: var(--zi-space-3);
    padding: var(--zi-space-5);
    border-top: var(--zi-border-thin) solid var(--zi-color-border);
    background: var(--zi-color-white);
}

    .zi-contact-location-note i {
        flex-shrink: 0;
        margin-top: var(--zi-space-1);
        color: var(--zi-color-secondary-dark);
    }

    .zi-contact-location-note p {
        margin: 0;
        color: var(--zi-color-text-light);
        font-size: var(--zi-font-xs);
        line-height: var(--zi-line-height-normal);
    }


/* =========================================================
   ADMISSION CTA
========================================================= */

.zi-contact-cta {
    padding-block: var(--zi-space-12);
    background: var(--zi-color-primary-dark);
    color: var(--zi-color-white);
}

.zi-contact-cta-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--zi-space-8);
}

.zi-contact-cta-content {
    max-width: 720px;
}

.zi-contact-cta .zi-section-label {
    color: var(--zi-color-secondary);
}

.zi-contact-cta h2 {
    margin: 0 0 var(--zi-space-4);
    color: var(--zi-color-white);
    font-family: var(--zi-font-heading);
    font-size: var(--zi-font-2xl);
    line-height: var(--zi-line-height-tight);
}

    .zi-contact-cta h2 span {
        color: var(--zi-color-secondary);
    }

.zi-contact-cta p {
    margin: 0;
    color: var(--zi-white-muted);
    font-size: var(--zi-font-sm);
    line-height: var(--zi-line-height-relaxed);
}

.zi-contact-cta-action {
    display: flex;
    align-items: center;
}


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

@media (min-width: 600px) {

    .zi-contact-info-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .zi-contact-info-card {
        flex: 1 1 calc(50% - var(--zi-space-4));
    }

    .zi-contact-cta-wrapper {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 900px) {

    .zi-contact-hero {
        padding-block: var(--zi-space-16);
    }

        .zi-contact-hero h1 {
            font-size: var(--zi-font-4xl);
        }

    .zi-contact-info {
        padding-block: var(--zi-space-20);
    }

    .zi-contact-info-list {
        flex-wrap: nowrap;
    }

    .zi-contact-info-card {
        flex: 1 1 0;
    }

    .zi-contact-main {
        padding-block: var(--zi-space-20);
    }

    .zi-contact-main-wrapper {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--zi-space-12);
    }

    .zi-contact-form-column {
        flex: 1 1 55%;
    }

    .zi-contact-map-column {
        flex: 1 1 45%;
    }

    .zi-contact-map-card {
        position: sticky;
        top: calc(var(--zi-header-height) + var(--zi-space-5));
    }

    .zi-contact-cta {
        padding-block: var(--zi-space-16);
    }

        .zi-contact-cta h2 {
            font-size: var(--zi-font-3xl);
        }
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .zi-contact-main-wrapper {
        gap: var(--zi-space-16);
    }
}