/*
 * MOBILE SERVICES V1 — app-like mobile polish for /services only, continuing the Mobile track
 * (feature/mobile-app-ui-v1) after Home (luca-mobile-home.css). Loaded exclusively from
 * resources/views/frontend/home/services.blade.php's own @push('styles'), after
 * luca-public-listing.css (the shared Services/Events/Rentals desktop+base-mobile system) and
 * listing-card-v2.css (the shared card component) - so every rule below only ever OVERRIDES
 * those two files' own existing selectors, never replaces their markup or JS contract.
 *
 * Scope discipline (per this ticket's own section 23/24): every rule lives inside
 * @media (max-width: 767.98px) and, wherever the shared file's own selectors would otherwise
 * also match Events/Rentals, is additionally scoped under .luca-public-listing--services -
 * Events/Rentals keep exactly their current mobile presentation (the base @media rules already
 * in luca-public-listing.css/listing-card-v2.css) until their own ticket promotes shared
 * patterns here deliberately. luca-public-listing.css, listing-card-v2.css and
 * luca-mobile-foundation.css are never edited by this file - additive only, same discipline
 * luca-mobile-home.css already established for Home.
 *
 * Typography decision (product, not this ticket's call): reuse Inter, the real font the whole
 * site already loads (style.css's own @import + body{font-family:"Inter"}) - not Exo2/Asap,
 * which luca-public-listing.css's own --luca-font-heading/--luca-font-body tokens name but
 * which are never actually loaded anywhere (silently falling back to system-ui today, on
 * Desktop too - a pre-existing, site-wide gap, out of this ticket's single-page scope).
 * Redeclaring those same two custom properties on .luca-public-listing--services, mobile-only,
 * is enough on its own - every heading/body consumer in the shared CSS (hero title, tabs,
 * toolbar h1, filter labels, card title/price/location/age, CTA buttons) already reads them via
 * var(), so one override cascades to all of them with no per-selector duplication.
 */

