/* ========================================
   BTFC Stats Hero & Header Styling
   ========================================
   
   This file contains reusable hero section and header styling
   that can be applied to any BTFC template (matches, players, records, etc.)
   
   Based on the successful matches template hero design.
   Uses shared CSS variables from variables.css
*/

/* ============================================================================
   SECTION 1: HERO SECTION STYLES
   ============================================================================
   Description: Hero section containers with gradient backgrounds and responsive sizing
   ============================================================================ */

/* Hero Section Container - Team Records Style (Moderate Size) */
.btfc-hero-section {
    border-radius: 0 0 0px 0px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Light Background Variant - No Background */
.btfc-hero-light-bg {
    background: transparent;
}


/* Hero Content */
.btfc-hero-content {
    position: relative;
    z-index: 1;
}

/* Hero Elements Container */
.btfc-hero-elements {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Top Row: Name and Photo */
.btfc-hero-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Name Content */
.btfc-hero-name-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    flex: 1;
    margin: 0;
    padding: 0;
}

/* ============================================================================
   SECTION 2: HERO TEXT CONTENT
   ============================================================================
   Description: Hero titles, subtitles, descriptions with proper typography
   ============================================================================ */

.btfc-hero-text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* Hero Title */
.btfc-hero-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 var(--space-4) 0;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Hero Subtitle */
.btfc-hero-subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 var(--space-3) 0;
    line-height: 1.4;
}

/* Hero Description */
.btfc-hero-description {
    font-size: 1rem;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.6;
    max-width: 600px;
}

/* ============================================================================
   SECTION 3: OPPONENT BADGE STYLES
   ============================================================================
   Description: Club badge display with fallback initials
   ============================================================================ */

.btfc-opponents-badge {
    width: 120px;
    height: 120px;
    border-radius: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6) auto;
    box-shadow: none;
    border: none;
    overflow: hidden;
    position: relative;
}

.btfc-opponents-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}

.btfc-opponents-badge::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: transparent;
    border-radius: 50%;
    z-index: -1;
}

@keyframes badgeGlow {
    0% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* ============================================================================
   SECTION 4: OPPOSITION HERO SPECIFIC STYLES
   ============================================================================
   Description: Specific styles for opposition profile hero section
   ============================================================================ */

/* Badge and Title Container */
.btfc-hero-badge-title-container {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: center;
    margin-bottom: 24px;
}

.btfc-hero-badge-title-container .btfc-opponents-badge {
    flex-shrink: 0;
    margin: 0;
}

.btfc-hero-badge-title-container .btfc-hero-title {
    margin: 0;
}

/* Underlined Hero Title */
.btfc-hero-title-underlined {
    text-decoration: underline;
    text-decoration-color: var(--color-secondary);
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
}

/* Social Media Icons */
.btfc-hero-social-icons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.btfc-hero-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 193, 12, 0.3);
    border-radius: 50%;
    color: var(--color-white);
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.btfc-hero-social-icon:hover {
    background: rgba(255, 193, 12, 0.2);
    border-color: var(--color-secondary);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 193, 12, 0.3);
    color: var(--color-secondary);
}

.btfc-social-icon {
    font-size: 1.5rem;
    display: block;
}

/* ============================================================================
   SECTION 5: PLAYER PROFILE HERO - TWO-LINE NAME STYLING
   ============================================================================
   Description: Special styling for player names with two-line layout:
   First name (smaller, with 3D effect) and Last name (larger, vibrant blue)
   ============================================================================ */

/* Player Hero Title - Two Line Name Layout */
.btfc-player-hero .btfc-hero-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    margin-bottom: var(--space-6);
    padding-top: 0.2em;
}

/* First Name (Smaller, less bold) */
.btfc-player-hero .btfc-hero-title .name-part-1 {
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--color-primary);
    margin-bottom: 0.02em;
    letter-spacing: 1px;
    padding-top: 0.1em;
}

/* Last Name (Larger, bold) */
.btfc-player-hero .btfc-hero-title .name-part-2 {
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 2px;
    margin: 0;
}


/* ============================================================================
   SECTION 6: PLAYER PICTURE IN HERO
   ============================================================================
   Description: Styling for player picture in hero section
   ============================================================================ */

