/* Contact form — 2-column: form card (CF7 shortcode) left, image + phone card right.
   Heading/eyebrow/submit use shared .circla-* classes (see style.css). */

.contact-form-block {
    padding: 48px 0;
    background-color: #fff;
}

.contact-form-block__inner {
    display: grid;
    grid-template-columns: 1.43fr 1fr; /* ~732 : 512 from the design */
    gap: 24px;
    max-width: 1264px;
    margin: 0 auto;
    padding: 0 32px;
    align-items: stretch;
}

/* Left column is just the form. The form's own .circla-cf markup is the light
   card (padding / background / radius / heading / badges) — see style.css —
   so this column is a plain full-width/height wrapper around it. */
.contact-form-block__form-col,
.contact-form-block__form,
.contact-form-block__form .wpcf7,
.contact-form-block__form .wpcf7-form {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Stretch the form card to the column height so it matches the image. */
.contact-form-block__form .circla-cf {
    flex: 1 0 auto;
}

/* Right column — image fills the full column height (matches the form card).
   media-col is the stretched grid cell; media fills it absolutely so the image
   always spans the column height without percentage-height circular issues. */
.contact-form-block__media-col {
    position: relative;
    min-height: 480px;
}

.contact-form-block__media {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    overflow: hidden;
}

.contact-form-block__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ensure the direct <img> always fills the media wrapper's height. */
.contact-form-block__media > img {
    height: 100% !important;
}

/* Phone card — light green panel anchored near the bottom of the image. */
.contact-form-block__phone-card {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 24px;
    background-color: #f3f8ea;
    color: #233129;
    border-radius: 8px;
}

.contact-form-block__phone-heading {
    margin: 0;
    color: #233129;
    text-align: center;
    font-family: "Neue Augenblick";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 120% */
}

.contact-form-block__phone-sub {
    margin: 0;
    font-family: "Open Sans";
    font-size: 14px;
    line-height: 1.4;
    color: #161616;
}

.contact-form-block__phone-row {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.contact-form-block__phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--UI-UI-Black, #161616);
    font-family: "Open Sans";
    font-size: 16px;
    font-weight: 700;
    /* !important beats the global `a { text-decoration: none !important }`. */
    text-decoration: underline !important;
}

/* Phone icon stays green even though the label text is near-black. */
.contact-form-block__phone svg,
.contact-form-block__phone i {
    color: #688D78 !important;
    fill: #688D78 !important;
}

/* Hover: keep the dark label colour (not the theme's grey link hover) + underline. */
.contact-form-block__phone:hover {
    color: var(--UI-UI-Black, #161616) !important;
    text-decoration: underline !important;
}

.contact-form-block__phone-note {
    font-family: "Open Sans";
    font-size: 14px;
    color: #161616;
}

@media (max-width: 900px) {
    .contact-form-block {
        padding-top: 0;
    }
    .contact-form-block__inner {
        grid-template-columns: 1fr;
        gap: 24px;
        /* Full width on mobile — no horizontal gutter. */
        padding-left: 0;
        padding-right: 0;
    }
    .contact-form-block__media {
        min-height: 360px;
    }
}