/* ==========================================================================
   Components
   Reusable buttons, cards, music player hooks and decoration helpers.
   ========================================================================== */

/* Buttons */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.875rem;
    padding: var(--space-3) var(--space-5);
    border: 0.0625rem solid transparent;
    border-radius: var(--radius-pill);
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition:
        transform var(--transition-bounce),
        background-color var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        color var(--transition-base);
}

.button:hover {
    transform: translateY(-0.125rem);
    box-shadow: var(--shadow-sm);
}

.button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
}

.button:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus), var(--shadow-sm);
}

.button:disabled,
.button[aria-disabled="true"],
.button.is-disabled {
    opacity: 0.56;
    pointer-events: none;
    box-shadow: none;
}

.button-primary {
    color: var(--color-white);
    background: var(--color-accent);
    box-shadow: var(--shadow-sm);
}

.button-primary:hover {
    background: var(--color-accent-strong);
}

.button-secondary {
    color: var(--color-accent-strong);
    background: var(--color-pink-100);
    border-color: var(--color-border);
}

.button-secondary:hover {
    background: var(--color-pink-200);
}

.button-icon,
.button-round {
    width: 2.875rem;
    min-width: 2.875rem;
    height: 2.875rem;
    padding: var(--space-2);
    border-radius: var(--radius-circle);
}

.button-round {
    color: var(--color-white);
    background: var(--color-accent);
}

.button-cta {
    min-height: 3.5rem;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-pill);
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-pink-500), var(--color-rose-500));
    box-shadow: var(--shadow-glow), var(--shadow-md);
    font-size: var(--text-md);
}

.button-cta:hover {
    box-shadow: var(--shadow-glow), var(--shadow-lg);
}

/* Cards */
.card {
    padding: var(--space-5);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.glass-card {
    padding: var(--space-5);
    border: 0.0625rem solid var(--color-glass-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    background: var(--color-surface-glass);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(1rem);
}

.music-card {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-xl);
    color: var(--color-text);
    background: linear-gradient(180deg, var(--color-white), var(--color-pink-100));
    box-shadow: var(--shadow-md);
}

.album-card {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-xl);
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition-bounce),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

.album-card:hover {
    transform: translateY(-0.1875rem);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}

.album-card-media,
.music-card-media {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    background: var(--color-pink-100);
}

.album-card-title,
.music-card-title {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
}

.album-card-meta,
.music-card-meta {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--line-height-compact);
}

/* Music player style hooks */
.music-player {
    display: grid;
    gap: var(--space-5);
    width: 100%;
    padding: var(--space-5);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-xl);
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.music-player-header {
    display: grid;
    gap: var(--space-3);
    text-align: center;
}

.music-player-artwork {
    width: min(100%, 18rem);
    margin-inline: auto;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: var(--radius-xl);
    background: var(--color-pink-100);
    box-shadow: var(--shadow-sm);
}

.music-player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

.music-player-progress {
    position: relative;
    width: 100%;
    height: 0.625rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-pink-200);
}

.music-player-progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--color-accent);
}

.music-player-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: var(--line-height-compact);
}

.music-player-waveform {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    gap: var(--space-1);
    color: var(--color-accent);
}

/* Decoration positioning helpers */
.decoration {
    position: absolute;
    z-index: var(--z-raised);
    pointer-events: none;
    user-select: none;
}

.decoration-pixel {
    image-rendering: pixelated;
}

.decoration-floating {
    will-change: transform;
}

.decoration-sparkle,
.decoration-flower,
.decoration-heart,
.decoration-star,
.decoration-cloud {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.decoration-top-left {
    top: var(--space-4);
    left: var(--space-4);
}

.decoration-top-right {
    top: var(--space-4);
    right: var(--space-4);
}

.decoration-bottom-left {
    bottom: var(--space-4);
    left: var(--space-4);
}

.decoration-bottom-right {
    right: var(--space-4);
    bottom: var(--space-4);
}

.decoration-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (min-width: 48rem) {

    .card,
    .glass-card,
    .music-card,
    .music-player {
        padding: var(--space-6);
    }

    .button-cta {
        min-height: 3.75rem;
        padding-inline: var(--space-10);
    }
}