@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap");

/* Main Container Styling */
.timeline-container {
    --color: rgba(30, 30, 30);
    --bgColor: rgba(245, 245, 245, 0); /* Transparent background */
    display: grid;
    justify-items: center;
    gap: 32px; /* 2rem to 32px */
    padding: 32px; /* 2rem to 32px */
    font-family: "Poppins", sans-serif;
    color: var(--color);
    background: var(--bgColor);
}

/* Timeline List Styling */
.timeline-list {
    --col-gap: 32px; /* 2rem to 32px */
    --row-gap: 32px; /* 2rem to 32px */
    --line-w: 4px; /* 0.25rem to 4px */
    display: grid;
    grid-template-columns: var(--line-w) 1fr;
    grid-auto-columns: max-content;
    column-gap: var(--col-gap);
    list-style: none;
    width: min(960px, 90%); /* 60rem to 960px */
    margin-inline: auto;
}

/* Timeline Line Styling */
.timeline-list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 51.2%; /* Geser garis lebih ke kiri dari tengah */
    transform: translateX(-50%); /* Masih mempertahankan garis berada di tengah */
    background: rgb(225, 225, 225);
    border-radius: calc(var(--line-w) / 2);
    width: var(--line-w, 4px); /* Lebar garis */
    height: 100%;
}

/* Row Gaps */
.timeline-list li:not(:last-child) {
    margin-bottom: var(--row-gap);
}

/* Timeline Card Styling */
.timeline-list li {
    grid-column: 2;
    --inlineP: 24px; /* 1.5rem to 24px */
    margin-inline: var(--inlineP);
    grid-row: span 2;
    display: grid;
    grid-template-rows: min-content min-content min-content;
    position: relative; /* Pastikan elemen ini memiliki posisi relatif */
}

/* Date Box Styling */
.timeline-list li .date {
    --dateH: 48px; /* Tinggi kotak tanggal */
    height: var(--dateH);
    margin-inline: calc(var(--inlineP) * -1);
    text-align: center;
    background-color: var(--accent-color); /* Warna latar belakang dari kotak tanggal */
    color: white; /* Warna teks */
    font-size: 20px; /* Ukuran font untuk tahun */
    font-weight: 700; /* Ketebalan font */
    display: grid;
    place-content: center;
    position: relative;
    border-radius: calc(var(--dateH) / 2) 0 0 0;
}

/* Date Flap Styling */
.timeline-list li .date::before {
    content: "";
    width: var(--inlineP);
    aspect-ratio: 1;
    background: var(--accent-color);
    background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
    position: absolute;
    top: 100%;
    clip-path: polygon(0 0, 100% 0, 0 100%); /* Membuat segitiga */
    right: 0;
}


.timeline-list li .date::after {
    content: "";
    position: absolute;
    width: 32px;
    /* 2rem to 32px */
    aspect-ratio: 1;
    background: var(--accent-color);
    /* Full circle color */
    border: none;
    /* Removed border */
    border-radius: 50%;
    top: 50%;
    transform: translate(50%, -50%);
    right: calc(100% + var(--col-gap) + var(--line-w) / 2);
}

/* Title and Description Box Styling */
.timeline-list li .title,
.timeline-list li .descr {
    background: var(--bgColor);
    position: relative;
    padding-inline: 24px;
    /* 1.5rem to 24px */
}

/* Title Styling */
.timeline-list li .title {
    overflow: hidden;
    padding-block-start: 24px;
    /* 1.5rem to 24px */
    padding-block-end: 16px;
    /* 1rem to 16px */
    font-weight: 500;
    font-size: 24px;
    color: var(--accent-color);
}

/* Description Styling */
.timeline-list li .descr {
    padding-block-end: 24px;
    /* 1.5rem to 24px */
    font-weight: 300;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.6);
}

/* Title and Description Shadow Effects */
.timeline-list li .title::before,
.timeline-list li .descr::before {
    content: "";
    position: absolute;
    width: 90%;
    height: 8px;
    /* 0.5rem to 8px */
    background: rgba(0, 0, 0, 0.5);
    left: 50%;
    border-radius: 50%;
    filter: blur(4px);
    transform: translate(-50%, 50%);
}

