/**
 * Lean header band for /excursions/ hub (page 242323).
 *
 * Replaces the 986-line inline <style> in unified-toolbar.php for this page.
 * Loaded only on /excursions/, externalized for caching, no !important wars.
 *
 * Scope: breadcrumbs + H1 + subtitle + inline trust strip.
 * Filter chips and meta row continue to come from desktop-filters.php /
 * mobile-filters.php below this band.
 */

.pca-page-hero {
    --hero-text:        #111827;
    --hero-text-muted:  #4b5563;
    --hero-text-faint:  #6b7280;
    --hero-rating-gold: #f5a524;
    --hero-divider:     #f3f4f6;

    /* Bottom padding intentionally small: #pca-desktop-filters (next sibling
       on this page) provides its own breathing room, so a fat bottom padding
       here stacks into ~33px of dead space between trust strip and chip row.
       Playwright audit measured 33px desktop / 37px mobile — both too loose.
       Tightened to land at ~25px effective gap. */
    padding: 20px 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumb wrapper — visual rhythm only; trust the breadcrumbs.php
   partial to render the actual links/aria-label.

   Note: on mobile (≤767px) the breadcrumbs.php partial's own CSS hides the
   inner #pca-breadcrumbs-wrap when inside .pca-toolbar--compact (which our
   hero is). We don't reserve a min-height here because that would leave an
   18px phantom band above the H1. When breadcrumbs render (tablet+), their
   content sets the natural height. */
.pca-page-hero__crumbs {
    margin-bottom: 12px;
}

/* On mobile the crumbs wrapper is empty (breadcrumbs hidden) and the empty
   margin-bottom adds dead space above the H1. Collapse it when the wrapper
   has no visible children. */
@media (max-width: 767px) {
    .pca-page-hero__crumbs {
        margin-bottom: 0;
    }
}

.pca-page-hero__title {
    font-size: clamp(28px, 4.2vw, 44px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--hero-text);
    margin: 0 0 10px;
    text-wrap: balance;
}

.pca-page-hero__subtitle {
    font-size: 17px;
    line-height: 1.55;
    color: var(--hero-text-muted);
    margin: 0 0 14px;
    max-width: 720px;
    text-wrap: pretty;
}

/* Inline trust strip — single line, semantic, no flex collapse */
.pca-page-hero__trust {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 15px;
    color: var(--hero-text);
}

.pca-page-hero__stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: var(--hero-rating-gold);
    line-height: 1;
}

.pca-page-hero__stars svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    /* Explicit `fill: currentColor` in CSS is more defensive than the
       `fill="currentColor"` HTML attribute, which can be overridden by any
       CSS rule that sets `fill` on the svg. Keeps the stars gold no matter
       what other site CSS evolves to. */
    fill: currentColor;
}

.pca-page-hero__rating-value {
    font-weight: 700;
    color: var(--hero-text);
}

.pca-page-hero__rating-meta {
    color: var(--hero-text-faint);
}

.pca-page-hero__trust-divider {
    width: 1px;
    height: 14px;
    background: #d1d5db;
    margin: 0 4px;
}

.pca-page-hero__pickup {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--hero-text);
}

.pca-page-hero__pickup svg {
    width: 15px;
    height: 15px;
    color: var(--hero-rating-gold);
    flex-shrink: 0;
}

/* Mobile tuning */
@media (max-width: 640px) {
    .pca-page-hero {
        /* 16px horizontal gutter so the H1 doesn't hug the screen edge.
           Playwright audit confirmed the parent (.pca-toolbar--compact) gives
           the hero zero horizontal padding on mobile, putting text at x=0.
           Bottom padding tight (8px) because #pca-mobile-filters provides 12px
           of padding-top on its own — anything more here stacks redundantly. */
        padding: 14px 16px 8px;
    }

    .pca-page-hero__title {
        line-height: 1.12;
        letter-spacing: -0.015em;
    }

    .pca-page-hero__subtitle {
        font-size: 15.5px;
        margin-bottom: 12px;
    }

    .pca-page-hero__trust {
        font-size: 14px;
        gap: 5px 8px;
    }

    .pca-page-hero__trust-divider {
        display: none; /* let flex-wrap do the line break naturally */
    }
}

/* Small respect for reduced-motion users — no animations to remove,
   but document the intent so future additions stay restrained. */
@media (prefers-reduced-motion: reduce) {
    .pca-page-hero,
    .pca-page-hero * {
        animation: none !important;
        transition: none !important;
    }
}