/* Overlap Scroll Section v5.1 */

.oss-root {
    position: relative;
    width: 100%;
}

.oss-card {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    box-sizing: border-box;
    will-change: transform;
    transform-origin: center top;
}

.oss-card:nth-child(1)  { z-index: 1; }
.oss-card:nth-child(2)  { z-index: 2; }
.oss-card:nth-child(3)  { z-index: 3; }
.oss-card:nth-child(4)  { z-index: 4; }
.oss-card:nth-child(5)  { z-index: 5; }
.oss-card:nth-child(6)  { z-index: 6; }
.oss-card:nth-child(7)  { z-index: 7; }
.oss-card:nth-child(8)  { z-index: 8; }
.oss-card:nth-child(9)  { z-index: 9; }
.oss-card:nth-child(10) { z-index: 10; }

.oss-left {
    width: var(--oss-lw, 42%);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(40px, 6vw, 90px) clamp(28px, 5vw, 80px);
    box-sizing: border-box;
    overflow-y: auto;
}

.oss-left-inner {
    width: 100%;
    max-width: 460px;
}

.oss-right {
    width: var(--oss-rw, 58%);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(28px, 4vw, 56px);
    box-sizing: border-box;
    background: var(--oss-rbg, #f5f5f5);
    overflow: hidden;
}

.oss-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oss-ac, #222);
    opacity: 0.65;
    margin-bottom: 14px;
    line-height: 1;
}

.oss-title {
    font-size: clamp(1.7rem, 2.6vw, 2.8rem) !important;
    font-weight: 700 !important;
    line-height: 1.16 !important;
    color: #111 !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

.oss-desc {
    font-size: clamp(0.9rem, 1.3vw, 1.05rem);
    line-height: 1.75;
    color: #555;
    margin-bottom: 32px;
}

.oss-desc p { margin: 0 0 10px; }
.oss-desc p:last-child { margin: 0; }

.oss-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--oss-ac, #222) !important;
    text-decoration: none !important;
    font-size: 0.95rem;
    font-weight: 600;
    border-bottom: 2px solid var(--oss-ac, #222);
    padding-bottom: 3px;
    cursor: pointer;
    transition: gap 0.25s ease;
    background: none !important;
    box-shadow: none !important;
}

.oss-btn:hover { gap: 14px; }
.oss-btn svg { flex-shrink: 0; }

.oss-media {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    background: #ddd;
}

.oss-media-img,
.oss-media-video {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.oss-embed {
    position: relative;
    padding-top: 56.25%;
}

.oss-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.oss-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4/3;
    color: #aaa;
    font-size: 0.9rem;
    background: repeating-linear-gradient(45deg, #f5f5f5 0, #f5f5f5 10px, #eee 10px, #eee 20px);
}

/* EDITOR */
.elementor-editor-active .oss-root {
    height: auto !important;
    position: relative !important;
}

.elementor-editor-active .oss-card {
    position: relative !important;
    height: auto !important;
    min-height: 70vh !important;
    top: auto !important;
    transform: none !important;
    border-radius: 0 !important;
}

/* MOBILE */
@media (max-width: 767px) {
    .oss-root { height: auto !important; }

    .oss-card {
        position: relative !important;
        height: auto !important;
        top: auto !important;
        transform: none !important;
        border-radius: 0 !important;
        flex-direction: column;
    }

    .oss-left,
    .oss-right { width: 100% !important; }

    .oss-right { order: -1; padding-bottom: 0; }
    .oss-left  { padding-top: 28px; }

    .oss-media-img,
    .oss-media-video { aspect-ratio: 16/9; }
}
