/* ==========================================================
   TEAM SNRG WEBSITE
   Version 1.0
   Foundation Styles
========================================================== */


/* ==========================================================
   1. DESIGN TOKENS
========================================================== */

:root {

    /* Colors */
    --background: #111111;
    --surface: #1B1B1B;
    --surface-light: #252525;

    --primary: #B11226;
    --primary-hover: #D62839;

    --white: #F5F5F5;
    --gray: #B8B8B8;

    /* Layout */
    --radius: 14px;
    --card-radius: 20px;

    /* Effects */
    --transition: .3s ease;

    --shadow-small: 0 10px 30px rgba(0,0,0,.25);
    --shadow-medium: 0 20px 50px rgba(0,0,0,.45);
    --shadow-red: 0 10px 30px rgba(177,18,38,.45);

}


/* ==========================================================
   2. RESET
========================================================== */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    background: var(--background);
    color: var(--white);
    font-family: "Inter", sans-serif;
    overflow-x: hidden;

}


/* ==========================================================
   3. TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4 {

    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;

}

p {

    color: var(--gray);
    line-height: 1.8;

}

section {

    padding: 110px 0;

}

.section-label {

    color: var(--primary);
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 10px;

}

.section-heading {

    margin-bottom: 70px;

}


/* ==========================================================
   4. NAVIGATION
========================================================== */

.navbar {

    background: rgba(0,0,0,.72);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding:14px 0;
    transition: var(--transition);

}

/* Used when the page scrolls */
.navbar-scrolled{

    background:rgba(10,10,10,.95);

    padding:10px 0;

    box-shadow:var(--shadow-small);

}

/*====================================
Navbar Branding
====================================*/

.navbar-brand{

    display:flex;

    align-items:center;

    gap:20px;

    text-decoration:none;

}

.brand-logo{

    display:flex;

    flex-direction:column;

    line-height:1;

}

.brand-top{

    font-family:"Oswald",sans-serif;

    font-size:1.35rem;

    font-weight:600;

    letter-spacing:5px;

    color:var(--white);

    line-height:1;

}

.brand-bottom{

    font-family:"Oswald",sans-serif;

    font-size:1.35rem;

    font-weight:600;

    letter-spacing:5px;

    color:var(--primary);

    line-height:.9;

}

.brand-divider{

    width:2px;

    height:52px;

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

}

.brand-location{

    font-family:"Oswald",sans-serif;

    font-size:2rem;

    font-weight:600;

    letter-spacing:2px;

    color:var(--white);

    line-height:1;

    text-transform:uppercase;

}

.navbar-brand small {

    color: var(--gray);
    font-size: .65rem;

}

.nav-link {

    color: var(--white) !important;
    margin-left: 18px;
    position: relative;

}

.nav-link::after {

    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;

    width: 0;
    height: 2px;

    background: var(--primary);
    transition: var(--transition);

}

.nav-link:hover::after {

    width: 100%;

}


/* ==========================================================
   5. BUTTONS
========================================================== */

.btn-snrg {

    background: var(--primary);
    color: var(--white);

    border: none;
    border-radius: var(--radius);

    padding: 14px 32px;
    font-weight: 600;

    transition: var(--transition);

}

.btn-snrg:hover {

    background: var(--primary-hover);
    color: var(--white);

    transform: translateY(-4px);
    box-shadow: var(--shadow-red);

}

.btn-outline-snrg {

    border: 2px solid var(--white);
    color: var(--white);

    border-radius: var(--radius);

    padding: 14px 32px;

    transition: var(--transition);

}

.btn-outline-snrg:hover {

    background: var(--white);
    color: #000;

    transform: translateY(-3px);

}


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

.hero {

    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 120px 0 70px;

    background-image: url("../images/hero/hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;

}

.hero-title {

    font-size: clamp(3.5rem, 7vw, 6.5rem);

    font-weight: 900;

    line-height: .92;

    letter-spacing: -.04em;

    text-transform: uppercase;

    color: var(--white);

    margin-bottom: 1.75rem;

    text-shadow: 0 4px 20px rgba(0,0,0,.45);

}

.hero-accent {

    color: var(--primary);

}

.hero-eyebrow {

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

    text-transform: uppercase;

    letter-spacing: .28em;

    font-size: .9rem;

    font-weight: 600;

    margin-bottom: 1.5rem;

}

.hero-programs {

    font-size: 1.2rem;

    text-transform: uppercase;

    letter-spacing: .16em;

    color: var(--white);

    margin-bottom: 2.75rem;

}

.hero-bullet {

    color: var(--primary);

    padding: 0 .6rem;

}

.hero-buttons {

    margin-bottom: 3rem;

}

.hero-buttons .btn {

    min-width: 240px;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.65)
    );

    z-index:1;

}

