/* Contact page — "Connect with our experts today"
   Prod splits its 1240px row as 704 / 476 with a 60px gutter; the same
   proportions here scale with our wider container. */

/* The band carries a photo; the pink sits under it while the image loads and
   fills the edges if a replacement image is narrower than the viewport.
   Taller than the shared default too — the title sat almost flush against
   the header otherwise. */
.page-hero {
    --page-hero-bg: var(--color-pink-50);
    min-height:     380px;
}

.contact-page { padding: 80px 0 100px; }

.contact-page__grid {
    display:               grid;
    grid-template-columns: minmax(0, 704fr) minmax(0, 476fr);
    gap:                   60px;
    align-items:           start;
}

/* ── Left column ─────────────────────────────────────────────────────────── */
.contact-page__main {
    display:        flex;
    flex-direction: column;
    gap:            40px;
}

.contact-page__title { margin: 0; }

.contact-page__details {
    display:    flex;
    flex-wrap:  wrap;
    gap:        20px;
    margin:     0;
    padding:    0;
    list-style: none;
}

/* Three equal columns on a full-width row; the basis lets them drop to two
   and then one as the column narrows */
.contact-detail {
    display:        flex;
    flex-direction: column;
    flex:           1 1 180px;
    gap:            16px;
}

.contact-detail__label {
    margin:      0;
    font-size:   20px;
    line-height: 28px;
    font-weight: 600;
    color:       #000000;
}

.contact-detail__value {
    font-size:       16px;
    line-height:     22px;
    font-weight:     500;
    text-decoration: none;
    /* Long addresses would otherwise push the column past its share of the row */
    overflow-wrap:   anywhere;
}
.contact-detail__value:hover { color: var(--color-primary); }

.contact-detail__socials {
    display: flex;
    gap:     14px;
}
.contact-detail__social {
    display:     inline-flex;
    align-items: center;
    color:       var(--color-text);
}
.contact-detail__social:hover { color: var(--color-primary); }

.contact-page__map {
    overflow:      hidden;
    border-radius: var(--radius-img);
}
.contact-page__map iframe {
    display: block;
    width:   100%;
    height:  450px;
    border:  0;
}

/* ── Enquiry card ────────────────────────────────────────────────────────── */
.contact-page__card {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    padding:        60px;
    border-radius:  var(--radius-img);
    background:     var(--color-bg-alt);
}

.contact-page__card-title {
    margin:      0;
    font-size:   20px;
    line-height: 28px;
    font-weight: 600;
}

.contact-page__card-text {
    font-size:   16px;
    line-height: 22px;
    font-weight: 500;
}
.contact-page__card-text p { margin: 0; }
.contact-page__card-text p + p { margin-top: 12px; }

/* The card already pads the form; a top margin on top of the 16px gap would
   push the first label out of line with the paragraph above it */
.contact-page__form { margin-top: 8px; }

/* The card is narrow — a 150px box leaves the message field taller than the
   three inputs above it combined */
.contact-page__form textarea { min-height: 120px; }

@media (max-width: 1024px) {
    .page-hero { min-height: 320px; }
    .contact-page { padding: 60px 0 80px; }
    /* Holding the 704/476 split here would squeeze the card below a usable
       field width — prod goes to an even split at this width too */
    .contact-page__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap:                   40px;
    }
    .contact-page__main { gap: 24px; }
    .contact-page__map iframe { height: 400px; }
    .contact-page__card { padding: 40px; }
}

@media (max-width: 767px) {
    /* The photo drops to a strip along the bottom of the band (see .page-hero--photo);
       this repeats the horizontal gradient the photo itself carries, so the band
       above it continues the picture instead of reading as a separate stripe */
    .page-hero {
        --page-hero-bg: linear-gradient(90deg, #f06578 0%, #ffbfc5 50%, #f06578 100%);
        min-height:     240px;
    }

    .contact-page { padding: 40px 0 60px; }
    /* No room for two columns — the details and map lead, the form follows */
    .contact-page__grid {
        grid-template-columns: 1fr;
        gap:                   32px;
    }
    .contact-page__details { gap: 16px; }
    .contact-detail { flex: 1 1 100%; gap: 8px; }
    .contact-page__map iframe { height: 300px; }
    .contact-page__card { padding: 20px; }
}