:root {
    --orange: #F15A22; 
    --orange-light: #F9956A; 
    --orange-pale: #FEF0EA;
    --blue: #0B8293; 
    --blue-light: #4DAFC0; 
    --blue-pale: #E6F4F7;
    --cream: #FDFAF7; 
    --gray: #6B6560;
    --line: #E2D9D2; 
    --track-bg: #F0EAE4;
}

.wrapper { 
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
}

.wrapper h2 {
    line-height: 3rem;
}

.eyebrow { 
    font-size: 1.2rem; 
    text-transform: uppercase; 
    color: var(--orange); 
    font-weight: 500; 
    margin: 1.5rem 0;
}

/* Progress */
.progress-section { 
    margin-bottom: 48px; 
    animation: fadeUp .5s ease .1s both; 
}

.progress-labels { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 10px; 
}

.progress-label { 
    font-size: 22px; 
    font-weight: 700; 
    color: var(--gray); 
    opacity: .4; 
}

.progress-label.active { 
    color: var(--orange); 
    opacity: 1; 
}

.track { 
    height: 22px; 
    background: var(--track-bg); 
    border-radius: 99px; 
    overflow: visible; 
    position: relative; 
    box-shadow: inset 0 2px 6px rgba(0,0,0,.06); 
}

.track-fill { 
    height: 100%; 
    background: linear-gradient(90deg, var(--orange) 0%, var(--orange-light) 100%); 
    border-radius: 99px; 
    transition: width 1.2s cubic-bezier(.4,0,.2,1); 
    position: relative; 
}

.today-pip { 
    position: absolute; 
    right: -14px; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    background: white; 
    border: 3px solid var(--orange); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 2px 12px rgba(241,90,34,.3); 
}

.today-label { 
    position: absolute; 
    right: -36px; 
    top: 34px; 
    font-size: 10px; 
    font-weight: 600; 
    color: var(--orange); 
    white-space: nowrap; 
    background: white; 
    border: 1.5px solid var(--orange); 
    border-radius: 99px; 
    padding: 2px 8px; 
}

.month-markers { 
    display: flex; 
    justify-content: space-between; 
    padding: 0 4px; 
    margin-top: 6px; 
}

.month-marker { 
    font-size: 9px; 
    color: var(--line); 
    font-weight: 500; 
    text-transform: uppercase;
}

.month-marker.passed { 
    color: var(--orange-light); 
}

.month-marker.current { 
    color: var(--orange); 
    font-weight: 700; 
}

.progress-date { 
    text-align: center; 
    margin-top: 14px; 
    font-size: 1.4rem; 
    color: var(--gray); 
}

.progress-date strong { 
    color: var(--orange); 
}

/* Section titles */
.section-title { 
    font-weight: 600; 
    text-transform: uppercase; 
    color: var(--gray); 
    margin-bottom: 16px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    animation: fadeUp .5s ease .2s both; 
}

.section-title::after { 
    content: ''; 
    flex: 1; 
    height: 1px; 
    background: var(--line); 
}

/* Cards grid */
.events-grid { 
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    gap: 2rem;
}

.event-card { 
    width:90%;
    border-radius: 1.4rem; 
    padding: 1.6rem 1.8rem; 
    border: 1.5px solid transparent; 
    transition: transform .2s, box-shadow .2s; 
    cursor: default; 
    animation: fadeUp .4s ease both; 
    position: relative; 
}

.event-card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.event-card.orange { 
    background: var(--orange-pale); 
    border-color: #F5AA8A; 
}

.event-card.blue { 
    background: var(--blue-pale); 
    border-color: #83CDD7; 
}

.event-card.past { 
    background: #F8F8F8;
    border-color: transparent;
    opacity: 0.1;
}

.event-card.past::after {
    content: "";
    position: absolute;
    inset: 0; 
    background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3) 0.5rem, rgba(255, 255, 255, 0.6) 0.5rem, rgba(255, 255, 255, 0.6) 1.5rem);
    opacity: 0.9;
}

.event-date { 
    font-size: 1.2rem;
    font-weight: 600; 
    margin-bottom: 6px; 
}

.event-card.orange .event-date { 
    color: var(--orange); 
}

.event-card.blue .event-date { 
    color: var(--blue); 
}

.event-title { 
    font-weight: 600; 
    color: var(--dark); 
    margin-bottom: 5px; 
    line-height: 1.3; 
}

.event-body { 
    font-size: 12.5px; 
    color: var(--gray); 
    line-height: 1.55; 
    font-weight: 300; 
}

.event-tag { 
    display: inline-block; 
    margin-top: 8px; 
    font-size: 1rem; 
    font-weight: 600; 
    text-transform: uppercase; 
    padding: 0.3rem 0.9rem; 
    border-radius: 99px; 
}

.tag-orange { 
    background: rgba(241,90,34,.12); 
    color: var(--orange); 
}

.tag-blue { 
    background: rgba(11,130,147,.12); 
    color: var(--blue); 
}

.event-icon {
    position: absolute;
    top: 1.2rem;
    right: 1.4rem;
    font-size: 2.5rem;
    opacity: 0.8;
}

/* Buttons */
.btn-row { 
    display: flex; 
    justify-content: center; 
    gap: 12px; 
    flex-wrap: wrap; 
    margin-top: 16px; 
    animation: fadeUp .4s ease .8s both; 
}

.btn { 
    font-size:1.6rem;
    font-family: "Josefin Sans", sans-serif;
    border: 2px solid rgba(11, 130, 147, 0);
    border-radius: 6px;
    font-weight: 700;
    padding: 0.8rem 1.5rem;
    margin-top: 1rem;
}

.btn:hover { 
    cursor: pointer;
}

.btn-orange { 
    background-color:rgba(11, 130, 147, 0.25);
    font-size:1.6rem;
    color:#0b8293;
}

.btn-orange:hover {
    background-color: #FFFFFF;
    border: 2px solid rgba(11, 130, 147, 0.25);
    cursor: pointer;
    color: #0b8293;
}

.btn-ghost { 
    background: rgba(241, 90, 34, .25); 
    border: 2px solid rgba(241, 90, 34, 0);
    color: var(--orange); 
}

.btn-ghost:hover {
    background-color: transparent;
    border: 2px solid rgba(241, 90, 34, .25);
    color: var(--orange); 
}

@keyframes fadeUp { 
    from 
    { 
        opacity: 0; 
        transform: translateY(14px); 
    }
     to {
        opacity: 1; 
        transform: translateY(0); 
    }
}


/* =================
    TABLET VERSION
=================== */
@media (min-width: 768px) {
    .wrapper {
        width: 90vw;
    }

    .progress-section {
        width: 100%;
    }
}


/* =================
    DESKTOP VERSION
=================== */
@media (min-width: 1024px) {
    .wrapper {
        width:65vw;
    }

    .progress-section {
        width: 100%;
    }

    .event-card {
        width:20%;
    }
}