/*
 * HOME HERO V2: this file's .luca-hero-value rules (the honest replacement for the removed fake "4.5 / 5.0 - 4.8k Bewertungen"
 * social-proof block) landed in a prior commit on this branch. This commit adds .luca-hero-search, the new Dienstleistungen/
 * Vermietungen/Veranstaltungen search widget replacing the old .tab-section/.custom-service Bootstrap-template markup - see
 * banner.blade.php's own header comment for the full before/after. The hero's own composition/image/headline/typography/CTA are
 * untouched and keep using the existing .hero-section-landing/.main-head rules in style.css - nothing here overrides those (a prior
 * revision of this file briefly swapped the H1's font; reverted - the Hero's original typography is preserved, not a redesign target
 * of this ticket).
 *
 * Brand tokens match the ticket's own palette exactly (not luca-public-listing.css's --luca-navy/etc., which are scoped to that other
 * system and not loaded on this page) - declared locally so this file has zero dependency on any other stylesheet's load order.
 */
.luca-hero-value,
.luca-hero-search {
    --luca-hero-green: #6eaa89;
    --luca-hero-coral: #e8665d;
    --luca-hero-coral-dark: #d5544b;
    --luca-hero-yellow: #f2bd48;
    --luca-hero-turquoise: #9fdfd7;
    --luca-hero-ink: #302d2a;
    --luca-hero-font-heading: "Exo 2", "Asap", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --luca-hero-font-body: "Asap", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==================== honest value block (replaces the fake rating row) ==================== */

.luca-hero-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
    margin-bottom: 32px;
    padding: 14px 20px;
    background: rgba(110, 170, 137, 0.08);
    border: 1px solid rgba(110, 170, 137, 0.18);
    border-radius: 16px;
}

.luca-hero-value__headline {
    flex: 1 1 240px;
    margin: 0;
    font-family: var(--luca-hero-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--luca-hero-ink);
}

.luca-hero-value__benefits {
    flex: 2 1 340px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.luca-hero-value__benefits li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--luca-hero-font-body);
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    white-space: nowrap;
}

.luca-hero-value__benefits i {
    color: var(--luca-hero-green);
    font-size: 12px;
}

@media (max-width: 991.98px) {
    .luca-hero-value {
        justify-content: center;
        text-align: center;
    }

    .luca-hero-value__benefits {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .luca-hero-value {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px;
        gap: 10px;
    }

    .luca-hero-value__benefits {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .luca-hero-value__benefits li {
        white-space: normal;
    }
}

/* ==================== search widget ==================== */

.luca-hero-search {
    position: relative;
    z-index: 2;
    margin-top: -46px;
}

@media (max-width: 991.98px) {
    .luca-hero-search {
        margin-top: -28px;
    }
}

@media (max-width: 575.98px) {
    .luca-hero-search {
        margin-top: 16px;
    }
}

.luca-hero-search__panel {
    max-width: 980px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 22px 45px -22px rgba(48, 45, 42, 0.28);
    padding: 8px;
}

.luca-hero-search__tabs {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 6px 6px 0;
    list-style: none;
}

.luca-hero-search__tab {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    padding: 11px 18px;
    border-radius: 14px 14px 0 0;
    font-family: var(--luca-hero-font-body);
    font-size: 14px;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.luca-hero-search__tab:hover {
    color: var(--luca-hero-ink);
}

.luca-hero-search__tab.active {
    background: rgba(110, 170, 137, 0.14);
    color: #4f8a6c;
}

.luca-hero-search__body {
    background: #fbf9f6;
    border-radius: 0 18px 18px 18px;
    padding: 18px;
}

.luca-hero-search__fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.luca-hero-search__field {
    flex: 1 1 220px;
    min-width: 0;
}

.luca-hero-search__field label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--luca-hero-font-body);
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
}

/* the real <select> (before select2 replaces it) and select2's own generated wrapper both need to fill the field column */
.luca-hero-search__field select,
.luca-hero-search__field .select2-container {
    width: 100% !important;
}

.luca-hero-search__field .select2-container--default .select2-selection--single {
    height: 46px;
    display: flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
}

.luca-hero-search__field .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    font-family: var(--luca-hero-font-body);
    font-size: 14px;
    color: var(--luca-hero-ink);
    line-height: 44px;
}

.luca-hero-search__field .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
}

.luca-hero-search__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 12px;
    background: var(--luca-hero-coral);
    color: #ffffff;
    font-family: var(--luca-hero-font-body);
    font-size: 15px;
    font-weight: 700;
    padding: 13px 26px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.luca-hero-search__cta:hover {
    background: var(--luca-hero-coral-dark);
    transform: translateY(-1px);
}

.luca-hero-search__cta:focus-visible {
    outline: 3px solid var(--luca-hero-ink);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .luca-hero-search__panel {
        border-radius: 20px;
    }

    .luca-hero-search__tab {
        font-size: 13px;
        padding: 10px 8px;
    }

    .luca-hero-search__fields {
        flex-direction: column;
        align-items: stretch;
    }

    .luca-hero-search__cta {
        width: 100%;
        justify-content: center;
    }
}


/* HOME FINAL POLISH — lighter hero rhythm, same content and behavior. */
.hero-section-landing .main-head > span {
    margin-bottom: 14px !important;
}
.hero-section-landing .main-head h1 {
    max-width: 610px;
    margin-bottom: 10px !important;
    line-height: 1.08;
}
.hero-section-landing .main-head > p {
    max-width: 610px;
    margin-bottom: 18px !important;
}
.hero-section-landing .main-head > .d-flex {
    margin-bottom: 18px !important;
}
.hero-section-landing .luca-hero-value {
    margin-bottom: 22px;
}

@media (max-width: 991.98px) {
    .hero-section-landing .main-head h1,
    .hero-section-landing .main-head > p {
        max-width: none;
    }
}


/* HERO PRIMARY CTA — warm black primary action, brand-yellow media action. */
.hero-section-landing .luca-hero-start {
    background: #302d2a;
    border: 1.5px solid #302d2a;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 8px 18px -10px rgba(48, 45, 42, .48);
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.hero-section-landing .luca-hero-start:hover,
.hero-section-landing .luca-hero-start:focus-visible {
    background: #1f1d1b;
    border-color: #1f1d1b;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -10px rgba(48, 45, 42, .58);
}

.hero-section-landing .vid-btn {
    background: #f2bd48 !important;
}
.hero-section-landing .vid-btn i {
    color: #302d2a !important;
}
.hero-section-landing .vid-btn:hover,
.hero-section-landing .vid-btn:focus-visible {
    background: #e8af31 !important;
}