.hero .container{

    position:relative;

    z-index:2;

}

/*======================================================
Scroll Indicator
======================================================*/

.scroll-indicator {

    display: inline-flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    margin-top: 1rem;

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

    text-decoration: none;

    cursor: pointer;

    transition: .3s ease;

}

.scroll-indicator:hover {

    color: var(--primary);

    transform: translateY(4px);

}

.scroll-indicator i {

    font-size: 2.5rem;

    line-height: .15;

}

.scroll-indicator i:first-child {

    animation: bounceTop 2s ease-in-out infinite;

}

.scroll-indicator i:last-child {

    margin-top: -25px;

    animation: bounceBottom 2s ease-in-out infinite;

    animation-delay: .2s;

}

/* ==========================================================
   7. ABOUT
========================================================== */

.about-image {

    width: 100%;
    height: 500px;

    object-fit: cover;

    border-radius: var(--card-radius);

    box-shadow: var(--shadow-medium);

    transition: var(--transition);

}

.about-image:hover {

    transform: scale(1.02);

}


/* ==========================================================
   8. PROGRAMS
========================================================== */

.program-card {

    height: 100%;

    padding: 45px 30px;

    text-align: center;

    background: var(--surface);

    border: 1px solid rgba(255,255,255,.05);
    border-radius: var(--card-radius);

    transition: var(--transition);

}

.program-card:hover {

    background: var(--surface-light);

    transform: translateY(-6px);

    box-shadow: var(--shadow-medium);

}

.program-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:2rem;

}

.program-icon img{

    width:150px;
    height:150px;

    object-fit:contain;

    display:block;

    transition:
        transform .25s ease,
        filter .25s ease;

}

.program-card:hover .program-icon img{

    transform:
        translateY(-3px)
        scale(1.06);

    filter:
        drop-shadow(0 0 14px rgba(177,18,38,.45));

}

.program-card h3 {

    margin-bottom: 18px;

}

.featured {

    border: 2px solid var(--primary);

}


/* ==========================================================
   9. COACHES (SECTION)
========================================================== */

#coaches {

    background: var(--surface);

}

.coach-placeholder {

    display: flex;
    justify-content: center;
    align-items: center;

    height: 420px;

    background: #2f2f2f;

    border-radius: var(--card-radius);

    color: #666;
    font-size: 2rem;

    transition: var(--transition);

}

.coach-placeholder:hover {

    transform: translateY(-8px);

}


/* ==========================================================
   10. CALL TO ACTION
========================================================== */

.cta {

    text-align: center;

    background: linear-gradient(
        135deg,
        #1c1c1c,
        #101010
    );

}

.cta h2 {

    margin-bottom: 25px;

    font-size: 3.5rem;

}

.cta p {

    margin-bottom: 35px;

}


/* ==========================================================
   11. FOOTER
========================================================== */

footer {

    background: #090909;

    text-align: center;

    padding: 70px 0;

}

/* ==========================================================
   12. COACHES
========================================================== */

.coach-group {

    margin: 70px 0 35px;

}

.coach-intro {

    max-width: 650px;
    margin: 0 auto;

}

/* ---------- Coach Filters ---------- */

.coach-filters {

    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 45px;

}

.filter-btn {

    padding: 10px 22px;

    background: #202020;
    color: var(--white);

    border: 1px solid #444;
    border-radius: 50px;

    transition: var(--transition);

    cursor: pointer;

}

.filter-btn:hover,
.filter-btn.active {

    background: var(--primary);

}


/* ==========================================================
   12. COACH CARD
========================================================== */

.coach-card {

    height: 100%;

    overflow: hidden;

    background: var(--surface);

    border: 1px solid rgba(255,255,255,.05);
    border-radius: var(--card-radius);

    transition: var(--transition);

    cursor: pointer;

}

.coach-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-medium);

}

.coach-card img {

    width: 100%;
    height: 360px;

    object-fit: cover;
    object-position: center top;

    transition: var(--transition);

}

.coach-card:hover img {

    transform: scale(1.05);

}

.coach-info {

    padding: 30px;

}

