.fa {
     font-family: 'FontAwesome' !important;
 }

.main-container {
    margin-top: 20px;
    margin-bottom: 50px;
    max-width: 1170px; /* Bootstrap standard, but being explicit */
}

/* =========================================
   BANNER STYLES
   ========================================= */
.player-banner-wrapper {
    background-color: #091C3a;
    /* Use the panther image provided */
    background-image: url('https://www.safc.com.au/images/Profile-Panther.png');
    background-position: center right; /* Position panther to the right/center */
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    color: #ffffff;
    overflow: hidden; /* Ensures content doesn't bleed out */
    border-radius: 4px;
    min-height: 400px;
    display: flex;
    flex-wrap: wrap; /* Allows stacking on mobile */
}

/* --- Left Column: Image & Sponsor --- */
.banner-left-col {
    position: relative;
    /* On Desktop: Width is roughly 40-50% depending on image size */
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Aligns image to bottom */
    align-items: center;
}

.player-hero-image {
    width: 100%;
    max-width: 400px; /* Prevent massive images */
    height: auto;
    display: block;
    margin-top: 20px; /* Space from top */
    z-index: 2;
}

.sponsor-text-overlay {
    width: 100%;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(to top, rgba(9, 28, 58, 0.9) 0%, rgba(9, 28, 58, 0) 100%);
    z-index: 3;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* --- Right Column: Details --- */
.banner-right-col {
    width: 60%;
    padding: 40px 30px;
    text-align: left;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jumper-number-hero {
    font-size: 60px;
    line-height: 1;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0;
}

.player-firstname-hero {
    font-size: 32px;
    font-weight: 400;
    margin-bottom: -5px;
    color: #e0e0e0;
}

.player-surname-hero {
    font-size: 65px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 0.9;
    margin-bottom: 20px;
    color: #ffffff;
}

.detail-line {
    font-size: 16px;
    margin-bottom: 5px;
    color: #dcdcdc;
}

.detail-line strong {
    color: #ffffff;
}

.stats-btn {
    display: inline-block;
    margin-top: 25px;
    background-color: #ffffff;
    color: #091C3a;
    padding: 10px 30px;
    font-size: 18px;
    font-weight: 800;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s;
    border: none;
    max-width: 200px;
    text-align: center;
}

.stats-btn:hover {
    background-color: #e6e6e6;
    color: #091C3a;
    text-decoration: none;
}

/* =========================================
   Q&A SECTION STYLES
   ========================================= */
.qa-section {
    margin-top: 30px;
}

.qa-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.qa-question {
    font-size: 16px;
    color: #091C3a;
    font-weight: 600;
    margin-bottom: 8px;
}

.qa-answer {
    font-size: 18px;
    color: #555;
    font-weight: 400;
}

/* =========================================
   Honours SECTION STYLES
   ========================================= */

.player-honours {
    margin: 20px 0;
}

.player-honours .section-title {
    margin-bottom: 25px;
}

.honour-item {
    margin-bottom: 30px;
}

.honour-icon {
    margin-bottom: 10px;
}

.honour-name {
    font-weight: 600;
    font-size: 20px;
    color: #091C3a;
}

.honour-years {
    font-size: 18px;
    color: #777;
}

.honours-grid {
    text-align: center;
}

.honours-grid > [class*="col-"] {
    float: none;
    display: inline-block;
    vertical-align: top;
}


/* =========================================
   MOBILE RESPONSIVENESS
   ========================================= */
@media (max-width: 767px) {
    .player-banner-wrapper {
        flex-direction: column;
        background-position: center center;
    }

    .banner-left-col {
        width: 100%;
        order: 1; /* Image first */
    }
    
    .player-hero-image {
        max-width: 300px; /* Smaller image on mobile */
    }

    /* Requirement: Elements on the right go UNDER the player image and sponsor */
    .banner-right-col {
        width: 100%;
        order: 2; /* Text details second */
        padding: 20px;
        text-align: center; /* Center align text on mobile for better look */
        align-items: center;
    }

    .sponsor-text-overlay {
        text-align: center;
        position: relative; /* Not absolute on mobile, sits under image */
        background: #091C3a; /* Solid background on mobile */
        padding-top: 0;
    }

    .jumper-number-hero {
        font-size: 50px;
    }

    .player-surname-hero {
        font-size: 45px;
    }
}