/* =============================================================================
   Contact page — "IGM Contact Us" design, three breakpoints
   -----------------------------------------------------------------------------
   Phone: channels first, then a stacked form — the design's reasoning is that a
   visitor who can be answered by WhatsApp should never have to scroll past a
   form to find it. From 820px the form and the channel rail sit side by side.
   ============================================================================= */

.igm-contact__head {
    margin: 0 0 26px;
    max-width: 780px;
}

.igm-contact__title {
    margin: 6px 0 12px;
    font: 700 clamp(26px, 4.4vw, 40px)/1.16 var(--font-display);
    letter-spacing: var(--ls-tight);
    color: var(--navy-700);
    text-wrap: pretty;
}

.igm-contact__intro {
    margin: 0;
    font: 15.5px/1.8 var(--font-body);
    color: var(--gray-700);
    text-wrap: pretty;
}

.igm-contact__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.igm-contact__main { min-width: 0; order: 2; }

/* Phone: channels above the form. The rail dissolves so its cards can be
   ordered independently of the trust blocks below them. */
.igm-contact__rail { display: contents; }
.igm-contact__rail > .igm-contact__channels { order: 1; }
.igm-contact__rail > *:not(.igm-contact__channels) { order: 3; }

/* Channels ---------------------------------------------------------------- */

.igm-contact__channels {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.igm-contact__channel a {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 13px 14px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
    text-decoration: none;
    transition: var(--transition-fast);
}

.igm-contact__channel a:hover {
    border-color: var(--navy-700);
    box-shadow: var(--shadow-sm);
}

.igm-contact__channel-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-tint-08);
}

.igm-contact__channel-icon .igm-channel-icon {
    width: 20px;
    height: 20px;
}

.igm-contact__channel-text { min-width: 0; }

.igm-contact__channel-title {
    display: block;
    font: 600 15px/1.35 var(--font-display);
    color: var(--navy-700);
}

.igm-contact__channel-value {
    display: block;
    font: 13.5px/1.5 var(--font-meta);
    color: var(--gray-700);
    word-break: break-word;
}

.igm-contact__channel-note {
    display: block;
    font: 12.5px/1.55 var(--font-body);
    color: var(--gray-600);
}

/* Rail cards -------------------------------------------------------------- */

.igm-contact__card {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
    overflow: hidden;
}

.igm-contact__card-title {
    margin: 0;
    padding: 12px 14px;
    border-bottom: 1px solid var(--gray-300);
    background: var(--gray-50);
    font: 600 11px/1 var(--font-body);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--gray-600);
}

.igm-contact__times { margin: 0; padding: 6px 0; }

.igm-contact__time {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    font: 14px/1.45 var(--font-body);
    color: var(--gray-700);
}

.igm-contact__time dt { margin: 0; }

.igm-contact__time dd {
    margin: 0;
    font-weight: 600;
    color: var(--navy-700);
    text-align: right;
}

.igm-contact__address {
    margin: 0;
    padding: 14px;
    font: 14px/1.8 var(--font-body);
    font-style: normal;
    color: var(--gray-700);
}

.igm-contact__address strong {
    font-family: var(--font-display);
    color: var(--navy-700);
}

/* Form -------------------------------------------------------------------- */

.igm-contact-form {
    padding: 18px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
}

.igm-contact-form__title {
    margin: 0 0 16px;
    font: 700 clamp(19px, 2.4vw, 24px)/1.3 var(--font-display);
    color: var(--navy-700);
}

.igm-contact-form__alert {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--red-500);
    border-radius: var(--radius-md);
    background: var(--danger-bg, #ffe4e0);
    font: 14px/1.6 var(--font-body);
    color: var(--red-600);
}

.igm-contact-form__topics {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.igm-contact-form__topics legend {
    padding: 0;
    margin-bottom: 9px;
}

.igm-contact-form__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Radio cards. The input stays the focusable control and the label is painted
   from its state, so the keyboard ring lands where the interaction does. */
.igm-contact-form__chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 15px;
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-pill);
    background: var(--white);
    font: 600 13px/1 var(--font-body);
    color: var(--navy-700);
    cursor: pointer;
    transition: var(--transition-fast);
}

.igm-contact-form__chip:hover { border-color: var(--navy-700); }

