/* ==========================================================================
   WM CPT Image Slider
   Base slide layout, overlay tint, CTA button and full-canvas break-out.
   Navigation arrows and pagination inherit from slider.css via the shared
   .wm-slider__swiper selector.
   ========================================================================== */

/* ── Root wrapper ────────────────────────────────────────────────────────── */
.wm-cpt-slider {
    position: relative;
    width: 100%;
}

/* ── Full-canvas: break out of any container ─────────────────────────────── */
.wm-cpt-slider--full-canvas {
    width: 100vw;
    margin-left: calc( 50% - 50vw );
    margin-right: calc( 50% - 50vw );
}

/* ── Overlay background tint ─────────────────────────────────────────────── */
/*
 * Sits between the image (z-index: auto) and the content (z-index: 2).
 * Colour is set via the Elementor control; this rule provides the layer itself.
 */
.wm-cpt-slider__overlay-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba( 0, 0, 0, 0.4 ); /* overridden by Elementor colour control */
}

/* Ensure content text always sits above the tint overlay */
.wm-cpt-slider .wm-slider__content {
    z-index: 2;
    padding: 0;   /* padding is managed on .wm-cpt-slider__content-inner, not here */
}

/* ── Content inner — max-width container ─────────────────────────────────── */
/*
 * Constrains the title and CTA while letting the image/overlay span full width.
 * The Elementor "Content Max Width" control sets max-width + auto margins here.
 * "Content Padding" and "Text Alignment" controls also target this element.
 *
 * Default padding mirrors slider.css baseline; overridden by Elementor control.
 */
.wm-cpt-slider__content-inner {
    width: 100%;
    box-sizing: border-box;
    padding: 24px 32px;
}

/* ── Image link wrapper — fill the slide without blocking content clicks ─── */
.wm-cpt-slider .wm-slider__image a {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Title colour in below-image context ─────────────────────────────────── */
.wm-cpt-slider .wm-slider__content--below .wm-slider__title,
.wm-cpt-slider .wm-slider__content--below .wm-slider__title a {
    color: inherit;
}

/* ── CTA Button ──────────────────────────────────────────────────────────── */
.wm-cpt-slider__cta {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    line-height: 1;
    padding: 10px 24px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ── Below-image card body ───────────────────────────────────────────────── */
/*
 * When title is below the image, the slide must expand to fit the content.
 * Mirrors the pattern already in slider.css for .wm-slider__content--below.
 */
.wm-cpt-slider .wm-slider__slide:has( .wm-slider__content--below ) {
    height: auto;
    display: flex;
    flex-direction: column;
}

.wm-cpt-slider .wm-slider__slide:has( .wm-slider__content--below ) .wm-slider__image {
    position: relative;
    flex: 0 0 auto;
    height: 260px;      /* reasonable default; overridden by slide_height control */
}