/* Slick carousel LAYOUT for the SRBE root carousels.
   Card *visuals* now live in styles.css under `.srbe-cards` (shared with the
   results + Find Your Rental widgets). This file only owns carousel-specific
   layout: the arrow wrapper, the Slick track, and slide sizing. */

/* Outer wrapper owns the padding so Slick's width calc sees only the inner width.
   Arrow BUTTON styling is shared with Find Your Rental — see the .srbe-carousel-wrap
   + .srbe-fyr-carousel-wrap block in styles.css (globally loaded) so the two
   carousels' arrows are guaranteed identical. */
.srbe-carousel-wrap {
    position: relative;
    padding: 0 35px;
}

/* Slick container — no padding so width calculations are exact */
.srbe-carousel { position: relative; }

/* Flex track with align-items:stretch so every slide (= .srbe-card, Slick adds the
   class directly) matches the tallest — equal-height cards even when titles wrap to
   different line counts. The card body grows to fill (rule below); its content stays
   top-aligned. Safe now that the body is content-height, not height:100% (the old
   height:100% recipe collapsed under stretch — that's why this was flex-start before). */
div.srbe-carousel .slick-track { display: flex; align-items: stretch; }

div.srbe-carousel .slick-track .slick-slide {
    height: auto;
    /* Lock slides at exactly Slick's computed width. Without this the default
       flex-shrink/flex-grow can cause 1–2px width variance between slides. */
    flex-shrink: 0;
    flex-grow: 0;
    /* 8px on each side = 16px visible gutter between adjacent cards. */
    padding: 0 8px;
    box-sizing: border-box;
}

/* The card is the slide; let its body grow so the (white) card fills the stretched
   height with content top-aligned, rather than leaving a gap below a short card. */
div.srbe-carousel .srbe-card-body { flex: 1 1 auto; }

/* Single-card view (< 520px, slidesToShow:1): drop the inter-card gutter and trim
   the arrow-wrap padding so the one visible card fills more of the screen. */
@media all and (max-width: 519px) {
    .srbe-carousel-wrap { padding: 0 22px; }
    div.srbe-carousel .slick-track .slick-slide { padding: 0; }
}