/* Player Picture Container */
.btfc-hero-player-picture {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

/* Player Picture Photo */
.btfc-hero-player-photo {
    border-radius: 0;
    object-fit: cover;
    border: none;
    box-shadow: none;
    /* Keep large size on all devices */
    width: 200px;
    height: 200px;
}

/* ============================================================================
   SECTION 7: PLAYER STATS BADGES
   ============================================================================
   Description: Styling for player statistics badges in hero section
   ============================================================================ */

/* Player Stats Container */
.btfc-hero-player-stats {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Individual Stat Badge */
.btfc-hero-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 16px 20px;
    border-radius: 12px;
    border: 3px solid var(--color-secondary);
    text-align: center;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btfc-hero-stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Stat Number/Value */
.btfc-hero-stat-number {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Stat Label */
.btfc-hero-stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

/* Position Badge - Blue Background */
.btfc-hero-position-badge {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}

.btfc-hero-position-badge .btfc-hero-stat-number {
    color: var(--color-secondary);
}

.btfc-hero-position-badge .btfc-hero-stat-label {
    color: rgba(255, 255, 255, 0.9);
}

/* Appearances Badge - Yellow Background */
.btfc-hero-appearances-badge {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
}

.btfc-hero-appearances-badge .btfc-hero-stat-number {
    color: var(--color-primary);
}

.btfc-hero-appearances-badge .btfc-hero-stat-label {
    color: rgba(45, 57, 140, 0.9);
}

/* Goals Badge - Green Background */
.btfc-hero-goals-badge {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
}

.btfc-hero-goals-badge .btfc-hero-stat-number {
    color: var(--color-secondary);
}

.btfc-hero-goals-badge .btfc-hero-stat-label {
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================================================
   SECTION 8: RESPONSIVE DESIGN - ALL BREAKPOINTS CONSOLIDATED
   ============================================================================
   Description: Mobile, tablet, and small mobile responsive adjustments
   All media queries consolidated here for better maintainability
   ============================================================================ */

/* Tablet Styles (max-width: 1024px) */
@media (max-width: 1024px) {
    .btfc-hero-section {
        padding: var(--space-8) var(--space-6);
    }
    
    .btfc-hero-title {
        font-size: 3rem;
    }
    
    .btfc-opponents-badge {
        width: 100px;
        height: 100px;
    }
    
    /* Player hero name adjustments */
    .btfc-player-hero .btfc-hero-title .name-part-1 {
        font-size: 2rem;
    }
    
    .btfc-player-hero .btfc-hero-title .name-part-2 {
        font-size: 3.2rem;
    }
}

/* Mobile Styles (max-width: 768px) */
@media (max-width: 768px) {
    .btfc-hero-section {
        padding: var(--space-6) var(--space-4);
        border-radius: 0 0 20px 20px;
    }
    
    .btfc-hero-title {
        font-size: 2.5rem;
        letter-spacing: 1px;
    }
    
    .btfc-hero-subtitle {
        font-size: 1.1rem;
    }
    
    .btfc-hero-description {
        font-size: 0.95rem;
    }
    
    .btfc-opponents-badge {
        width: 80px;
        height: 80px;
        margin-bottom: var(--space-4);
    }
    
    /* Opposition hero adjustments */
    .btfc-hero-badge-title-container {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    
    .btfc-hero-social-icons {
        gap: 12px;
    }
    
    .btfc-hero-social-icon {
        width: 45px;
        height: 45px;
    }
    
    .btfc-social-icon {
        font-size: 1.3rem;
    }
    
    /* Player hero name adjustments */
    .btfc-player-hero .btfc-hero-title .name-part-1 {
        font-size: 1.8rem;
        letter-spacing: 0.5px;
    }
    
    .btfc-player-hero .btfc-hero-title .name-part-2 {
        font-size: 2.8rem;
        letter-spacing: 1px;
    }
    
    /* Top row mobile adjustments - keep side by side layout */
    .btfc-hero-top-row {
        flex-direction: row;
        gap: var(--space-4);
        text-align: left;
    }
    
    .btfc-hero-name-content {
        align-items: flex-start;
        text-align: left;
    }
    
    /* Player stats adjustments */
    .btfc-hero-player-stats {
        gap: 12px;
        margin-top: 20px;
    }
    
    .btfc-hero-stat-item {
        min-width: 100px;
        padding: 12px 16px;
        border-radius: 10px;
    }
    
    .btfc-hero-stat-number {
        font-size: 1.5rem;
    }
    
    .btfc-hero-stat-label {
        font-size: 0.75rem;
    }
    
}

/* Small Mobile Styles (max-width: 480px) */
@media (max-width: 480px) {
    .btfc-hero-section {
        padding: var(--space-5) var(--space-3);
    }
    
    .btfc-hero-title {
        font-size: 2rem;
    }
    
    .btfc-hero-subtitle {
        font-size: 1rem;
    }
    
    .btfc-hero-description {
        font-size: 0.9rem;
    }
    
    .btfc-opponents-badge {
        width: 70px;
        height: 70px;
    }
    
    /* Player hero name adjustments */
    .btfc-player-hero .btfc-hero-title .name-part-1 {
        font-size: 1.5rem;
    }
    
    .btfc-player-hero .btfc-hero-title .name-part-2 {
        font-size: 2.2rem;
    }
    
    /* Player stats adjustments */
    .btfc-hero-player-stats {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .btfc-hero-stat-item {
        min-width: 90px;
        padding: 10px 12px;
        border-radius: 8px;
    }
    
    .btfc-hero-stat-number {
        font-size: 1.3rem;
    }
    
    .btfc-hero-stat-label {
        font-size: 0.7rem;
    }
    
    /* Top row small mobile adjustments - stack vertically */
    .btfc-hero-top-row {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }
    
    .btfc-hero-name-content {
        align-items: center;
        text-align: center;
    }
    
}