/* Contact page styles (schreib_mir) */

/* Override body height for this page */
:root { --page-extra: calc(265px * var(--scale-factor)); }

body {
    height: auto;
    min-height: calc(100vh + var(--page-extra));
}

/* Four-column meta row (same approach as About) */
.contact-meta {
    top: var(--page-top-anchor);
}

.contact-meta .meta-col--1 .contact-heading {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 300;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-none);
    color: var(--color-grey);
}

.contact-meta .meta-col--1 .contact-heading:hover {
    color: var(--color-white);
}

.postcatch_form{
    height: calc(205px * var(--scale-factor));
    width: 100%; /* fill the column */
    position: relative; /* position children within */
    /* Fixed inner gap between Name and E-Mail that scales with factor */
    --pair-gap: calc(20px * var(--scale-factor));
}

/* Shared typography for inputs and button */
.postcatch_form :where(input, button) {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: 300;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-none);
}

/* Shared input base styles */
.postcatch_form input {
    border: none;
    background: transparent;
    border-bottom: 1px solid var(--color-white);
    padding: 0;
    color: var(--color-white);
    outline: none;
    position: absolute;
}

/* Individual input placement and specific padding */
.postcatch_form input[name="name"] {
    width: calc((var(--col-w-responsive) - var(--pair-gap)) / 2);
    left: 0;
    top: 0;
    padding-bottom: calc(8px * var(--scale-factor));
}

.postcatch_form input[name="email"] {
    width: calc((var(--col-w-responsive) - var(--pair-gap)) / 2);
    left: calc(((var(--col-w-responsive) - var(--pair-gap)) / 2) + var(--pair-gap));
    top: 0;
    padding-bottom: calc(8px * var(--scale-factor));
}

.postcatch_form input[name="message"] {
    width: var(--col-w-responsive);
    left: 0;
    top: calc(102px * var(--scale-factor));
    padding-bottom: calc(40px * var(--scale-factor));
}

.postcatch_form button[type="submit"] {
    position: absolute;
    left: 0;
    top: calc(170px * var(--scale-factor));
    background: transparent;
    border: none;
    color: var(--color-grey);
    padding: 0;
    outline: none;
    cursor: pointer;
    transition: color 0.3s cubic-bezier(0.2,0,0,1);
}

.postcatch_form button[type="submit"]:hover {
    color: var(--color-white);
}

/* Override footer position for shorter page */
footer {
    top: auto;
    bottom: 0;
}

/* Tablet layout: stack columns, keep footer pinned */
@media (min-width: 601px) and (max-width: 1023px) {
    body {
        min-height: calc(100vh + var(--footer-h));
        display: flex;
        flex-direction: column;
        position: relative;
    }

    #menu-container,
    #footer-container {
        flex-shrink: 0;
    }

    #footer-container {
        margin-top: auto;
    }

    footer {
        position: static;
    }

    .contact-meta {
        position: static;
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 131px var(--gutter-x) 370px var(--gutter-x);
        margin: 0;
    }

    .contact-meta .meta-col {
        display: block;
        width: 100%;
        height: auto;
        min-width: 0;
    }

    .contact-meta .meta-col--1,
    .contact-meta .meta-col--3,
    .contact-meta .meta-col--4 {
        display: none;
    }

    .contact-meta .meta-col--2 {
        padding: 0;
        margin: 0;
    }

    .postcatch_form {
        width: 100%;
        height: 204px;
        position: relative;
        box-sizing: border-box;
        --pair-gap: 24px;
    }

    .postcatch_form form {
        margin: 0;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .postcatch_form input[name="name"],
    .postcatch_form input[name="email"] {
        width: calc((100% - var(--pair-gap)) / 2);
        padding-bottom: 8px;
        top: 0;
    }

    .postcatch_form input[name="name"] {
        left: 0;
    }

    .postcatch_form input[name="email"] {
        left: calc(((100% - var(--pair-gap)) / 2) + var(--pair-gap));
    }

    .postcatch_form input[name="message"] {
        width: 100%;
        left: 0;
        top: 102px;
        padding-bottom: 40px;
    }

    .postcatch_form button[type="submit"] {
        left: 0;
        top: 170px;
    }
}

/* Mobile layout: precise form placement and footer anchoring */
@media (max-width: 600px) {
    :root { --index-stickout: 420px; }
    /* Page height and footer anchoring */
    body {
        min-height: 1209px;
        position: relative;
    }
    footer {
        position: absolute;
        left: 0; right: 0; bottom: 0;
    }

    /* Position form block so its top sits (100vh - stickout) from the page top on load */
    .contact-meta {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        padding: 0 var(--gutter-x);
        padding-top: calc(100vh - var(--index-stickout));
        display: block; /* disable 4-col flex for stacked flow */
        box-sizing: border-box;
    }
    .contact-meta .meta-col { display: block; width: 100%; height: auto; }
    .contact-meta .meta-col--1,
    .contact-meta .meta-col--3,
    .contact-meta .meta-col--4 { display: none; }
    /* Allow wrapping (override any truncation on mobile) */
    .contact-meta .meta-col > * { white-space: normal; overflow: visible; text-overflow: clip; }

    /* Form block: full-width inside 20px gutters (no extra right margin) */
    .postcatch_form {
        width: 100%;            /* fill the padded overlay width */
        height: 204px;
        margin: 0;              /* remove centering margins */
        position: relative;
        box-sizing: border-box; /* include any borders/padding in width */
        --pair-gap: 20px;       /* fixed gap between Name and E‑Mail */
    }
    /* Remove any default inner padding/margins that add to the 20px gutter */
    .postcatch_form form { padding: 0; margin: 0; width: 100%; box-sizing: border-box; }
    /* Ensure the column wrapper contributes no hidden offsets */
    .contact-meta .meta-col--2 { padding: 0; margin: 0; }
    .postcatch_form :where(input, button) { -webkit-appearance: none; appearance: none; }
    /* Absolute placement inside the sized form */
    .postcatch_form input[name="name"] {
        width: calc((100% - var(--pair-gap)) / 2);
        left: 0;
        top: 0;
        padding-bottom: 8px;
    }
    .postcatch_form input[name="email"] {
        width: calc((100% - var(--pair-gap)) / 2);
        left: calc(((100% - var(--pair-gap)) / 2) + var(--pair-gap));
        top: 0;
        padding-bottom: 8px;
    }
    .postcatch_form input[name="message"] {
        width: 100%;
        left: 0;
        top: 102px;
        padding-bottom: 40px;
    }
    .postcatch_form button[type="submit"] {
        left: 0;
        top: 170px;
    }
}