/**
 * Homepage travel search widget.
 *
 * The widget renders inside a shadow DOM, so page CSS reaches it only through
 * its --ts-* custom properties and the parts it exposes (panel, product-tab,
 * search-button). Everything else - active tab, fields, labels, inputs, icons,
 * trip toggle - has no part and stays in the css='...' attribute in
 * Views/Home/Index.cshtml. That attribute's rules are !important inside the
 * shadow root, so they win over anything here.
 */

/* Hero/widget overlap. The pull-up equals the widget's tab-row height (it
   shrinks at narrower widths), so the hero image ends exactly on the active
   tab's underline. The hero text gets the same room at the bottom so the
   widget never covers it.
   z-index 30 keeps the widget and its popups (autocomplete, dates, guests)
   above every other homepage section, but under the sticky site header (z-40)
   so it scrolls beneath it rather than over it. */
.home-search-overlap {
    position: relative;
    z-index: 30;
    margin-top: -48px;
}

.home-hero-content {
    padding-bottom: 48px;
}

@media (min-width: 670px) {
    .home-search-overlap { margin-top: -52px; }
    .home-hero-content { padding-bottom: 52px; }
}

@media (min-width: 930px) {
    .home-search-overlap { margin-top: -56px; }
    .home-hero-content { padding-bottom: 56px; }
}

/* "Your Perfect Staycation Awaits" promo banner - photo with a dark
   left-to-right fade so the headline stays readable over any image. */
.home-promo {
    padding-top: 32px;
    padding-bottom: 32px;
}

.home-promo-card {
    height: 200px;
}

.home-promo-fade {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4), transparent);
}

.home-promo-body {
    padding-left: 24px;
    padding-right: 24px;
}

.home-promo-title {
    font-size: 30px;
    line-height: 1.2;
}

/* 900px = the site's compact breakpoint (--breakpoint-compact). */
@media (min-width: 900px) {
    .home-promo {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .home-promo-card {
        height: 280px;
    }

    .home-promo-body {
        padding-left: 56px;
        padding-right: 56px;
    }

    .home-promo-title {
        font-size: 48px;
        line-height: 1;
    }
}

travel-search-widget {
    --ts-primary: #b12b30;
    --ts-primary-dark: #8B2225;
    --ts-font-family: Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
}

travel-search-widget::part(panel) {
    background: #FFFFFF;
    border: none;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 0;
}

/* Inactive look only - the active tab's colour and underline come from the
   attribute's tabActive, which overrides these. */
travel-search-widget::part(product-tab) {
    color: #6B7280;
    font-size: 15px;
    font-weight: 600;
}

travel-search-widget::part(search-button) {
    background: #b12b30;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: 0 18px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(177, 43, 48, 0.25);
    min-height: 52px;
}