.featured-album { padding: 6rem 0; background: linear-gradient(135deg, var(--color-light), var(--color-white))} .album-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; align-items: center} .album-artwork { position: relative; border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); transition: var(--transition)} .album-artwork:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3)} .album-artwork img { width: 100%; height: auto; display: block} .play-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition)} .album-artwork:hover .play-overlay { opacity: 1} .play-album-btn { background-color: var(--color-white); color: var(--color-primary); border: none; width: 80px; height: 80px; border-radius: 50%; font-size: 2rem; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center} .play-album-btn:hover { background-color: var(--color-primary); color: var(--color-white); transform: scale(1.1)} .album-info { padding: 2rem 0} .album-label { background-color: var(--color-primary); color: var(--color-white); padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; display: inline-block; margin-bottom: 1rem} .album-info h2 { font-size: 3rem; color: var(--color-primary); margin-bottom: 0.5rem; font-weight: 700} .album-artist { font-size: 1.3rem; color: var(--color-secondary); margin-bottom: 1.5rem; font-weight: 500} .album-description { font-size: 1.1rem; line-height: 1.7; color: var(--color-dark); margin-bottom: 2rem} .album-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem; padding: 1.5rem; background-color: var(--color-light); border-radius: var(--border-radius)} .detail-item { display: flex; justify-content: space-between} .detail-label { font-weight: 600; color: var(--color-primary)} .detail-value { color: var(--color-dark)} .album-actions { display: flex; align-items: center; gap: 2rem} .album-actions .btn-primary { padding: 1rem 2rem; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem} .streaming-links { display: flex; gap: 1rem} .streaming-btn { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-white); text-decoration: none; font-size: 1.3rem; transition: var(--transition)} .streaming-btn.spotify { background-color: #1DB954} .streaming-btn.soundcloud { background-color: #FF5500} .streaming-btn.youtube { background-color: #FF0000} .streaming-btn:hover { transform: scale(1.1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3)} .albums-section { padding: 6rem 0; background-color: var(--color-light)} .albums-section h2 { text-align: center; font-size: 2.5rem; color: var(--color-primary); margin-bottom: 3rem} .albums-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem} .album-card { background-color: var(--color-white); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition)} .album-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2)} .album-cover { position: relative; height: 280px; overflow: hidden} .album-cover img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition)} .album-card:hover .album-cover img { transform: scale(1.05)} .album-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition)} .album-card:hover .album-overlay { opacity: 1} .album-overlay .play-btn { background-color: var(--color-white); color: var(--color-primary); border: none; width: 60px; height: 60px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; transition: var(--transition)} .album-overlay .play-btn:hover { background-color: var(--color-primary); color: var(--color-white); transform: scale(1.1)} .single-badge { position: absolute; top: 1rem; right: 1rem; background-color: var(--color-accent); color: var(--color-white); padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase} .album-details { padding: 1.5rem} .album-details h3 { font-size: 1.3rem; color: var(--color-primary); margin-bottom: 0.5rem} .album-year { color: var(--color-secondary); font-weight: 600; margin-bottom: 0.3rem} .album-tracks, .album-genre { color: var(--color-gray); font-size: 0.9rem; margin-bottom: 0.3rem} .compositions-section { padding: 6rem 0; background-color: var(--color-white)} .compositions-section h2 { text-align: center; font-size: 2.5rem; color: var(--color-primary); margin-bottom: 1rem} .section-subtitle { text-align: center; font-size: 1.1rem; color: var(--color-gray); margin-bottom: 3rem} .compositions-grid { display: flex; flex-direction: column; gap: 2rem} .composition-card { display: flex; align-items: center; gap: 2rem; padding: 2rem; background-color: var(--color-light); border-radius: var(--border-radius); transition: var(--transition); border-left: 4px solid var(--color-primary)} .composition-card:hover { background-color: var(--color-white); box-shadow: var(--box-shadow); transform: translateX(10px)} .composition-number { font-size: 2.5rem; font-weight: 700; color: var(--color-primary); opacity: 0.7; min-width: 80px} .composition-info { flex: 1} .composition-info h3 { font-size: 1.5rem; color: var(--color-primary); margin-bottom: 0.8rem} .composition-description { color: var(--color-dark); line-height: 1.6; margin-bottom: 1rem} .composition-meta { display: flex; gap: 2rem; font-size: 0.9rem; color: var(--color-gray)} .composition-meta span { display: flex; align-items: center; gap: 0.5rem} .play-composition-btn { background-color: var(--color-primary); color: var(--color-white); border: none; width: 60px; height: 60px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; transition: var(--transition)} .play-composition-btn:hover { background-color: var(--color-secondary); transform: scale(1.1)} .streaming-section { padding: 6rem 0; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: var(--color-white); text-align: center} .streaming-section h2 { font-size: 2.5rem; margin-bottom: 1rem; font-weight: 700} .streaming-section .section-subtitle { color: rgba(255, 255, 255, 0.9); margin-bottom: 3rem} .streaming-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem} .platform-card { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; background-color: rgba(255, 255, 255, 0.1); border-radius: var(--border-radius); text-decoration: none; color: var(--color-white); transition: var(--transition); backdrop-filter: blur(10px)} .platform-card:hover { background-color: rgba(255, 255, 255, 0.2); transform: translateY(-5px)} .platform-icon { font-size: 2.5rem; min-width: 60px} .platform-info h3 { font-size: 1.2rem; margin-bottom: 0.3rem} .platform-info p { font-size: 0.9rem; opacity: 0.8} @media (max-width: 968px) { .album-layout { grid-template-columns: 1fr; gap: 3rem; text-align: center} .album-info h2 { font-size: 2.5rem} .album-details { grid-template-columns: 1fr} .composition-card { flex-direction: column; text-align: center; gap: 1rem} .composition-meta { justify-content: center; flex-wrap: wrap; gap: 1rem} } @media (max-width: 768px) { .albums-grid { grid-template-columns: 1fr} .streaming-platforms { grid-template-columns: 1fr} .album-actions { flex-direction: column; gap: 1rem} .album-info h2 { font-size: 2rem} .compositions-section h2, .albums-section h2, .streaming-section h2 { font-size: 2rem} }