: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;
            --accent-dark:#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;
        }

        section h2{font-size: 40px; margin: 0; color: var(--accent);}
        section h3{font-size: 32px; margin: 0;}


        main{
            margin-top: 100px;
        }

        .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-section {
            /* Replace with your actual image path */
            background-image: url('/assets/apie/images/linas-turas.webp');
            background-size: cover;
            background-position: 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%;
            background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
            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) 30%,      /* Becomes transparent at 30% */
                rgba(0, 0, 0, 0) 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 {
            z-index: 1; /* Sits above the overlay */
        }

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

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

        /*-----------  APIE CHORA -----------------------------------*/

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

        .apie-info{
            align-items: left;
            align-content: left;
            flex: 1;
        }

        .jaun-logo-green{
            height: 160px;
        }   
        .side-image {
            display: flex;
            flex: 1; /* Nuotraukos konteineris užims tiek pat vietos kiek tekstas (50/50) */
            justify-content: flex-end;
        }

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

        .apie-s .btn-1{
            margin-top:10px;
        }

        .apie-gallery {
        flex: 1;
        display: flex;
        gap: 15px;
        }

        .apie-gallery img {
        width: 50%;
        cursor: pointer;
        object-fit: cover;
        height: 400px;
        }

        .apie-s .deco,
        .ist-s .deco{
            position: absolute;
            z-index: 0;
            left:0;
            height:200px;
        }

        @media (max-width: 1290px){
            .apie-s .deco,
            .ist-s .deco{
                display:none;
            }
        }
        /*-----------  PASIEKIMAI  -----------------------------------*/


        .pasiekimai-s{
            padding:100px 0px;
            background: var(--bg-darker);
        }

        .pas-section-wrap{
            display: flex;
            flex-direction: column;
            gap:60px;
        }

        .pas-section-wrap .btn-1{
            display: inline-flex;
            align-items: center;
            width: fit-content;
            margin: 30px auto 0px auto;
        }

        .pasiekimai-s h2{
            padding: 0px 12vw;
            margin-bottom: 20px;
        }

        .pasiekimai-s-l {
            display: flex;
            align-items: center;
            gap: 40px;
            padding: 0px 12vw;
            margin-bottom:0px;
            font-family: 'Inter', sans-serif;
        }

        .pasiekimai-s-l2 {
            padding-top:20px;
        }

        .pasiekimai-s-r {
            display: flex;
            gap: 40px;
            padding:0px 12vw;
            background-color: var(--bg);
            font-family: 'Inter', sans-serif;
            align-items: center;
        }

        .pasiekimai-list {
            flex: 2;
        }

        .pasiekimai-list-ul {
            display: flex;
            flex-direction: column;
            list-style: none;
            gap:30px;
            padding: 0;
            margin: 0;
        }

        .achv-item,
        .achv-item-done {
            display: flex;
            align-items: center;
            margin:0px;
            transition: all 0.3s ease;
        }

        .achv-item-done:hover{
            transform: translateX(8px);
            cursor: pointer;
        }


        .achv-date,
        .achv-date-done {
            background-color: var(--accent);
            color: white;
            padding: 8px 16px;
            font-weight: 700;
            min-width: 50px;
            border-radius: 10px 0px 0px 10px;
            position: relative;
            z-index: 2;
        }

        .achv-details {
            background: var(--bg);
            padding: 8px 20px;
            margin-left: -10px; /* Overlap effect */
            border-radius: 0 10px 10px 0;
            border-left: solid 2px var(--accent);
            border-right: solid 2px var(--accent);
            flex-grow: 1;
            font-size: 1rem;
            color: var(--text-dark);
        }

        /* Staggered indentation effect */
        .achv-item-done:nth-child(2){ margin-left: 40px; margin-right: 40px;}
        .achv-item-done:nth-child(4){ margin-left: 40px; margin-right: 40px;}
        .achv-item-done:nth-child(6){ margin-left: 40px; margin-right: 40px;}
        .achv-item:nth-child(2) { margin-left: 40px; margin-right: 40px;}
        .achv-item:nth-child(4) { margin-left: 40px; margin-right: 40px;}
        .achv-item:nth-child(6) { margin-left: 40px; margin-right: 40px;}
        /* ... and so on */
        .achv-item:nth-child(odd) .achv-details{
            border-radius: 0 10px 10px 0px;
        }

        .achv-item:nth-child(even) .achv-date{
            border-radius: 0 10px 10px 0;
        }
        .achv-item:nth-child(even) .achv-details{
            border-radius: 10px 0px 0px 10px;
        }

        .achv-gallery {
            width:310px;
            height:230px;
            flex: 1;
            display: flex;
            gap: 15px;
            cursor: pointer;
            margin-top: -100px;
        }

        .achv-gallery img {
            width: 100%;
            object-fit: cover;
        }
        

        
        /*-----------  ISTORIJA -----------------------------------*/

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

        .ist-info{
            align-items: left;
            align-content: left;
            flex: 1;
        }

        .side-image {
            display: flex;
            flex: 1; /* Nuotraukos konteineris užims tiek pat vietos kiek tekstas (50/50) */
            justify-content: flex-end;
        }
        
        .side-image img {
            height:294px;
            width: auto;
            display: block;
            cursor: pointer;
        }

        /*------------ KONCERTAI ----------------------------------*/

        .koncertai-s {
            padding: 100px 12vw;
            background-color: var(--bg-darker);
        }

        .concerts-header p {
            line-height: 1.6;
            max-width: 1000px;
            margin-bottom: 16px;
        }

        /* The Grid */
        .concerts-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
            gap: 20px;
        }

        /* Individual Card */
        .concert-card {
            background: var(--bg);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .concert-card:hover{
            transform: scale(1.05);
        }

        .card-image img {
            width: 100%;
            aspect-ratio: 16 / 10; /* Keeps all images the same size */
            object-fit: cover;
            display: block;
        }

        .card-footer {
            padding: 12px;
            text-align: center;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--black)
        }

        /* Responsive Breakpoints */
        @media (max-width: 1024px) {
            .concerts-grid { grid-template-columns: repeat(2, 1fr); } /* 2 per row on tablets */
        }

        @media (max-width: 600px) {
            .concerts-grid { grid-template-columns: 1fr; } /* 1 per row on mobile */
        }

        /*------------ TRADICIJOS ---------------------*/
       
        .tradicijos-s {
            padding: 100px 12vw;
            background: var(--bg);
        }

        .tradicijos-s h2{
            margin-bottom: 20px;
        }

        .trad-wrap{
            display:flex;
            flex-direction: column;
            gap: 40px;
        }

        .tradicijos-s p {
            max-width: 1000px;
        }

        .slider-container {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%; /* Ensure it spans the full container */
        }

        .slider {
            display: flex;
            overflow-x: auto;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            scrollbar-width: none; 
            width: 100%;
        }

        .slider::-webkit-scrollbar { display: none; }

        .slider img {
            height: 215px; 
            scroll-snap-align: start;
            cursor: pointer;
            transition: all 0.2s;
        }

        .slider img:hover {
            filter:brightness(80%)
        }


        .arrow-next, .arrow-prev {
            position: absolute;
            height: 100%;
            width: 70px; /* Define a width for the gradient area */
            color: white;
            border: none;
            font-size: 4rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            transition: all 0.3s ease;
            z-index: 5;
        }

        .arrow-prev
        {
            justify-content: flex-start;
        }


        .slider-wrapper {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .arrow-next {
            right: 0px;
            padding-right:5px;
            opacity: 0.8;
            background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
        }
        .arrow-next:hover {
            right: 0px;
            opacity: 1;
            background: linear-gradient(to left, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);

        }

        .arrow-prev {
            left: 0px;
            padding-left:5px;
            opacity: 0.8;
            background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
        }

        .arrow-prev:hover {
            right: 0px;
            opacity: 1;
            background: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
        }

        .arrow-prev.is-hidden, .arrow-next.is-hidden {
            opacity: 0;
            pointer-events: none;
        }


        .trad{
            padding: 25px;
            border-radius: 10px;
            background:var(--bg-darker)
        }
        
@media (max-width: 1630px) {
    /* 2. Achievements (Pasiekimai) */
    .pasiekimai-s {
        padding: 60px 12vw;
    }

    .pasiekimai-s h2 {
        padding: 0 5vw;
        text-align: center;
    }

    /* Stack list and image vertically */
    .pasiekimai-s-l, 
    .pasiekimai-s-r{
        flex-direction: column;
        padding: 0 0;
        gap: 30px;
    }

    .jaun-logo-green{
        display: none;
    }


    /* Reverse order for right-aligned sections so image stays below text on mobile */
    .pasiekimai-s-r {
        flex-direction: column-reverse;
    }

    .pasiekimai-list {
        width: 100%;
    }

    .achv-item{
        display: flex;
        /* This ensures children (date and details) stretch to the height of the tallest one */
        align-items: stretch; 
        white-space: wrap;
    }
    /* Remove the staggered indentation (margin-left/right) for cleaner mobile look */
    .achv-item {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .pasiekimai-list-ul:nth-child(even) .achv-details {
        padding-left: 60px !important;
    }

    .achv-date{
        display: flex;
        min-width: fit-content;
        align-content: center;
        align-items: center;
        text-align: center;
        height: auto;
        padding:10px;
        z-index: 4;
    }

    .achv-details{
        z-index: 5;
        margin:0 0px;
    }
    
    .achv-gallery {
        width: 100%;
        height: auto;
        margin-top: 30px;
    }
    .achv-gallery img {
        height: 200px;
        border-radius: 10px;
    }
}

@media (max-width: 1286px){

    .apie-s {
        flex-direction: column;
        padding: 0 5vw;
        gap: 30px;
        padding: 60px 12vw;
    }

    /* 2. History (Istorija) */
    .ist-s {
        flex-direction: column;
        padding: 60px 12vw;
        text-align: left;
    }

    .side-image, .apie-gallery {
        justify-content: center;
        width: 100%;
    }

    .apie-gallery img {
        height: 250px; /* Smaller height for mobile */
    }

    .side-image img {
        height: auto;
        width: 100%;
        max-width: 400px; /* Prevents image from being too huge */
    }
}

/* --- RESPONSIVE STYLES FOR TABLETS AND MOBILE (MAX-WIDTH: 768px) --- */
@media (max-width: 768px) {
    /* 1. General Layout Adjustments */
    main {
        margin-top: 80px; /* Smaller header space */
        overflow: hidden;
    }

    section h2 {
        font-size: 2rem; /* Smaller section titles */
    }

    /* 2. Concerts (Koncertai) */
    .apie-s, .koncertai-s, .ist-s, .pasiekimai-s {
        padding: 60px 5vw;
    }

    .concerts-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
        gap: 15px;
    }

    /* 3. Traditions (Tradicijos) */
    .tradicijos-s {
        padding: 60px 5vw;
    }

    .trad {
        padding: 15px;
    }

    .slider img {
        height: 160px; /* Smaller images in slider */
    }

    .arrow-next, .arrow-prev {
        width: 40px;
        font-size: 2.5rem;
        z-index: 4;
    }

    .btn-1{
        background-position: right 20px center;
        height:39px;
        padding:0px 7px;
        padding-left:28px;
        padding-right:40px;
        align-items: center;
        align-content: center;
        text-align: center;
    }
}

/* Extra small devices (Phones) */
@media (max-width: 480px) {
    .concerts-grid {
        grid-template-columns: 1fr; /* 1 column on phones */
    }
    
    .hero-title {
        font-size: 1.8rem;
    }

    .achv-date {
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    .achv-details {
        font-size: 0.9rem;
    }
}