/**
 * AGC Music — shared UI primitives
 * ------------------------------------------------------------
 * Style tags, star ratings, cover block (generation UI, batch, admin library, public shortcode).
 * Loaded via wp_enqueue_style( 'agc-music-shared' ) — do not duplicate these blocks elsewhere.
 */

/* -------------------------------------------------------------------------
 * Style tag cloud (matches single / batch music)
 * ------------------------------------------------------------------------- */
.agc-style-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 12px;
    overflow-y: auto;
}

.agc-style-tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.agc-style-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid;
    transition: var(--agc-transition, border-color 0.2s ease, transform 0.1s ease, background-color 0.2s ease);
    user-select: none;
}

.agc-style-tag:hover {
    transform: translateY(-1px);
}

.agc-style-tag.active {
    transform: translateY(-1px);
}

/* Tag colors by type */
.agc-tag-lang { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.agc-tag-lang.active { background: #0369a1; color: #fff; border-color: #0369a1; }

.agc-tag-genre { background: #fef9c3; color: #92400e; border-color: #fde68a; }
.agc-tag-genre.active { background: #92400e; color: #fff; border-color: #92400e; }

.agc-tag-mod { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
.agc-tag-mod.active { background: #6d28d9; color: #fff; border-color: #6d28d9; }

.agc-tag-mood { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.agc-tag-mood.active { background: #166534; color: #fff; border-color: #166534; }

.agc-tag-instr { background: #ccfbf1; color: #0f766e; border-color: #5eead4; }
.agc-tag-instr.active { background: #0f766e; color: #fff; border-color: #0f766e; }

.agc-tag-vocals { background: #fce7f3; color: #be185d; border-color: #fbcfe8; }
.agc-tag-vocals.active { background: #be185d; color: #fff; border-color: #be185d; }

/* -------------------------------------------------------------------------
 * Star rating (matches batch / single music)
 * ------------------------------------------------------------------------- */
.agc-music-rating,
.agc-star-rating {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.agc-star {
    font-size: 20px;
    color: #ddd;
    transition: color 0.2s ease, transform 0.1s ease;
    cursor: pointer;
    display: inline-block;
}

.agc-star:hover {
    transform: scale(1.1);
}

.agc-star.active {
    color: #ffb900;
}

.agc-music-rating:hover .agc-star,
.agc-star-rating:hover .agc-star {
    color: #ffd666;
}

.agc-music-rating:hover .agc-star.active,
.agc-star-rating:hover .agc-star.active {
    color: #ffb900;
}

.dark .agc-star {
    color: #4b5563;
}

.dark .agc-star.active {
    color: #fbbf24;
}

.dark .agc-music-rating:hover .agc-star,
.dark .agc-star-rating:hover .agc-star {
    color: #6b7280;
}

.dark .agc-music-rating:hover .agc-star.active,
.dark .agc-star-rating:hover .agc-star.active {
    color: #fbbf24;
}

/* Read-only display (admin library list — not interactive) */
.agc-music-rating--readonly,
.agc-music-rating--readonly .agc-star {
    cursor: default;
}

.agc-music-rating--readonly .agc-star:hover {
    transform: none;
}

.agc-music-rating--readonly:hover .agc-star,
.agc-music-rating--readonly:hover .agc-star.active {
    color: inherit;
}

.agc-music-rating--readonly:hover .agc-star {
    color: #ddd;
}

.agc-music-rating--readonly:hover .agc-star.active {
    color: #ffb900;
}

.dark .agc-music-rating--readonly:hover .agc-star {
    color: #4b5563;
}

.dark .agc-music-rating--readonly:hover .agc-star.active {
    color: #fbbf24;
}

/* -------------------------------------------------------------------------
 * Cover block — square art + CSS placeholder when missing / failed load
 * ♪ sits in a layer under real images (z-index) so flex column layouts never
 * hide artwork behind a centered pseudo-element.
 * ------------------------------------------------------------------------- */
.agc-music-cover-block {
    position: relative;
    width: 100%;
    min-width: 0;
    align-self: stretch;
    overflow: hidden;
}

.agc-music-cover-block > img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    aspect-ratio: 1;
    object-fit: cover;
}

.agc-music-cover-block.agc-music-cover-block--placeholder {
    min-height: 12rem;
    aspect-ratio: 1;
    background: linear-gradient(145deg, #334155 0%, #1e293b 55%, #0f172a 100%);
}

.agc-music-cover-block.agc-music-cover-block--placeholder::after {
    content: '♪';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    font-size: clamp(3rem, 12vw, 4.5rem);
    line-height: 1;
    color: rgba(255, 255, 255, 0.22);
    user-select: none;
    pointer-events: none;
}