/**
 * BlazinStreetz Hero Component System - BEM Architecture
 * BSAPP-556 Consolidation
 *
 * Used in: trackA1.php, mixtapeA1.php, videoA1.php,
 *          iartist.php, aVideos.php, aMixtapes.php
 * Replaces: _hero-section.css, _artist-hero.css, _video-hero.css
 *
 * @version 6.0.5
 * @author Chief Architect
 */

/* ====================================
   Base Hero Component
   ==================================== */
.hero {
    position: relative;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

/* Default height and spacing */
.hero {
    padding: 40px 0;
    margin-bottom: 30px;
    background: linear-gradient(135deg, rgba(18, 18, 18, 0.95) 0%, rgba(12, 12, 12, 0.98) 100%);
}

/* Transitioning state for dynamic content */
.hero.transitioning {
    opacity: 0.7;
}

/* ====================================
   Background & Overlay System
   ==================================== */

/* Gradient overlay for text readability */
.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8));
    z-index: 1;
}

/* Pseudo-element based background (track/mixtape variant) */
.hero--track::before,
.hero--mixtape::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    right: -50px;
    bottom: -50px;
    background: var(--hero-bg) center/cover;
    filter: blur(50px);
    opacity: 0.3;
    z-index: 0;
}

/* Artist variant background structure */
.hero--artist {
    height: 400px;
    padding: 0;
    background: none;
}

.hero--artist .hero__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero--artist .hero__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(10px);
    transform: scale(1.1);
}

.hero--artist .hero__overlay {
    z-index: 2;
}

/* Video variant specific */
.hero--video {
    border-radius: 16px;
    min-height: 550px;
}

.hero--video::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    filter: blur(10px);
    transform: scale(1.1);
    z-index: 1;
}

.hero--video::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8));
    z-index: 2;
}

/* ====================================
   Hero Content Layout
   ==================================== */
