/*
 * Similar listings on the listing page. Heading, tiles and spacing come from
 * property-recently-viewed.css (.hzrv-strip, .hzrv-tile); this file lets the
 * heading's "View all" link wrap and turns the one-row rail into at most two
 * rows.
 *
 *   desktop (> 1024px)  a grid of five columns; ten cards are two rows, no arrows
 *   tablet              a rail two cards high, scrolled with the arrows
 *   phone (<= 640px)    the same one-row swipe rail as Recently viewed
 */

/*
 * The "View all <hub>" link can be longer than a phone is wide, and the shared
 * .hzrv-strip__all never wraps: it pushed the whole listing page sideways.
 * Here the link drops under the heading when both do not fit, and wraps.
 */
.hzsl .hzrv-strip__head {
    flex-wrap: wrap;
}

.hzsl .hzrv-strip__tools {
    min-width: 0;
    max-width: 100%;
}

.hzsl .hzrv-strip__all {
    white-space: normal;
    overflow-wrap: anywhere;
}

.hzsl .hzsl__track {
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: minmax(220px, 240px);
}

.hzsl .hzsl__track--one-row {
    grid-template-rows: auto;
}

@media (min-width: 1025px) {
    .hzsl .hzsl__track {
        grid-auto-flow: row;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-columns: auto;
        overflow-x: visible;
        scroll-snap-type: none;
    }

    .hzsl .hzsl__nav {
        display: none;
    }
}

@media (max-width: 640px) {
    .hzsl .hzsl__track {
        grid-template-rows: auto;
        grid-auto-columns: 72%;
    }
}

.hzsl__badge {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(18, 20, 26, 0.78);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    pointer-events: none;
}