/* ========================================
   CONTACT PAGE - VistaFly
   ======================================== */

body {
    --scrim: 0.5;

    /* Header height, and the one dial for the block below. Matches
       the min-height on .page-hero--tight; change both together or
       the video stops being centred in the header. */
    --hero-h: 38svh;
}

/* Hero padding lives entirely in components.css under
   .page-hero--tight. It was duplicated here, and because both
   selectors are a single class this file simply won overriding it —
   including inside the mobile media query, which broke the
   padding-top minus padding-bottom invariant that keeps the copy
   centred. One owner only. */

/* Centre the video in the header. The full reasoning is in
   portfolio.css — briefly: the video is fixed over the whole
   viewport while the header is only its top --hero-h, so the header
   always sees the upper band of the frame and object-position cannot
   reach past that. Lifting and over-sizing the element puts its
   centre at the header's centre and still covers the viewport floor,
   which the CTA lower down needs. */
.local-video-bg,
.bg-video,
.bg-poster {
    top: calc(var(--hero-h) - 100vh);
    height: calc(200vh - var(--hero-h));
}

.bg-poster {
    background-image: url('/images/herobg-poster.jpg');
    background-size: cover;
    background-position: center;
}

/* ---- Defocus the background video ----

   Same treatment and the same values as the Flight Log header, so
   the two pages read as one product. The reasoning is written out
   in full in portfolio.css; the short version is that out of focus
   the footage stops being a competing scene and becomes an ambient
   colour field, which is what a background should be doing when
   type sits over it.

   scale() tracks the blur radius: a blur samples past the element's
   edges, so without overscan wider than the feather the video fades
   to transparency down the sides. 1.06 covers a 13px radius.

   Note this page runs --scrim: 0.5 against the Flight Log's 0.1, so
   the identical brightness() lands on a much darker base here. If it
   reads too dark, lift the scrim rather than the brightness — the
   scrim is the one that exists for legibility. */
/* Bounded to the header. See the longer note in portfolio.css: the
   video is position:fixed across the whole viewport, so filtering it
   carried the blur down the entire page and every translucent
   surface below showed defocused footage. backdrop-filter on a layer
   inside .page-hero blurs only what sits behind the header. */
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(13px) saturate(0.95) brightness(0.98);
    backdrop-filter: blur(13px) saturate(0.95) brightness(0.98);
}

@media (max-width: 700px) {
    .page-hero::before {
        -webkit-backdrop-filter: blur(11px) saturate(0.9) brightness(0.9);
        backdrop-filter: blur(11px) saturate(0.9) brightness(0.9);
    }
}


/* ============================================================
   LAYOUT
   ============================================================ */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    max-width: var(--container);
    margin-inline: auto;
    align-items: start;
}

.contact-panel,
.contact-form-panel {
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
    background: var(--ground-300);
    border: 1px solid var(--edge-faint);
    border-radius: var(--radius-lg);
    box-shadow: var(--inner-top);
}

.contact-panel {
    background: linear-gradient(165deg, rgba(228, 216, 196, 0.06) 0%, var(--ground-300) 55%);
    border-color: var(--edge-bone);
}

.panel-title {
    font-family: var(--font-body);
    font-size: var(--fs-micro);
    font-weight: var(--weight-semi);
    letter-spacing: var(--track-micro);
    text-transform: uppercase;
    color: var(--text-faint);
    margin-block-end: var(--space-5);
}

.contact-panel .panel-title + * {
    margin-block-end: var(--space-8);
}

@media (max-width: 860px) {
    .contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ============================================================
   CONTACT DETAILS
   ============================================================ */
.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.contact-detail {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--fill-01);
    border: 1px solid var(--edge-faint);
    transition:
        border-color var(--dur-mid) var(--ease-out),
        background-color var(--dur-mid) var(--ease-out),
        transform var(--dur-mid) var(--ease-out);
}