/* Title Shadow */
.timeline-list li .title::before {
    bottom: calc(100% + 2px);
    /* 0.125rem to 2px */
}

/* Description Shadow */
.timeline-list li .descr::before {
    z-index: -1;
    bottom: 4px;
    /* 0.25rem to 4px */
}

/* Desktop Settings */
@media (min-width: 1024px) {
    .timeline-list {
        grid-template-columns: 1fr var(--line-w) 1fr;
    }

    .timeline-list::before {
        grid-column: 2;
    }

    .timeline-list li:nth-child(odd) {
        grid-column: 1;
    }

    .timeline-list li:nth-child(even) {
        grid-column: 3;
    }

    /* Adjust Second Card */
    .timeline-list li:nth-child(2) {
        grid-row: 2/4;
    }

/* Odd Card Date Flap Adjustments */
    .timeline-list li:nth-child(odd) .date::before {
        clip-path: polygon(0 0, 100% 0, 100% 100%);
        left: 0;
    }
    
    .timeline-list li:nth-child(odd) .date::after {
        transform: translate(-50%, -50%);
        left: calc(100% + var(--col-gap) + var(--line-w) / 2);
    }
    
    /* Odd Card Date Rounded Styling */
        .timeline-list li:nth-child(odd) .date {
        border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
    }

    /* Tablet and Mobile Responsive Settings */
    @media (max-width: 1024px) {
    .timeline-container {
        padding: 16px;
        /* Padding untuk tablet */
    }

    .timeline-list {
        width: 100%;
        /* Full width */
        grid-template-columns: 1fr 1fr;
        /* 2 columns for tablet */
        grid-template-rows: auto;
        margin: 0 auto;
        /* Keeping the grid centered */
    }

    /* Adjust the line for tablet */
    .timeline-list::before {
        content: "";
        position: absolute;
        top: 0;
        left: 3%;
        /* Geser garis lebih ke kiri dari tengah */
        transform: translateX(-50%);
        /* Masih mempertahankan garis berada di tengah */
        background: rgb(225, 225, 225);
        border-radius: calc(var(--line-w) / 2);
        width: var(--line-w, 4px);
        /* Lebar garis */
        height: 100%;
    }

    .timeline-list li {
        grid-column: 1;
        /* All elements in the first column */
        margin-bottom: 24px;
        /* Spacing between timeline items */
    }

    /* Adjust fonts and elements for tablet */
    .timeline-list li .date {
        font-size: 16px;
        height: 40px;
    }

    .timeline-list li .title {
        font-size: 18px;
    }

    .timeline-list li .descr {
        font-size: 14px;
    }
}

/* Mobile Responsive (max-width: 767px) */
@media (max-width: 767px) {
    .timeline-container {
        padding: 16px;
    }

    .timeline-list {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr !important; /* Memastikan 1 kolom */
        grid-template-rows: auto;
        column-gap: 0 !important; /* Menghilangkan kolom gap yang mungkin menyebabkan layout 2 kolom */
        row-gap: 24px; /* Menjaga jarak antar elemen */
        list-style: none;
        margin: 0;
    }

    /* Garis pada timeline */
    .timeline-list::before {
        left: 7%;
        transform: translateX(-50%);
    }

    .timeline-list li {
        margin-bottom: 24px;
        display: block; /* Menjaga item tetap berada dalam satu kolom */
    }

    .timeline-list li .date {
        font-size: 14px;
        height: 32px;
    }

    .timeline-list li .title {
        font-size: 16px;
    }

    .timeline-list li .descr {
        font-size: 12px;
    }

    /* Menghapus aturan ganjil-genap yang ada pada mobile */
    .timeline-list li:nth-child(odd) {
        grid-column: 1; /* Tidak ada aturan ganjil-genap */
    }

    .timeline-list li:nth-child(even) {
        grid-column: 1; /* Tidak ada aturan ganjil-genap */
    }
}