/*
 * LUCA-MATCH-V2: scoped visual redesign of the public Home Luca Match
 * section (resources/views/frontend/theme_1/partials/luca_match.blade.php).
 *
 * Kept as its own asset file rather than the previous inline <style>
 * block, same pattern already established for the Today page
 * (public/frontend/assets/css/today-capsule.css) and the family
 * dashboard (public/frontend/assets/css/family-dashboard.css). Every
 * rule here is prefixed .luca-match-* and touches nothing outside this
 * section.
 *
 * ENGINE FREEZE: this file only styles markup already rendered by the
 * backend/JS - it introduces no new field, no new request, no new
 * ranking/score/order of its own.
 *
 * TYPOGRAPHY: reuses the existing sitewide "Inter" font stack only - no
 * new font added. Hierarchy comes from weight/size/spacing/color.
 *
 * COLOR: warm/personal identity (cream, coral, soft green, subtle
 * yellow accent) - deliberately kept distinct from the cool
 * green/turquoise/yellow "Heute mit Luca" identity so the two features
 * stay visually distinguishable at a glance.
 */

/* ---------- section + 3D clay decoration ---------- */

.luca-match-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fdf6ef 0%, #ffffff 55%);
}

/*
 * HOME V2 VISUAL POLISH: progressive disclosure - collapsed by default so Home doesn't show the
 * compact teaser card immediately followed by this whole form wide open. max-height:0 (never
 * display:none) so the section keeps a real, measurable width the whole time - the form's own
 * unchanged initCityRemoteSelect2Germany() call still runs once on DOMContentLoaded regardless
 * of collapsed state, and a width-based widget like Select2 needs that real width at init time,
 * not a display:none ancestor, to size itself correctly. Toggled by
 * public/frontend/assets/js/home/luca-match-toggle.js, never by anything in luca-match.js.
 *
 * HOME V2 FINAL COLLAPSE FIX: `max-height:0` only collapses the CONTENT box - it does nothing to
 * padding or margin, so this section's own `py-5` (Bootstrap's fixed 3rem top/bottom padding,
 * `!important`) used to keep reserving real vertical space even while "collapsed", the opposite
 * of the intended near-zero-height closed state. `py-5` is removed from the section tag entirely
 * (luca_match.blade.php); the equivalent 3rem/2rem padding now lives ONLY in the .is-expanded
 * rule below, so it exists exactly once - never applied while collapsed, never missing once open.
 *
 * HOME V2 BUGFIX (staging: form appeared open on a normal, no-hash Home load): audited end to end -
 * public/frontend/assets/js/home/luca-match-toggle.js only ever adds .is-expanded when
 * window.location.hash is the exact string '#luca-match' (verified by executing the real script
 * against a DOM stand-in, see tests/Fixtures/js/luca-match-toggle-harness.cjs - a normal load with
 * an empty hash never adds it), no other CSS file anywhere in this project targets
 * .luca-match-section/#luca-match, and this file itself never defined a second, conflicting rule
 * for .luca-match-collapsible. The one real, concrete gap found: this stylesheet's own <link> tag
 * (luca_match.blade.php) was the ONLY one of Home's three own stylesheets with no cache-busting
 * `?v={filemtime}` query string (home-sections.css and luca-public-listing.css both already have
 * one) - a browser/CDN could easily keep serving a stale, pre-collapse copy of this exact file
 * after a deploy, which alone would reproduce "form appears open" with no JS/CSS defect at all.
 * Fixed there. #luca-match.luca-match-collapsible (below) also raises this rule's specificity from
 * a bare class to id+class, defense in depth per this ticket's own explicit preference - no
 * !important, since no real conflicting rule was ever found to need overriding.
 */
#luca-match.luca-match-collapsible {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    transition: opacity 0.25s ease;
}

#luca-match.luca-match-collapsible.is-expanded {
    max-height: none;
    overflow: visible;
    opacity: 1;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Dedicated /luca-match page: same visual system and engine, always open. */
#luca-match.luca-match-standalone {
    overflow: visible;
    padding-top: 3rem;
    padding-bottom: 3.5rem;
}

