/* ===========================================================================
   Trip search
   ===========================================================================
   A filter rail and a grid of cards. The cards themselves are .hww-trip from
   hww-design.css — this file only places them and styles what surrounds them.
   ========================================================================= */

.hww-tr { background: var(--hww-paper, #f8f5ef); padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }

.hww-tr__head { padding: clamp(1.6rem, 1rem + 2vw, 3rem) 0 clamp(1.2rem, 1rem + 1vw, 2rem); }
.hww-tr__head h1 { margin: .3em 0 .2em; font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); }
.hww-tr__head .hww-lede { margin: 0; }

/* Rail beside results, and the rail is the narrow one. */
.hww-tr__body { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 992px) {
    .hww-tr__body { grid-template-columns: 17rem 1fr; }
}

/* ------------------------------------------------------------------ rail -- */
.hww-tr__rail {
    background: var(--hww-snow, #fff);
    border: 1px solid var(--hww-edge, #ddd4c4);
    border-radius: 12px;
}
@media (min-width: 992px) {
    /* Follows you down a long list rather than scrolling away at the top. */
    .hww-tr__rail { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; }
    .hww-tr__rail-top { display: none; }
}
.hww-tr__rail-body { padding: 1rem 1.1rem 1.4rem; }
/* The sidebar's own desktop framing has nothing to do inside this panel. */
.hww-tr__rail-body .bravo_filter { box-shadow: none; border: 0; padding: 0; background: none; }

.hww-tr__rail-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 1rem .9rem 1.2rem;
    border-bottom: 1px solid var(--hww-edge, #ddd4c4);
    font-family: var(--hww-display, system-ui); font-weight: 800;
}
.hww-tr__x {
    width: 2.5rem; height: 2.5rem; border: 0; background: none; cursor: pointer;
    font-size: 1.6rem; display: grid; place-items: center; border-radius: 50%;
    color: var(--hww-ink, #17202e);
}

/*
 | Below 992px the rail becomes a sheet from the bottom.
 |
 | Stacked instead, it would put 254 lines of filters above the first trip on
 | the page whose entire job is showing trips.
 */
@media (max-width: 991px) {
    .hww-tr__rail {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-panel, 1010);
        max-height: 85vh; display: flex; flex-direction: column;
        border-radius: 14px 14px 0 0; border-left: 0; border-right: 0; border-bottom: 0;
        transform: translateY(100%);
        transition: transform .26s cubic-bezier(.22, .8, .28, 1);
        box-shadow: 0 -8px 30px rgba(23, 32, 46, .25);
    }
    .hww-tr__rail.is-open { transform: translateY(0); }
    .hww-tr__rail-body { overflow-y: auto; padding-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 992px) { .hww-tr__scrim { display: none; } }

.hww-tr__scrim { position: fixed; inset: 0; z-index: var(--z-scrim, 1000); background: rgba(23, 32, 46, .5); }
.hww-tr__scrim[hidden] { display: none; }

/* ---------------------------------------------------------------- search -- */
.hww-tr__search {
    position: relative; display: flex; align-items: center; gap: .6rem;
    background: var(--hww-snow, #fff);
    border: 1px solid var(--hww-edge, #ddd4c4);
    border-radius: 999px; padding: .35rem .4rem .35rem 1rem;
    margin-bottom: 1.2rem;
}
.hww-tr__search > i { font-size: 1.25rem; color: var(--hww-ink-faint, #858d9c); flex: none; }
.hww-tr__search input {
    flex: 1; min-width: 0; border: 0; background: none; outline: none;
    font: inherit; font-size: 1rem; padding: .6em 0; color: var(--hww-ink, #17202e);
}
.hww-tr__search:focus-within {
    border-color: var(--hww-flame, #149c48);
    box-shadow: 0 0 0 3px var(--hww-flame-wash, rgba(239,136,33,.1));
}

.hww-tr__filter-btn {
    flex: none; display: inline-flex; align-items: center; gap: .45rem;
    padding: .6em 1.1em; border-radius: 999px; cursor: pointer;
    background: var(--hww-ink, #17202e); color: #fff; border: 0;
    font-family: var(--hww-display, system-ui); font-weight: 700; font-size: .88rem;
}
@media (min-width: 992px) { .hww-tr__filter-btn { display: none; } }

/* --------------------------------------------------------------- results -- */
.hww-tr__meta { margin-bottom: 1rem; }
.hww-tr__count {
    margin: 0; font-family: var(--hww-display, system-ui);
    font-weight: 700; color: var(--hww-ink, #17202e); font-size: 1rem;
}
.hww-tr__for { color: var(--hww-ink-faint, #858d9c); font-weight: 400; }

.hww-tr__grid {
    display: grid; gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
@media (max-width: 520px) { .hww-tr__grid { grid-template-columns: 1fr; gap: 1.1rem; } }

/* Dimmed and un-clickable while the next list is on its way, rather than
   blanked — the old results stay readable and nothing jumps. */
.hww-tr__results { transition: opacity .15s ease; }
.hww-tr__results.is-busy { opacity: .45; pointer-events: none; }

.hww-tr__pager { margin-top: 2rem; }
.hww-tr__pager .pagination { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 0; }
.hww-tr__pager .page-link {
    display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem;
    padding: 0 .6rem; border-radius: 8px; text-decoration: none;
    background: var(--hww-snow, #fff); border: 1px solid var(--hww-edge, #ddd4c4);
    color: var(--hww-ink, #17202e); font-weight: 600;
}
.hww-tr__pager .active .page-link {
    background: var(--hww-flame-ui, #149c48); border-color: var(--hww-flame-ui, #149c48); color: #fff;
}
.hww-tr__pager .disabled .page-link { opacity: .45; }

/* ----------------------------------------------------------------- empty -- */
.hww-tr__none {
    text-align: center; padding: clamp(2rem, 1.5rem + 3vw, 4rem) 1.2rem;
    background: var(--hww-snow, #fff);
    border: 1px dashed var(--hww-edge, #ddd4c4); border-radius: 12px;
}
.hww-tr__none i { font-size: 2.4rem; color: var(--hww-ink-faint, #858d9c); }
.hww-tr__none h3 { margin: .5em 0 .3em; }
.hww-tr__none p { margin: 0 auto 1.2rem; max-width: 42ch; color: var(--hww-ink-soft, #46536b); }
.hww-tr__clear {
    display: inline-block; padding: .7em 1.5em; border-radius: 8px;
    background: var(--hww-flame-ui, #149c48); color: #fff; text-decoration: none;
    font-family: var(--hww-display, system-ui); font-weight: 800;
}

/* ===========================================================================
   The filter panel
   ===========================================================================
   Styled here by its own class names rather than inherited from the theme.

   Every theme rule for this markup is scoped `.bravo_wrap .bravo_search_tour
   .bravo_filter …`, and this page has no .bravo_wrap ancestor — so none of
   them applied and the panel rendered as raw HTML: serif body text, nested
   bordered boxes, and Apply as a bare blue link. Adding .bravo_wrap would have
   brought the old look back; this replaces it instead.

   Flat, and close-set. The panel is a list of questions, and every border
   drawn round a group of them is a line the eye has to cross to read the next.
   ========================================================================= */

.hww-tr__rail-body .bravo_filter,
.hww-tr__rail-body .bravo_form_filter {
    background: none; border: 0; padding: 0; margin: 0; box-shadow: none;
}

/* "FILTER BY" is the panel's own title, and the panel already has one. */
.hww-tr__rail-body .filter-title { display: none; }

/* --- one question ---------------------------------------------------------- */
.hww-tr__rail-body .g-filter-item {
    border: 0; border-bottom: 1px solid var(--hww-edge-soft, #ede7dc);
    padding: 0; margin: 0; background: none;
}
.hww-tr__rail-body .g-filter-item:last-child { border-bottom: 0; }

.hww-tr__rail-body .item-title {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; padding: .85rem 0; cursor: pointer; margin: 0; border: 0;
}
.hww-tr__rail-body .item-title h4 {
    margin: 0; font-family: var(--hww-display, system-ui);
    font-size: .78rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--hww-ink, #17202e);
}
.hww-tr__rail-body .item-title .fa {
    color: var(--hww-ink-faint, #858d9c); font-size: .9rem;
    transition: transform .18s ease;
}
.hww-tr__rail-body .item-title.collapsed .fa,
.hww-tr__rail-body .item-title .fa-angle-down { transform: rotate(180deg); }

.hww-tr__rail-body .item-content { padding: 0 0 .9rem; }

/* --- checkboxes ------------------------------------------------------------ */
/*
 | The theme draws these with a .checkmark span over a hidden input. That works
 | but sets them a serif line-height apart; tightened, and given the same green
 | tick the forms use so a chosen filter reads the same as a chosen option
 | anywhere else on the site.
 */
.hww-tr__rail-body ul,
.hww-tr__rail-body li { list-style: none; margin: 0; padding: 0; }

.hww-tr__rail-body .bravo-checkbox { margin: 0; }
.hww-tr__rail-body .bravo-checkbox label {
    position: relative; display: flex; align-items: flex-start; gap: .55rem;
    padding: .32rem 0 .32rem 0; margin: 0; cursor: pointer;
    font-family: var(--hww-text, inherit); font-size: .92rem; line-height: 1.35;
    color: var(--hww-ink-soft, #46536b);
    text-transform: none; letter-spacing: normal; font-weight: 400;
}
.hww-tr__rail-body .bravo-checkbox label:hover { color: var(--hww-ink, #17202e); }

.hww-tr__rail-body .bravo-checkbox input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    position: static; opacity: 1; flex: none;
    width: 1.05rem; height: 1.05rem; min-width: 1.05rem;
    margin: .12rem 0 0; cursor: pointer;
    background: var(--hww-snow, #fff);
    border: 2px solid var(--hww-edge, #ddd4c4); border-radius: 4px;
    transition: background .15s ease, border-color .15s ease;
}
.hww-tr__rail-body .bravo-checkbox input[type="checkbox"]:checked {
    background: var(--hww-pine, #397c30); border-color: var(--hww-pine, #397c30);
}
.hww-tr__rail-body .bravo-checkbox input[type="checkbox"]:checked::after {
    content: ''; position: absolute; left: .3rem; top: .42rem;
    width: .26rem; height: .5rem;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.hww-tr__rail-body .bravo-checkbox input:focus-visible {
    outline: 3px solid var(--hww-summit, #3c59a7); outline-offset: 2px;
}
/* The theme's own tick sits on top of ours. */
.hww-tr__rail-body .bravo-checkbox .checkmark { display: none; }

/* A child category, indented rather than prefixed with a dash in the text. */
.hww-tr__rail-body li.hide { display: none; }
.hww-tr__rail-body .btn-more-item {
    padding: .3rem 0; font-size: .85rem; font-weight: 600;
    color: var(--hww-flame-deep, #0a6b30); background: none; border: 0; cursor: pointer;
}

/* --- price ----------------------------------------------------------------- */
.hww-tr__rail-body .bravo-filter-price { padding-top: .3rem; }
.hww-tr__rail-body .irs { font-family: var(--hww-display, system-ui); }
.hww-tr__rail-body .irs--flat .irs-bar,
.hww-tr__rail-body .irs-bar { background: var(--hww-flame-ui, #149c48); }
.hww-tr__rail-body .irs-handle > i:first-child { background: var(--hww-flame-deep, #0a6b30); }
.hww-tr__rail-body .irs-from,
.hww-tr__rail-body .irs-to,
.hww-tr__rail-body .irs-single { background: var(--hww-ink, #17202e); font-size: .72rem; }
.hww-tr__rail-body .irs-min,
.hww-tr__rail-body .irs-max { font-size: .68rem; }

/* Apply was a bare blue link where a button belongs. */
.hww-tr__rail-body .btn-apply-price-range {
    display: inline-block; margin-top: .7rem; padding: .5em 1.2em;
    border-radius: 7px; border: 0; cursor: pointer; text-decoration: none;
    background: var(--hww-ink, #17202e); color: #fff;
    font-family: var(--hww-display, system-ui); font-weight: 700; font-size: .82rem;
}
.hww-tr__rail-body .btn-apply-price-range:hover { background: var(--hww-flame-deep, #0a6b30); color: #fff; }

/* --- meta row: count on the left, sort on the right ------------------------ */
.hww-tr__meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.hww-tr__sort { position: relative; display: inline-flex; align-items: center; }
.hww-tr__sort select {
    appearance: none; -webkit-appearance: none;
    padding: .5em 2.2em .5em .9em; cursor: pointer;
    font: inherit; font-size: .88rem; font-family: var(--hww-display, system-ui); font-weight: 600;
    color: var(--hww-ink, #17202e);
    background: var(--hww-snow, #fff);
    border: 1px solid var(--hww-edge, #ddd4c4); border-radius: 999px;
}
.hww-tr__sort i {
    position: absolute; right: .8em; pointer-events: none;
    color: var(--hww-ink-faint, #858d9c); font-size: 1.05rem;
}
.hww-tr__sort select:focus-visible { outline: 3px solid var(--hww-summit, #3c59a7); outline-offset: 2px; }

/* --- gaps closed ----------------------------------------------------------- */
/* The head was set for a hero it does not have, and the grid for cards that
   used to reserve a second title line. Both come in. */
.hww-tr__head { padding: clamp(1.2rem, .8rem + 1.4vw, 2.2rem) 0 clamp(.8rem, .6rem + .8vw, 1.4rem); }
.hww-tr__head h1 { margin: .25em 0 .15em; }
.hww-tr__body { gap: 1.5rem; }
.hww-tr__grid { gap: 1.2rem; }
.hww-tr__search { margin-bottom: .9rem; }
.hww-tr__pager { margin-top: 1.6rem; }
@media (min-width: 992px) { .hww-tr__body { grid-template-columns: 16rem 1fr; gap: 1.8rem; } }

/* ===========================================================================
   List layout
   ===========================================================================
   The same card, laid on its side.

   A grid of tall cards is right for a rail on the home page, where the job is
   to catch an eye in passing. On a listing page somebody is comparing, and a
   row gives the photograph, the name, the facts and the price on one line at a
   glance — which is why every travel marketplace lists this way.

   The card partial is untouched: it is shared with the home page and the
   tour-type pages, and forking it would be two cards to keep in step. This is
   the same markup told to lie down.
   ========================================================================= */
@media (min-width: 720px) {
    .hww-tr__grid { grid-template-columns: 1fr; gap: 1rem; }

    .hww-tr__grid .hww-trip {
        display: grid;
        grid-template-columns: 17rem 1fr;
        grid-template-areas: "shot body";
        align-items: stretch;
    }

    .hww-tr__grid .hww-trip-shot {
        grid-area: shot;
        aspect-ratio: auto;              /* the row's height decides it */
        height: 100%; min-height: 11.5rem;
        border-radius: 14px 0 0 14px;
    }

    /*
     | Body and foot share the right-hand cell, stacked, with the price pushed
     | to the bottom of it. The card's own auto-margin already does that; this
     | only has to give them one column to do it in.
     */
    .hww-tr__grid .hww-trip-body {
        grid-area: body;
        padding: 1.1rem 1.2rem .2rem;
    }
    .hww-tr__grid .hww-trip-foot {
        grid-area: body;
        align-self: end;
        padding: 0 1.2rem 1.1rem;
        margin-top: 0;
    }

    /* Room for the price row underneath, since both share the cell. */
    .hww-tr__grid .hww-trip-body { padding-bottom: 3.4rem; }

    /* A title has a whole row to itself now, so it can say more. */
    .hww-tr__grid .hww-trip h3 { font-size: 1.22rem; }

    /* The short description earns its place at this width, and is the thing a
       grid card had no room for. */
    .hww-tr__grid .hww-trip-body .hww-trip-blurb { display: block; }
}

@media (min-width: 1100px) {
    .hww-tr__grid .hww-trip { grid-template-columns: 20rem 1fr; }
}

/* Below 720 it stays the card it always was — a row on a phone is a thumbnail
   beside four lines of text, which is worse than either. */