:root{
            /* Standartinis nustatymas visoms naršyklėms */
            font-family: Inter, sans-serif;
  
  /* Įjungia automatines ligatūras ir simbolių pataisymus (pvz., Chrome naršyklėje) */
            font-feature-settings: 'liga' 1, 'calt' 1;
            --bg:#fff;
            --bg-darker: #F2F2F2;
            --text-light:#fff;
            --accent-light:#7BBE98;
            --accent:#038B45;
            --black:#003D1E;
            --black:#000;
        }
        @supports (font-variation-settings: normal) {
          :root { 
            font-family: InterVariable, sans-serif; 
          }
        }

        *{box-sizing:border-box}

        html{
         scroll-behavior: smooth;
            height: 100%;
            overflow-x: hidden;
        }

         body{
            overflow-x: hidden;
            margin:0;
            font-family: inherit;
            font-size: var(--txt-s-h3);
            color:var(--black);
            font-weight: 400;
            background:var(--bg);
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
        }

        main{
            margin-top: 100px;
        }

        section h2{font-size: 40px; margin: 0; color: var(--accent);}
        section h3{font-size: 32px; margin: 0;}
        
        .deco {
        z-index: 0;
        pointer-events: none; /* Allows clicking through to content */
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        }
        /*----------- HERO ----------------- */

        .hero-s {
            /* Replace with your actual image path */
            background-image: url('../assets/jubiliejus/as-dalis-taves.webp');
            background-size: cover;
            background-position-y: 45%;
            background-position-x: center;
            height: 400px; /* Adjust height as needed */
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            text-align: center;
        }

        /* Dark overlay to ensure text readability */
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hero-overlay::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            
            /* The Gradient Logic */
            background: linear-gradient(
                to right, 
                rgba(0, 0, 0, 1) 0%,     /* Black at top (70% opacity) */
                rgba(0, 0, 0, 0.5) 30%,      /* Becomes transparent at 30% */
                rgba(0, 0, 0, 0.5) 70%,      /* Stays transparent until 70% */
                rgba(0, 0, 0, 1) 100%    /* Black at bottom (70% opacity) */
            );
            
            pointer-events: none; /* Allows clicks to pass through to the image */
        }

        .hero-content {
            margin-top:30px;
            z-index: 1; /* Sits above the overlay */
        }

        .hero-logo img {
            max-width: 120px; /* Adjust based on your logo size */
            margin-bottom: 15px;
        }

        .hero-title {
            font-size: 3rem; /* Large, bold heading */
            font-weight: 700;
            text-transform: none; /* Matches the "ist chorą" style */
            margin: 0;
            letter-spacing: 1px;
            line-height:40px;
        }

        .hero-s span{
            font-size: 1rem;
            letter-spacing: normal;
        }

        /* --------------------------- CLOCK ---------------------  */
        
        /* === laikrodis-s/COUNTDOWN === */
        .laikrodis-s {
            position: relative;
            background: var(--bg-darker);
            display:flex;
            align-items: center;
            align-content: center;
            margin: 0;
            height:360px;
            padding: 40px 28px; 
        }

        .countdown-wrapper hr{
            color: var(--accent-light);
        }
        
        .jub-text-clock{
            position: absolute;
            height:100%;
            width:100%;
            left:0;
            display:flex;
            transform: translateX(10px);
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap:5px;
            z-index:1;
        }
        
    
        .jub-text {
            text-align: center;
        }
        
        .c-text-1 {
            font-size: 1rem;
        }
        .c-text-2 {
            max-width:600px;
            font-size: 1rem;
            font-style: italic;
            text-align: center;
        }
        
        
        .countdown-wrapper {
            gap: 15px; /* Smaller gap in countdown */
        }
        
        .countdown-line {
            display: none; /* Hide lines on mobile */
        }
        
        .countdown {
            display:flex;
            flex-direction: row;
            gap: 10px;
        }
        
        .countdown .part {
            display:flex;
            flex-direction: row;
            align-items:flex-end;
            justify-content: center;
            gap:10px;
        }

        #days {
            width: auto;    /* 3 digits + spacing */
            text-align: right;   /* keep number flush against "dienos" as digit count shrinks */
        }

        #hours, #minutes, #seconds {
            min-width: 70px;
            text-align: left;
        }
        
        .countdown .number {
            font-family: Barlow;
            font-variant-numeric: tabular-nums;
            font-size: 48px;
            color:var(--accent);
            letter-spacing: 0.1em;
            font-feature-settings: "tnum";
        }
        
        .countdown .small {
            font-size: 32px;
            line-height: 1.5;
            text-align: left;
        }

        .laikrodis-s .deco{
            max-width: 400px;
            width:20vw;
            position: absolute;
            transform: scaleY(-1);
            left:0;
        }


        
        /* --------------------------- INICIATYVA SEKCIJA ---------------------  */
        
        .iniciatyva-s{
            position: relative;
            display: flex;
            justify-content: space-between;
            background: var(--bg);
            padding:80px 12vw;
            gap:20px;
        }
        
        .iniciatyva-info{
            max-width:800px;
        }

        .iniciatyva-s .deco{
            align-self: flex-end;
            margin-right: -12vw;
            
        }
        
        @media (max-width:1100px){
            .laikrodis-s .deco{
                transform: rotate(-90deg) scaleY(-1);
                bottom:40px;
                left:-30px;
                width:200px;
            }
            .iniciatyva-s .deco{
                width:40vw;
                transform: rotate(90deg) scaleY(-1);
            }
        }

        @media (max-width:768px){
            .iniciatyva-s .deco{
                display: none;
            }
        }

        @media (max-width:600px){
            .laikrodis-s .deco{
                display: none;
            }
        }


        /* --------------------------- RUBRIKOS IR DAINU SEKCIJA ---------------------  */

        .rubrika-s{
            width:100%;
            padding:80px 12vw;
            background: var(--bg-darker);
        }

        .rubrika-s h2{
            padding-bottom:0px;
        }

        .rubrika-s p{
            font-size: 1rem;
        }

        /* -- progreso juosta*/

        .songs-progress{
            display: flex;
            width:100%;
            gap:10px;
            margin:auto;
            position:relative;
            align-items: center;
            align-content: center;
            margin-top: 80px;
        }

        .progress-bar{
            display:flex;
            gap:2px;
            width:100%;
            height:60px;
            border:1px solid var(--black);
            border-radius:6px;
            padding:2px;
            z-index: 5;
        }

        .progress-segment{
            flex:1;
            background:none;
            position:relative;
            transition:0.2s;
            z-index: 5;
        }

        .progress-segment.done{
            background:#1a7f4b;
            cursor:pointer;
        }

        .progress-segment:hover
        {
            transform:scaleY(1.1);
        }

        .progress-segment.done:hover{
            transform:scaleY(1.1);
        }

        .progress-segment:first-child {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        .progress-segment:last-child {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        .progress-info{
            white-space: nowrap;
            position:relative;
            display: flex;
            align-items: center;
            font-weight:bold;
        }

        /* -- progreso juostos burbuliukas*/
        .progress-marker{
            position:absolute;
            top:56px;
            transform:translateX(-50%);
            pointer-events:none;
            transition:left 0.35s ease;
            z-index: 2;
        }

        .marker-line{
            width:2px;
            height:10px;
            background:var(--black);
            margin:auto;
        }

        /* Wraps just the number bubble so the title (below) can be
           absolutely positioned off its right edge without affecting the
           bubble's own centered position on the hovered slit. */
        .marker-bubble-wrap{
            position: relative;
            display: flex;
            justify-content: center;
        }

        .marker-bubble{
            background:var(--black);
            color:white;
            align-items: center;
            align-content: center;
            text-align: center;
            font-weight:400;
            height:20px;
            min-width: 20px;
            font-size:14px;
            padding:0px 6px;
            padding-bottom: 1px;
            border-radius:20px;
            margin-bottom:0px;
            white-space:nowrap;
        }

        /* Song title — appears to the right of the number only while
           hovering/focusing a slit (see updateMarker() in JS). */
        .marker-title{
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            margin-left: 4px;
            background: var(--black);
            color: white;
            font-size: 13px;
            font-weight: 400;
            padding: 3px 10px 4px;
            border-radius: 20px;
            white-space: nowrap;
            max-width: 280px;
            overflow: hidden;
            text-overflow: ellipsis;
        }


        /* ============================================================
           PAGRINDINE DAINU GALERIJA — KARUSELĖ
           ============================================================ */

        .songs-slider {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0px;
        }

        /* Container clips the cards that are animating in/out */
        .songs-cards-container {
            position: relative;
            align-items: center;
            align-content: center;
            justify-content: center;
            flex: 1;

        }

        /* Fixed-height track; all cards are absolutely positioned inside */
        .songs-track {
            position: relative;
            width: 100%;
            height: 530px;
        }



        /* ── "Naujiena!" / "Naujausia!" badge ──────────────────────────────────── */
        .badge-new {
            position: absolute;
            text-align: center;
            width: 120px;
            top: -12px;
            left: 15px;
            z-index: 5;
            background: var(--accent);
            color: #fff;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .6px;
            text-transform: uppercase;
            padding: 6px 10px;
            border-radius: 20px;
            pointer-events: none;
            user-select: none;
            box-shadow: 0 2px 8px rgba(0,0,0,.22);
            animation: badgePulse 2.4s ease-in-out infinite;
        }

        @keyframes badgePulse {
            0%, 100% { background: var(--accent); }
            50%       { background: var(--accent-light); }
        }
        /* ---- Base card ---- */
        .song-card {
            position: absolute;
            top: 0;
            left: 50%;
            /*
             * KEY: width is FIXED at 700px for every data-pos state.
             * Visual size differences are achieved with scale() only.
             *
             * Why this matters:
             *   - translateX(-50%) resolves to -50% of the element's OWN width.
             *   - If width snaps from 700px to 320px the instant data-pos changes,
             *     the resolved translateX jumps from -350px to -160px before the
             *     CSS transition even starts — the card teleports, then animates
             *     from the wrong place.
             *   - With a fixed 700px width, translateX(-350px) is always accurate
             *     and the browser can smoothly tween the full transform chain.
             */
            width: 700px;
            height: 590px;
            background: white;
            border-radius: 12px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            will-change: transform, opacity, filter;
            transition:
                transform  0.45s cubic-bezier(0.4, 0, 0.2, 1),
                opacity    0.45s ease,
                filter     0.45s ease,
                box-shadow 0.45s ease;
        }

        /* ---- Position states (desktop — horizontal) ---- */

        /*
         * Coordinate system — all translateX values explained:
         *   Card natural centre (with left:50%, width:700px) = 50% + 350px.
         *   To place the visual centre at target T:
         *     translateX = T − (50% + 350px)
         *
         *   CENTER → target = 50%       → translateX = −350px
         *   LEFT   → target = 50%−380px → translateX = −730px
         *   RIGHT  → target = 50%+380px → translateX =  +30px
         *
         *   Scale does NOT move the visual centre (transform-origin defaults
         *   to the element centre), so scale() can be added freely.
         */

        /* CENTER: full card, scale 1 */
        .song-card[data-pos="center"] {
            z-index: 3;
            min-height: 0px;
            transform: translateX(-350px) scale(1);
            opacity: 1;
            filter: none;
            pointer-events: auto;
            cursor: default;
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.13);
        }

        /* LEFT peek — visual centre at 50% − 380px, scaled to ~320px apparent width */
        .song-card[data-pos="left"] {
            z-index: 2;
            transform: translateX(-870px) translateY(140px) scale(0.46);
            opacity: 0.68;
            filter: blur(0.8px) grayscale(0.2);
            cursor: pointer;
            pointer-events: auto;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
        }

        .song-card[data-pos="left"] .song-video,
        .song-card[data-pos="right"] .song-video {
            pointer-events: none;
        }
        /* Hide actual video */
        .song-card[data-pos="left"] iframe,
        .song-card[data-pos="right"] iframe,
        .song-card[data-pos="left"] video,
        .song-card[data-pos="right"] video {
            opacity: 0;
        }

        /* Keep thumbnail visible */
        .song-card[data-pos="left"] .video-poster-overlay,
        .song-card[data-pos="right"] .video-poster-overlay {
            opacity: 1;
        }

        .song-card[data-pos="left"] .play-button-visual,
        .song-card[data-pos="right"] .play-button-visual {
            opacity: 0;
        }
        .song-card[data-pos="left"]:hover {
            opacity: 0.88;
            filter: blur(0) grayscale(0);
        }

        /* RIGHT peek — visual centre at 50% + 380px */
        .song-card[data-pos="right"] {
            z-index: 2;
            transform: translateX(170px) translateY(140px) scale(0.46);
            opacity: 0.68;
            filter: blur(0.8px) grayscale(0.2);
            cursor: pointer;
            pointer-events: auto;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
        }
        .song-card[data-pos="right"]:hover {
            opacity: 0.88;
            filter: blur(0) grayscale(0);
        }

        /* FAR-LEFT: off-screen exit / entry staging — invisible */
        .song-card[data-pos="far-left"] {
            z-index: 1;
            transform: translateX(-1200px) translateY(105px) scale(0.25);
            opacity: 0;
            pointer-events: none;
        }

        /* FAR-RIGHT: off-screen exit / entry staging — invisible */
        .song-card[data-pos="far-right"] {
            z-index: 1;
            transform: translateX(500px) translateY(105px) scale(0.25);
            opacity: 0;
            pointer-events: none;
        }

        /* ---- Inside-card sub-elements ---- */

        .song-card iframe {
            width: 100%;
            border-radius: 10px;
        }

        /* .preview = hover/focus lights the slit up the same way .active does,
           without switching the current song (see updateMarker()/generateProgressBar()) */
        .progress-segment.active,
        .progress-segment.preview {
            background: var(--accent-light);
        }

        .song-info-wrap > div {
            flex: 1;
            min-width: 0;
        }

        .song-info-wrap {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            width: 100%;
            overflow: hidden;
            line-height: 1;
        }

        .song-title {
            text-align: left;
        }

        .song-info-wrap h3,
        .song-info-wrap .artists {
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            width: 100%;
            position: relative;
            cursor: default;
            line-height: 1.4;
            padding: 0;
        }

        .song-info-wrap h3 {
            font-size: 1.2rem;
            color: #333;
            line-height: 1.4;
        }


        .song-info-wrap h3:hover,
        .song-info-wrap .artists:hover {
            white-space: normal;
            overflow: visible;
            background: white;
            z-index: 10;
        }

        .song-number {
            position: relative;
            min-width: 70px;
            height: 40px;
            align-items: center;
            align-content: center;
            text-align: center;
            background: var(--accent);
            color: var(--bg);
            border-radius: 10px;
            font-weight: bold;
            font-size: 2rem;
            padding: 0px 5px;
            z-index: 2;
            white-space: nowrap;
        }

        .song-number.big {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            /* min, not max: a cap here forces multi-song ranges like "20-22"
               to overflow past their own padding since white-space:nowrap
               won't let them wrap. */
            max-width: 88px;
            height: 60px;
            padding: 0 15px;
            margin-top: 8px;
            box-sizing: content-box;
            font-size: 40px;
            font-weight: bold;
            white-space: nowrap;
            background: var(--accent);
            color: white;
            border-radius: 10px;
            flex-shrink: 0;
        }

        .song-card h3 {
            margin: 0;
            padding: 0;
            font-size: 40px;
            font-weight: 600;
            color: var(--black);
        }

        .song-info-wrap .artists {
            font-size: 1rem;
            color: var(--black);
            margin-top: -5px;
            opacity: 0.75;
        }

        .song-video {
            width: 100%;
            aspect-ratio: 16 / 9;
            background: #000;
            border-radius: 8px;
            overflow: hidden;
            margin-top: 10px;
        }

        .video-element {
            width: 100%;
            height: 100%;
            display: block;
            z-index: 1;
        }

        video.video-element {
            object-fit: cover;
        }

        .song-video iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .song-meta {
            font-size: 1rem;
            color: var(--black);
            opacity: 0.75;
        }

        .arrow {
            position:absolute;
            top: 83%;
            background: none;
            border: none;
            color: var(--accent);
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            padding:10px 18px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            font-size: 3rem;
            cursor: pointer;
            transition: color 0.3s ease;
            flex-shrink: 0;
            transform: translateY(170px);
            z-index: 7;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        /* position relative to center */
        .arrow.left {
            left: 50%;
            transform: translate(-775px, -50%);
        }

        .arrow.right {
            left: 50%;
            transform: translate(700px, -50%);
        }
        .arrow:hover {
            color: var(--accent-light);
        }

        
        /* youtube video thumbnail overlay */

        .youtube-wrapper {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            background: #000;
        }
        .video-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            background: #000;
            border-radius: 8px;
            overflow: hidden;
        }

        /* Anchor the player to all 4 edges instead of sizing it via
           width/height:100% in normal flow. Percentage-based flow sizing can
           round to a sub-pixel short of the wrapper's true box, leaving a
           hairline of the wrapper's #000 background peeking through at the
           top/bottom — invisible against a plain video frame, but it shows
           up as a stray black line the moment YouTube's hover controls add
           their own dark gradient right up against that edge. */
        .video-wrapper .video-element {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }

        .video-poster-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 5;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    .video-poster-overlay:focus-visible {
            box-shadow: inset 0 0 0 10px rgba(0, 238, 255, 0.9); /* Dims the image to make focus pop */
            z-index: 10;
        }

        /* Video confirmed unavailable on YouTube — just the thumbnail,
           nothing clickable/playable (see markVideoUnavailable() in JS). */
        .video-poster-overlay.video-unavailable {
            cursor: default;
            background-color: #000; /* shows through if there's no thumbnail image at all */
        }

        .video-unavailable-label {
            background: rgba(0, 0, 0, 0.65);
            color: #fff;
            font-size: 0.85rem;
            text-align: center;
            padding: 6px 14px;
            border-radius: 20px;
            max-width: 80%;
        }


        .play-button-visual {
            width: 60px;
            height: 60px;
            background: rgba(26, 127, 75, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            border: 2px solid rgba(255, 255, 255, 0.8);
        }

        .play-button-visual::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 12px 0 12px 20px;
            border-color: transparent transparent transparent #ffffff;
            margin-left: 5px;
        }

        .video-poster-overlay:hover .play-button-visual {
            transform: scale(1.15);
            background: var(--accent);
            box-shadow: 0 0 30px rgba(3, 139, 69, 0.5);
        }


        /* -- timeline */

        .timeline-wrapper {
            position: absolute;
            bottom: -35px;
            left: 50%;
            transform: translateX(-50%);
            width: 1340px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5;
        }

        .timeline-line {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background: #1a7f4b;
            z-index: 1;
            transform-origin: center;
            transition: transform 0.2s ease;
        }

        .timeline-points {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            gap: 30px;
            z-index: 2;
        }

        .date-point, .date-point2 {
            width: 320px;
            text-align: center;
            position: relative;
            display: flex;
            justify-content: center;
            transition: opacity 0.18s ease;
        }

        .date-point.active {
            width: 700px;
        }

        .date-text {
            background: var(--bg);
            padding: 0 15px;
            color: var(--accent);
            font-size: 14px;
            white-space: nowrap;
        }

        .date-point.active .date-text {
            font-size: 2rem;
            font-weight: bold;
        }

        /* -- bubbles */

        .songs-bubbles {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            position: relative;
            height: 40px;
            margin-bottom: 10px;
        }

        .song-bubble {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0px 4px;
            padding-bottom: 1px;
            height: 20px;
            /* Fixed width (not min-width) so the bubble row doesn't jitter as
               the current song's digit-count changes (e.g. "1" vs "97-100"). */
            width: 32px;
            background: none;
            border: 1px solid var(--black);
            border-radius: 20px;
            font-size: 12px;
            font-weight: 400;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: 0.2s;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Multi-digit range labels (e.g. "12-15") shrink to fit the fixed width */
        .song-bubble--wide {
            font-size: 9px;
        }

        /* Only for devices that actually have hover (mouse/trackpad) — on
           touch, the browser fakes a "hover" on tap that then gets stuck
           (no pointer to un-hover with), turning the bubble green even
           when the tap's click never actually fires/lands. No real feedback
           was lost: the .active class already shows the current song, and
           a real navigation swaps it immediately either way. */
        @media (hover: hover) and (pointer: fine) {
            .song-bubble:hover {
                background: var(--accent);
                border: 1px solid var(--accent);
                color: white;
            }
        }

        .song-bubble.active {
            background: var(--accent);
            border: 1px solid var(--accent);
            color: white;
        }

        .song-bubble-ellipsis {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 20px;
            min-width: 20px;
            font-size: 12px;
            font-weight: 400;
            color: var(--black);
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }


        /* --------------------------- JUBILIEJAUS KONCERTO SEKCIJA ---------------------  */

        .jub-koncertas-s {
            display: flex;
            align-items: center;
            width: 100%;
            gap: 100px;
            background-color: var(--bg);
            padding: 80px 12vw;
        }

        .side-image {
            display: flex;
            flex: 1;
            justify-content: flex-end;
        }
        .konc-info {
            align-items: left;
            align-content: left;
            flex: 1;
        }

        .side-image img {
            height: auto;
            width: 100%;
            display: block;
            cursor: pointer;
        }

        .i-span-1 {
            font-size: 1rem;
            font-weight: 400;
        }

        .i-span-2 {
            font-size: 1rem;
            font-weight: 700;
        }

        .i-span-3 {
            font-size: 1rem;
        }


        .jub-koncertas-s .deco{
            position: absolute;
            z-index: 0;
            right:0;
            height:200px;
        }

        @media (max-width: 1290px){
            .jub-koncertas-s .deco{
                display:none;
            }
        }


        @media (max-width: 1500px) {

            .laikrodis-s{
                height:350px;
            }
            .c-text-2{
                max-width: 500px;
            }
            /* Slider switches to column so arrows sit above/below */
            .songs-slider {
                flex-direction: column;
                gap: 0;
                position: relative;
            }
            
            .songs-bubbles {
                margin-bottom: 20px;
            }

            #date-left, #date-right {
                display:none;
            }

            .timeline-wrapper{
                bottom:-40px;
            }
            .timeline-line {
                display: none;
            }

            /* Arrows float left/right over the track */
            .arrow {
                position: absolute;
                top: 50%;
                z-index: 5;
                transform: translateY(-50%);
                font-size: 3rem;
                width: 40px;
                height: 40px;
                display: flex;
                padding:35px;
                align-items: center;
                justify-content: center;
            }

            .arrow[style*="opacity: 0"] {
                cursor: default;
            }
        

            .songs-cards-container {
                width: 100%;
                border-radius: 4px;
            }

            /* Taller track to show peeking top/bottom cards */
            .songs-track {
                height: 560px;
            }

            /* ---- Vertical position states (mobile) ----
             * All cards share one fixed width so translateX(-50%) always
             * resolves to the same pixel value — same principle as desktop.
             */

            .song-card[data-pos="center"],
            .song-card[data-pos="left"],
            .song-card[data-pos="right"],
            .song-card[data-pos="far-left"],
            .song-card[data-pos="far-right"] {
                width: calc(100% - 40px);
                max-width: 700px;
            }

            /* CENTER */
            .song-card[data-pos="center"] {
                min-height: 360px;
                overflow: visible;
                padding: 12px 15px 65px 15px;
                transform: translate(-50%, 40px) scale(1);
                opacity: 1;
                filter: none;
                box-shadow: 0 8px 40px rgba(0, 0, 0, 0.13);
            }

            /* LEFT → TOP peek */
            .song-card[data-pos="left"] {
                transform: translate(-50%, -120px) scale(0.62);
                opacity: 0.45;
                filter: blur(1px) grayscale(0.3);
                pointer-events: auto;
                cursor: pointer;
                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
            }

            /* RIGHT → BOTTOM peek */
            .song-card[data-pos="right"] {
                transform: translate(-50%, 510px) scale(0.62);
                opacity: 0.45;
                filter: blur(1px) grayscale(0.3);
                pointer-events: auto;
                cursor: pointer;
                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
                /* Negative insets on top/sides expose the focus outline (5px + 2px offset)
                   so keyboard focus ring is fully visible; 82% bottom clip unchanged */
                clip-path: inset(-8px -8px 82% -8px);
            }

            /* FAR-LEFT → far above, invisible */
            .song-card[data-pos="far-left"] {
                transform: translate(-50%, -220px) scale(0.45);
                opacity: 0;
                pointer-events: none;
            }

            /* FAR-RIGHT → far below, invisible */
            .song-card[data-pos="far-right"] {
                transform: translate(-50%, 650px) scale(0.45);
                opacity: 0;
                pointer-events: none;
            }

            /* Timeline dates: compress on mobile */
            #date-left, #date-right {
                opacity: 0.3;
                transform: scale(0.8);
            }

            .progress-bar {
                gap: 0px;
            }
            
            .songs-progress{
                display: flex;
                width:100%;
                gap:10px;
                margin:auto;
                position:relative;
                align-items: center;
                align-content: center;
                margin-top: 130px;
            }

            .arrow.left {
                left: max(-60px, calc(50% - 480px));
                transform: translateY(-50%);
            }
            .arrow.right {
                left: auto; /* override the 50% */
                right: max(-60px, calc(50% - 480px));
                transform: translateY(-50%);
            }

            /* TIMELINE: Constrain width to match cards and prevent overflow */
            .timeline-wrapper {
                width: calc(100% - 40px);
                max-width: 700px;
                bottom: -50px; /* Slightly lower to clear card shadow */
            }
            
            .date-point.active {
                width: 100%; /* Take full width of constrained wrapper */
            }
            
            .date-point.active .date-text {
                font-size: 1.5rem; /* Slightly smaller for this range */
            }
            
            /* Ensure progress bar clears the date */
            .songs-progress {
                margin-top: 140px;
            }
        }



        /* ============================================================
           MOBILIEJI  (≤ 768 px) — VERTIKALI KARUSELĖ
           ============================================================ */

        @media (max-width: 768px) {

            .hero-s .hero-title, .rubrika-s h2 {
                font-size: 2rem;
            }

            .iniciatyva-s {
                background: var(--bg);
                padding: 60px 5vw;
                max-width: 95vw;
            }

            .iniciatyva-s h2 {
                font-size: 2rem;
            }

        .song-video {
            width: 100%;
            aspect-ratio: 16 / 9;
            background: #000;
            border-radius: 8px;
            overflow: hidden;
            margin-top: 10px;
        }

                .rubrika-text-wrap {
                    padding-bottom: 3rem;
            }   

            /* ---- CAROUSEL ---- */

            .rubrika-s{
                width:100%;
                padding:80px 5vw;
                background: var(--bg-darker);
            }

            .song-number.big {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                max-width: 48px;
                height: 60px;
                padding: 0 15px;
                margin-top: 6px;
                box-sizing: content-box;
                font-size: 1.5rem;
                font-weight: bold;
                white-space: nowrap;
                background: var(--accent);
                color: white;
                border-radius: 10px;
                flex-shrink: 0;
            }

            .song-card h3 {
                margin: 0;
                padding: 0;
                font-size: 1.25rem;
                font-weight: 600;
                color: var(--black);
            }

           .song-info-wrap .artists{
                font-size: 0.8rem;
                color: var(--black);
                margin-top: -5px;
                opacity: 0.75;
            }

            /* Touch target fix: 20px bubbles are well under the ~44px
               minimum recommended tap size. The ellipsis-collapsing keeps
               only a handful visible at once now, so there's room to size
               them up properly instead of relying on an invisible/
               overlapping hit-area hack. */
            .songs-bubbles {
                height: auto;
                gap: 10px;
            }

            .song-bubble {
                height: 40px;
                width: 40px;
                padding: 0 4px;
                font-size: 14px;
            }

            .song-bubble--wide {
                font-size: 11px;
            }

            .song-bubble-ellipsis {
                height: 40px;
                min-width: 24px;
                font-size: 14px;
            }

            .song-info-wrap h3,
            .song-info-wrap .artists {
                margin: 0;
                white-space: wrap;
                -webkit-box-orient: vertical;  
                overflow: hidden;
                text-overflow:ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                width: 100%;
                position: relative;
                cursor: default;
                line-height: 1.4;
                padding: 0;
            }

            .song-meta{
                font-size:0.7rem;
            }

            .song-card{
                min-height: 400px;
                height:auto;
            }

            .song-card[data-pos="center"],
            .song-card[data-pos="left"],
            .song-card[data-pos="right"],
            .song-card[data-pos="far-left"],
            .song-card[data-pos="far-right"] {
                padding:6px;
                width: 100%;
            }
            /* ---- CLOCK ----- */

            .laikrodis-s {
                background: var(--bg-darker);
                display: flex;
                align-items: center;
                align-content: center;
                margin: 0;
                height: 340px;
                padding: 40px 28px;
            }

            .jub-text-clock {
                position: absolute;
                padding: 5vw;
                height: 100%;
                width: 100%;
                left: 0;
                display: flex;
                transform: translateX(0px);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 5px;
                z-index: 1;
            }

            .jub-text {
                text-align: center;
            }

            .c-text-1 {
                font-size: 1rem;
                text-align: center;
                padding-bottom: 10px;
            }
            .c-text-2 {
                font-size: 1rem;
                max-width: 320px;
                padding-top: 10px;
                text-align: center;
            }

            .countdown-wrapper {
                gap: 15px;
            }

            .countdown-line {
                display: none;
            }

            .countdown {
                display: flex;
                flex-direction: row;
                justify-content: center;
                gap: 10px;
            }

            .countdown .part {
                display: flex;
                flex-direction: row;
                gap: 3px;
                align-items: flex-end;
            }

            #days {
                min-width: 55px;
                text-align: right;
            }

            #hours, #minutes, #seconds {
                min-width: 40px;
                text-align: right;
            }

            .countdown .number {
                font-family: Barlow;
                font-size: 2rem;
                color: var(--accent);
                letter-spacing: 0.05em;
            }

            .countdown .small {
                font-size: 1rem;
                line-height: 1.5;
                text-align: left;
            }

            /* ---- koncertas ---- */
            .jub-koncertas-s {
                flex-direction: column;
                padding: 60px 5vw;
                gap: 30px;
            }

            .jub-koncertas-s h2 {
                font-size: 2rem;
            }








                /* --- ARROWS: Pin to edges so they're always visible --- */
            .arrow {
                font-size: 2.2rem;
                width: 44px;
                height: 44px;
                background: rgba(255, 255, 255, 0.9);
                border-radius: 50%;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                display: flex;
                z-index:5;
                align-items: center;
                justify-content: center;
            }
            
            .arrow.left {
                left: max(-20px, calc(50% - 480px));
                transform: translateY(-150%);
            }
            .arrow.right {
                right: max(-20px, calc(50% - 480px));
                transform: translateY(-150%);
            }
            
            .arrow:hover {
                background: white;
                color: var(--accent);
            }


            /*  naujienos label*/

                .badge-new {
                    position: absolute;
                    width: 70px;
                    top: 56px;
                    left: 5px;
                    font-size: .45rem;
                    padding: 4px 7px;
                }



            /* Ensure cards don't get too wide on small phones */
            .song-card[data-pos="center"],
            .song-card[data-pos="left"],
            .song-card[data-pos="right"] {
                width: 100%;
                max-width: 500px; /* Cap width for better proportions on mobile */
            }


            /* --- CARDS: Fixed height center card so date stays put --- */
            .songs-track {
                height: 580px; /* Slightly taller to accommodate fixed card + peek */
            }
            
            .song-card[data-pos="center"] {
                height: 400px; /* FIXED HEIGHT - prevents date from jumping */
                min-height: 400px;
                max-height: 400px;
                padding-bottom: 20px; /* Reduce bottom padding since height is fixed */
                transform: translate(-50%, 20px) scale(1); /* Slightly higher to fit */
            }
            
            /* Better vertical stacking alignment */
            .song-card[data-pos="left"] {
                transform: translate(-50%, -100px) scale(0.55); /* Peek from top */
                opacity: 0.4;
                filter: blur(1.5px) grayscale(0.4);
            }
            
            .song-card[data-pos="right"] {
                transform: translate(-50%, 330px) scale(0.55); /* Peek from bottom */
                opacity: 0.4;
                filter: blur(1.5px) grayscale(0.4);
                clip-path: inset(0 0 85% 0); /* Show only ~15% (just header) */
            }
            
            .song-card[data-pos="far-left"],
            .song-card[data-pos="far-right"] {
                opacity: 0;
                pointer-events: none;
            }


            /* --- DATE/TIMELINE: Position reliably below fixed card --- */
            .timeline-wrapper {
                bottom: 160px; /* Position below the 500px card + 20px offset */
                height: auto;
                z-index: 3;
                background:none;
            }
            
            .date-point.active .date-text {
                font-size: 1.25rem;
                font-weight: 700;
                background: var(--bg-darker); /* Match section background */
                padding: 4px 12px;
                border-radius: 20px;
            }
            
            /* Hide line and side dates completely on mobile */
            .timeline-line,
            #date-left,
            #date-right {
                display: none !important;
            }
            
            #date-middle {
                width: 100% !important;
                background: none;
            }

            .date-point.active .date-text {
                background:none;
            }

            /* --- CONTENT FITTING: Ensure text fits in fixed height --- */
            .song-info-wrap {
                gap: 8px;
            }
            
            .song-info-wrap h3 {
                font-size: 1.1rem;
                -webkit-line-clamp: 2; /* Limit to 2 lines */
                line-height: 1.3;
            }
            
            .song-info-wrap .artists {
                font-size: 0.7rem;
                -webkit-line-clamp: 2; /* Limit to 2 lines */
            }
            
            .song-number.big {
                height: 45px;
                font-size: 1.25rem;
                padding: 0 10px;
                margin-top: 0;
            }
            
            .song-video {
                margin-top: 8px;
            }

            /* --- PROGRESS BAR: Ensure clearance --- */
            .songs-progress {
                margin-top: -80px; /* Space for date bubble */
            }
            
            .progress-bar {
                height: 50px;
            }
            
            .marker-bubble {
                font-size: 12px;
                height: 18px;
                min-width: 18px;
            }
        }

        @media (max-width: 500px){
            .arrow.left {
                left: 30px;
                padding:27px;
                transform: translateY(125%);
            }
            
            .arrow.right {
                right: 30px;
                padding:27px;
                transform: translateY(125%);
            }

            .timeline-wrapper {
                bottom: 180px; /* Position below the 500px card + 20px offset */
                height: auto;
                z-index: 4;
                background:none;
            }
        }

        /* Extra Small Devices (Phones < 480px) */
        @media (max-width: 480px) {
            .hero-title-jub {
                font-size: 1.8rem;
            }

            .playlist-item {
                padding: 10px;
            }

            .playlist-item img {
                width: 80px;
            }
        }