/* Mood Red - Album Page Styles */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    background-color: #212121;
    background-image:
        url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20path%20%7B%20fill%3A%20none%3B%20stroke%3A%20rgba(255,255,255,0.059)%3B%20stroke-width%3A%202.01px%3B%20%7D%20%3C%2Fstyle%3E%20%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M111.2%2C81.7L-33.7%2C226.6c-13.9%2C13.9-36.5%2C13.9-50.5%2C0L-229.1%2C81.7%20c-22.5-22.5-6.6-60.9%2C25.2-60.9H86C117.7%2C20.7%2C133.7%2C59.2%2C111.2%2C81.7z%22%2F%3E%20%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M366.8%2C338.3L221.9%2C483.2c-13.9%2C13.9-36.5%2C13.9-50.5%2C0L26.6%2C338.3%20c-22.5-22.5-6.6-60.9%2C25.2-60.9h289.8C373.4%2C277.4%2C389.3%2C315.8%2C366.8%2C338.3z%22%2F%3E%20%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M40.6%2C423l-144.9-144.9c-13.9-13.9-13.9-36.5%2C0-50.5L40.6%2C82.8%20c22.5-22.5%2C60.9-6.6%2C60.9%2C25.2v289.8C101.5%2C429.6%2C63.1%2C445.5%2C40.6%2C423z%22%2F%3E%20%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M296.3%2C679.7L151.4%2C534.8c-13.9-13.9-13.9-36.5%2C0-50.5l144.9-144.9%20c22.5-22.5%2C60.9-6.6%2C60.9%2C25.2v289.8C357.2%2C686.3%2C318.8%2C702.2%2C296.3%2C679.7z%22%2F%3E%20%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M623.5%2C81.7L478.6%2C226.6c-13.9%2C13.9-36.5%2C13.9-50.5%2C0L283.2%2C81.7%20c-22.5-22.5-6.6-60.9%2C25.2-60.9h289.8C630%2C20.7%2C646%2C59.2%2C623.5%2C81.7z%22%2F%3E%20%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M296.3%2C166.4L151.4%2C21.5c-13.9-13.9-13.9-36.5%2C0-50.5l144.9-144.9%20c22.5-22.5%2C60.9-6.6%2C60.9%2C25.2v289.8C357.2%2C173%2C318.8%2C188.9%2C296.3%2C166.4z%22%2F%3E%20%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M552.9%2C423L408%2C278.2c-13.9-13.9-13.9-36.5%2C0-50.5L552.9%2C82.8%20c22.5-22.5%2C60.9-6.6%2C60.9%2C25.2v289.8C613.8%2C429.6%2C575.4%2C445.5%2C552.9%2C423z%22%2F%3E%3C%2Fsvg%3E'),
        linear-gradient(180deg, rgba(33,33,33,0.95) 0%, rgba(33,33,33,0.8) 100%),
        url('../images/bg.jpg');
    background-size: 512px, cover, cover;
    background-position: center, center, center;
    background-repeat: repeat, no-repeat, no-repeat;
    background-attachment: fixed;
    color: #FFFFFF;
}

.container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

.back-link {
    display: inline-block;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 0.875rem;
    margin-bottom: 2rem;
    transition: color 0.2s ease;
}
.back-link:hover { color: #FFFFFF; }

/* Album Header */
.album-header {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
}

.album-cover {
    width: 280px;
    height: 280px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    flex-shrink: 0;
}

.album-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.album-type {
    text-transform: uppercase;
    color: #E4F23D;
    font-size: 0.75rem;
    letter-spacing: 0.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.album-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #961515;
    line-height: 1.1;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
    margin-bottom: 0.5rem;
}

.album-artist {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 0.5rem;
}

.album-meta {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 1rem;
}

.album-description {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 1.5rem;
    max-width: 400px;
}

/* Stream Links */
.stream-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.stream-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.1);
    border-radius: 50px;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.2s ease;
}
.stream-link:hover { background: rgba(255,255,255,0.2); }
.stream-link svg { width: 18px; height: 18px; }

/* Sections */
.section { margin-bottom: 3rem; }

.section-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 1.25rem;
    color: #E4F23D;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(228, 242, 61, 0.3);
}

/* Track List */
.track-list { list-style: none; }

.track-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.track-number {
    width: 2rem;
    color: rgba(255,255,255,0.4);
    font-size: 0.875rem;
}

.track-title { flex: 1; }

/* Lyrics Accordion */
.lyrics-track {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
}

.lyrics-track-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    transition: background 0.2s ease;
}

.lyrics-track:hover .lyrics-track-header {
    background: rgba(255,255,255,0.03);
}

.lyrics-track-number {
    width: 2rem;
    color: rgba(255,255,255,0.4);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.lyrics-track-title {
    flex: 1;
    color: #FFFFFF;
}

.lyrics-track-toggle {
    color: rgba(255,255,255,0.4);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
    padding: 0 0.5rem;
}

.lyrics-track.open .lyrics-track-toggle {
    transform: rotate(180deg);
}

.lyrics-content {
    display: none;
    padding: 0 0 1rem 2rem;
}

.lyrics-track.open .lyrics-content {
    display: block;
}

.lyrics-text {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.8;
    white-space: pre-wrap;
}

.lyrics-text .section-label {
    display: block;
    color: #E4F23D;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

.lyrics-text .section-label:first-child {
    margin-top: 0;
}

/* Related Albums */
.related-albums {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.related-album {
    text-decoration: none;
    color: inherit;
}

.related-album img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.2s ease;
}
.related-album:hover img { transform: scale(1.05); }

.related-album-title {
    font-size: 0.875rem;
    margin-top: 0.5rem;
    color: #FFFFFF;
}

.related-album-meta {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}

/* Related Album Link Box (single link style) */
.related-link-box {
    margin-top: 2rem;
    padding: 1rem;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
}
.related-link-box p {
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}
.related-link-box a {
    color: #E4F23D;
    text-decoration: none;
}
.related-link-box a:hover { text-decoration: underline; }

/* Coming Soon Badge */
.coming-soon-badge {
    display: inline-block;
    background: rgba(228, 242, 61, 0.2);
    color: #E4F23D;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
}

/* Coming Soon Album Type (dimmed) */
.album-type.coming-soon {
    color: rgba(255,255,255,0.6);
}

/* Responsive */
@media (max-width: 768px) {
    .album-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .album-cover { width: 200px; height: 200px; }
    .album-title { font-size: 2rem; }
    .stream-links { justify-content: center; }
    .album-description { max-width: 100%; }
}