@media (max-width: 767.98px) {
    #luca-match.luca-match-collapsible.is-expanded,
    #luca-match.luca-match-standalone {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/*
 * LUCA-MATCH-FINAL-POLISH: small, lightweight decorative "clay" shapes -
 * plain CSS circles with a soft inset/outset shadow pair to read as
 * gently 3D, brand colors only, no image assets, no new library.
 * position:absolute + the section's own overflow:hidden keeps them from
 * ever causing horizontal scroll on narrow viewports; each is hidden
 * below the tablet breakpoint so they never compete with the compact
 * mobile layout.
 */
.luca-match-clay {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.luca-match-clay-coral {
    top: -30px;
    right: 6%;
    width: 90px;
    height: 90px;
    background: linear-gradient(150deg, #f4988f, #e8665d);
    box-shadow: inset -6px -8px 14px rgba(148, 52, 45, .35), inset 6px 6px 10px rgba(255, 255, 255, .35), 0 18px 30px -18px rgba(232, 102, 93, .55);
}
.luca-match-clay-green {
    bottom: 8%;
    left: 4%;
    width: 56px;
    height: 56px;
    background: linear-gradient(150deg, #9fcbb0, #6eaa89);
    box-shadow: inset -4px -6px 10px rgba(70, 110, 90, .35), inset 4px 4px 8px rgba(255, 255, 255, .3), 0 14px 24px -16px rgba(110, 170, 137, .5);
}
.luca-match-clay-yellow {
    top: 18%;
    left: 8%;
    width: 34px;
    height: 34px;
    background: linear-gradient(150deg, #f8d585, #f2bd48);
    box-shadow: inset -3px -4px 7px rgba(180, 130, 20, .35), inset 3px 3px 6px rgba(255, 255, 255, .35), 0 10px 18px -12px rgba(242, 189, 72, .55);
}
.luca-match-clay-turquoise {
    bottom: -18px;
    right: 14%;
    width: 46px;
    height: 46px;
    background: linear-gradient(150deg, #c9f1ec, #9fdfd7);
    box-shadow: inset -3px -5px 9px rgba(60, 140, 130, .3), inset 3px 3px 6px rgba(255, 255, 255, .4), 0 12px 20px -14px rgba(159, 223, 215, .5);
}

@media (max-width: 991.98px) {
    .luca-match-clay { display: none; }
}
.luca-match-hero {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 640px;
    margin: 0 auto 32px;
}
.luca-match-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #c14a42;
    margin-bottom: 10px;
}
.luca-match-eyebrow i { font-size: 13px; }
.luca-match-hero h2 {
    margin: 0 0 10px;
    font-size: 32px;
    font-weight: 800;
    color: #23302a;
}
.luca-match-hero .luca-match-subtitle {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: #23302a;
}
.luca-match-hero .luca-match-microcopy {
    margin: 0;
    font-size: 13.5px;
    color: #6b7a71;
}

@media (max-width: 575.98px) {
    .luca-match-hero h2 { font-size: 24px; }
}

/* ---------- form panel ---------- */

.luca-match-panel {
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1px solid #f1e4d6;
    border-radius: 24px;
    padding: 30px 32px;
    box-shadow: 0 20px 48px -28px rgba(35, 48, 42, .35);
    max-width: 980px;
    margin: 0 auto 28px;
}

@media (max-width: 575.98px) {
    .luca-match-panel { padding: 22px 18px; border-radius: 18px; }
}

.luca-match-field {
    position: relative;
    padding-left: 30px;
}
.luca-match-field .luca-match-step {
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fdf1ee;
    color: #c14a42;
    font-size: 11px;
    font-weight: 800;
    display: grid;
    place-items: center;
}
.luca-match-field .form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #23302a;
    margin-bottom: 6px;
}
.luca-match-field .form-label i { color: #e8665d; font-size: 14px; }

.luca-match-field .form-control,
.luca-match-field .form-select,
.luca-match-field select.select2-hidden-accessible + .select2 .select2-selection {
    border-radius: 12px;
    border: 1px solid #e6ece8;
    padding: 10px 14px;
    font-size: 14px;
    background: #fbfbf9;
    height: auto;
}
.luca-match-field .form-control:focus,
.luca-match-field .form-select:focus {
    border-color: #e8665d;
    box-shadow: 0 0 0 3px rgba(232, 102, 93, .12);
    background: #fff;
}

/*
 * LUCA-MATCH-FINAL-POLISH: row 2 - Umkreis (when shown by the unchanged
 * JS visibility logic) on the left, CTA pinned to the right via
 * margin-left:auto on its own wrapper. Because the CTA's position comes
 * from that auto margin rather than grid-column order, hiding the
 * Umkreis field never pulls the CTA left under field 1 - it always
 * lands at the right edge of the panel.
 */
.luca-match-row-2 {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 18px;
}
.luca-match-radius-slot {
    flex: 0 1 220px;
    padding-left: 30px;
}
.luca-match-submit-col {
    margin-left: auto;
}

.luca-match-submit {
    border-radius: 999px;
    background: #5e7da2;
    border: 0;
    color: #fff;
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: .01em;
    padding: 11px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: inset 0 -3px 6px rgba(42, 65, 92, .28), 0 12px 22px -12px rgba(94, 125, 162, .58);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.luca-match-submit:hover,
.luca-match-submit:focus {
    background: #526f92;
    transform: translateY(-1px);
    box-shadow: inset 0 -3px 6px rgba(42, 65, 92, .32), 0 14px 26px -12px rgba(94, 125, 162, .66);
    color: #fff;
}

@media (max-width: 767.98px) {
    .luca-match-row-2 {
        flex-direction: column;
        align-items: stretch;
    }
    .luca-match-radius-slot {
        flex-basis: auto;
        width: 100%;
    }
    .luca-match-submit-col {
        margin-left: 0;
        width: 100%;
    }
    .luca-match-submit {
        width: 100%;
    }
}

/* ---------- status / loading ---------- */

#luca-match-status {
    position: relative;
    z-index: 1;
}
#luca-match-status p {
    color: #6b7a71;
    font-size: 13.5px;
}

/* ---------- results ---------- */

#luca-match-results-heading,
#luca-match-results {
    position: relative;
    z-index: 1;
}
#luca-match-results-heading {
    text-align: center;
}

.luca-match-card {
    border: 1px solid #f1e4d6;
    border-radius: 20px;
    box-shadow: 0 14px 34px -26px rgba(35, 48, 42, .35);
    transition: transform .15s ease, box-shadow .15s ease;
}
.luca-match-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -24px rgba(35, 48, 42, .4);
}

.luca-match-card.is-featured {
    border-color: #f0c9bf;
    background: linear-gradient(155deg, #fdf6ef 0%, #ffffff 62%);
}
.luca-match-card.is-secondary {
    background: #fff;
}

.luca-match-top-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: #e8665d;
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 10px;
}

.luca-match-score-badge {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.3em 0.7em;
    border-radius: 999px;
    background: #eef8f2 !important;
    color: #4d8267 !important;
    margin-bottom: 8px;
    margin-right: 6px;
}

.luca-match-summary {
    font-size: 0.9rem;
    font-weight: 600;
    color: #6b7a71;
}

.luca-match-title {
    font-size: 17px;
    font-weight: 800;
    color: #23302a;
}

.luca-match-location-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #6b7a71;
    background: #f6f8f6;
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 10px;
}
.luca-match-location-chip i { font-size: 12px; }

