/* =================================================================== CONTACT section css =================================================================== */
/* Contact page body: details column (intro, icon rows, enquiry types, quick links) split by a
   hairline from the enquiry column (section title + two-column form). */
.contact {
    & .contact__grid {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    & .contact__info {
        display: flex; flex-direction: column;
        gap: var(--sp25);
        padding-right: var(--sp70);
        border-right: 1px solid var(--line);
    }

    & .contact__form-col { padding-left: var(--sp70); }

    & .contact__title { font-size: var(--f30); }

    & .contact__subtitle { margin-top: var(--sp15); font-size: var(--f25); }

    & .contact__list {
        display: flex; flex-direction: column;
        gap: var(--sp20);
        list-style: none;
    }

    & .contact__item {
        display: flex; align-items: center;
        gap: var(--sp15);
    }

    & .contact__icon {
        display: flex; flex-shrink: 0; align-items: center; justify-content: center;
        width: 46px; height: 46px;
        background: var(--primary);
        border-radius: var(--r-full);
        color: var(--white);
    }

    & .contact__label { display: block; font-size: var(--f14); }

    & .contact__value {
        font-family: var(--font-mona);
        font-size: var(--f18);
        font-weight: 500;
        color: var(--ink);
        word-break: break-word;

        &:is(a):hover { color: var(--primary); }
    }

    & .contact__types { list-style: none; }

    & .contact__type {
        display: flex; flex-direction: column;
        gap: var(--sp4);
        padding-block: var(--sp15);
        border-bottom: 1px solid var(--line);

        &:first-child { padding-top: 0; }
    }

    & .contact__type-title {
        font-family: var(--font-mona);
        font-size: var(--f16);
        font-weight: 500;
        color: var(--ink);
    }

    & .contact__type-text { font-size: var(--f14); }

    & .contact__social {
        display: flex;
        gap: var(--sp10);
        list-style: none;
    }

    & .contact__social-link {
        display: flex; align-items: center; justify-content: center;
        width: 40px; height: 40px;
        background: var(--white);
        border-radius: var(--r-full);
        box-shadow: var(--shadow-sm);
        color: var(--ink);
        transition: var(--transition);

        &:hover, &:focus-visible { background: var(--primary); color: var(--white); }
    }

    & .contact__submit { margin-top: var(--sp15); }

    & .contact__note { margin-top: var(--sp10); font-size: var(--f14); }

    & .contact__note a { color: var(--primary); }
}

/* =================================================================== CONTACT responsive =================================================================== */
@media (max-width: 1199.98px) {
    .contact {
        & .contact__info { padding-right: var(--sp40); }
        & .contact__form-col { padding-left: var(--sp40); }
    }
}

@media (max-width: 991.98px) {
    .contact {
        & .contact__grid { grid-template-columns: 1fr; gap: var(--sp50); }
        & .contact__info { padding-right: 0; border-right: 0; }
        & .contact__form-col { padding-left: 0; }
    }
}