/* =====================================================================
   pxl-slider9.css
   Layout 9 hero - full-width, centre-aligned slider.
   Heading (title) ABOVE, description (subtitle) BELOW. No sidebar.
   Scoped to .pxl-slider-carousel9 so it never affects other widgets.
   ===================================================================== */

.pxl-slider-carousel9 { position: relative; overflow: hidden; }
.pxl-slider-carousel9 .pxl-hero9-main { position: relative; width: 100%; }
.pxl-slider-carousel9 .pxl-hero9-main .pxl-carousel-inner { position: relative; height: 100vh; }
.pxl-slider-carousel9 .pxl-hero9-main .pxl-swiper-container,
.pxl-slider-carousel9 .pxl-hero9-main .pxl-swiper-wrapper { height: 100%; }
.pxl-slider-carousel9 .pxl-swiper-slide { position: relative; height: 100vh; overflow: hidden; }

/* ---------- Background images (dark/light aware) ---------- */
.pxl-slider-carousel9 .pxl-swiper-slide .mask--content {
    position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 1;
}
.pxl-slider-carousel9 .pxl-swiper-slide .img-dark { display: none; }
body.dark-mode .pxl-slider-carousel9 .pxl-swiper-slide .img-light { display: none; }
body.dark-mode .pxl-slider-carousel9 .pxl-swiper-slide .img-dark { display: block; }
.pxl-slider-carousel9 .pxl-hero9-overlay {
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .14) 45%, rgba(0, 0, 0, .55) 100%);
}

/* ---------- Centred content: heading above, description below ---------- */
.pxl-slider-carousel9 .pxl-swiper-slide .pxl-item--inner { position: relative; height: 100%; }
.pxl-slider-carousel9 .pxl-item--content {
    position: relative; z-index: 3; height: 100%;
    display: flex; align-items: center; justify-content: center; padding: 60px 40px;
}
.pxl-slider-carousel9 .content--inner { width: 100%; }
.pxl-slider-carousel9 .content--wrapper { max-width: 880px; margin: 0 auto; text-align: center; color: #fff; }
.pxl-slider-carousel9 .pxl-item--title {
    color: #fff; margin: 0 0 20px;
    font-size: clamp(2.4rem, 4vw, 4.8rem);
    line-height: 1.08; font-weight: 400;
}
.pxl-slider-carousel9 .pxl-item--title .split-line { overflow: hidden; padding-bottom: .06em; }
.pxl-slider-carousel9 .pxl-item--subtitle {
    display: block; margin: 0 auto; max-width: 640px;
    font-size: 17px; line-height: 1.6; letter-spacing: .2px; color: rgba(255, 255, 255, .82);
}
.pxl-slider-carousel9 .item--button {
    display: inline-block; margin-top: 28px; padding: 14px 36px;
    border: 1px solid rgba(255, 255, 255, .6); color: #fff; text-decoration: none;
    letter-spacing: 2px; text-transform: uppercase; font-size: 12px; font-weight: 600;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.pxl-slider-carousel9 .item--button:hover { background: #fff; color: #111; border-color: #fff; }

/* ---------- Arrows ---------- */
.pxl-slider-carousel9 .pxl-hero9-arrow {
    position: absolute; z-index: 6; right: 44px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 26px;
}
.pxl-slider-carousel9 .pxl-swiper-arrow { display: flex; align-items: center; gap: 14px; cursor: pointer; color: #fff; }
.pxl-slider-carousel9 .pxl-arrow-line { width: 46px; height: 1px; background: rgba(255, 255, 255, .5); transition: width .3s ease, background .3s ease; }
.pxl-slider-carousel9 .pxl-swiper-arrow:hover .pxl-arrow-line { width: 62px; background: #fff; }
.pxl-slider-carousel9 .pxl-arrow-circle {
    width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55);
    display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.pxl-slider-carousel9 .pxl-swiper-arrow:hover .pxl-arrow-circle { background: #fff; color: #111; border-color: #fff; }
.pxl-slider-carousel9 .pxl-swiper-arrow.swiper-button-disabled { opacity: .35; pointer-events: none; }

/* ---------- Dots ---------- */
.pxl-slider-carousel9 .pxl-swiper-dots { position: absolute; z-index: 6; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }

/* split-text: keep visible until JS marks it ready (no flash / no-JS safe) */
.pxl-slider-carousel9 .pxl-split-text:not(.pxl-split-ready) { opacity: 1; }

/* =====================================================================
   Responsive - Layout 9
   ===================================================================== */
@media (max-width: 1199px) {
    .pxl-slider-carousel9 .pxl-hero9-arrow { right: 24px; gap: 20px; }
    .pxl-slider-carousel9 .pxl-arrow-circle { width: 50px; height: 50px; font-size: 16px; }
    .pxl-slider-carousel9 .pxl-arrow-line { width: 32px; }
}
@media (max-width: 767px) {
    .pxl-slider-carousel9 .pxl-hero9-main .pxl-carousel-inner,
    .pxl-slider-carousel9 .pxl-swiper-slide { height: 86vh; min-height: 480px; }
    .pxl-slider-carousel9 .pxl-item--content { padding: 40px 22px; }
    .pxl-slider-carousel9 .pxl-item--title { font-size: clamp(1.9rem, 8vw, 2.8rem); margin-bottom: 16px; }
    .pxl-slider-carousel9 .pxl-item--subtitle { font-size: 15px; max-width: 100%; }
    .pxl-slider-carousel9 .pxl-hero9-arrow {
        flex-direction: row; right: auto; left: 50%; top: auto; bottom: 22px; transform: translateX(-50%); gap: 22px;
    }
    .pxl-slider-carousel9 .pxl-swiper-arrow-next { flex-direction: row-reverse; }
    .pxl-slider-carousel9 .pxl-arrow-line { width: 22px; }
    .pxl-slider-carousel9 .pxl-arrow-circle { width: 46px; height: 46px; font-size: 15px; }
}
@media (max-width: 575px) {
    .pxl-slider-carousel9 .pxl-hero9-main .pxl-carousel-inner,
    .pxl-slider-carousel9 .pxl-swiper-slide { height: 80vh; min-height: 440px; }
}

/* =====================================================================
   Responsive safety net - Layout 4 (existing hero)
   ===================================================================== */
@media (max-width: 767px) {
    .pxl-slider-carousel4 .mask--content { background-size: cover; background-position: center; }
    .pxl-slider-carousel4 .content--wrapper { max-width: 100%; padding-left: 18px; padding-right: 18px; }
    .pxl-slider-carousel4 .pxl-item--title { overflow-wrap: break-word; word-break: break-word; }
    .pxl-slider-carousel4 .pxl-item--subtitle { overflow-wrap: break-word; }
}