.hero__content {
    position: relative;
    z-index: 3;
    display: flex;
    gap: 40px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Artist variant content adjustments */
.hero--artist .hero__content {
    height: 100%;
    align-items: center;
    padding: 40px 0;
}

/* Video variant content */
.hero--video .hero__content {
    align-items: center;
    gap: 30px;
    padding: 40px;
    min-height: 550px;
}

/* ====================================
   Hero Artwork/Media
   ==================================== */
.hero__artwork {
    flex-shrink: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Default square artwork (tracks/mixtapes) */
.hero__artwork {
    width: 250px;
    aspect-ratio: 1;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* 16:9 aspect for video thumbnails */
.hero__artwork--video {
    aspect-ratio: 16/9;
    width: 400px;
}

/* 16:9 aspect for artist tracks in mixtape player */
.hero__artwork.artist-track {
    aspect-ratio: 16/9;
    width: 400px;
}

/* Circular artwork for artists */
.hero__artwork--circular {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.hero__artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video player container */
.hero__video,
.hero__video-container {
    flex: 1;
    max-width: 800px;
    position: relative;
    z-index: 10;
}

/* ====================================
   Hero Information
   ==================================== */
.hero__info {
    flex: 1;
    color: white;
}

/* Video variant info adjustments */
.hero--video .hero__info {
    flex: 0 0 350px;
    padding-left: 30px;
}

.hero__title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* Artist name variant */
.hero__title--artist {
    font-size: 3rem;
}

/* Video title with icon support */
.hero--video .hero__title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hero__meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Video meta adjustments */
.hero--video .hero__meta {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* Artist badge */
.hero__badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent-color), #e74c3c);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
}

/* ====================================
   Artist Statistics
   ==================================== */
.hero__stats {
    display: flex;
    gap: 40px;
}

.hero__stat-item {
    text-align: center;
}

.hero__stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.hero__stat-label {
    display: block;
    font-size: 0.9rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero__stat-item a {
    color: inherit;
    text-decoration: none;
    display: block;
    transition: opacity 0.2s ease;
}

.hero__stat-item a:hover {
    opacity: 0.8;
}

/* ====================================
   Hero Controls
   ==================================== */
.hero__controls {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.hero__control-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.hero__control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.hero__control-btn i {
    font-size: 1rem;
}

/* Share button icon-only variant */
.hero__share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 12px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.hero__share-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.hero__share-btn i {
    font-size: 1.1rem;
    margin: 0;
}

/* ====================================
   Responsive Design - Platform Standard
   ==================================== */

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    /* Track/Mixtape variant desktop layout */
    .hero--track,
    .hero--mixtape {
        height: 400px;
        margin-bottom: 40px;
        background: none;
        padding: 0;
        text-align: left;
    }

    .hero--track::before,
    .hero--mixtape::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: var(--hero-bg);
        background-size: cover;
        background-position: center;
        filter: blur(10px);
        transform: scale(1.1);
        z-index: 1;
    }

    .hero--track::after,
    .hero--mixtape::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 100%);
        z-index: 2;
    }

    .hero--track .hero__content,
    .hero--mixtape .hero__content {
        height: 100%;
        display: flex;
        align-items: center;
        gap: 40px;
        padding: 0 50px;
        z-index: 3;
    }

    .hero--track .hero__artwork,
    .hero--mixtape .hero__artwork {
        width: 400px;
        flex-shrink: 0;
        margin: 0;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    }

    .hero__artwork--video {
        width: 400px;
    }

    .hero__artwork.artist-track {
        width: 400px;
    }

    .hero--track .hero__info,
    .hero--mixtape .hero__info {
        flex: 1;
        text-align: left;
    }

    .hero--track .hero__title,
    .hero--mixtape .hero__title {
        font-size: 3rem;
        font-weight: 700;
        margin-bottom: 15px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    }

    .hero--track .hero__meta,
    .hero--mixtape .hero__meta {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 20px;
    }
}

/* Desktop Small (992px - 1023px) */
@media (min-width: 992px) and (max-width: 1023px) {
    .hero__content {
        gap: 30px;
    }

    .hero__artwork {
        width: 200px;
    }

    .hero__artwork--video {
        width: 320px;
    }

    .hero__artwork.artist-track {
        width: 320px;
    }

    .hero__artwork--circular {
        width: 175px;
        height: 175px;
    }

    .hero__title {
        font-size: 2rem;
    }

    .hero__title--artist {
        font-size: 2.5rem;
    }

    .hero--artist .hero__content {
        gap: 25px;
        padding: 30px 0;
    }

    .hero__stats {
        gap: 30px;
    }

    .hero__stat-number {
        font-size: 1.8rem;
    }
}

/* Mobile & Tablet (576px - 991px) - FIXES SHARE BUTTON BUG */
@media (min-width: 576px) and (max-width: 991px) {
    .hero__content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 25px;
    }

    .hero__artwork {
        width: 180px;
    }

    .hero__artwork--video {
        width: 100%;
        max-width: 320px;
    }

    .hero__artwork.artist-track {
        width: 100%;
        max-width: 320px;
    }

    .hero__title {
        font-size: 2rem;
    }

    .hero__meta {
        justify-content: center;
    }

    .hero__controls {
        justify-content: center;
    }

    /* CRITICAL FIX: Ensure share button is visible in this range */
    .hero__share-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Tablet optimization (768px - 991px) - Proper aspect ratio */
@media (min-width: 768px) and (max-width: 991px) {
    /* Video container sizing */
    .hero__video-container {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    /* Video.js proper height for 16:9 aspect ratio (600px width ÷ 16/9 = 338px) */
    .hero--video .video-js {
        height: 338px !important;  /* Matches 600px width at 16:9 */
        position: relative !important;
        z-index: 10 !important;
    }

    /* Fix excessive hero height - remove flex expansion */
    .hero--video .hero__info {
        flex: none;  /* Prevent vertical expansion */
        padding-left: 0;  /* Remove desktop padding */
        text-align: center;  /* Center align content */
    }
}

/* Mobile (<576px) */
@media (max-width: 575px) {
    .hero {
        padding: 20px 0;
    }

    .hero__content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .hero__artwork {
        width: 200px;
    }

    .hero__artwork--video {
        width: 100%;
        max-width: 320px;
    }

    .hero__artwork--circular {
        width: 150px;
        height: 150px;
    }

    .hero__title {
        font-size: 1.8rem;
    }

    .hero__title--artist {
        font-size: 2rem;
    }

    .hero__meta {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .hero__controls {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Artist variant mobile adjustments */
    .hero--artist {
        margin-bottom: 30px;
    }

    .hero--artist .hero__content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 20px 0;
    }

    .hero__stats {
        gap: 20px;
        justify-content: center;
    }

    .hero__stat-number {
        font-size: 1.5rem;
    }

    /* Video variant mobile */
    .hero--video {
        min-height: auto;
    }

    .hero--video .hero__content {
        padding: 20px;
        text-align: center;
        min-height: auto;
    }

    .hero--video .hero__video,
    .hero--video .hero__video-container {
        max-width: 100%;
        width: 100%;
        order: 1;
        position: relative;  /* Restore from 6.0.1 - positioning context for muted-indicator */
        z-index: 10;  /* Restore from 6.0.1 */
    }

    .hero--video .hero__info {
        flex: none;
        padding-left: 0;
        order: 2;
        text-align: center;
    }

    .hero--video .hero__title {
        font-size: 1.8rem;
        text-align: center;
        justify-content: center;
    }

    .hero--video .hero__meta {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero--video .hero__controls {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* Extra small mobile adjustments */
@media (max-width: 400px) {
    .hero__title {
        font-size: 1.5rem;
    }

    .hero--video .hero__title {
        font-size: 1.5rem;
    }

    .hero--video .hero__content {
        padding: 15px;
    }
}

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
    .hero--artist .hero__content {
        gap: 40px;
        padding: 50px 0;
    }

    .hero__artwork--circular {
        width: 250px;
        height: 250px;
    }

    .hero__title--artist {
        font-size: 3.5rem;
    }

    .hero__stats {
        gap: 50px;
    }

    .hero__stat-number {
        font-size: 2.5rem;
    }
}

/* ====================================
   Utility Classes & States
   ==================================== */

/* View All Button - Used in section headers */
.hero__view-all,
.btn-view-all {
    background: linear-gradient(135deg, var(--accent-color) 0%, #e74c3c 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.hero__view-all:hover,
.btn-view-all:hover {
    text-decoration: none;
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Empty state styling (for video player) */
.hero__empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.hero__empty-state i {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.5;
}

.hero__empty-state h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.hero__empty-state p {
    margin-bottom: 20px;
}

.hero__empty-state .btn {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    padding: 10px 20px;
    border-radius: 25px;
}

.hero__empty-state .btn:hover {
    background-color: #b02a37;
    border-color: #b02a37;
}

/* ====================================
   Video.js Integration Support
   ==================================== */

/* Video.js Container within hero */
.hero--video .video-js {
    width: 100% !important;
    height: 450px !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
    position: relative !important;
    z-index: 10 !important;
}

/* Video.js responsive adjustments */
@media (min-width: 577px) and (max-width: 767px) {
    .hero--video .video-js {
        height: 250px !important;  /* Mobile landscape - 444px @ 16:9 */
        position: relative !important;
        z-index: 10 !important;
        display: block !important;
        visibility: visible !important;
    }
}

@media (max-width: 576px) {
    .hero--video .video-js {
        height: 200px !important;  /* Mobile portrait - 355px @ 16:9 */
        position: relative !important;
        z-index: 10 !important;
        display: block !important;
        visibility: visible !important;
    }
}