.luca-match-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #4d8267;
    background: #eef8f2;
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 10px;
    margin-left: 6px;
}

.luca-match-reasons {
    font-size: 0.85rem;
    color: #495057;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.luca-match-reasons li {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fbfbf9;
    border: 1px solid #eef1ee;
    border-radius: 999px;
    padding: 3px 10px;
    margin: 0;
}

.luca-match-cta {
    border-radius: 10px;
    font-weight: 700;
    background: #e8665d;
    border: 0;
}
.luca-match-cta:hover,
.luca-match-cta:focus {
    background: #c14a42;
    color: #fff;
}

/* ---------- empty state ---------- */

.luca-match-empty {
    background: #fff;
    border: 1px dashed #e6ece8;
    border-radius: 20px;
    padding: 36px 24px;
    max-width: 520px;
    margin: 0 auto;
}
.luca-match-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f6f8f6;
    color: #8a9890;
    display: grid;
    place-items: center;
    font-size: 22px;
    margin: 0 auto 14px;
}
.luca-match-empty h4 {
    font-size: 16px;
    font-weight: 800;
    color: #23302a;
    margin-bottom: 6px;
}
.luca-match-empty p {
    font-size: 13.5px;
    color: #6b7a71;
    margin-bottom: 16px;
}
.luca-match-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.luca-match-empty-actions button,
.luca-match-empty-actions a {
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 8px 16px;
    border: 1px solid #e6ece8;
    background: #fbfbf9;
    color: #23302a;
    text-decoration: none;
}
.luca-match-empty-actions button:hover,
.luca-match-empty-actions a:hover {
    border-color: #e8665d;
    color: #c14a42;
}

@media (max-width: 575.98px) {
    .luca-match-empty-actions button,
    .luca-match-empty-actions a { width: 100%; }
}