@import url('https://fonts.googleapis.com/css2?family=Passion+One:wght@400;700&display=swap');

:root {
    --rcse-green: #008b27;
    --win-green: #008b27;
    --loss-red: #b22222;
    --upcoming-gray: #E0E0E0;
    --radius: 20px; 
}

body {
    margin: 0;
    font-family: sans-serif; 
    background-color: #f9f9f9;
}

.results-hero {
    height: 180px; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    color: white;
    background: linear-gradient(
      to right, 
      rgba(20, 60, 20, 0.95) 0%, 
      rgba(20, 60, 20, 0.7) 50%, 
      transparent 100%
    ), 
    url('../../img/imgPageMatch.webp') no-repeat center center / cover;
}

.results-hero h1 {
    color: white;
    font-size: 2.6rem; 
    font-family: 'Passion One', sans-serif; 
    text-transform: uppercase;
    margin: 0;
}

h2 {
    text-align: center;
    font-family: 'Passion One', sans-serif;
    color: var(--rcse-green);
    margin: 40px 0 20px;
    text-transform: uppercase;
    font-size: 2.2rem;
}

.match-carousel {
    display: flex;
    overflow-x: auto;
    gap: 15px; 
    padding: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.match-carousel::-webkit-scrollbar {
    display: none;
}

.match-card {
    flex: 0 0 280px;
    border-radius: var(--radius);
    border: 1px solid rgba(0,0,0,0.1); 
    overflow: hidden;
    text-align: center;
    background: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.category {
    background: white;
    padding: 10px;
    font-weight: bold;
    font-size: 0.9rem;
    font-family: 'Passion One', sans-serif; 
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.teams {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20px 10px;
}

.teams img {
    width: 65px; 
    height: 65px;
    object-fit: contain;
}

.upcoming {
    background: linear-gradient(
        0deg, 
        rgba(4, 100, 43, 0.95) 5%,   
        rgba(4, 100, 43, 0.6) 50%,  
        rgba(234, 248, 234, 0.4) 90%,
        rgba(234, 248, 234, 0) 100%  
    );
    border: 1px solid rgba(0,0,0,0.1);
}

.match-date {
    background: var(--rcse-green);
    color: white;
    padding: 10px;
    font-weight: bold;
    font-family: 'Passion One', sans-serif;
    text-transform: uppercase;
}

.win {
    background: linear-gradient(
        0deg, 
        rgba(4, 100, 43, 0.95) 5%,   
        rgba(4, 100, 43, 0.6) 50%,  
        rgba(234, 248, 234, 0.4) 90%,
        rgba(234, 248, 234, 0) 100%  
    );
    border: #095b00 2px solid;
}

.loss {
    background: linear-gradient(to bottom, #ffffff 0%, #ef9a9a 100%);
    border: var(--loss-red) 2px solid;
}

.score, .vs {
    font-family: 'Passion One', sans-serif;
    font-size: 2.2rem;
}

@media (min-width: 768px) {
    .results-hero {
        height: 350px;
        justify-content: flex-start;
        padding-left: 10%;
    }

    .results-hero h1 {
        font-size: 5rem;
    }

    h2 {
        font-size: 3.5rem;
    }

    .match-carousel {
        max-width: 1200px;
        margin: 0 auto;
        justify-content: center;
        flex-wrap: wrap;
        overflow-x: visible;
    }
    
    .match-card {
        flex: 0 1 calc(33.33% - 30px); 
    }
}