/* ==========================================================================
   Contacts page — Figma node 6773:18710 (desktop 1512) / 6773:18869 (mobile 393)

   One photo section, 955 tall, with a 1224x649 glass card sitting 83px above
   its bottom edge (the card is bottom-anchored, which is why the section uses
   justify-content:flex-end rather than the frame's unreachable 296px top pad).
   Every .cf-* rule styles markup that Contact Form 7 renders from the form post.
   ========================================================================== */

.ct-page {
    /* Design leaves 62px before the footer; .site-footer adds the last 18.
       Padding rather than a margin so it cannot collapse into that 18. */
    padding-bottom: 44px;
    background: var(--page-bg);
}

/* --------------------------------------------------------------------------
   Photo section
   -------------------------------------------------------------------------- */

.ct-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 955px;
    /* The header is fixed at top:24 and 72 tall; 120 keeps the card clear of it
       once the card outgrows the design height (long translations, error tips). */
    padding: 120px 20px 83px;
    border-radius: 0 0 40px 40px;
    overflow: hidden;
    isolation: isolate;
    background: var(--white);
}

.ct-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Figma darkens the photo with a flat 26% black wash so the sunlit grass
   doesn't compete with the glass card sitting on top of it. */
.ct-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.26);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Glass card
   -------------------------------------------------------------------------- */

.ct-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1224px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 40px;
    box-shadow: 0 0 24px 0 rgba(0, 20, 36, 0.12);
    background-image: linear-gradient(139.012deg, rgba(235, 236, 249, 0.68) 8.942%, rgba(247, 233, 241, 0.68) 78.399%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* --- left half: title + lead --- */

.ct-card-intro {
    flex: 1 0 0;
    min-width: 1px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    word-break: break-word;
}

.ct-card-intro h1 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 54px;
    line-height: 1.1;
    color: var(--black);
}

.ct-card-intro p {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.45;
    color: #3B3B3B;
}

/* --------------------------------------------------------------------------
   Right half: the form
   -------------------------------------------------------------------------- */

.ct-card-form {
    flex: 0 0 641px;
    width: 641px;
}

.ct-card-form .wpcf7 {
    width: 100%;
}

.ct-card-form .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* CF7 emits these before the fields; keep them out of the flex flow. */
.ct-card-form .wpcf7-form > .hidden-fields-container,
.ct-card-form .wpcf7-form > .wpcf7-form-hidden-fields {
    display: none;
}

.ct-card-form .cf-fields {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ct-card-form .cf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

/* Figma draws 308px inputs inside 312px columns, so the pair stops 4px short
   of the message/file blocks below it. */
.ct-card-form .cf-grid .cf-field {
    max-width: 308px;
}

.ct-card-form .cf-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.ct-card-form .cf-field--message,
.ct-card-form .cf-field--file {
    gap: 8px;
}

.ct-card-form .cf-field > label {
    display: block;
    width: 100%;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.45;
    color: var(--black);
    word-break: break-word;
}

/* CF7 wraps every control in an inline span. */
.ct-card-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* --- text inputs --- */

.ct-card-form input[type="text"],
.ct-card-form input[type="email"],
.ct-card-form input[type="tel"] {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #DDDEF2;
    border-radius: 100px;
    background: #FEFEFE;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: var(--black);
}

.ct-card-form textarea {
    display: block;
    width: 100%;
    height: 128px;
    min-height: 120px;
    padding: 16px;
    border: 1px solid #DDDEF2;
    border-radius: 20px;
    background: #FEFEFE;
    /* The grabber would sit on top of the 20px corner radius. */
    resize: none;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: var(--black);
}

.ct-card-form ::placeholder {
    color: #A4A5B1;
    opacity: 1;
}

.ct-card-form input:focus,
.ct-card-form textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
}

/* --- file drop zone --- */

.ct-card-form .cf-file-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
    border: 1px solid #DDDEF2;
    border-radius: 20px;
    background: #FEFEFE;
    cursor: pointer;
}

