/* ==========================================================
   PROGRAMMES HERO
========================================================== */

.page-hero{

    padding:6rem 0;

    text-align:center;

    color:#ffffff;

    background:
    linear-gradient(
        rgba(0,0,0,.70),
        rgba(0,0,0,.70)
    ),
    url("/static/images/branding/ball.jpg");

    background-size:cover;

    background-position:center;

}

.hero-tag{

    display:inline-flex;

    align-items:center;

    padding:.75rem 1.5rem;

    margin-bottom:1.5rem;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.15);

    color:#ffffff;

    font-weight:600;

}

.page-hero h1{

    color:#ffffff;

    font-size:clamp(2.8rem,6vw,4.5rem);

    margin-bottom:1.5rem;

}

.page-hero p{

    max-width:760px;

    margin:auto;

    font-size:1.1rem;

    line-height:1.9;

    color:rgba(255,255,255,.90);

}

/* ==========================================================
   INTRODUCTION
========================================================== */

.intro-section{

    padding:5rem 0;

}

.intro-content{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.intro-content h2{

    margin-bottom:1.5rem;

}

.intro-content p{

    color:var(--text);

    line-height:1.9;

}

.intro-content p:not(:last-child){

    margin-bottom:1.5rem;

}

/* ==========================================================
   PROGRAMMES
========================================================== */

.programmes-section{

    padding:5rem 0;

    background:var(--surface);

}

.section-header{

    text-align:center;

    margin-bottom:3rem;

}

.section-header p{

    max-width:700px;

    margin:auto;

    color:var(--text);

}

.programmes-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:1.5rem;

}

.programme-card{

    background:#ffffff;

    padding:2rem;

    border-radius:18px;

    border:1px solid var(--border);

    transition:.35s;

}

.programme-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(0,0,0,.08);

}

.programme-number{

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:1.5rem;

    border-radius:50%;

    background:var(--primary);

    color:#ffffff;

    font-size:1.1rem;

    font-weight:700;

}

.programme-card h3{

    margin-bottom:1rem;

}

.programme-card p{

    color:var(--text);

    line-height:1.8;

}

/* ==========================================================
   JOURNEY
========================================================== */

.journey-section{

    padding:5rem 0;

    text-align:center;

    color:#ffffff;

    background:
    linear-gradient(
        rgba(0,0,0,.75),
        rgba(0,0,0,.75)
    ),
    url("/static/images/branding/ball.jpg");

    background-size:cover;

    background-position:center;

}

.journey-content{

    max-width:800px;

    margin:auto;

}

.journey-section h2{

    color:#ffffff;

    margin-bottom:1.5rem;

}

.journey-section p{

    color:rgba(255,255,255,.90);

    line-height:1.9;

    margin-bottom:1.5rem;

}

.journey-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:1rem;

    padding:1rem 2.5rem;

    border-radius:12px;

    background:var(--primary);

    color:#ffffff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.journey-btn:hover{

    transform:translateY(-3px);

    filter:brightness(.95);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:992px){

    .programmes-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .page-hero{

        padding:5rem 0;

    }

    .programmes-grid{

        grid-template-columns:1fr;

    }

    .programme-card{

        padding:1.75rem;

    }

}

@media (max-width:576px){

    .intro-section,

    .programmes-section,

    .journey-section{

        padding:4rem 0;

    }

    .programme-number{

        width:55px;

        height:55px;

        font-size:1rem;

    }

}