/* ============================================================
   IVK Tour Grid - /tours/ archive facet filter
   ============================================================

   Loaded only on the ivk_comparison post type archive, by
   IVK_Tour_Grid_Comparison_Archive::enqueue_assets(). Deliberately its own file
   rather than an addition to ivk-comparison-card.css: that stylesheet also
   loads on tag archives and on every guide post carrying
   [ivk_comparison_card], none of which ever render a filter.

   WP ROCKET USED CSS
   ------------------
   Every class here is prefixed ivk-af-, so ONE safelist entry covers the file:

       (.*)ivk-af(.*)

   That entry is required, not an optimisation. .ivk-af-chip-on and
   .ivk-af-chip-off only appear in the HTML once something is selected or
   something is exhausted, so Used CSS generated from an unfiltered /tours/ load
   contains neither rule and both states render as an ordinary chip: the
   selected chip becomes indistinguishable, and the disabled one looks clickable
   while doing nothing. Same class of failure as .ivk-pick-tag and
   .ivk-cheapest-tag, which are safelisted for the same reason.

   The safelist lives in the WP Rocket dashboard, so nothing in this repository
   will remind you it exists.

   Colours are literal rather than Astra variables so the block renders
   correctly if the theme changes; there is no dark mode on this site.
   ============================================================ */

.ivk-af {
    margin: 0 0 1.75rem;
    padding: 1rem 1.15rem 0.75rem;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    background: #fafbfc;
    font-size: 0.9rem;
    line-height: 1.4;
}

.ivk-af-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

/* Fixed width so the three axis labels form a column and the chip rows line up.
   Shrinks away entirely at narrow widths, see the media query below. */
.ivk-af-axis {
    flex: 0 0 6.5rem;
    font-weight: 600;
    color: #4a5259;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ivk-af-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
}

/* Base chip. The selected and disabled variants below only add to this, so a
   chip is still legible if either of those rules is stripped. */
.ivk-af-chip {
    display: inline-block;
    padding: 0.28rem 0.7rem;
    border: 1px solid #d5dae0;
    border-radius: 999px;
    background: #fff;
    color: #2c3338;
    text-decoration: none;
    white-space: nowrap;
}

a.ivk-af-chip:hover,
a.ivk-af-chip:focus {
    border-color: #1e6bb8;
    color: #1e6bb8;
    text-decoration: none;
}

.ivk-af-chip-on {
    border-color: #1e6bb8;
    background: #1e6bb8;
    color: #fff;
    font-weight: 600;
}

a.ivk-af-chip-on:hover,
a.ivk-af-chip-on:focus {
    background: #17558f;
    border-color: #17558f;
    color: #fff;
}

/* Rendered as a <span>, so it is already unclickable without this rule. The
   cursor and opacity are what say so before the click. */
.ivk-af-chip-off {
    border-style: dashed;
    background: #f2f4f6;
    color: #9aa2aa;
    cursor: not-allowed;
}

.ivk-af-count {
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.ivk-af-foot {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
    padding-top: 0.6rem;
    border-top: 1px solid #e8ebee;
}

.ivk-af-summary {
    font-weight: 600;
    color: #2c3338;
}

.ivk-af-clear {
    color: #1e6bb8;
    text-decoration: underline;
}

/* Pushed to the right edge of the bar on desktop. On mobile the rule in the
   media query drops this and gives it a full-width line of its own. */
.ivk-af-sort {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin-left: auto;
}

/* Matches .ivk-af-axis so the bar reads as the same kind of label as the chip
   rows above it. */
.ivk-af-sort-label {
    font-weight: 600;
    color: #4a5259;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

a.ivk-af-sort-opt {
    color: #1e6bb8;
    text-decoration: underline;
}

a.ivk-af-sort-opt:hover,
a.ivk-af-sort-opt:focus {
    color: #17558f;
}

/* Rendered as a <span>, so weight and colour are the whole distinction. No
   pill: these reorder the list, they do not narrow it, and borrowing the chip
   shape would say otherwise. */
.ivk-af-sort-on {
    font-weight: 700;
    color: #2c3338;
}

.ivk-af-sort-sep {
    color: #c3c9cf;
}

/* Below this the axis label sits on its own line above its chips, because a
   6.5rem gutter plus a wrapped chip row leaves too little room for either. */
@media (max-width: 600px) {
    .ivk-af {
        padding: 0.85rem 0.9rem 0.6rem;
    }

    .ivk-af-row {
        display: block;
    }

    .ivk-af-axis {
        display: block;
        margin-bottom: 0.35rem;
    }

    /* One line per axis, scrolled sideways, instead of wrapping to eight rows.
       At 412px the wrapped layout filled the whole first screen and pushed
       every card below the fold. */
    .ivk-af-chips {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;

        /* Fades the right edge so a cut-off chip reads as "there is more"
           rather than as a rendering fault.

           mask-image rather than a gradient overlay, because a gradient has to
           be painted in the container's own background colour and would break
           the moment that colour changes; a mask is colour agnostic. It also
           self-hides: when a row is short enough not to overflow, the faded
           strip covers empty container background and nothing is visible.

           Right edge only. A symmetric mask would dim the FIRST chip at rest,
           which is the one position every row starts in. */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);

        /* The strip is short and the fade already signals the overflow, so the
           bar would cost more vertical space than it returns. Keyboard users
           are unaffected: focusing a chip scrolls it into view by itself. */
        scrollbar-width: none;
    }

    .ivk-af-chips::-webkit-scrollbar {
        display: none;
    }

    /* Required, not cosmetic. Flex items default to flex-shrink: 1, so without
       this the chips would squash to fit the viewport and the row would never
       overflow or scroll at all. */
    .ivk-af-chip {
        flex: 0 0 auto;
    }

    /* Its own full-width line under the summary, rather than pushed right. */
    .ivk-af-sort {
        flex-basis: 100%;
        margin-left: 0;
        margin-top: 0.15rem;
    }
}