/* Desktop Styles */
:root {
    --chevron-diff: 3%;
    --columns: 3; /* Default number of columns on larger screens */
}

.ac-course-pathway-wrapper {
    display: flex;
    justify-content: space-between;
}

.ac-course-pathway-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
}

/* Chevron Block Styling with Dynamic Background */
.chevron-block {
    position: relative;
    clip-path: polygon(
        0% 0%, 
        calc(100% - var(--chevron-diff)) 0%, 
        100% 50%, 
        calc(100% - var(--chevron-diff)) 100%, 
        0% 100%, 
        var(--chevron-diff) 50%
    );
    background-color: color-mix(in srgb, var(--base-color) var(--bg-intensity), black); /* Dynamic background color */
    color: white;
    padding: 20px;
    height: 100%;
}

.chevron-block:first-child {
    --bg-intensity: 100%;
    z-index: 4;
}

.chevron-block:nth-child(2) {
    --bg-intensity: 90%;
    z-index: 3;
}

.chevron-block:nth-child(3) {
    --bg-intensity: 80%;
    z-index: 2;
}

.chevron-block:nth-child(n+4):not(:last-child) {
    --bg-intensity: 70%;
    z-index: 1;
}

.chevron-block:last-child {
    clip-path: polygon(
        0% 0%, 
        100% 0%, 
        100% 100%, 
        0% 100%, 
        var(--chevron-diff) 50%
    );
    z-index: 1;
}

/* Pathway Content Styling */
.pathway-content-wrap {
    margin-left: 5%;
	gap:0px;
	justify-content:middle;
}

/* Time Period Styling */
.time-period {
    display: inline-block;
    padding-top: calc(var(--space-xs) * 0.2);
    padding-bottom: calc(var(--space-xs) * 0.2);
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
    background-color: var(--white-trans-20);
    font-size: 14px;
    color: white;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Course Title Styling */
.course-title {
    font-size: var(--text-l);
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
}

/* Link Styling */
.course-link {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.course-link:hover {
    color: var(--accent); /* Change the color on hover */
    text-decoration: none;
}

/* Mobile Styles */
@media (max-width: 768px) {
    :root {
        --chevron-diff: 10%; /* Adjusting the chevron difference for mobile */
    }

    .ac-course-pathway-grid {
        grid-template-columns: 1fr; /* 1 column for smaller screens */
    }

    .chevron-block {
        clip-path: polygon(
            0% 0%, 
            50% var(--chevron-diff), 
            100% 0%, 
            100% calc(100% - var(--chevron-diff)),
            50% 100%, 
            0% calc(100% - var(--chevron-diff))
        );
    }

    .chevron-block:last-child {
        clip-path: polygon(
            0% 0%, 
            50% var(--chevron-diff), 
            100% 0%, 
             100% 100%, 
            0% 100%
        );
    }

    .pathway-content-wrap {
        margin-left: 0%;
        padding: var(--space-l);
    }

    .time-period {
        font-size: var(--text-l);
    }

    .course-title {
        font-size: var(--text-l);
    }

    .course-link {
        font-size: var(--text-m);
    }
}