/*
 * The house-grid pages: /vacation-rentals/<city>, /collections/<slug> and /browse.php.
 *
 * Each card's specs line and name used to be an h6 and an h5 and took their look from style.css's
 * heading rules. They are a p and an h3 now (see the templates), so the same look is restated here
 * against classes, loaded by the grid pages only. The banner kicker and title moved the same way but
 * live in style.css, since every banner on the site uses them.
 */

/* Card specs: was an h6. style.css gives .con p 20px, so this has to out-rank that. */
.rooms1 .item .con p.item-specs {
    position: relative;
    display: inline;
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Card name: was an h5 at 27px; the base h3 is larger. display:block puts it back under the
   inline specs line, where the h5 sat. */
.rooms1 .item .con h3.property-name {
    display: block;
    position: relative;
    color: #fff;
    font-size: 27px;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 5px;
}

/* The search's empty message, now built by script. Was an h3; the same weight in a p. */
.no-results-message .no-results-title {
    font-family: 'Gilda Display', serif;
    font-size: 24px;
    color: #fff;
    margin-bottom: 10px;
}

/*
 * The Browse and city banners (includes/city-hero.php). The artwork is about 3:1, so it scrolls with
 * the page rather than sitting fixed — a fixed background is sized to the whole window and would crop
 * most of the picture — and it is centred both ways. On a phone, where a 3:1 picture cannot show
 * everything, each image's own horizontal focal point (--hero-mobile-x) decides what stays; vertical
 * stays at 50%.
 */
.banner-header.dle-city-hero {
    background-attachment: scroll;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
@media screen and (max-width: 767px) {
    .banner-header.dle-city-hero { background-position: var(--hero-mobile-x, 50%) 50%; }
}