/* =====================================================================================================
   Section: contact — styles for the block between "BEGIN SECTION: contact" and "END SECTION: contact" in index.html.
   Big dark rounded panel (resource 17, reproduced in CSS) with the rocket outline (resource 16) faint behind the
   content, the "Let's build what's next!" title (resource 24), a short text and the "Contact us" button that opens
   the contact pop-up. The footer sits directly below the panel.
   ===================================================================================================== */

.section--contact {
    --contact-text-size: clamp(1rem, 0.85rem + 0.55vw, 1.3125rem);    /* 16 → 21px */
    --contact-pad-block: clamp(5rem, 3rem + 8vw, 11rem);   /* taller than the design, as the user asked (2026-10-01) */
    --contact-rocket-size: clamp(15rem, 9rem + 20vw, 30rem);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: var(--section-space);
    padding-block: var(--contact-pad-block);
    border-radius: var(--radius-lg);
    background: var(--dark-panel);
    color: var(--white);
    text-align: center;
}

/* Rocket: the source is a light outline; the design shows it as a faint dark outline on the panel. */
.contact__rocket {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: var(--contact-rocket-size);
    height: auto;
    transform: translate(-58%, -46%);
    filter: brightness(0);
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}

.contact__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Width-driven (not height-driven like .section-title): this title is very wide (770×31) and a fixed height
   would overflow narrow screens. ~840px wide at the 1440px design width, full width on phones. */
.contact__title img {
    width: min(100%, clamp(20rem, 2rem + 56vw, 56rem));
    height: auto;
}

.contact__text {
    max-width: 56rem;
    margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem);
    font-size: var(--contact-text-size);
    font-weight: 400;
    line-height: 1.3;
    color: var(--white);
    text-wrap: pretty;
}

/* Narrow screens: let the two sentences flow as one paragraph. */
.contact__break { display: none; }

.contact__button {
    margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    padding-inline: 1.1rem;
    font-size: var(--text-base);
}

.contact__button:focus-visible {
    outline-color: var(--white);
}

@media (min-width: 768px) {
    /* As in the design: two lines, left-aligned, as a block centred in the panel. */
    .contact__text { text-align: left; }
    .contact__break { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
    .contact__button,
    .contact__button:hover { transition: none; transform: none; }
}