/* =====================================================================
   Liner Coverflow Slider — structural styles
   (colors, sizes, fonts come from inline CSS variables set per instance)
   ===================================================================== */

.ls-section {
    background: var(--ls-section-bg, #196d81);
    padding-top: var(--ls-pad-top, 64px);
    padding-bottom: var(--ls-pad-bottom, 40px);
    overflow: hidden;
}

.ls-viewport {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    height: var(--ls-vp-h, 480px);
    max-height: 92vh;
    perspective: 1600px;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.ls-stage {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.ls-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--ls-slide-w, 320px);
    height: var(--ls-slide-h, auto);
    aspect-ratio: var(--ls-aspect, 3 / 4);
    max-width: 86vw;
    transform: translate(-50%, -50%);
    transition: transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 450ms ease;
    will-change: transform, opacity;
    cursor: pointer;
    backface-visibility: hidden;
}

.ls-slide__media {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--ls-radius, 18px);
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    border: 3px solid var(--ls-slide-border, #ffffff);
    background: rgba(0,0,0,0.04);
}
.ls-slide__media img {
    width: 100%;
    height: 100%;
    object-fit: var(--ls-img-fit, cover);
    pointer-events: none;
    display: block;
}
.ls-slide__overlay {
    position: absolute;
    inset: 0;
    background: var(--ls-overlay, rgba(0,0,0,0));
    pointer-events: none;
}

.ls-slide__content {
    position: absolute;
    left: 0; right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ls-content-gap, 12px);
    padding: 1.25rem;
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
}
.ls-slide__content--bottom { bottom: 0; }
.ls-slide__content--center { top: 50%; transform: translateY(-50%); }
.ls-slide__content--top    { top: 0; }

.ls-slide.is-active .ls-slide__content { opacity: 1; }
.ls-slide.is-active .ls-slide__btn { pointer-events: auto; }

.ls-slide__title {
    margin: 0;
    color: var(--ls-title-color, #ffffff);
    font-family: var(--ls-title-font, inherit);
    font-size: var(--ls-title-size, 20px);
    font-weight: var(--ls-title-weight, 600);
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.ls-slide__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ls-btn-bg, #ffffff);
    color: var(--ls-btn-text, #196d81);
    font-family: var(--ls-btn-font, inherit);
    font-size: var(--ls-btn-size, 14px);
    font-weight: var(--ls-btn-weight, 500);
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    line-height: 1;
    transition: transform 150ms ease, filter 150ms ease;
}
.ls-slide__btn:hover {
    color: var(--ls-btn-text, #196d81);
    transform: translateY(-1px);
    filter: brightness(0.96);
}

/* Navigation arrows */
.ls-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    width: var(--ls-arrow-size, 48px);
    height: var(--ls-arrow-size, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ls-arrow-icon, #196d81);
    background: var(--ls-arrow-bg, #ffffff);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition: transform 150ms ease, filter 150ms ease;
}
.ls-nav:hover { transform: translateY(-50%) scale(1.08); filter: brightness(0.97); }
.ls-nav--prev { left: 1rem; }
.ls-nav--next { right: 1rem; }

.ls-arrows-square .ls-nav { border-radius: 10px; }
.ls-arrows-minimal .ls-nav {
    background: transparent;
    box-shadow: none;
    color: var(--ls-arrow-bg, #ffffff);
}
.ls-arrows-minimal .ls-nav:hover { filter: none; opacity: 0.8; }

/* Dots */
.ls-dots {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.5rem;
}
.ls-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: all 250ms ease;
}
.ls-dot.is-active {
    background: #ffffff;
    width: 26px;
    border-radius: 9999px;
}

@media (max-width: 600px) {
    .ls-nav--prev { left: 0.4rem; }
    .ls-nav--next { right: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ls-slide { transition-duration: 0.01ms; }
}