/*
 * CARD-V2: Listing Card System V2 - shared, small design tokens/classes
 * for every PUBLIC listing card and the editorial detail page (provider
 * service / event / rental / Luca editorial). Not a framework, not a
 * full redesign - just the handful of classes that were previously
 * duplicated or hardcoded inline (fixed 305x190 image sizing, ad-hoc
 * badge colors) across services.js / theme_1 partials / the detail page.
 *
 * Luca brand palette (see docs/control-center/LISTING-CARD-V2.md):
 * green #6eaa89, coral #e8665d, yellow #f2bd48, turquoise #9fdfd7.
 */

:root {
    --luca-green: #6eaa89;
    --luca-coral: #e8665d;
    --luca-yellow: #f2bd48;
    --luca-turquoise: #9fdfd7;
    /* VISUAL POLISH: darker, brand-derived green for the editorial
       primary CTA - a plain black/btn-dark button read too heavy for
       "warm, family-friendly, premium but simple". */
    --luca-green-dark: #4f7f67;
    --luca-green-darker: #3f6252;
    --luca-green-soft-bg: rgba(110, 170, 137, 0.12);
    --luca-turquoise-soft-bg: rgba(159, 223, 215, 0.22);
    /* PREMIUM CARD FALLBACK: soft tints + a readable-on-light-bg dark shade per type, same
       pairing convention as --luca-green(-dark) above (soft background, saturated/darkened
       foreground) - coral and yellow didn't have one yet. */
    --luca-coral-soft-bg: rgba(232, 102, 93, 0.14);
    --luca-yellow-soft-bg: rgba(242, 189, 72, 0.20);
    --luca-yellow-dark: #96721f;
}

/* Responsive image container - replaces fixed inline width/height so a
   card never overflows or jumps on tablet/mobile. 4:3 matches the one
   original Luca illustration convention already documented for
   editorial assets. */
.listing-card-v2-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 5px;
}

.listing-card-v2-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* PROVIDER/PUBLIC CARDS - PREMIUM FALLBACK (no image yet): fills the exact same
   .listing-card-v2-media box (100%/100%, so the 4:3 aspect-ratio and grid-driven width above
   are completely untouched) instead of a generic grey stock icon. Two render paths use this,
   never overlapping on the same <div>:
     1. No real image at all (the common case: an empty gallery) - only this block is
        rendered, no <img> at all.
     2. A real image URL existed but failed to load (rare - publicListingAsset() already
        confirms the file exists on disk at render time, so this is only a same-request race
        or a since-deleted file) - the <img> is hidden and this pre-rendered, initially-hidden
        sibling is revealed by the plain two-line inline onerror handler already on the <img>
        in both render paths (luca-listing-card.blade.php / luca-listing-card.js). No new
        shared JS function or script dependency, since this same partial also renders on Home/
        GEO pages that never load luca-listing-card.js.
   One shared block, three color variants (service/event/rental) via a modifier class - see
   luca-public-listing.css for the pages that need type/hint copy sizing tweaks; base
   layout/colors live here since every page using .listing-card-v2-media needs them. */
.luca-card-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    padding: 12px;
}

.luca-card-fallback__icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    font-size: 20px;
    margin-bottom: 4px;
}

.luca-card-fallback__hint {
    font-size: 0.8rem;
    font-weight: 700;
}

.luca-card-fallback__type {
    font-size: 0.72rem;
    opacity: .82;
}

