/*
 * Accommodation listing — two-column cards, square image left, text right.
 * Applies to [mphb_rooms class="bw-listing"] on /antiparos/ and /our-apartments/.
 *
 * MotoPress renders each card as one flat .mphb-room-type block whose children are all SIBLINGS —
 * image, title, excerpt, price, buttons. There is no image wrapper and no text wrapper to pair off.
 *
 * This was grid, with the thumbnail spanning every row. That is the obvious approach and it is wrong:
 * a row-spanning item's height is distributed as free space across ALL the rows it spans, so the image
 * silently pushed the text rows apart — that was the gap under the title, and squaring the image (a
 * square is tall) would only have widened it. There is no way to opt a spanned track out of that.
 *
 * So: a float instead. A float's height does not touch its siblings' heights, so the image can be any
 * shape we like and the text stays tightly stacked. Two details make it work without wrappers:
 *   - block children get `overflow: hidden`, which makes each a block formatting context. A BFC will
 *     not overlap a float, so every paragraph sits BESIDE the image instead of flowing under it.
 *   - the button wrappers stay inline-block; inline-level boxes avoid floats natively, so the two
 *     buttons still sit side by side on one line.
 * The card itself gets `overflow: hidden` to contain the float and take its height.
 */

.bw-listing .mphb-room-type {
    overflow: hidden;
    /* contains the floated image, so the card takes its height */
    padding: 0 0 45px;
    margin: 0 0 45px;
    border-bottom: 1px solid #e9edf0;
}

.bw-listing .mphb-room-type:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ---- the image: floated, square ---- */

.bw-listing .mphb-room-type>.post-thumbnail {
    float: left;
    width: 38%;
    aspect-ratio: 1 / 1;
    margin: 0 45px 0 0;
    overflow: hidden;
    padding-top: 0 !important;

}

.bw-listing .mphb-room-type>.post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* fill the square, centre-crop the overflow */
    display: block;
    transition: transform .6s ease;
}

.bw-listing .mphb-room-type>.post-thumbnail:hover img {
    transform: scale(1.04);
}

/* ---- the text: each child a BFC, so it sits beside the float rather than under it ---- */

.bw-listing .mphb-room-type>*:not(.post-thumbnail) {
    overflow: hidden;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0 !important;
}

.bw-listing .mphb-room-type>.mphb-room-type-title {
    margin: 0px 0 10px;
    line-height: 1.25;
    font-size: 200%;

}

.bw-listing .mphb-room-type>p {
    margin: 0 0 12px;
}

.bw-listing .mphb-room-type .mphb-room-type-details-title {
    margin: 6px 0;
    font-size: 1em;
}

.bw-listing .mphb-room-type .mphb-loop-room-type-attributes {
    margin: 0 0 12px;
    padding-left: 0;
    list-style: none;
}

.bw-listing .mphb-room-type .mphb-regular-price {
    margin: 0 0 4px;
    font-size: 1.1em;
}

/* ---- amenities: same icon + name pairing as the single accommodation page, at listing scale ----
   Injected between the price and the View Details button by mu-plugins/bluewaves.php, using
   MotoPress's own `mphb_render_loop_room_type_before_view_details_button` hook.
   Two columns, so a 16-amenity house stays a readable block instead of a long ragged list. The <li>
   is a grid rather than a flex row so the names align on a common left edge no matter how wide each
   icon glyph is — icons vary in width, and a flex row would leave the text ragged. */

.bw-listing .mphb-room-type .bw-amenities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 7px;
    margin: 14px 0 4px;
    padding: 0;
    list-style: none;
}

.bw-listing .mphb-room-type .bw-amenities li {
    display: grid;
    grid-template-columns: 18px 1fr;   /* fixed icon column = names share one left edge */
    align-items: baseline;
    column-gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.45;
}

.bw-listing .mphb-room-type .bw-amenities li i {
    justify-self: center;
    font-size: 13px;
    opacity: .75;
}

.bw-listing .mphb-room-type .bw-amenities li span {
    min-width: 0;                      /* let long names wrap instead of blowing out the column */
}

/* Hidden on phones: a 14-item list pushes the price and the buttons far below the fold, and the
   amenities are all on the accommodation page anyway. */
@media (max-width: 767px) {
    .bw-listing .mphb-room-type .bw-amenities {
        display: none;
    }
}

/* ---- buttons: inline-block, so they avoid the float and stay on one line together ---- */

.bw-listing .mphb-room-type>.mphb-view-details-button-wrapper,
.bw-listing .mphb-room-type>.mphb-to-book-btn-wrapper {
    display: inline-block;
    overflow: visible;
    /* undo the BFC above: inline-level already dodges the float */
    margin: 14px 10px 0 0;
    vertical-align: top;
}

.bw-listing .mphb-room-type .mphb-view-details-button,
.bw-listing .mphb-room-type .mphb-book-button,
.bw-listing .mphb-room-type .mphb-to-book-btn-wrapper a,
.bw-listing .mphb-room-type .mphb-to-book-btn-wrapper button {
    display: inline-block;
    background: #a3d1d5;
    border: 1px solid #a3d1d5;
    color: #fff;
    padding: 12px 26px;
    border-radius: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease;
}

.bw-listing .mphb-room-type .mphb-view-details-button:hover,
.bw-listing .mphb-room-type .mphb-book-button:hover,
.bw-listing .mphb-room-type .mphb-to-book-btn-wrapper a:hover,
.bw-listing .mphb-room-type .mphb-to-book-btn-wrapper button:hover {
    background: #7da0a3;
    border-color: #7da0a3;
    color: #fff;
}

/* ---- stack on narrow screens ---- */

@media (max-width: 767px) {
    .bw-listing .mphb-room-type>.post-thumbnail {
        float: none;
        width: 100%;
        aspect-ratio: 4 / 3;
        /* a full-width square is too tall on a phone */
        margin: 0 0 16px;
    }
}
@media (min-width: 768px) {
    .bw-listing .mphb-room-type:nth-child(even)>.post-thumbnail {
        float: right;
        margin: 0 0 0 45px;
    }
}