/* General */
#main { padding: 128px 0 37px; background: no-repeat url( '../../images/pages/year-in-review-2025-2026-programmes/bg/main.webp' ) center bottom/cover; }
#headline { color: #fff; }
main { margin-bottom: 60px; }
main p { width: 700px; max-width: 100%; margin: 0 auto 24px; text-align: justify; line-height: 1.6; }
main > p { max-width: 95%; }

/* Programmes */
#programmes { margin-top: 57px; }
main section { margin: 0 auto 57px; display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; max-width: 94%; align-items: normal; text-align: center; }
#programmes > small { display: block; margin: 0 auto 23px; text-align: center; max-width: 94%; color: #6c6c6c; }
#programmes h2 { text-align: left; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; font-weight: 600; transition: all .4s; opacity: .7; flex: 0 calc( ( 100% - 39px ) / 4 ); margin: 0; cursor: pointer; border-radius: 10px; background: #efefef; color: #303030; padding: 8px 12px 12px 57px; box-sizing: border-box; font-size: 12pt; letter-spacing: 0; }
#programmes h2:before { content: ' '; position: absolute; top: 23px; left: 20px; filter: invert( 65% ); display: block; transition: all .4s; background: url( '../../images/pages/year-in-review-2025-2026-programmes/bg/click.svg' ) no-repeat center/cover; aspect-ratio: .825630; width: 23px; }
#programmes .active:before { filter: none; }
#programmes .active { opacity: 1; background: linear-gradient( 139deg, #062ec5, #37cbff ); box-shadow: 3px 3px 5px 1px #0003; color: #fff; }
#programmes .active:after { content: ''; position: absolute; top: 0; left: -150%; width: 150%; height: 100%; z-index: 0; background: radial-gradient( circle at center, rgba( 255, 255, 255, .5 ), transparent 70% ); transform: skewX( -20deg ); }
#programmes .active:hover:after { animation: wave 2s ease-in-out infinite; }
@keyframes wave { 0% { left: -150%; } 100% { left: 100%; } }
#descriptions div { display: none; max-width: 95%; margin: auto; }
#descriptions h3 { font-size: clamp( 13pt, 2vw, 16pt ); color: #fff; background: #0f165f; width: max-content; max-width: 100%; position: relative; padding: 8px 16px; margin: 0 auto 12px; height: 41px; box-sizing: border-box; }
#descriptions h3:before, #descriptions h3:after { content: ' '; display: block; position: absolute; top: 0; bottom: 0; left: -24px; width: 0; height: 0; border-bottom: 41px solid #0f165f; border-left: 24px solid transparent; }
#descriptions h3:after { left: auto; right: -24px; border-bottom: 0; border-top: 41px solid #0f165f; border-left: 0; border-right: 24px solid transparent; }
#descriptions p { width: 550px; }
#descriptions [data-id] > *:last-child { margin-bottom: 0; }

@media (max-width: 650px) {
    #programmes h2 { flex: 0 calc( ( 100% - 80px ) / 2 ); }

    #descriptions h3 { height: 38px; }
    #descriptions h3:before { border-bottom-width: 38px; }
    #descriptions h3:after { border-top-width: 38px; }
}

@media (max-width: 480px) {
    #programmes h2 { flex: 0 calc( ( 100% - 20px ) / 2 ); font-size: 11pt; }

    #descriptions h3 { height: 36px; }
    #descriptions h3:before { border-bottom-width: 36px; }
    #descriptions h3:after { border-top-width: 36px; }
}

@media (max-width: 350px) {
    #programmes h2 { min-height: 92px; }
}