/*
 * Cloud homepage banner carousel (BPN-548).
 *
 * Full-bleed strip above the homepage content. The image keeps its intrinsic
 * aspect ratio -- no fixed height, no cropping -- so tall or short artwork both
 * render whole and the strip is as tall as the art. Text/buttons are optional
 * and overlay the image; sites whose artwork already contains the wording get a
 * bare image with no scrim.
 *
 * Every class here is a stable per-site override hook (site.custom_css).
 */

.cloud-home-banners {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    background: #f5f5f5;
}

/* Gap before the homepage content belongs to whichever element ends the strip:
   the dots row when there is a carousel, the image itself when there is not. */
.cloud-home-banners--single,
.cloud-home-banners__dots {
    margin-bottom: 30px;
}

/* catalog-page-default.css pulls .slick-slider .slick-list out by -15px to gutter
   card sliders. On a full-bleed banner that widens the page past the viewport and
   adds a horizontal scrollbar, so the gutter is reset here. */
.cloud-home-banners .slick-list {
    margin: 0;
    padding: 0;
}

/* Before slick initializes (and for a single banner) only show the first slide,
   so a multi-banner page never flashes a stack of stacked images. */
.cloud-home-banners:not(.slick-initialized) .cloud-home-banner ~ .cloud-home-banner {
    display: none;
}

.cloud-home-banner {
    position: relative;
    width: 100%;
    line-height: 0;
}

.cloud-home-banner__image-link {
    display: block;
    line-height: 0;
}

.cloud-home-banner__image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.cloud-home-banner__scrim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    pointer-events: none;
}

.cloud-home-banner__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 0;
    line-height: normal;
    pointer-events: none;
}

/* Only the buttons need to be clickable; the rest of the overlay stays
   transparent to clicks so a banner-wide link keeps working underneath.
   The inner box repeats the page container's width so overlay text starts on the
   same line as the homepage content below, not at the viewport edge. */
.cloud-home-banner__inner {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

.cloud-home-banner__title,
.cloud-home-banner__text {
    max-width: 620px;
}

.cloud-home-banner__title {
    margin: 0 0 10px;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 600;
}

.cloud-home-banner__text {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.45;
    white-space: pre-line;
}

.cloud-home-banner__ctas {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cloud-home-banner__cta {
    display: inline-block;
    padding: 10px 22px;
    border: 1px solid transparent;
    border-radius: 2px;
    font-size: 14px;
    text-decoration: none;
    pointer-events: auto;
}

.cloud-home-banner__cta--primary {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

.cloud-home-banner__cta--secondary {
    background: transparent;
    color: inherit;
    border-color: currentColor;
}

.cloud-home-banner--white .cloud-home-banner__overlay {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.cloud-home-banner--white .cloud-home-banner__cta--primary {
    background: #fff;
    border-color: #fff;
    color: #1a1a1a;
    text-shadow: none;
}

.cloud-home-banner--black .cloud-home-banner__overlay {
    color: #1a1a1a;
}

/* The scrim fades the artwork away from the text, so it has to run opposite the
   text: dark behind white text, light behind black text. A single dark scrim
   would make black text less readable the more of it you asked for. */
.cloud-home-banner--black .cloud-home-banner__scrim {
    background: #fff;
}

/* Carousel chrome. The dots render in their own row under the artwork rather
   than on top of it: this client bakes the auction name and closing date into
   the image, and overlaid dots land squarely on that bottom line of text. A site
   that would rather have them over the image can pull them back up with
   `.cloud-home-banners__dots { position: absolute; bottom: 14px; z-index: 2; }`
   in its custom CSS. */
.cloud-home-banners__dots {
    width: 100%;
    background: #fff;
}

.cloud-home-banners__dots .slick-dots {
    /* The theme pins the dot list to a 10px box, which clips these dots. */
    height: auto;
    margin: 0;
    padding: 10px 0;
    line-height: 1;
    text-align: center;
    list-style: none;
}

/* The shared card-slider dots are grey pills on the li itself; here the dot is
   the button, so the li is reduced to a plain wrapper. The active selector is
   repeated because the theme paints .slick-active on the li. */
.cloud-home-banners__dots .slick-dots li,
.cloud-home-banners__dots .slick-dots li.slick-active {
    display: inline-block;
    width: auto;
    height: auto;
    vertical-align: middle;
    margin: 0 4px;
    line-height: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

/* The theme hides the dot button outright (its own dots are drawn on the li), so
   display has to be restored, not just restyled. */
.cloud-home-banners__dots .slick-dots li button {
    display: inline-block;
    width: 11px;
    height: 11px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .35);
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
}

.cloud-home-banners__dots .slick-dots li.slick-active button {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

/* catalog-page-default.css (loaded by this page for the lot grids) also styles
   .slick-slider arrows -- as 60px hit areas offset outside the slider, with a
   CSS-triangle ::before. Those would sit off the edge of a full-bleed banner, so
   the geometry and the pseudo-element borders are both reset here rather than
   only partly overridden.

   A site that does not want arrows turns them off in its custom CSS, and the
   rule needs !important: slick writes an inline display on the arrows itself
   (hidden in startLoad, shown again in loadComplete), which outranks any
   stylesheet rule. Same applies to the dots.

       .cloud-home-banners .slick-arrow { display: none !important; }
       .cloud-home-banners__dots { display: none !important; } */
.cloud-home-banners .slick-prev,
.cloud-home-banners .slick-next {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .8);
    color: #1a1a1a;
    font-size: 0;
    cursor: pointer;
}

.cloud-home-banners .slick-prev { left: 16px; }
.cloud-home-banners .slick-next { right: 16px; }

.cloud-home-banners .slick-prev:hover,
.cloud-home-banners .slick-next:hover {
    background: #fff;
}

.cloud-home-banners .slick-prev:hover:before,
.cloud-home-banners .slick-next:hover:before,
.cloud-home-banners .slick-prev:before,
.cloud-home-banners .slick-next:before {
    display: block;
    width: auto;
    height: auto;
    border: 0;
    font-size: 26px;
    line-height: 36px;
    color: #1a1a1a;
}

.cloud-home-banners .slick-prev:before { content: '\2039'; }
.cloud-home-banners .slick-next:before { content: '\203A'; }

@media (max-width: 991px) {
    .cloud-home-banner__overlay { padding: 16px 24px; }
    .cloud-home-banner__title { font-size: 26px; }
    .cloud-home-banner__text { font-size: 15px; }
}

/* Narrow screens: the artwork gets small, so the overlay stops competing with
   it and stacks underneath instead of shrinking to nothing on top of it. */
@media (max-width: 640px) {
    .cloud-home-banner__overlay {
        position: static;
        padding: 14px 16px 18px;
        background: #1a1a1a;
        pointer-events: auto;
    }

    .cloud-home-banner__scrim { display: none; }

    .cloud-home-banner--white .cloud-home-banner__overlay,
    .cloud-home-banner--black .cloud-home-banner__overlay {
        color: #fff;
        text-shadow: none;
    }

    .cloud-home-banner--black .cloud-home-banner__cta--primary {
        background: #fff;
        border-color: #fff;
        color: #1a1a1a;
    }

    .cloud-home-banner__inner { max-width: none; padding: 0; }
    .cloud-home-banner__title,
    .cloud-home-banner__text { max-width: none; }
    .cloud-home-banner__title { font-size: 22px; }
}