.ct-card-form .cf-file-icon {
    display: block;
    width: 24px;
    height: 24px;
    background: url('../assets/icons/fluent-document-24.svg') no-repeat center / 24px 24px;
}

.ct-card-form .cf-file-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-weight: 400;
    color: #4C4D59;
}

.ct-card-form .cf-file-title {
    font-size: 16px;
    line-height: 1.45;
}

.ct-card-form .cf-file-size {
    font-size: 14px;
    line-height: 1.5;
}

/* The input covers the whole zone so the box itself is the click target. Its
   CF7 wrapper has to leave the flex flow too, or it adds an empty 8px row. */
.ct-card-form .cf-file-drop .wpcf7-form-control-wrap {
    position: absolute;
    inset: 0;
    width: auto;
}

.ct-card-form input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* --- submit --- */

.ct-card-form .cf-submit {
    position: relative;
    display: flex;
}

.ct-card-form input[type="submit"] {
    width: 100%;
    height: 48px;
    padding: 6px;
    border: none;
    border-radius: 100px;
    background: var(--primary-blue);
    filter: drop-shadow(0 0 12px rgba(0, 20, 36, 0.12));
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    color: #FEFEFE;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ct-card-form input[type="submit"]:hover {
    background: #3646E8;
}

.ct-card-form .wpcf7-spinner {
    position: absolute;
    top: 50%;
    right: 16px;
    margin: 0;
    transform: translateY(-50%);
}

/* --- validation / response --- */

.ct-card-form .wpcf7-not-valid-tip {
    margin-top: 4px;
    padding-left: 16px;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.4;
    color: #D93025;
}

.ct-card-form input.wpcf7-not-valid,
.ct-card-form textarea.wpcf7-not-valid {
    border-color: #D93025;
}

/* The design has no error state, so keep CF7's own banner but recolour it from
   the palette instead of its default yellow. */
.ct-card-form .wpcf7-response-output {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid #DDDEF2;
    border-radius: 20px;
    background: #FEFEFE;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--black);
}

.ct-card-form .wpcf7-form.sent .wpcf7-response-output {
    border-color: var(--primary-blue);
}

.ct-card-form .wpcf7-form.invalid .wpcf7-response-output,
.ct-card-form .wpcf7-form.unaccepted .wpcf7-response-output,
.ct-card-form .wpcf7-form.payment-required .wpcf7-response-output,
.ct-card-form .wpcf7-form.failed .wpcf7-response-output,
.ct-card-form .wpcf7-form.aborted .wpcf7-response-output,
.ct-card-form .wpcf7-form.spam .wpcf7-response-output {
    border-color: #D93025;
}

/* --------------------------------------------------------------------------
   Responsive

   The right column is a fixed 641px, so the two halves have to stack well
   before the mobile breakpoint or the title column gets crushed.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) and (min-width: 769px) {
    .ct-card {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    .ct-card-intro,
    .ct-card-form {
        flex: 0 0 auto;
        width: 100%;
    }

    .ct-card-form .cf-grid .cf-field {
        max-width: none;
    }
}

/* Mobile — Figma node 6773:18869: 393x1226 section, 353x993 card at y=150. */
@media (max-width: 768px) {
    /* .site-footer drops its 18px top margin on mobile, so the gap is all ours. */
    .ct-page {
        padding-bottom: 79px;
    }

    .ct-hero {
        min-height: 1226px;
        padding: 58px 20px 83px;
    }

    /* Figma's mobile frame skips the dark wash on the photo. */
    .ct-hero::after {
        display: none;
    }

    .ct-card {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        padding: 40px 24px;
        background-image: linear-gradient(102.239deg, rgba(235, 236, 249, 0.68) 8.942%, rgba(247, 233, 241, 0.68) 78.399%);
    }

    .ct-card-intro,
    .ct-card-form {
        flex: 0 0 auto;
        width: 100%;
    }

    .ct-card-intro h1 {
        font-size: 38px;
    }

    .ct-card-form .cf-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ct-card-form .cf-grid .cf-field {
        max-width: none;
    }
}