.contact-detail:hover {
    border-color: var(--edge-bone);
    background: var(--fill-02);
    transform: translateX(3px);
}

.contact-detail-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--fill-bone);
    color: var(--bone-300);
    font-size: var(--fs-base);
}

.contact-detail-label {
    display: block;
    font-size: var(--fs-micro);
    font-weight: var(--weight-semi);
    letter-spacing: var(--track-micro);
    text-transform: uppercase;
    color: var(--text-faint);
}

.contact-detail-value {
    display: block;
    font-size: var(--fs-base);
    color: var(--text-hi);
    line-height: var(--leading-snug);
    /* Long email addresses must not blow out the panel */
    overflow-wrap: anywhere;
}


/* ============================================================
   FORM
   ============================================================ */
.form-group {
    margin-block-end: var(--space-5);
}

.form-group label {
    display: block;
    margin-block-end: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--weight-medium);
    letter-spacing: var(--track-wide);
    color: var(--text-mid);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--space-4);
    background: var(--ground-100);
    border: 1px solid var(--edge-soft);
    border-radius: var(--radius-sm);
    color: var(--text-hi);
    font-size: var(--fs-base);
    font-family: var(--font-body);
    line-height: var(--leading-snug);
    transition:
        border-color var(--dur-mid) var(--ease-out),
        background-color var(--dur-mid) var(--ease-out),
        box-shadow var(--dur-mid) var(--ease-out);
}

.form-group textarea {
    resize: vertical;
    min-height: 130px;
}

.form-group select {
    appearance: none;
    /* Chevron drawn in CSS so it matches the palette in both themes */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--bone-400) 50%),
        linear-gradient(135deg, var(--bone-400) 50%, transparent 50%);
    background-position:
        calc(100% - 20px) calc(50% + 2px),
        calc(100% - 15px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-inline-end: var(--space-9);
    cursor: pointer;
}

.form-group select option {
    background: var(--ground-200);
    color: var(--text-hi);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--bone-300);
    background: var(--ground-200);
    box-shadow: 0 0 0 3px rgba(228, 216, 196, 0.12);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-faint);
}

/* ---- Validation ---- */
.error-message {
    display: none;
    margin-block-start: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--signal-live);
}

.form-group.error .error-message {
    display: block;
}

.form-group.error input,
.form-group.error select,
.form-group.error textarea {
    border-color: var(--signal-live);
}

.contact-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}


/* ============================================================
   BOOKING EMBED
   ============================================================ */
.booking-embed {
    max-width: 900px;
    margin-inline: auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--edge-faint);
    box-shadow: var(--shadow-lg);
    background: var(--ground-300);
}

.booking-embed iframe {
    display: block;
    width: 100%;
    height: min(78vh, 760px);
    border: none;
}


/* ============================================================
   TOUCH
   ============================================================ */
@media (pointer: coarse) {
    /* 16px is a hard floor, not a preference. iOS zooms the entire page
       in when a focused field is under 16px, and does not zoom back out
       — the visitor is left scrolled sideways mid-form. The rest of the
       type scale is untouched. */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px;
    }

    .contact-detail {
        min-height: 44px;
    }
}

@media (max-width: 560px) {
    .contact-panel,
    .contact-form-panel {
        padding: var(--space-5);
    }

    /* Long addresses get their own line rather than squeezing the label */
    .contact-detail {
        align-items: flex-start;
    }

    .booking-embed iframe {
        height: min(86vh, 620px);
    }
}


/* ============================================================
   HONEYPOT

   Moved off-screen rather than display:none or hidden. The cheap
   bots that this catches parse the DOM and fill every input; a good
   share of them skip anything explicitly hidden, which would defeat
   the trap. Off-screen positioning is invisible to a person, still
   "present" to a naive script, and aria-hidden + tabindex="-1" on
   the markup keep it away from screen readers and keyboard tabbing.
   ============================================================ */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}