.igm-contact-form__chip.is-selected,
.igm-contact-form__chip:has(input:checked) {
    border-color: var(--navy-700);
    background: var(--navy-700);
    color: var(--white);
}

.igm-contact-form__chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.igm-contact-form__chip input:focus-visible + span {
    outline: 2px solid var(--navy-700);
    outline-offset: 4px;
    border-radius: 2px;
}

.igm-contact-form__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 14px;
}

.igm-contact-form__field { margin: 0 0 14px; }

.igm-contact-form__field label {
    display: block;
    margin-bottom: 5px;
    font: 600 13px/1.4 var(--font-body);
    color: var(--gray-700);
}

.igm-contact-form__field .required { color: var(--red-500); }

.igm-contact-form__hint {
    font-weight: 400;
    color: var(--gray-600);
}

.igm-contact-form .igm-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 13px 14px;
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-md);
    background: var(--white);
    font: 15px/1.5 var(--font-body);
    color: var(--ink);
}

.igm-contact-form textarea.igm-input {
    min-height: 132px;
    resize: vertical;
    line-height: 1.7;
}

.igm-contact-form .igm-input:focus-visible {
    outline: 0;
    border-color: var(--navy-700);
    box-shadow: var(--focus-ring);
}

.igm-contact-form__field.has-error .igm-input,
.igm-contact-form__consent.has-error input {
    border-color: var(--red-500);
}

.igm-contact-form__error {
    display: block;
    margin-top: 4px;
    font: 12.5px/1.5 var(--font-body);
    color: var(--red-600);
}

.igm-contact-form__consent { margin: 0 0 16px; }

.igm-contact-form__consent label {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font: 13.5px/1.65 var(--font-body);
    color: var(--gray-700);
    cursor: pointer;
}

.igm-contact-form__consent input {
    flex: none;
    margin-top: 2px;
}

/* Honeypot: off-screen rather than display:none, because a bot that reads the
   stylesheet skips hidden fields. */
.igm-contact-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.igm-contact-form__submit {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.igm-contact-form__submit .igm-btn {
    min-height: 52px;
    padding-inline: 28px;
    font-size: 15px;
}

.igm-contact-form__note {
    flex: 1;
    min-width: 240px;
    margin: 0;
    font: 12.5px/1.7 var(--font-body);
    color: var(--gray-600);
}

/* Confirmation ------------------------------------------------------------ */

.igm-contact__done {
    padding: 30px 22px;
    border: 2px solid var(--navy-700);
    border-radius: var(--radius-lg);
    background: var(--white);
    text-align: center;
}

.igm-contact__tick {
    display: block;
    font: 800 44px/1 var(--font-display);
    color: var(--navy-700);
}

.igm-contact__done-title {
    margin: 12px 0 8px;
    font: 700 clamp(20px, 2.6vw, 28px)/1.3 var(--font-display);
    color: var(--navy-700);
}

.igm-contact__done-body {
    max-width: 520px;
    margin: 0 auto 20px;
    font: 15px/1.8 var(--font-body);
    color: var(--gray-700);
}

.igm-contact__ref {
    font-family: var(--font-meta);
    color: var(--navy-700);
}

/* Tablet — 820px and up ---------------------------------------------------- */

@media (min-width: 820px) {
    .igm-contact__body {
        grid-template-columns: minmax(0, 1fr) 300px;
        column-gap: 28px;
        align-items: start;
    }

    /* Real boxes again: the rail becomes one column beside the form. */
    .igm-contact__rail {
        display: grid;
        gap: 14px;
        grid-column: 2;
        grid-row: 1;
    }

    .igm-contact__rail > * { order: 0; }

    .igm-contact__main {
        grid-column: 1;
        grid-row: 1;
        order: 0;
    }

    .igm-contact-form { padding: 22px; }

    .igm-contact-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .igm-contact-form__field--wide { grid-column: 1 / -1; }
}

/* Desktop — 1100px and up -------------------------------------------------- */

@media (min-width: 1100px) {
    .igm-contact__body {
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 36px;
    }

    .igm-contact__rail {
        position: sticky;
        top: 24px;
    }

    .igm-contact-form {
        padding: 28px;
        border-radius: var(--radius-2xl);
    }

    .igm-contact__done {
        padding: 44px;
        border-radius: var(--radius-2xl);
    }
}