.luca-card-fallback--service {
    background: linear-gradient(155deg, #f2fbf9, var(--luca-turquoise-soft-bg));
    color: var(--luca-green-dark);
}

.luca-card-fallback--service .luca-card-fallback__icon {
    color: var(--luca-green);
}

.luca-card-fallback--event {
    background: linear-gradient(155deg, #fdf3f2, var(--luca-coral-soft-bg));
    color: #9c3e36;
}

.luca-card-fallback--event .luca-card-fallback__icon {
    color: var(--luca-coral);
}

.luca-card-fallback--rental {
    background: linear-gradient(155deg, #fdf9ec, var(--luca-yellow-soft-bg));
    color: var(--luca-yellow-dark);
}

.luca-card-fallback--rental .luca-card-fallback__icon {
    color: var(--luca-yellow-dark);
}

/* Luca Tipp badge - premium, minimal, brand color, never color-only
   (always paired with the "Luca Tipp" text, never a bare dot/icon). */
.luca-tipp-badge {
    display: inline-flex;
    align-items: center;
    background-color: var(--luca-green);
    color: #ffffff;
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: 5px;
}

/* Kostenlos price treatment - same visual weight as a real price badge,
   never a bare "€0". VISUAL POLISH: now a soft light-green chip (was
   text-only) so it clearly reads as secondary/lower-emphasis next to
   the darker "Details ansehen" primary CTA, per Task 1/2. */
.luca-kostenlos-badge {
    display: inline-flex;
    align-items: center;
    color: var(--luca-green-darker);
    font-weight: 600;
}

.luca-kostenlos-chip {
    background-color: var(--luca-green-soft-bg) !important;
    border: none !important;
    border-radius: 999px;
}

/* Editorial primary CTA ("Details ansehen") - darker brand green
   instead of a plain black/btn-dark button. Scoped to this one class,
   never a global .btn-dark override (Task 8). */
.luca-details-cta {
    background-color: var(--luca-green-dark) !important;
    border-color: var(--luca-green-dark) !important;
    color: #ffffff !important;
    border-radius: 999px;
}

.luca-details-cta:hover,
.luca-details-cta:focus-visible {
    background-color: var(--luca-green-darker) !important;
    border-color: var(--luca-green-darker) !important;
    color: #ffffff !important;
}

/* Environment (indoor/outdoor/both) chip - VISUAL POLISH: soft
   turquoise chip instead of plain gray text, joining the same coherent
   badge family as Luca Tipp/Kostenlos - still text-based, never
   color-only. */
.listing-environment-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--luca-green-darker);
    background-color: var(--luca-turquoise-soft-bg);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

/* Editorial detail sidebar actions (Task 4). "Offizielle Informationen"
   - light background, green border/text, subtle hover, never
   promotional-looking. "Route ansehen" - same family, one step lower
   emphasis (soft filled instead of outlined). */
.luca-source-cta {
    background-color: #ffffff;
    border: 1.5px solid var(--luca-green);
    color: var(--luca-green-darker);
    border-radius: 999px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.luca-source-cta:hover,
.luca-source-cta:focus-visible {
    background-color: var(--luca-green-soft-bg);
    border-color: var(--luca-green-dark);
    color: var(--luca-green-darker);
}

.luca-route-cta {
    background-color: var(--luca-green-soft-bg);
    border: 1.5px solid transparent;
    color: var(--luca-green-darker);
    border-radius: 999px;
    transition: background-color 0.15s ease;
}

.luca-route-cta:hover,
.luca-route-cta:focus-visible {
    background-color: var(--luca-turquoise-soft-bg);
    color: var(--luca-green-darker);
}

/* Editorial detail hero grouping (Task 3): title, badges row, then
   location/ages - a small breathable gap between each, no page
   redesign. */
.luca-hero-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0.75rem;
}

.luca-hero-meta {
    margin-bottom: 0.5rem;
}

/* Task 5: breathing room between the hero and the first content card,
   without inflating the whole page. */
.luca-hero-spacer {
    margin-top: 1.25rem;
}

/* Task 6: "Gut zu wissen" as a light two-column-ish fact row on wider
   screens instead of a sparse stacked list - still just already-
   verified fields (Kostenlos, environment, verified date), nothing
   invented. */
.luca-facts-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}

.luca-facts-row > div {
    display: flex;
    align-items: center;
}

/* Visible keyboard focus state for card CTAs/links (Task 15/7). */
.listing-card-v2-cta:focus-visible,
.luca-tipp-badge:focus-visible {
    outline: 2px solid var(--luca-turquoise);
    outline-offset: 2px;
}

/* Task 7: prevent editorial card badges/CTAs from ever overflowing or
   colliding on narrow screens. */
@media (max-width: 575.98px) {
    .luca-hero-badges {
        gap: 0.4rem;
    }

    .luca-details-cta,
    .luca-source-cta,
    .luca-route-cta {
        font-size: 0.95rem;
    }
}

/* BOOKING-UI-V2 PHASE 5: canonical public listing card (Dienstleistungen /
   Veranstaltungen / Vermietungen). Structure is emitted by the shared
   Blade partial and by luca-listing-card.js; every rule below is scoped
   under .luca-listing-card so nothing leaks to other .card markup. */
.luca-listing-card {
    height: 100%;
}

.luca-listing-card__type {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--luca-green-dark);
}

.luca-listing-card--event .luca-listing-card__type {
    color: var(--luca-coral);
}

.luca-listing-card--rental .luca-listing-card__type {
    color: #a97c11;
}

.luca-listing-card__meta {
    flex-wrap: wrap;
    row-gap: 4px;
}

.luca-listing-card__price {
    margin-bottom: 8px;
    line-height: 1.2;
}

.luca-listing-card__footer {
    margin-top: 8px;
}

.luca-listing-card__cta {
    border-radius: 999px;
}

/* RESPONSIVE GLOBAL FINAL: canonical public card. The grid comes from the
   Bootstrap columns the callers already use (col-lg-4 col-md-6: 3 columns
   desktop, 2 tablet, 1 mobile); this keeps the card itself from overflowing
   and gives the CTA a comfortable tap height. */
.luca-listing-card {
    min-width: 0;
}

.luca-listing-card__title,
.luca-listing-card__location,
.luca-listing-card__age {
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    .luca-listing-card__cta,
    .luca-listing-card .listing-card-v2-cta {
        min-height: 44px;
    }

    .luca-listing-card .card-body {
        padding: 14px;
    }

    .luca-listing-card__title {
        font-size: 1.05rem;
    }
}