/* ==========================================================================
   css/sound-subpage.css
   DYNAMIC FLUID AUDIO HUB ENGINE (COMPLETELY RESPONSIVE)
   ========================================================================== */

/* Page Outer Rails Padding Cushion bounds */
.music-page-padding {
    padding: 20px 40px 100px 40px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* UPPER HERO SECTION: BALANCED 50% / 50% ROW CHASSIS */
.sound-project-hero-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 4vw !important; /* Spacing scales dynamically with viewport widths */
    box-sizing: border-box !important;
}

/* Left Pillar text container tracking */
.sound-hero-text-pillar {
    width: 85% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
}

.sound-hero-text-block {
    width: 100% !important;
}

.sound-project-title-label {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #cc0000;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
}
.perf-external-link {
    font-size: 0.85rem;
    color: #cc0000;
    width: fit-content;
    border-bottom: 1px solid transparent;
}

.perf-external-link:hover {
    border-bottom-color: #cc0000;
}

.sound-project-main-title {
    font-weight: 700;
    font-size: 2.8rem;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 20px;
}

.sound-project-body-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333333;
}

/* Premium Follow Action Link Buttons Layout Spacing */
.music-action-btn-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 2.5vw !important; /* Fluid button gap shifts alongside viewport dimensions */
}

.music-follow-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    color: #000000 !important;
    width: fit-content !important;
    padding: 4px 0 !important;
}

.music-follow-btn:hover { color: #cc0000 !important; }
.music-btn-arrow { font-size: 1.1rem !important; color: #cc0000 !important; transition: transform 0.2s ease !important; }
.music-follow-btn:hover .music-btn-arrow { transform: translateX(4px) !important; }

/* Right Pillar: Claims its 50% section width and locks to the right rail border */
.sound-hero-image-pillar {
    width: 50% !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
}

/* THE FLUID SQUARE CORE BOX FRAME CHASSIS:
   Uses explicit viewport width percentage relative units to stay perfectly square 
   on all desktop computers and laptop layout screens! */
.sound-hero-media-frame {
    width: 24vw !important; 
    height: 24vw !important; 
    max-width: 350px !important; /* Security ceiling guard prevents extreme blowout */
    max-height: 350px !important;
    background-color: #000000;
    border: 1px solid #e0e0e0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.sound-hero-media-frame img,
.sound-hero-media-frame iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Preserves 100% of artwork detail mappings without cropping */
}
/* --------------------------------------------------------------------------
   LOWER SECTION: WIDESCREEN 3-COLUMN ALBUM GRID MATRIX
   -------------------------------------------------------------------------- */
.music-releases-section {
    width: 100%;
    margin-top: 6vw; /* Spacious relative breathing room separating components */
    border-top: 1px solid #f5f5f5; 
    padding-top: 40px;
}

.music-releases-header {
    margin-bottom: 35px;
    width: 100%;
}

.music-release-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.music-release-title {
    font-weight: 700;
    font-size: 1.85rem;
    letter-spacing: -0.01em;
    margin-top: 8px;
}

/* 3-Column Album Container Matrix Grid */
.bandcamp-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px 24px !important; 
    width: 100% !important;
}

.bandcamp-album-card {
    width: 100% !important;
    height: 470px !important; 
    display: flex;
    flex-direction: column;
}

/* Placeholder Frames: For upcoming catalog releases */
.album-square-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1; 
    background-color: #fafafa;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.album-placeholder-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.album-placeholder-title { font-size: 0.9rem; font-weight: 600; color: #444444; }
.album-placeholder-specs { font-size: 0.75rem; color: #888888; }

/* ==========================================================================
   6. UNIFIED MASTER MOBILE BREAKPOINTS (OVERHAULED & SHIFTED)
   ========================================================================== */
@media (max-width: 1150px) {
    .music-page-padding {
        /* KEY CHASSIS TWEAK: Stripped heavy side padding to give the Bandcamp player maximum room */
        padding: 40px 15px 80px 15px !important; 
        box-sizing: border-box !important;
        width: 100% !important;
        overflow-x: hidden !important; /* Safety barrier blocks any horizontal layout spilling */
    }

    /* Flattens columns into a clean vertical stack track lines */
    .sound-project-hero-row {
        flex-direction: column !important;
        gap: 25px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .sound-hero-text-pillar {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .sound-project-main-title {
        font-size: 2.2rem !important;
        margin-bottom: 12px !important;
    }

    .music-action-btn-group {
        margin-top: 20px !important;
        gap: 8px !important;
    }

    /* Centers the artwork element row below your text column track */
    .sound-hero-image-pillar {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 10px !important;
        box-sizing: border-box !important;
    }

    /* KEY FIX: Increased width to 85vw so the square fills your mobile screen beautifully */
    .sound-hero-media-frame {
        width: 85vw !important; 
        height: 85vw !important; 
        aspect-ratio: 1 / 1 !important; 
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Lower Section Album Tracks Adaptation */
    .music-releases-section {
        margin-top: 45px !important;
        padding-top: 25px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* KEY FIX: Forces the grid layout to stay strictly at 100% width of the phone glass */
    .bandcamp-gallery-grid {
        grid-template-columns: 100% !important; 
        gap: 50px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* KEY FIX: Strips out hardcoded heights/widths, forcing Bandcamp to shrink to your mobile rails */
    .bandcamp-album-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important; /* Changes to auto so text can sit on top cleanly */
        display: flex !important;
        
        /* KEY ARRAIGNMENT CHANGE: Use column-reverse to force the text metadata 
           labels to shift and sit ON TOP of the iframe music player! */
        flex-direction: column-reverse !important; 
        gap: 15px !important;
        box-sizing: border-box !important;
    }

    /* Forces the embedded player frame to stay fully responsive inside the card container */
    .bandcamp-album-card iframe {
        width: 100% !important;
        max-width: 100% !important;
        height: 470px !important; /* Preserves Bandcamp's absolute depth view */
        box-sizing: border-box !important;
    }

    /* Sizing adjustments for your text labels now sitting on top */
    .album-placeholder-meta {
        width: 100% !important;
        padding-bottom: 5px !important;
        border-bottom: 1px solid #f0f0f0 !important; /* Clean underline separator line */
    }

    .album-square-placeholder {
        aspect-ratio: 1 / 1 !important; 
        width: 100% !important;
        height: auto !important;
    }
} /* <--- EXACT CLOSING BRACKET FOR MOBILE QUERY ENGINE */