/* ==========================================================================
   Edy London: Home visit page (page-home-visit.php)
   Hero, breadcrumb and hero image come from edy.css (.el-page-hero) and
   services-archive.css; press, videos, FAQ and testimonials reuse the
   front page styles. This file adds the label, the two image + text
   sections and the Contact Form 7 form.
   Breakpoints: 900px (stack), 767px (mobile).
   ========================================================================== */

/* ---------- Hero */
.el-hv-label {
    margin: 0 0 16px;
    font-family: var(--el-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--el-ink);
}

.el-hv-hero__copy {
    margin-top: 28px;
}

/* As on the original page: photo on the left half, edge to edge and full
   hero height (aligned to the top of the photo so Edy's head stays in view), text on
   the right half on the cream background, starting at the shared
   breadcrumb height (--el-hero-top, services-archive.css). Overrides the shared
   .el-page-hero layout for this page only. */
.el-hv-hero {
    background: var(--el-cream);
}

.el-hv-hero .el-wrap {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    max-width: none;
    padding: 0;
}

.el-hv-hero .el-wrap > div:first-child {
    align-self: start;
    width: 100%;
    max-width: 720px;
    padding: var(--el-hero-top) clamp(24px, 6vw, 120px) clamp(56px, 7vw, 120px);
}

.el-hv-hero .el-page-hero__img {
    position: relative;
    order: -1;
    max-width: none;
    min-height: var(--el-hero-height);
    aspect-ratio: auto;
}

.el-hv-hero .el-page-hero__img img {
    position: absolute;
    inset: 0;
    object-position: center top;
}

/* ---------- Image + text split (price, international) */
.el-hv-split {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}

.el-hv-split--reverse {
    grid-template-columns: 5fr 6fr;
}

.el-hv-split__img {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--el-blush);
}

.el-hv-split__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.el-hv-split__text .el-h2 {
    margin-bottom: 28px;
}

/* ---------- Price */
.el-hv-price__value {
    margin: 0 0 28px;
}

/* ---------- International + form
   As on the original page: two full-width halves, text + form on the left,
   the photo on the right filling the whole section height, edge to edge. */
.el-hv-intl {
    background: var(--el-blush);
}

.el-section.el-hv-intl {
    padding-block: 0;
}

.el-hv-intl .el-wrap.el-hv-split {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    max-width: none;
    padding-inline: 0;
}

.el-hv-intl .el-hv-split__text {
    align-self: center;
    width: 100%;
    max-width: 720px;
    justify-self: end;
    padding: clamp(64px, 8vw, 120px) clamp(24px, 5vw, 80px);
}

.el-hv-intl .el-hv-split__img {
    position: relative;
    order: 2;
    aspect-ratio: auto;
    min-height: 600px;
}

.el-hv-intl .el-hv-split__img img {
    position: absolute;
    inset: 0;
}

.el-hv-form {
    margin-top: 36px;
}

.el-hv-form__fallback {
    margin: 0;
}

/* Contact Form 7 fields, in the theme style. */
.el-hv-form .wpcf7-form p {
    margin: 0 0 16px;
}

.el-hv-form .wpcf7-form label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--el-ink);
}

.el-hv-form .wpcf7-form input[type="text"],
.el-hv-form .wpcf7-form input[type="email"],
.el-hv-form .wpcf7-form input[type="tel"],
.el-hv-form .wpcf7-form input[type="date"],
.el-hv-form .wpcf7-form select,
.el-hv-form .wpcf7-form textarea {
    width: 100%;
    margin-top: 6px;
    padding: 12px 14px;
    border: 1px solid var(--el-line);
    border-radius: var(--el-radius);
    background: #fff;
    font: inherit;
    color: var(--el-ink);
}

.el-hv-form .wpcf7-form textarea {
    min-height: 140px;
    resize: vertical;
}

.el-hv-form .wpcf7-form input:focus,
.el-hv-form .wpcf7-form select:focus,
.el-hv-form .wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--el-ink);
    box-shadow: 0 0 0 3px rgba(64, 55, 44, .12);
}

.el-hv-form .wpcf7-form input[type="submit"] {
    min-height: 50px;
    padding: 0 30px;
    border: 1px solid var(--el-ink);
    border-radius: var(--el-radius);
    background: var(--el-ink);
    font-family: var(--el-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.el-hv-form .wpcf7-form input[type="submit"]:hover {
    border-color: var(--el-sage);
    background: var(--el-sage);
}

/* Form layout from the CF7 template (cf7/home-visit-form.txt). */
.el-hv-form .el-cf7 {
    display: grid;
    gap: 18px;
}

.el-hv-form .el-cf7__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.el-hv-form .el-cf7__field {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--el-ink);
}

.el-hv-form .el-cf7__legend {
    display: block;
    margin-bottom: 8px;
}

.el-hv-form .el-cf7__choices .wpcf7-list-item {
    display: inline-flex;
    margin: 0 24px 8px 0;
}

.el-hv-form .el-cf7__choices .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    color: var(--el-text);
    cursor: pointer;
}

.el-hv-form .el-cf7__choices input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--el-ink);
}

.el-hv-form .el-cf7__submit {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

/* Validation and response messages. */
.el-hv-form .wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 400;
    color: #A23B2A;
}

.el-hv-form .wpcf7-form .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 12px 16px;
    border: 1px solid var(--el-line);
    border-radius: var(--el-radius);
    background: #fff;
    font-size: 14px;
    color: var(--el-ink);
}

.el-hv-form .wpcf7-form.sent .wpcf7-response-output {
    border-color: var(--el-sage);
}

.el-hv-form .wpcf7-form.invalid .wpcf7-response-output,
.el-hv-form .wpcf7-form.failed .wpcf7-response-output {
    border-color: #A23B2A;
}

/* ---------- Mobile: one field per row */
@media (max-width: 767px) {
    .el-hv-form .el-cf7__row {
        grid-template-columns: 1fr;
    }
}

/* ---------- Stack below 900px */
@media (max-width: 900px) {
    .el-hv-split,
    .el-hv-split--reverse {
        grid-template-columns: 1fr;
    }

    .el-hv-split__img {
        max-width: 460px;
    }

    /* Text first, image after it, in both sections. */
    .el-hv-split--reverse .el-hv-split__img {
        order: 2;
    }

    /* Hero: full-width photo on top, text below it. */
    .el-hv-hero .el-wrap {
        grid-template-columns: 1fr;
    }

    .el-hv-hero .el-wrap > div:first-child {
        max-width: none;
    }

    .el-hv-hero .el-page-hero__img {
        min-height: 0;
        aspect-ratio: 4 / 5;
    }

    /* International: full-width photo under the form. */
    .el-hv-intl .el-wrap.el-hv-split {
        grid-template-columns: 1fr;
    }

    .el-hv-intl .el-hv-split__text {
        max-width: none;
        justify-self: stretch;
    }

    .el-hv-intl .el-hv-split__img {
        max-width: none;
        min-height: 0;
        aspect-ratio: 4 / 5;
    }
}