/* ==========================================================================
   Iguazu Noticias — Contact & About

   The page's own composition, plus the handful of Contact Form 7 rules worth
   overriding. Everything else is borrowed: .ig-card for the panel, .ig-btn for
   the submit, .ig-field / .ig-label / .ig-input from components/form.css.

   STANDING RULE: this sheet must never contain a bare .ig-card, .ig-btn,
   .ig-field, .ig-label or .ig-input selector. Those are shared and this page
   uses them as they are; anything page-specific hangs off .ig-contact-page__*.
   The CF7 overrides below are the one exception and they are scoped to this
   page for exactly that reason.
   ========================================================================== */

.ig-contact-page {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-block: var(--space-10) 88px;
}

.ig-contact-page__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

/* --------------------------------------------------------------------------
   The About column
   -------------------------------------------------------------------------- */

.ig-contact-page__about {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ig-contact-page__title {
    font-size: clamp(30px, 3.8vw, 42px);
}

.ig-contact-page__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ig-contact-page__body p {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text-muted);
}

.ig-contact-page__points {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* flex-start, not center: two of these wrap to a second line on a phone, and a
   centred tick then floats between the lines instead of marking the item. */
.ig-contact-page__point {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14.5px;
    line-height: 1.5;
}

.ig-contact-page__tick {
    color: var(--green-700);
    flex: none;
    /* Nudged onto the cap height of the first line. */
    margin-top: 3px;
}

/* --------------------------------------------------------------------------
   The form panel
   -------------------------------------------------------------------------- */

.ig-contact-page__form-body {
    gap: 16px;
    padding: 28px;
}

.ig-contact-page__form-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ig-contact-page__form-title {
    font-family: var(--font-display);
    font-size: 19px;
}

.ig-contact-page__form-sub {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Contact Form 7 overrides

   CF7 wraps every control in a span it will not let go of, and ships a
   stylesheet written for its own default look. These rules are the minimum
   needed to make its markup sit inside this design, and they are scoped to the
   page so nothing else on the site inherits them.
   -------------------------------------------------------------------------- */

.ig-contact-page .ig-contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* The wrapper CF7 forces around each control has to become transparent to the
   layout, or the field and its error would not stack. */
.ig-contact-page .wpcf7-form-control-wrap {
    display: block;
}

/* CF7's own invalid tip, restyled as this theme's help text. It carries
   aria-hidden and the accessible copy lives in .screen-reader-response, which
   is why hiding it visually would be wrong but restyling it is fine. */
.ig-contact-page .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: var(--text-xs);
    line-height: 1.5;
    font-weight: var(--weight-medium);
    color: var(--danger);
}

.ig-contact-page .wpcf7-not-valid {
    border-color: var(--danger);
}

.ig-contact-page .wpcf7-not-valid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 4px rgba(201, 45, 93, 0.16);
}

/* The response line. CF7 never changes this element's class, so the state has
   to be read from the form that contains it. */
.ig-contact-page .wpcf7-response-output {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.55;
}

.ig-contact-page form.sent .wpcf7-response-output {
    border-color: var(--success);
    background: var(--success-bg);
    color: var(--success);
}

.ig-contact-page form.invalid .wpcf7-response-output,
.ig-contact-page form.unaccepted .wpcf7-response-output,
.ig-contact-page form.payment-required .wpcf7-response-output {
    border-color: var(--warning);
    background: var(--warning-bg);
    color: var(--warning);
}

.ig-contact-page form.failed .wpcf7-response-output,
.ig-contact-page form.aborted .wpcf7-response-output,
.ig-contact-page form.spam .wpcf7-response-output {
    border-color: var(--danger);
    background: var(--danger-bg);
    color: var(--danger);
}

/* CF7 puts the spinner immediately after the submit input, where it would push
   the button's own layout around. */
.ig-contact-page .wpcf7-spinner {
    margin: 0 0 0 10px;
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .ig-contact-page__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 700px) {
    .ig-contact-page {
        padding-block: var(--space-8) 56px;
    }

    .ig-contact-page__form-body {
        padding: 22px;
    }
}