@media (max-width: 767.98px) {
    .luca-public-listing--services {
        --luca-font-heading: "Inter", sans-serif;
        --luca-font-body: "Inter", sans-serif;
    }

    /* ==================== VISUAL POLISH 1.1: top-of-page spacing rhythm ====================
       Real-screenshot finding: Hero/Tabs/Filter/Result-summary each carry their own generous
       desktop-derived spacing (hero padding, tabs track margin, the results column's own
       30px top padding), which independently are fine but stacked together on a short mobile
       viewport reads as separate floating blocks rather than one continuous "Dienstleistungen
       -> Filter -> results" sequence. Tightened here only (not the shared file's own base
       values, so Desktop/tablet and Events/Rentals keep their exact current spacing). */
    .luca-public-hero--services {
        padding-bottom: 14px;
    }

    .luca-public-hero--services + .luca-public-tabs .luca-public-tabs__track {
        margin: 10px 0 8px;
    }

    /* NOTE: the real, currently-winning padding here is legacy style.css's unconditional
       .service-section { padding: 60px 0px 75px; } - NOT luca-public-listing.css's own
       ".luca-public-listing .main-section.service-section" rule, which looks like it should
       override it (higher specificity) but never actually can: every one of this section's
       classes (service-section, main-section, luca-public-listing, luca-public-listing--services)
       lives on the SAME single <section> element, and a descendant combinator (the space in that
       selector) only ever matches true ancestor/descendant pairs, never a class co-existing on
       the same node - pre-existing in the shared file, confirmed by directly testing
       element.matches(...) against both selectors (both return false), not fixed here (out of
       this ticket's file scope). Targeting the page's own unique class directly (no descendant
       combinator, so it actually matches this element) at equal specificity + later source order
       reliably wins instead. */
    .luca-public-listing--services {
        padding-top: 16px;
        padding-bottom: 18px;
    }

    /* ==================== hero / page identity ====================
       IMPORTANT: luca-public-hero.blade.php renders the hero <section> and the tabs <nav> as
       SIBLINGS of services.blade.php's own <section class="luca-public-listing--services">, not
       descendants of it - `.luca-public-listing--services .luca-public-hero__title` (or setting
       the two --luca-font-* custom properties on that section, which only inherit DOWN into its
       own descendants) would silently match/cascade to nothing. The hero section does carry its
       own page-specific class (.luca-public-hero--services), used directly below instead; the
       tabs <nav> has no such class of its own, so it is reached via the adjacent-sibling
       combinator (`+`) off that same hero section - see "segmented type switch" below. Direct
       font-family (not the --luca-font-* custom properties, which cannot cross this sibling
       boundary either) keeps both scopes simple and independently correct. */
    .luca-public-hero--services .luca-public-hero__title,
    .luca-public-hero--services .luca-public-hero__subtitle,
    .luca-public-hero--services .luca-public-hero__tagline {
        font-family: "Inter", sans-serif;
    }

    .luca-public-hero--services .luca-public-hero__subtitle {
        font-size: 0.9rem;
    }

    .luca-public-hero--services .luca-public-hero__tagline {
        font-size: 0.85rem;
    }

    /* ==================== segmented type switch ====================
       luca-public-listing.css's own shared mobile rule (padding:9px 14px) measures ~38px tall -
       under the 44px tap-target floor this ticket's own section 9 asks for. Scoped here (not
       edited in the shared file) so Events/Rentals keep their current tab sizing until promoted
       deliberately - see this file's own header comment. See the note above for why this reaches
       the tabs via an adjacent-sibling combinator rather than a descendant one. */
    .luca-public-hero--services + .luca-public-tabs .luca-public-tabs__item {
        padding-top: 12px;
        padding-bottom: 12px;
        font-family: "Inter", sans-serif;
    }

    /* ==================== filter toolbar (quick action, not a hidden sidebar) ====================
       ORDERING NOTE: the toggle button+panel (.col-lg-3) and the result-summary/cards (.col-lg-9)
       are two separate Bootstrap columns - .col-lg-3 renders first in the markup (so the sidebar
       reads naturally on Desktop), and re-sequencing them on mobile would mean either pushing the
       WHOLE filter block after the cards+load-more+joinus CTA (a plain flex `order` swap on these
       two columns - tried, rejected: buries Filter at the very bottom, the opposite of "quick") or
       physically relocating the button/panel markup into the results column (breaks Desktop's
       sidebar, or forces duplicate #luca-filter-panel ids to keep both layouts - both explicitly
       out of bounds). This ticket's own section 12 shows both "[Filter] count" and
       "count [Filter]" as equally valid, so Filter-first (the existing order) stays, styled here
       to read as one quick-action bar together with the result summary right below it - not
       Desktop's sidebar leftovers. */
    .luca-public-listing--services .luca-filter-toggle {
        min-height: 48px;
        margin-bottom: 8px !important;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(35, 50, 74, 0.06);
    }

    .luca-public-listing--services .luca-list-filter.card {
        border-radius: var(--luca-mobile-card-radius, 14px);
    }

    /* ==================== result summary ====================
       VISUAL POLISH 1.1: real-screenshot finding - the real copy (web.home.services_section_heading,
       "Finde passende Dienstleistungen für euch") is a full sentence, not a short label, and the h1
       is a `d-flex` row with the count as a second flex item - at the previous, still fairly large
       1.15rem/default line-height it read as oversized and wrapped across several lines. flex-wrap
       is added so the count span can drop to its own line rather than squeezing the sentence
       narrower; copy/markup/count logic untouched, presentation only. */
    .luca-public-listing--services .luca-list-toolbar {
        margin-bottom: 10px;
    }

    .luca-public-listing--services .luca-list-toolbar h1 {
        flex-wrap: wrap;
        row-gap: 2px;
        font-size: 1rem;
        line-height: 1.3;
        font-weight: 600;
    }

    /* Apply Filter stays reachable without hunting for it at the bottom of a long, scrolled
       filter panel - a plain `position:sticky` on the existing button, no new markup/JS. Offset
       by the fixed bottom-nav's own reserved height+safe-area (the same tokens Foundation 1A
       already uses for body's padding-bottom) plus 8px breathing room - a flat `bottom:8px` would
       place this sticky button UNDER the bottom-nav's own 60px+ band (it sits at z-index 1040,
       well above this button's default stacking), hiding the one control this fix exists to keep
       visible. */
    .luca-public-listing--services .luca-list-filter #apply-filter {
        position: sticky;
        bottom: calc(var(--luca-mobile-bottom-nav-height, 60px) + var(--luca-mobile-safe-bottom, 0px) + 8px);
        min-height: 48px;
    }

    /* ==================== results cards ====================
       VISUAL POLISH 1.1: real-screenshot finding - cards read as structurally fine but too tall/
       dense on mobile. Every field stays (image, type, title, location, ages, environment, price,
       favorite, CTA) - only their own spacing/sizing is tightened, scoped to Services so Events/
       Rentals (which share listing-card-v2.css's base card) keep their current card proportions. */
    .luca-public-listing--services .listing-card-v2-media {
        aspect-ratio: 3 / 2;
    }

    .luca-public-listing--services .luca-listing-card__body {
        padding: 12px 14px !important;
    }

    .luca-public-listing--services .luca-listing-card__title {
        font-size: 1rem;
        margin-bottom: 4px !important;
        min-height: 0;
    }

    .luca-public-listing--services .luca-listing-card__meta {
        margin-bottom: 6px !important;
    }

    .luca-public-listing--services .luca-listing-card__age,
    .luca-public-listing--services .luca-listing-card__environment {
        margin-bottom: 6px !important;
    }

    .luca-public-listing--services .luca-listing-card__price {
        margin-bottom: 6px !important;
    }

    .luca-public-listing--services .luca-listing-card__footer {
        margin-top: 4px;
    }

    /* CTA stays at the 44px tap-target floor listing-card-v2.css's own mobile rule already sets -
       only its vertical text weight is trimmed, never its height, per this ticket's own "tap
       target cómodo" instruction. */
    .luca-public-listing--services .luca-listing-card__footer .btn {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* ==================== pagination / load more ==================== */
    /* services.js's renderPagination() renders this button's markup itself (btn btn-primary
       btn-md br-5) - a plain Bootstrap btn-md measures ~35px tall, under the 44px tap-target
       floor every other mobile control in this system already meets. CSS-only, no JS/markup
       touched. */
    .luca-public-listing--services [data-role="load-more"] button {
        min-height: 44px;
        padding-left: 28px;
        padding-right: 28px;
    }

    /* ==================== empty state ==================== */
    /* services.js's showServices() falls back to this plain markup when a real, non-empty
       search returns zero results - same "no lógica nueva" discipline as pagination above. */
    .luca-public-listing--services #service-list-container .text-danger {
        font-size: 1.05rem;
        padding: 12px 0;
    }

    /* ==================== provider CTA ("Gemeinsam machen wir...") ====================
       VISUAL POLISH 1.1: real-screenshot finding - <x-frontend.joinus premium /> already gets a
       little mobile padding from luca-public-listing.css's own shared rule (28px 22px,
       text-align:center - that rule is shared with Rentals, since both pass `premium`, so it is
       left as-is, not edited). On a small viewport with only 1-2 results the desktop-sized
       heading/body text still made this band feel like it was cutting the results short. Reached
       via a plain descendant selector (unlike the hero/tabs - this component genuinely renders
       INSIDE .col-lg-9, itself inside .luca-public-listing--services, so no sibling workaround is
       needed here). CTA link/modal target (#provider) untouched. */
    .luca-public-listing--services .luca-joinus--premium {
        margin-top: 20px;
        padding: 18px 16px !important;
    }

    .luca-public-listing--services .luca-joinus--premium h1 {
        font-size: 1.15rem;
        margin-bottom: 6px !important;
    }

    .luca-public-listing--services .luca-joinus--premium p {
        font-size: 0.9rem;
        margin-bottom: 14px !important;
    }

    .luca-public-listing--services .luca-joinus--premium .btn {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 0.95rem;
    }

    /* Footer compaction MOVED to luca-mobile-foundation.css (REAL-DEVICE POLISH): the shared
       <footer> now also compacts on Home, not just Services (footer.blade.php's own route check
       widened, class renamed luca-footer--services-mobile -> luca-footer--mobile-compact) - see
       that file's own comment for the full rationale. Kept out of this file so a Services-only
       reader is never misled into thinking this block is Services-scoped. */
}