.coach-info h3 {

    color: var(--white);

    font-size: 1.6rem;

    margin-bottom: 8px;

    letter-spacing: 1px;

}

.coach-title {

    color: var(--primary);

    font-weight: 600;

    margin-bottom: 20px;

}

.coach-disciplines {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 18px;

}

.discipline-chip {

    display: inline-flex;

    align-items: center;

    padding: 6px 12px;

    background: rgba(177,18,38,.15);

    border: 1px solid rgba(177,18,38,.4);

    border-radius: 999px;

    color: var(--white);

    font-size: .75rem;

    font-weight: 600;

    letter-spacing: .5px;

    text-transform: uppercase;

}

.coach-info p:last-child {

    color: #D8D8D8;

    margin-bottom: 0;

}

.coach-badge {

    display: inline-block;

    margin-bottom: 18px;

    padding: 6px 14px;

    background: var(--primary);
    color: var(--white);

    border-radius: 999px;

    font-size: .75rem;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

}

/* ==========================================================
   13. COACH MODAL
========================================================== */

.coach-modal {

    background: #181818;

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

    border-radius: 24px;

    overflow: hidden;

}

.modal-image {

    width: 100%;
    height: 100%;

    min-height: 700px;

    object-fit: cover;
    object-position: center top;

    border-right: 1px solid rgba(255,255,255,.06);

}
.modal-backdrop.show {

    backdrop-filter: blur(6px);

    background: rgba(0,0,0,.85);

}

.modal-content-wrapper {

    padding: 65px 60px;

}

/* ---------- Typography ---------- */

#modal-name {

    color: var(--white);

    font-size: 2.8rem;

    letter-spacing: 1px;

    margin-top: 20px;

    margin-bottom: 6px;

}

#modal-title {

    color: var(--primary);

    font-size: 1.25rem;

    font-weight: 600;

    margin-bottom: 28px;

}

#modal-bio {

    color: #E7E7E7;

    line-height: 1.9;

}

#modal-philosophy {

    color: var(--gray);

    line-height: 1.9;

    font-style: italic;

}

.modal-content-wrapper h6 {

    color: var(--white);

    font-size: .82rem;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    margin-top: 35px;

    margin-bottom: 14px;

}

.modal-close {

    position: absolute;

    top: 22px;
    right: 22px;

    z-index: 100;

}

.modal-content hr {

    border: none;

    border-top: 1px solid rgba(255,255,255,.08);

    margin: 34px 0;

}

/* ==========================================================
   14. MODAL LISTS
========================================================== */

.modal-list {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 16px;

}

.modal-pill {

    display: inline-flex;

    align-items: center;

    padding: 8px 14px;

    background: #252525;

    color: var(--white);

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

    border-radius: 999px;

    font-size: .88rem;

    font-weight: 500;

    transition: var(--transition);

}

.modal-pill:hover {

    background: var(--primary);

    border-color: var(--primary);

    transform: translateY(-2px);

}

/* ==========================================================
   15. RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .hero {

        padding-top: 120px;

    }

    .navbar-collapse {

        margin-top: 20px;
        padding: 25px;

        background: #151515;

        border-radius: 18px;

    }

    .hero-title{

        font-size: clamp(5rem, 11vw, 9rem);

        font-weight: 900;

        line-height: .95;

        text-transform: uppercase;

        letter-spacing: -.03em;

        margin-bottom: 1.8rem;

    }

    .hero-title .accent{

        color: var(--primary);

    }

    .hero-programs{

        font-size: 1.3rem;

        letter-spacing: .12em;

        text-transform: uppercase;

        color: var(--gray);

        margin-bottom: 2.5rem;

    }

}

@media (max-width: 768px) {

    .hero-title {

        font-size: 3rem;

    }

    #about h2 {

        font-size: 2.4rem;

    }

    .cta h2 {

        font-size: 2.5rem;

    }

    .hero-buttons {

        display: flex;
        flex-direction: column;
        align-items: center;

    }

    .btn-snrg,
    .btn-outline-snrg {

        width: 260px;

    }

}

/* ==========================================================
   15. SCHEDULE
========================================================== */

#schedule{

    background:var(--background);

}

/* ---------- Audience Toggle ---------- */

.schedule-toggle{

    display:flex;

    justify-content:center;

    margin-bottom:35px;

}

.schedule-toggle-btn{

    min-width:180px;

    padding:14px 30px;

    background:#202020;

    color:white;

    border:none;

    cursor:pointer;

    transition:var(--transition);

    font-weight:600;

}

