/* Contact. Underlined form fields on the left against a dark contact card on the right, so the
   form reads as writing on paper rather than as a stack of boxes. */

.contact {
    padding-top: var(--space-8);
}

.contact__title {
    font-size: var(--text-3xl);
}

.contact__split {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
    margin-top: var(--space-8);
}

.contact__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-6);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.field--wide {
    grid-column: 1 / -1;
}

.field label {
    font-size: var(--text-2xs);
    font-weight: var(--fw-medium);
    letter-spacing: 0.04em;
    color: var(--fg-dim);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: var(--space-2) 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0;
    font-size: var(--text-base);
    color: var(--fg);
    transition: border-color var(--dur-fast) var(--ease-out);
}

.field select {
    appearance: none;
    background: transparent
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b665c' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E")
        no-repeat right center / 16px;
    cursor: pointer;
}

.field textarea {
    resize: vertical;
    min-height: 3rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-bottom-color: var(--accent);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    outline: none;
}

.contact__submit {
    grid-column: 1 / -1;
    justify-self: start;
    min-height: var(--tap-min);
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-7);
    background: var(--fg);
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--bg);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    transition: background var(--dur-fast) var(--ease-out);
}

.contact__submit:hover {
    background: var(--accent);
    color: var(--on-accent);
}

.contact__card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.contact__card-head {
    padding: var(--space-6);
    background: var(--bg);
    color: var(--fg);
    text-align: center;
}

.contact__card-title {
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
}

.contact__card-note {
    margin-top: var(--space-2);
    font-size: var(--text-2xs);
    line-height: 1.6;
    color: var(--fg-dim);
}

.contact__lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: var(--space-6);
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    list-style: none;
}

.contact__lines li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
}

.contact__lines a {
    color: inherit;
    text-decoration: none;
}

.contact__lines a:hover {
    color: var(--accent);
}

.contact__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--bg);
    border-radius: var(--radius-pill);
}

.contact__icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact__badge {
    padding: 0 var(--space-6) var(--space-6);
    background: var(--surface);
    font-size: var(--text-2xs);
    color: var(--fg-dim);
}

@media (max-width: 1000px) {
    .contact__split {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-7);
    }
}

@media (max-width: 560px) {
    .contact__form {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    .contact__submit {
        justify-self: stretch;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .contact .field:nth-of-type(1) { --delay: 120ms; }
    .contact .field:nth-of-type(2) { --delay: 180ms; }
    .contact .field:nth-of-type(3) { --delay: 240ms; }
    .contact .field:nth-of-type(4) { --delay: 300ms; }
    .contact .field:nth-of-type(5) { --delay: 360ms; }
    .contact .field:nth-of-type(6) { --delay: 420ms; }
    .contact .field:nth-of-type(7) { --delay: 480ms; }

    .contact .contact__submit {
        opacity: 0;
        transform: translateY(0.75rem);
    }

    .contact.is-visible .contact__submit {
        opacity: 1;
        transform: translateY(0);
        transition:
            opacity 600ms var(--ease-out),
            transform 600ms var(--ease-out);
        transition-delay: 560ms;
    }
}