/*
 * FaresHunt Homepage Responsive Pass 1
 * Scope: customer-facing homepage only.
 * No search/API/fare-rule/booking logic is changed.
 */

/* ---------- Global homepage safety ---------- */
.fh-home,
.fh-home * {
    box-sizing: border-box;
}

.fh-home {
    max-width: 100%;
    overflow-x: clip;
}

.fh-home img,
.fh-home svg {
    max-width: 100%;
}

.fh-home button,
.fh-home input,
.fh-home select {
    touch-action: manipulation;
}

.fh-home button:focus-visible,
.fh-home input:focus-visible,
.fh-home select:focus-visible,
.fh-home a:focus-visible {
    outline: 3px solid rgba(20, 102, 204, .28) !important;
    outline-offset: 2px !important;
}

/* Keep search controls comfortably tappable. */
.fh-home .fh-trip-tab,
.fh-home .fh-swap,
.fh-home .fh-pax-button,
.fh-home .fh-search-submit,
.fh-home .fh-multicity-add,
.fh-home .fh-multi-remove,
.fh-home .tnb-counter button,
.fh-home .tnb-pax-done {
    min-height: 44px;
}

/* Airport autocomplete must never escape the viewport. */
.ui-autocomplete {
    max-width: calc(100vw - 24px) !important;
    overscroll-behavior: contain;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
    .fh-home .fh-hero {
        min-height: auto !important;
        padding-top: 38px !important;
        padding-bottom: 54px !important;
    }

    .fh-home .fh-hero-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    .fh-home .fh-hero-copy {
        max-width: 760px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .fh-home .fh-hero-copy h1 {
        font-size: clamp(42px, 6.4vw, 64px) !important;
        line-height: 1.02 !important;
        text-wrap: balance;
    }

    .fh-home .fh-hero-copy p {
        max-width: 700px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .fh-home .fh-search-shell.fh-ref-search-shell {
        width: 100% !important;
        max-width: 900px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .fh-home .fh-ref-search-grid-top {
        grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr) !important;
        gap: 10px !important;
    }

    .fh-home .fh-ref-search-grid-top .fh-ref-dates {
        grid-column: 1 / -1 !important;
    }

    .fh-home .fh-ref-search-grid-bottom {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
        gap: 10px !important;
    }

    .fh-home .fh-ref-search-grid-bottom .fh-search-submit {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .fh-home .fh-pax-popover {
        max-width: min(360px, calc(100vw - 44px)) !important;
    }

    .fh-home .fh-hero-trust {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}

/* ---------- Phone / small tablet ---------- */
@media (max-width: 760px) {
    .fh-home .fh-hero {
        padding: 28px 0 44px !important;
    }

    .fh-home .fh-hero-inner {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .fh-home .fh-pill {
        max-width: 100%;
        white-space: normal !important;
        text-align: left;
    }

    .fh-home .fh-hero-copy {
        margin-bottom: 20px !important;
    }

    .fh-home .fh-hero-copy h1 {
        margin-top: 18px !important;
        font-size: clamp(34px, 10.2vw, 50px) !important;
        line-height: 1.04 !important;
        letter-spacing: -.035em !important;
    }

    .fh-home .fh-hero-copy p {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .fh-home .fh-search-shell.fh-ref-search-shell {
        padding: 14px !important;
        border-radius: 20px !important;
    }

    /* Trip tabs remain visible without overflowing the page. */
    .fh-home .fh-trip-tabs {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    .fh-home .fh-trip-tab {
        min-width: 0 !important;
        width: 100% !important;
        padding: 0 7px !important;
        font-size: 12px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .fh-home .fh-ref-search-grid-top,
    .fh-home .fh-ref-search-grid-bottom {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .fh-home .fh-search-field,
    .fh-home .fh-ref-dates,
    .fh-home .fh-pax-field {
        min-width: 0 !important;
        width: 100% !important;
    }

    .fh-home .fh-input,
    .fh-home .fh-pax-button {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Swap button becomes a compact vertical action between From and To. */
    .fh-home .fh-swap {
        justify-self: center !important;
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: -2px 0 !important;
        transform: rotate(90deg);
    }

    .fh-home .fh-ref-dates .fh-ref-date-pair {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 0 !important;
    }

    .fh-home .fh-ref-dates .fh-date-dash {
        display: none !important;
    }

    .fh-home .fh-ref-dates .fh-input {
        min-height: 50px !important;
    }

    .fh-home .fh-search-submit {
        width: 100% !important;
        min-height: 54px !important;
        border-radius: 14px !important;
    }

    /* Passenger popover becomes viewport-safe. */
    .fh-home .fh-pax-popover,
    .fh-home .tnb-pax-popover {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(76vh, 560px) !important;
        overflow-y: auto !important;
        border-radius: 18px !important;
        z-index: 1000050 !important;
    }

    .fh-home .fh-hero-trust {
        margin-top: 20px !important;
        gap: 10px !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        align-items: stretch !important;
    }

    .fh-home .fh-hero-trust span {
        min-height: 42px !important;
        justify-content: flex-start !important;
        padding: 8px 10px !important;
        border-radius: 12px !important;
    }

    /* Multi-City: clean stacked cards on phones. */
    .fh-home .fh-multicity {
        padding-top: 8px !important;
    }

    .fh-home .fh-multicity-head {
        display: block !important;
        margin-bottom: 10px !important;
    }

    .fh-home .fh-multicity-head small {
        display: block !important;
        margin-top: 4px !important;
        line-height: 1.4 !important;
    }

    .fh-home .fh-multi-leg {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        padding: 14px 12px !important;
        border-radius: 15px !important;
    }

    .fh-home .fh-multi-num {
        grid-column: auto !important;
        padding-right: 48px !important;
    }

    .fh-home .fh-multi-remove {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
    }

    .fh-home .fh-multicity-add {
        width: 100% !important;
        min-height: 48px !important;
    }

    /* Content cards below hero should not touch screen edges. */
    .fh-home section .container {
        max-width: 100% !important;
    }
}

/* ---------- Narrow phones ---------- */
@media (max-width: 430px) {
    .fh-home .fh-hero-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .fh-home .fh-search-shell.fh-ref-search-shell {
        padding: 12px !important;
        border-radius: 18px !important;
    }

    .fh-home .fh-trip-tab {
        font-size: 11px !important;
        letter-spacing: -.01em !important;
    }

    .fh-home .fh-hero-copy h1 {
        font-size: clamp(32px, 10.5vw, 44px) !important;
    }

    .fh-home .fh-input input,
    .fh-home .fh-input select,
    .fh-home .fh-pax-button {
        font-size: 16px !important; /* prevents iOS zoom */
    }

    .fh-home .fh-hero-trust {
        grid-template-columns: 1fr !important;
    }

    .ui-autocomplete {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-height: 58vh !important;
        border-radius: 16px !important;
    }

    .fh-airport-result {
        grid-template-columns: 38px minmax(0,1fr) auto !important;
        min-height: 62px !important;
        gap: 9px !important;
        padding: 8px !important;
    }

    .fh-airport-result-icon {
        width: 36px !important;
        height: 36px !important;
    }
}

/* ---------- Very narrow / legacy phones ---------- */
@media (max-width: 360px) {
    .fh-home .fh-trip-tabs {
        grid-template-columns: 1fr !important;
    }

    .fh-home .fh-trip-tab {
        min-height: 40px !important;
    }

    .fh-home .fh-search-shell.fh-ref-search-shell {
        padding: 10px !important;
    }
}

/* Respect reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .fh-home *,
    .fh-home *::before,
    .fh-home *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
   PASS 2 — Mobile visual polish / functional layout cleanup
   ========================================================= */

@media (max-width: 760px) {
    /* Compress hero vertical footprint without changing desktop. */
    .fh-home .fh-hero {
        padding-top: 22px !important;
        padding-bottom: 30px !important;
    }

    .fh-home .fh-hero-copy {
        margin-bottom: 14px !important;
    }

    .fh-home .fh-hero-copy h1 {
        font-size: clamp(31px, 9.1vw, 42px) !important;
        line-height: 1.03 !important;
        max-width: 11ch !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .fh-home .fh-hero-copy p {
        font-size: 14px !important;
        line-height: 1.48 !important;
        max-width: 34ch !important;
    }

    /* Search shell: less vertical bulk, same touch comfort. */
    .fh-home .fh-search-shell.fh-ref-search-shell {
        padding: 12px !important;
        border-radius: 18px !important;
    }

    .fh-home .fh-trip-tabs {
        margin-bottom: 12px !important;
    }

    .fh-home .fh-search-field,
    .fh-home .fh-ref-dates,
    .fh-home .fh-pax-field {
        margin-bottom: 0 !important;
    }

    .fh-home .fh-input,
    .fh-home .fh-pax-button {
        min-height: 50px !important;
    }

    /* FROM / swap / TO: swap button stays between fields, not by Dates. */
    .fh-home .fh-ref-search-grid-top {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .fh-home .fh-ref-search-grid-top > .fh-search-field:first-of-type {
        order: 1 !important;
    }

    .fh-home .fh-ref-search-grid-top > .fh-swap {
        order: 2 !important;
    }

    .fh-home .fh-ref-search-grid-top > .fh-search-field:nth-of-type(2) {
        order: 3 !important;
    }

    .fh-home .fh-ref-search-grid-top > .fh-ref-dates {
        order: 4 !important;
    }

    .fh-home .fh-swap {
        justify-self: center !important;
        align-self: center !important;
        margin: -1px 0 !important;
        transform: rotate(90deg) !important;
    }

    /* Round Trip must show Depart + Return stacked on phones. */
    .fh-home .fh-ref-dates .fh-ref-date-pair {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .fh-home .fh-ref-dates .fh-return-wrap,
    .fh-home .fh-ref-dates [data-return-field],
    .fh-home .fh-ref-dates .fh-date-return {
        display: block !important;
        width: 100% !important;
    }

    /* One-way may still hide return via existing JS/classes. */
    .fh-home .fh-ref-dates.is-one-way .fh-return-wrap,
    .fh-home .fh-ref-dates.is-one-way [data-return-field],
    .fh-home .fh-ref-dates.is-one-way .fh-date-return {
        display: none !important;
    }

    /* Keep support bubble away from form controls. */
    .fh-home .tnb-support-float,
    .fh-home .floating-support,
    .fh-home .support-float,
    .fh-home .chat-float,
    .fh-home .call-float {
        right: 12px !important;
        bottom: 18px !important;
        transform: none !important;
    }

    /* If support button is fixed globally, reduce size on phone. */
    body .tnb-support-float,
    body .floating-support,
    body .support-float,
    body .chat-float,
    body .call-float {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
    }

    /* Trust strip: balanced and more compact. */
    .fh-home .fh-hero-trust {
        margin-top: 16px !important;
        gap: 8px !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .fh-home .fh-hero-trust span {
        min-height: 38px !important;
        padding: 6px 8px !important;
        font-size: 12px !important;
    }

    .fh-home .fh-hero-trust span:last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
        justify-self: center !important;
        width: min(220px, 100%) !important;
    }

    /* Reduce dead space before first content section. */
    .fh-home .fh-hero + section,
    .fh-home .featured-flight-deals,
    .fh-home #featured-flight-deals {
        margin-top: 0 !important;
        padding-top: 28px !important;
    }

    /* Multi-City compactness */
    .fh-home .fh-multi-leg {
        gap: 7px !important;
        padding: 12px 10px !important;
    }

    .fh-home .fh-multicity-add {
        margin-top: 8px !important;
    }
}

@media (max-width: 430px) {
    .fh-home .fh-hero-copy h1 {
        font-size: clamp(29px, 9.6vw, 39px) !important;
    }

    .fh-home .fh-hero-copy p {
        font-size: 13.5px !important;
    }

    .fh-home .fh-search-submit {
        min-height: 52px !important;
    }
}