.schedule-toggle-btn:first-child{

    border-radius:50px 0 0 50px;

}

.schedule-toggle-btn:last-child{

    border-radius:0 50px 50px 0;

}

.schedule-toggle-btn.active{

    background:var(--primary);

}

/* ---------- Discipline Navigation ---------- */

.schedule-discipline{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:30px;

}

.discipline-btn{

    background:#202020;

    color:white;

    border:none;

    padding:10px 18px;

    border-radius:999px;

    cursor:pointer;

    transition:var(--transition);

}

.discipline-btn:hover,

.discipline-btn.active{

    background:var(--primary);

}

/* ---------- Day Navigation ---------- */

#schedule-days{

    display:flex;

    justify-content:center;

    gap:12px;

    flex-wrap:wrap;

    margin-bottom:45px;

}

.day-btn{

    background:#202020;

    color:white;

    border:none;

    padding:10px 18px;

    border-radius:12px;

    cursor:pointer;

    font-weight:600;

    letter-spacing:1px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .2s ease;

}

.day-btn:hover{

    transform:translateY(-2px);

}

.day-btn.active{

    background:var(--primary);

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(177,18,38,.35);

}

/* ---------- Schedule Cards ---------- */

.schedule-card{

    display:flex;

    gap:30px;

    align-items:flex-start;

    background:var(--surface);

    border-left:5px solid var(--primary);

    border-radius:16px;

    padding:24px;

    transition:var(--transition);

}

.schedule-card:hover{

    transform:translateY(-4px);

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

}

.schedule-card-time{

    min-width:95px;

    font-size:1.15rem;

    font-weight:700;

    color:var(--primary);

    text-align:center;

}

.schedule-card-time small{

    color:var(--gray);

    font-size:.8rem;

}

.schedule-card-info{

    flex:1;

}

.schedule-program{

    margin-bottom:12px;

    color:var(--white);

}

.schedule-meta{

    margin-bottom:6px;

    color:var(--gray);

}

/*====================================
Special Schedule Cards
====================================*/

.schedule-seminar {

    border: 2px solid #D4AF37;

    box-shadow: 0 0 18px rgba(212,175,55,.18);

}

.schedule-competition {

    border: 2px solid #7A0000;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            rgba(0,0,0,.08)
        );

    box-shadow:
        0 0 10px rgba(120,0,0,.5),
        0 0 25px rgba(177,18,38,.35);

}

/* ---------- Day Headings ---------- */

.schedule-day-heading{

    grid-column:1/-1;

    margin:35px 0 15px;

}

.schedule-day-heading:first-child{

    margin-top:0;

}

.schedule-day-heading h3{

    display:flex;

    align-items:center;

    gap:20px;

    color:var(--white);

    letter-spacing:4px;

    font-size:1.4rem;

}

.schedule-day-heading h3::after{

    content:"";

    flex:1;

    height:2px;

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

}

.schedule-day-heading{

    position:sticky;

    top:90px;

    background:var(--background);

    z-index:10;

    padding:10px 0;

}

.schedule-card{

    animation:fadeUp .35s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ---------- Empty Schedule ---------- */

.schedule-empty{

    max-width:700px;

    margin:40px auto;

    padding:50px;

    text-align:center;

    background:var(--surface);

    border-radius:20px;

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

}

.schedule-empty h3{

    margin-bottom:15px;

    color:var(--white);

}

.schedule-empty p{

    margin-bottom:30px;

    color:var(--gray);

}

/*======================================================
16. ABOUT
======================================================*/

#about{

    padding: 140px 0;

}

#about .section-label{

    color: var(--primary);

    font-size: 1rem;

    font-weight: 500;

    letter-spacing: .35em;

    text-transform: uppercase;

    margin-bottom: 1rem;

}

#about h2{

    font-family: "Oswald", sans-serif;

    font-size: clamp(3.2rem, 5vw, 4rem);

    font-weight: 500;

    text-transform: uppercase;

    line-height: .95;

    color: var(--white);

    margin-bottom: 2rem;

}

#about p{

    font-size: 1.15rem;

    line-height: 1.9;

    color: var(--gray);

    margin-bottom: 1.5rem;

}

#about .btn{

    margin-top: 1rem;

}

.about-image{

    width:100%;

    height:600px;

    object-fit:cover;

    border-radius:var(--card-radius);

    box-shadow:var(--shadow-medium);

    transition:var(--transition);

}

.about-image:hover{

    transform:scale(1.02);

}