/* Loomodex — homepage banner carousel (replaces the static hero when banners are active) */
.lmx-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    background: #0B1F3A;
    width: 100%;
    /* Full width of the hero, capped height; the whole banner stays visible (no cropping) and any
       side space on wide screens is filled by a blurred copy of the same banner. */
    height: clamp(220px, 32vw, 460px);
    touch-action: pan-y;
    user-select: none;
}
.lmx-carousel-track { position: absolute; inset: 0; }
.lmx-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility 0s linear .6s;
}
.lmx-slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.lmx-slide-bg {
    position: absolute;
    inset: -30px;
    background-size: cover;
    background-position: center;
    filter: blur(28px) brightness(.75) saturate(1.1);
    transform: scale(1.05);
}
.lmx-slide-link { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: inherit; }
.lmx-slide > .lmx-slide-img { position: relative; z-index: 1; }
.lmx-slide-img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; }
.lmx-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    color: #0B1F3A;
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    opacity: 0;
    transition: opacity .2s, background .2s;
    z-index: 2;
}
.lmx-prev { left: 16px; }
.lmx-next { right: 16px; }
.lmx-carousel:hover .lmx-carousel-arrow,
.lmx-carousel-arrow:focus-visible { opacity: 1; }
.lmx-carousel-arrow:hover { background: #fff; }
.lmx-carousel-arrow:focus-visible,
.lmx-dot:focus-visible { outline: 3px solid var(--accent, #FF7A00); outline-offset: 2px; }

.lmx-carousel-dots {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}
.lmx-dot {
    width: 10px; height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.55);
    cursor: pointer;
    transition: width .25s, background .25s;
}
.lmx-dot.is-active { width: 26px; background: var(--accent, #FF7A00); }

/* Touch devices: no hover, keep arrows hidden (swipe + dots instead) */
@media (hover: none) {
    .lmx-carousel-arrow { display: none; }
}
@media (max-width: 767px) {
    /* Phones: exactly the 2:1 banner shape (same as the app), no side fill needed */
    .lmx-carousel { border-radius: 16px 16px 0 0; height: auto; aspect-ratio: 2 / 1; }
    .lmx-carousel-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lmx-slide, .lmx-slide.is-active, .lmx-dot { transition: none; }
}

/* Optional title label (per-banner "Show title on banner"): small dark pill, bottom-left */
.lmx-slide-title {
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 2;
    max-width: min(60%, 520px);
    padding: 7px 14px;
    border-radius: 12px;
    background: rgba(11, 31, 58, .72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    pointer-events: none; /* clicks go through to the banner link */
}
/* Keep the dots (bottom-centre) visible: lift the label above them */
.lmx-carousel.has-dots .lmx-slide-title { bottom: 36px; }
@media (max-width: 767px) {
    .lmx-slide-title { left: 10px; bottom: 10px; max-width: 75%; padding: 5px 10px; border-radius: 10px; font-size: .8rem; }
    .lmx-carousel.has-dots .lmx-slide-title { bottom: 30px; }
}