/* ==========================================================================
   Components
   About pillar cards, album cards + art, playback deck (now-playing label,
   track select, player frame), streaming buttons, platform chips, and the
   footer social links.
   ========================================================================== */

/* --- About pillars --- */
.pillars
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    margin-top: 52px;
}

.pillar-card
{
    position: relative;
    padding: 34px 28px 30px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: var(--transition);
}
.pillar-card::before
{
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.pillar-card:hover
{
    transform: translateY(-6px);
    border-color: var(--color-border-glow);
    background: var(--color-bg-card-hover);
    box-shadow: var(--shadow-lift);
}
.pillar-card:hover::before { opacity: 1; }

.pillar-index
{
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.3em;
    color: var(--color-gold);
    margin-bottom: 14px;
}

.pillar-title
{
    font-size: var(--fs-lg);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

.pillar-text { color: var(--color-text-secondary); font-size: var(--fs-base); }

/* --- Albums grid --- */
.albums-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(24px, 4vw, 44px);
    margin-top: 20px;
}

.album-card
{
    display: flex;
    flex-direction: column;
    padding: 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
    box-shadow: var(--shadow-card);
    transition: var(--transition);
}
.album-card:hover
{
    border-color: var(--color-border-glow);
    box-shadow: var(--shadow-lift);
}

/* --- Album art --- */
.album-art
{
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background:
        linear-gradient(140deg, var(--color-bg-card-hover), var(--color-bg-deep)),
        repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,0.02) 12px 24px);
    border: 1px solid var(--color-border);
    box-shadow: 0 0 30px -10px var(--color-accent-glow);
}
.album-art img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.4s ease;
}
.album-art::after
{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.45));
    opacity: 0;
    transition: opacity 0.4s ease;
}
.album-card:hover .album-art img { transform: scale(1.06); }
.album-card:hover .album-art::after { opacity: 1; }

/* Fallback plate shown when cover art is missing */
.album-art img.is-missing { opacity: 0; }
.album-art.is-empty::before
{
    content: attr(data-title);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-shadow: 0 0 24px var(--color-accent-glow);
}

.album-badge
{
    position: absolute;
    top: 14px; left: 14px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-bg-deep);
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-bright));
    box-shadow: 0 6px 18px -8px var(--color-accent-glow);
}

/* --- Album meta --- */
.album-meta { text-align: center; padding: 22px 0 6px; }
.album-kind
{
    font-size: var(--fs-xs);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 6px;
}
.album-title
{
    font-size: clamp(1.7rem, 3vw, 2.1rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-primary);
}
.album-count
{
    margin-top: 4px;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    letter-spacing: 0.1em;
}

/* --- Playback deck --- */
.deck
{
    margin-top: 22px;
    padding: 20px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: linear-gradient(180deg, var(--color-surface-glass), transparent);
}

.deck-label
{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}
.deck-label strong
{
    color: var(--color-accent);
    font-weight: 600;
    letter-spacing: 0.08em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deck-dot
{
    width: 8px; height: 8px;
    border-radius: 999px;
    background: var(--color-accent);
    box-shadow: 0 0 0 0 var(--color-accent-glow);
    animation: blink 2s ease-out infinite;
    flex: none;
}
@keyframes blink
{
    0%   { box-shadow: 0 0 0 0 var(--color-accent-glow); }
    70%  { box-shadow: 0 0 0 9px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* --- Custom select --- */
.select-wrap { position: relative; }

.select-wrap select,
.track-select
{
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding: 13px 44px 13px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg-deep);
    color: var(--color-text-primary);
    font-size: var(--fs-base);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: var(--transition);
}
.select-wrap select:hover { border-color: var(--color-accent); }
.select-wrap select:focus
{
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-glow);
}
.select-wrap select option { background: var(--color-bg-deep); color: var(--color-text-primary); }

.select-chevron
{
    position: absolute;
    right: 15px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: var(--color-accent);
    pointer-events: none;
}

/* --- Player frame --- */
.player-frame
{
    margin-top: 14px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg-deep);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.player-frame iframe { display: block; border: 0; width: 100%; }

/* --- Streaming block --- */
.stream-block { margin-top: clamp(64px, 8vw, 96px); }

.music-links
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.music-btn
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.9);
    transition: var(--transition);
}
.music-btn .icon { width: 13px; height: 13px; opacity: 0.85; transition: transform 0.3s ease; }
.music-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -18px rgba(0, 0, 0, 0.95); }
.music-btn:hover .icon { transform: translate(2px, -2px); opacity: 1; }
.music-btn:active { transform: translateY(-1px); }

.music-btn.spotify  { background: #1db954; }
.music-btn.apple    { background: #fa2f55; }
.music-btn.youtube  { background: #ff0000; }
.music-btn.amazon   { background: #ff9900; }
.music-btn.digital7 { background: #0073e6; }

/* --- Also available chips --- */
.also-block { margin-top: 36px; text-align: center; }

.chip-row
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.chip
{
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface-glass);
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    letter-spacing: 0.04em;
    transition: var(--transition);
}
.chip:hover
{
    color: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px -18px var(--color-accent-glow);
}

/* --- Social links --- */
.social-links
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 40px;
}

.social-link
{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    min-width: 150px;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: var(--transition);
}
.social-link .icon { width: 17px; height: 17px; }
.social-link:hover
{
    color: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-4px);
    box-shadow: 0 16px 34px -20px var(--color-accent-glow);
}