/**
 * Filter block — plain-text "quick filter" links rendered by FilterBlockCell
 * (rilassi menu-category style): uppercase grey labels that turn red when
 * selected. Each facet is its own one-line row (Destination on one line,
 * Timeline on the next); links are multi-select toggles, so several can be
 * active at once. Every row always stays on one line and scrolls left/right
 * when it overflows — at every viewport width, not only on mobile — with
 * prev/next arrows (injected by filter-block.js) revealing the off-screen pills
 * on the side that still has them.
 */

.th2-filter-block { padding: 28px 0; }

/* Client-side filter (filter-block.js): cards that don't match the active pills
   are hidden outright. Matching cards fade in so the grid re-flows smoothly
   rather than snapping. */
.lc-filter-card.lc-hidden { display: none !important; }
.lc-filter-card { animation: lc-filter-fade-in .2s ease both; }
@keyframes lc-filter-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .lc-filter-card { animation: none; }
}

/* Horizontal-scroll arrows for the filter rows (injected by filter-block.js).
   Hidden everywhere by default; the mobile media query reveals the relevant one
   only while its side of the row still has pills off-screen. Tapping scrolls. */
.th2-filter-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 40px;
    display: none;
    align-items: center;
    border: 0;
    padding: 0;
    color: var(--lc-filter-accent, #dc2626);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.th2-filter-arrow-prev {
    left: 0;
    justify-content: flex-start;
    padding-left: 2px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff 55%);
}
.th2-filter-arrow-next {
    right: 0;
    justify-content: flex-end;
    padding-right: 2px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 55%);
}

/* Per-block "nothing matches this filter" message. */
.lc-filter-empty {
    margin: 0;
    padding: 24px 0;
    text-align: center;
    color: #6b7280;
    font-size: 0.95rem;
}
.lc-filter-empty[hidden] { display: none; }

/* Embedded at the top of a products block (cards or landing style): drop the
   standalone vertical padding and the nested .container gutters so the pills
   line up with the section head and cards below rather than double-indenting. */
.th2-products-block .th2-filter-block,
.th2-landing-products .th2-filter-block { padding: 0 0 18px; }
.th2-products-block .th2-filter-block .container,
.th2-landing-products .th2-filter-block .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* All facets share a single row; keep a little gap if two groups ever render. */
.th2-filter-block .th2-filter-group + .th2-filter-group { margin-top: 8px; }

/* The row is the arrows' anchor at every size (arrows are absolutely placed). */
.th2-filter-block .th2-filter-group { position: relative; }

/* One-line row of text links: never wraps, scrolls sideways when it overflows.
   Scrollbar hidden; drag/swipe and the injected arrows still move it. */
.th2-filter-block .th2-filter-scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px 28px;
    padding: 4px 2px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.th2-filter-block .th2-filter-scroll::-webkit-scrollbar { display: none; }

/* Centre the pills only while they all fit; once the row overflows, left-align
   so the first pills stay reachable by scroll (centred flex content clips off
   the left edge, which can't be scrolled back into view). filter-block.js sets
   the has-overflow-* classes whenever either side has pills off-screen. */
.th2-filter-block .th2-filter-group.has-overflow-start .th2-filter-scroll,
.th2-filter-block .th2-filter-group.has-overflow-end .th2-filter-scroll {
    justify-content: flex-start;
}

/* Scroll arrows: filter-block.js injects a prev/next button into each group and
   toggles the overflow classes on scroll/resize. A button shows only while its
   side of the row still has pills off-screen; tapping it scrolls. Without JS no
   button is injected and no class is set (safe fallback). */
.th2-filter-block .th2-filter-group.has-overflow-start .th2-filter-arrow-prev,
.th2-filter-block .th2-filter-group.has-overflow-end .th2-filter-arrow-next {
    display: flex;
}

.th2-filter-block .th2-filter-pill {
    display: inline-flex;
    align-items: center;
    /* Never shrink in the one-line scroller, so long rows overflow (and scroll)
       rather than squashing the labels. */
    flex: 0 0 auto;
    white-space: nowrap;
    background: none;
    border: 0;
    padding: 2px 0;
    color: #6b7280;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .15s ease;
}
/* Use :focus-visible (not :focus) so a mouse click that DESELECTS a pill doesn't
   leave it looking active from the lingering focus accent — keyboard focus still
   shows it. Hover clears when the pointer leaves. */
.th2-filter-block .th2-filter-pill:hover,
.th2-filter-block .th2-filter-pill:focus-visible {
    color: var(--lc-filter-accent, #dc2626);
}

/* The currently selected facet(s) — stays red so the visitor can see what the
   page is filtered by. Clicking it again clears that value. */
.th2-filter-block .th2-filter-pill.is-active {
    color: var(--lc-filter-accent, #dc2626);
}

/* Mobile: smaller, tighter labels so more pills fit per scroll step on phones.
   (The one-line scroll and arrows are global, above — not mobile-only.) */
@media (max-width: 768px) {
    .th2-filter-block .th2-filter-pill {
        font-size: 0.8rem;
        letter-spacing: 0.02em;
    }
}